refactor: change RAP interface design

README.md

@@ -40,14 +40,21 @@ yarn add @every-analytics/react-analytics-provider
 You can check examples [here](https://github.com/EveryAnalytics/react-analytics-provider/tree/main/demo)
 
 ```tsx
-import {AnalyticsProvider} from '@every-analytics/react-analytics-provider';
+import {Analytics, AnalyticsProvider} from '@every-analytics/react-analytics-provider';
+
+const analytics: Analytics = {
+  initialize: () => console.log('onInitialize'),
+  trackPageView: params => console.log('onTrackPageView', params),
+  trackEvent: (name, params) => console.log('onTrackEvent', name, params),
+  trackClick: (name, params) => console.log('onTrackClick', name, params),
+  set: (...args) => console.log('onSet', args),
+  setUserId: userId => console.log("onSetUserId", userId),
+  setUserProperty: params => console.log("onSetUserProperty", params),
+}
 
 <AnalyticsProvider
   onInitialize={() => console.log('initialized')}
-  onPageView={(params) => console.log('pageview', params)}
-  onEvent={(name, params) => console.log('event', name, params)}
-  onClick={(name, params) => console.log('click', name, params)}
-  onSetUserId={(userId) => console.log('setUserId', userId)}
+  analytics={analytics}
 >
   <App />
 </AnalyticsProvider>

demo/with-cra/src/components/NavBar.tsx

@@ -1,49 +1,49 @@
 // import { logEvent } from "@every-analytics/react-analytics-provider";
 import React from 'react';
 import navigate from 'router/navigate';
-import {useAnalyticsContext} from '@every-analytics/react-analytics-provider';
+import {useAnalytics} from '@every-analytics/react-analytics-provider';
 
 const NavBar = () => {
-  const analytics = useAnalyticsContext();
+  const analytics = useAnalytics();
 
   return (
     <header className="App-header">
       <NavItem
         href="/"
         onClick={() => {
-          analytics.onEvent('Click logo');
+          analytics.trackEvent('Click logo');
         }}
       >
         Fruit Store
       </NavItem>
       <NavItem
         href="/products?color=red"
         onClick={() => {
-          analytics.onEvent('Click products', {color: 'red'});
+          analytics.trackEvent('Click products', {color: 'red'});
         }}
       >
         Red
       </NavItem>
       <NavItem
         href="/products?color=yellow"
         onClick={() => {
-          analytics.onEvent('Click products', {color: 'yellow'});
+          analytics.trackEvent('Click products', {color: 'yellow'});
         }}
       >
         Yellow
       </NavItem>
       <NavItem
         href="/login"
         onClick={() => {
-          analytics.onClick('Click login', {color: 'yellow'});
+          analytics.trackClick('Click login', {color: 'yellow'});
         }}
       >
         Login
       </NavItem>
       <NavItem
         href="/set-currency"
         onClick={() => {
-          analytics.onSet({currency: 'KRW'});
+          analytics.set({currency: 'KRW'});
         }}
       >
         Currency

demo/with-cra/src/index.tsx

@@ -2,52 +2,59 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
-import {AnalyticsProvider, googleAnalyticsHelper, amplitudeHelper} from '@every-analytics/react-analytics-provider';
+import {
+  Analytics,
+  AnalyticsProvider,
+  googleAnalyticsHelper,
+  amplitudeHelper,
+} from '@every-analytics/react-analytics-provider';
 import {fruitLogger} from './utils/fruitLogger';
 import {Toaster} from 'react-hot-toast';
 import {toaster} from './utils/toaster';
 
 amplitudeHelper.initialize(process.env.REACT_APP_AMPLITUDE_API_KEY);
 const persistentValues = {userNo: 123};
 
+const analytics: Analytics = {
+  initialize: () => {
+    googleAnalyticsHelper.initialize(process.env.REACT_APP_GA_TRACKING_ID, persistentValues);
+  },
+  trackPageView: params => {
+    // NOTE: Google Analytics(GA4)는 기본적으로 페이지뷰가 적용됩니다 - 따로 추가 필요X
+    const path = window.location.pathname + window.location.search;
+    fruitLogger.pageView(path, params);
+    toaster.pageView(path, params);
+    amplitudeHelper.logEvent('pageView', {path});
+  },
+  trackEvent: (name, params) => {
+    googleAnalyticsHelper.event(name, params);
+    fruitLogger.event(name, params);
+    toaster.event(name, params);
+  },
+  trackClick: (name, params) => {
+    googleAnalyticsHelper.click(name, params);
+    fruitLogger.click(name, params);
+    toaster.click(name, params);
+  },
+  set: (...args: Parameters<typeof googleAnalyticsHelper.set>) => {
+    googleAnalyticsHelper.set(...args);
+    fruitLogger.set(...args);
+    toaster.set(...args);
+  },
+  setUserId: userId => {
+    // TODO: UserId 설정하는 코드 추가
+    console.log(userId);
+  },
+  setUserProperty: params => {
+    googleAnalyticsHelper.setUserProperty(params);
+    fruitLogger.setUserProperty(params);
+    toaster.setUserProperty(params);
+  },
+};
+
 ReactDOM.render(
   <React.StrictMode>
-    <AnalyticsProvider
-      onInitialize={() => {
-        googleAnalyticsHelper.initialize(process.env.REACT_APP_GA_TRACKING_ID, persistentValues);
-      }}
-      onPageView={params => {
-        // NOTE: Google Analytics(GA4)는 기본적으로 페이지뷰가 적용됩니다 - 따로 추가 필요X
-        const path = window.location.pathname + window.location.search;
-        fruitLogger.pageView(path, params);
-        toaster.pageView(path, params);
-        amplitudeHelper.logEvent('pageView', {path});
-      }}
-      onEvent={(name, params) => {
-        googleAnalyticsHelper.event(name, params);
-        fruitLogger.event(name, params);
-        toaster.event(name, params);
-      }}
-      onClick={(name, params) => {
-        googleAnalyticsHelper.click(name, params);
-        fruitLogger.click(name, params);
-        toaster.click(name, params);
-      }}
-      onSet={(...args: Parameters<typeof googleAnalyticsHelper.set>) => {
-        googleAnalyticsHelper.set(...args);
-        fruitLogger.set(...args);
-        toaster.set(...args);
-      }}
-      onSetUserId={userId => {
-        // TODO: UserId 설정하는 코드 추가
-        console.log(userId);
-      }}
-      onSetUserProperty={params => {
-        googleAnalyticsHelper.setUserProperty(params);
-        fruitLogger.setUserProperty(params);
-        toaster.setUserProperty(params);
-      }}
-    >
+    <AnalyticsProvider analytics={analytics}>
       <App />
     </AnalyticsProvider>
     <Toaster

demo/with-cra/src/pages/CurrencyPage/index.tsx

@@ -1,10 +1,10 @@
 import {useEffect} from 'react';
-import {useAnalyticsContext} from '@every-analytics/react-analytics-provider';
+import {useAnalytics} from '@every-analytics/react-analytics-provider';
 
 const CurrencyPage = () => {
-  const analytics = useAnalyticsContext();
+  const analytics = useAnalytics();
   useEffect(() => {
-    analytics.onPageView();
+    analytics.trackPageView();
   }, [analytics]);
 
   return <h1>Set Currency KRW</h1>;

demo/with-cra/src/pages/ProductsPage/index.tsx

@@ -1,14 +1,14 @@
 import {useEffect} from 'react';
 import {getQueryParams} from 'utils/location';
-import {useAnalyticsContext} from '@every-analytics/react-analytics-provider';
+import {useAnalytics} from '@every-analytics/react-analytics-provider';
 
 const ProductsPage = () => {
   const {color} = getQueryParams<{color: string}>();
   const products = getProductsByColor(color);
-  const analytics = useAnalyticsContext();
+  const analytics = useAnalytics();
 
   useEffect(() => {
-    analytics.onPageView();
+    analytics.trackPageView();
   }, [analytics]);
 
   return (

demo/with-cra/src/pages/UserPropertyPage/index.tsx

@@ -1,16 +1,16 @@
 import {useEffect, useState} from 'react';
-import {useAnalyticsContext} from '@every-analytics/react-analytics-provider';
+import {useAnalytics} from '@every-analytics/react-analytics-provider';
 
 const SetUserPropertyPage = () => {
-  const analytics = useAnalyticsContext();
+  const analytics = useAnalytics();
   useEffect(() => {
-    analytics.onPageView();
+    analytics.trackPageView();
   }, [analytics]);
 
   const [favoriteFood, setFavoriteFood] = useState('한식');
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    analytics.onSetUserProperty({favoriteFood});
+    analytics.setUserProperty({favoriteFood});
   };
 
   return (

demo/with-nextjs/src/pages/_app.tsx

@@ -1,28 +1,38 @@
-import {AnalyticsProvider} from '@every-analytics/react-analytics-provider';
+import {Analytics, AnalyticsProvider} from '@every-analytics/react-analytics-provider';
 import {AppProps} from 'next/app';
 import {Layout} from '../layout/Layout';
 
 function DemoApp({Component, pageProps}: AppProps) {
+  const analytics: Analytics = {
+    initialize: () => {
+      console.log('onInitialize');
+    },
+    trackPageView: params => {
+      // NOTE: Google Analytics(GA4)는 기본적으로 페이지뷰가 적용됩니다 - 따로 추가 필요X
+      // TODO: 이준희 => ga, amplitude event tracking 코드 추가
+      console.log('onTrackPageView', params);
+    },
+    trackEvent: (name, params) => {
+      // TODO: 이준희 => ga, amplitude event tracking 코드 추가
+      console.log('onTrackEvent', name, params);
+    },
+    trackClick: (name, params) => {
+      // TODO: 이준희 => ga, amplitude event tracking 코드 추가
+      console.log('onTrackClick', name, params);
+    },
+    set: (...args) => {
+      console.log('onSet', args);
+    },
+    setUserId: userId => {
+      console.log('onSetUserId', userId);
+    },
+    setUserProperty: params => {
+      console.log('onSetUserProperty', params);
+    },
+  };
+
   return (
-    <AnalyticsProvider
-      onInitialize={() => {
-        // TODO: 이준희 => ga, amplitude event tracking 코드 추가
-        console.log('onInitialize');
-      }}
-      onPageView={params => {
-        // NOTE: Google Analytics(GA4)는 기본적으로 페이지뷰가 적용됩니다 - 따로 추가 필요X
-        // TODO: 이준희 => ga, amplitude event tracking 코드 추가
-        console.log('onPageView', params);
-      }}
-      onEvent={(name, params) => {
-        // TODO: 이준희 => ga, amplitude event tracking 코드 추가
-        console.log('onEvent', name, params);
-      }}
-      onClick={(name, params) => {
-        // TODO: 이준희 => ga, amplitude event tracking 코드 추가
-        console.log('onClick', name, params);
-      }}
-    >
+    <AnalyticsProvider analytics={analytics}>
       <Layout>
         <Component {...pageProps} />
       </Layout>

src/components/AnalyticsClick/index.tsx

@@ -1,5 +1,5 @@
 import React, {useCallback} from 'react';
-import {useAnalyticsContext} from '../../contexts';
+import {useAnalytics} from '../../contexts';
 import {UnknownRecord} from '../../types/common';
 
 export interface AnalyticsClickProps {
@@ -9,13 +9,13 @@ export interface AnalyticsClickProps {
 }
 
 export const AnalyticsClick = ({children, name, params}: AnalyticsClickProps) => {
-  const {onClick} = useAnalyticsContext();
+  const {trackClick} = useAnalytics();
 
   const child = React.Children.only(children) as React.ReactElement;
 
   const handleChildClick = useCallback(() => {
-    onClick(name, {action_type: 'click', ...params});
-  }, [name, params, onClick]);
+    trackClick(name, {action_type: 'click', ...params});
+  }, [name, params, trackClick]);
 
   return React.cloneElement(child, {
     onClick: handleChildClick,

src/components/AnalyticsPageView/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {useAnalyticsContext} from '../../contexts/useAnalyticsContext';
+import {useAnalytics} from '../../contexts/useAnalytics';
 import {UnknownRecord} from '../../types/common';
 
 export interface AnalyticsPageViewProps {
@@ -8,10 +8,10 @@ export interface AnalyticsPageViewProps {
 }
 
 export const AnalyticsPageView = ({children, params}: AnalyticsPageViewProps) => {
-  const analytics = useAnalyticsContext();
+  const analytics = useAnalytics();
 
   React.useEffect(() => {
-    analytics.onPageView(params);
+    analytics.trackPageView(params);
   }, [analytics, params]);
 
   return <>{children}</>;

src/components/AnalyticsProvider/index.tsx

@@ -1,48 +1,20 @@
 import * as React from 'react';
 
 import AnalyticsProviderContext from '../../contexts/AnalyticsProviderContext';
-import {UnknownRecord} from '../../types/common';
+import {Analytics} from '../../core';
 
 interface Props {
-  onInitialize(): void;
-  onPageView?(params?: UnknownRecord): void;
-  onEvent?(name: string, params?: UnknownRecord): void;
-  onClick?(name: string, params?: UnknownRecord): void;
-  onSet?(...args: [string, UnknownRecord] | [UnknownRecord]): void;
-  onSetUserId?(userId: string | null): void;
-  onSetUserProperty?(params: UnknownRecord): void;
+  analytics: Analytics;
   children: React.ReactNode;
 }
 
-export function AnalyticsProvider({
-  onInitialize,
-  onPageView = () => null,
-  onEvent = () => null,
-  onClick = () => null,
-  onSet = () => null,
-  onSetUserId = () => null,
-  onSetUserProperty = () => null,
-  children,
-}: Props) {
+export function AnalyticsProvider({analytics, children}: Props) {
   React.useEffect(() => {
-    onInitialize();
-  }, [onInitialize]);
+    analytics.initialize();
+  }, [analytics]);
 
   return React.useMemo(
-    () => (
-      <AnalyticsProviderContext.Provider
-        value={{
-          onPageView,
-          onEvent,
-          onClick,
-          onSet,
-          onSetUserId,
-          onSetUserProperty,
-        }}
-      >
-        {children}
-      </AnalyticsProviderContext.Provider>
-    ),
-    [children, onClick, onEvent, onPageView, onSet, onSetUserId, onSetUserProperty],
+    () => <AnalyticsProviderContext.Provider value={analytics}>{children}</AnalyticsProviderContext.Provider>,
+    [children, analytics],
   );
 }