feat: version 필드 추가 및 Type 변경 (#33)

.eslintrc.cjs

@@ -21,6 +21,7 @@ module.exports = {
     'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
     'prettier/prettier': ['error', { endOfLine: 'auto' }],
     'react/react-in-jsx-scope': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
   },
   settings: {
     'import/resolver': {

src/Logger.ts

@@ -1,5 +1,5 @@
 import { SetLocalStorage, SetLocalStorageClear } from './SetLocalStorage';
-import { LogPayloadParams, LogType, ServiceNameType } from './types/LogType';
+import { LogPayloadParams, LogType } from './types/LogType';
 import CryptoJS from 'crypto-js';
 import { postLog } from './apis/postLog';
 
@@ -17,7 +17,7 @@ const createRandomId = () => {
   return randomId;
 };
 
-const createHashedId = (userId: string) => {
+const createHashedID = (userId: string) => {
   let hashedId = '';
   let localHashedId = '';
   const existLocalHashedId = window.localStorage.getItem('yls-web');
@@ -39,35 +39,25 @@ const createTimestamp = () => {
   return now.toISOString();
 };
 
-const initialLog = (
-  userId: string,
-  serviceName: ServiceNameType,
-  name: string,
-  path: string | undefined
-) => {
+const initialLog = (userId: string, version: number, event: LogPayloadParams['event']) => {
   const loggerType: LogPayloadParams = {
     userId: userId,
-    path: '/',
-    serviceName: serviceName,
-    name: '',
-    message: '',
+    version: version,
+    event: event,
   };
 
   const logger = Logger(loggerType);
 
-  logger.event.name = name;
-  logger.event.path = path;
-
   SetLocalStorage(logger);
 };
 
 export const useYLSLogger = () => {
-  const screen = ({ userId, serviceName, name, path }: LogPayloadParams) => {
-    initialLog(userId, serviceName, name, path);
+  const screen = ({ userId, version, event }: LogPayloadParams) => {
+    initialLog(userId, version, event);
   };
 
-  const click = ({ userId, serviceName, name, path }: LogPayloadParams) => {
-    initialLog(userId, serviceName, name, path);
+  const click = ({ userId, version, event }: LogPayloadParams) => {
+    initialLog(userId, version, event);
   };
 
   return {
@@ -76,17 +66,14 @@ export const useYLSLogger = () => {
   };
 };
 
-export const Logger = ({ userId, serviceName, name, message, path, tags }: LogPayloadParams) => {
+export const Logger = ({ userId, version, event }: LogPayloadParams) => {
   return {
-    hashedId: createHashedId(userId),
+    hashedID: createHashedID(userId),
     timestamp: createTimestamp(),
+    version: version,
     event: {
       platform: 'web',
-      serviceName,
-      name,
-      message,
-      path,
-      tags,
+      ...event,
     },
   };
 };
@@ -95,6 +82,8 @@ window.addEventListener('unload', async (event) => {
   event.preventDefault();
 
   const logList: LogType[] = JSON.parse(localStorage.getItem('yls-web') as string) || [];
-  const res = await postLog(logList);
-  SetLocalStorageClear();
+  const res = await postLog([{ logRequestList: logList }]);
+  if (res.success) {
+    SetLocalStorageClear();
+  }
 });

src/SetLocalStorage.ts

@@ -17,8 +17,10 @@ export const SetLocalStorage = async (logger: LogType) => {
       const updateList = [...remainList, logger];
       localStorage.setItem('yls-web', JSON.stringify(updateList));
     } else {
-      SetLocalStorageClear();
-      const res = await postLog();
+      const res = await postLog(remainList);
+      if (res.success) {
+        SetLocalStorageClear();
+      }
     }
   }
 };

src/apis/customedAxios.ts

@@ -7,5 +7,3 @@ export const customedAxios = axios.create({
     withCredentials: true,
   },
 });
-
-export default customedAxios;

src/apis/postLog.ts

@@ -1,7 +1,7 @@
-import { LogType } from '../types/LogType';
-import customedAxios from './customedAxios';
+import { LogRequestList, LogResponse } from '../types/LogType';
+import { customedAxios } from './customedAxios';
 
-export const postLog = async (data: LogType[]) => {
+export const postLog = async (data: LogRequestList[]): Promise<LogResponse> => {
   const res = await customedAxios.put('/log/list', data);
   return res.data;
 };

src/components/LogClick.tsx

@@ -10,14 +10,10 @@ interface Props {
 export const LogClick = ({ children, params }: Props) => {
   const logger = useYLSLogger();
   const child = Children.only(children);
-  let path = params.path;
-
-  if (!params.path) path = window.location.pathname;
 
   return cloneElement(child, {
     onClick: (...args: any[]) => {
       logger.click({
-        path: path,
         ...params,
       });
 

src/components/LogScreen.tsx

@@ -9,13 +9,9 @@ interface Props {
 
 export const LogScreen = ({ children, params }: Props) => {
   const logger = useYLSLogger();
-  let path = params.path;
-
-  if (!params.path) path = window.location.pathname;
 
   useEffect(() => {
     logger.screen({
-      path: path,
       ...params,
     });
   }, []);

src/demo/Drawer.tsx

@@ -13,17 +13,22 @@ export const Drawer = () => {
       <div className="card">
         <LogScreen
           params={{
-            name: '',
             userId: '',
-            serviceName: 'home',
+            version: 1,
+            event: {
+              name: 'view',
+              path: router.pathname,
+            },
           }}
         >
           <LogClick
             params={{
-              name: 'click',
-              serviceName: 'home',
-              path: router.pathname,
               userId: '',
+              version: 2,
+              event: {
+                name: 'click',
+                screen: 'drawer',
+              },
             }}
           >
             <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>

src/demo/Home.tsx

@@ -13,17 +13,22 @@ export const Home = () => {
       <div className="card">
         <LogScreen
           params={{
-            name: '',
-            serviceName: 'home',
             userId: 'test',
+            version: 1,
+            event: {
+              name: 'view',
+              path: router.pathname,
+            },
           }}
         >
           <LogClick
             params={{
-              name: 'click',
-              serviceName: 'home',
-              path: router.pathname,
               userId: 'test',
+              version: 1,
+              event: {
+                name: 'click',
+                screen: 'home',
+              },
             }}
           >
             <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>

src/types/LogType.ts

@@ -1,25 +1,23 @@
-export type ServiceNameType = 'drawer' | 'home' | 'search';
+// LogPayloadParams: 사용처에서 넣어주는 값
+export interface LogPayloadParams {
+  userId: string;
+  version: number;
+  event: any;
+}
 
 // LogType: 최종 Log 형태
 export interface LogType {
-  hashedId: string;
+  hashedID: string;
   timestamp: string;
-  event: {
-    platform: string;
-    serviceName: ServiceNameType;
-    name: string;
-    message?: string;
-    path?: string;
-    tags?: string[];
-  };
+  version: number;
+  event: LogPayloadParams['event'];
 }
 
-// LogPayloadParams: 사용처에서 넣어주는 값
-export interface LogPayloadParams {
-  userId: string;
-  name: string | '';
-  serviceName: ServiceNameType;
-  message?: string;
-  path?: string;
-  tags?: string[];
+export interface LogRequestList {
+  logRequestList: LogType[];
+}
+
+export interface LogResponse {
+  success: boolean;
+  result: { [key: string]: any };
 }