타입 수정 및 네이밍 분리 (userId, hashedId) (#19)

* feat: modify LogType * feat: modify Logger.ts type & naming * feat: modify demo app & restore screen serviceName
yourssu · Feb 6, 2024 · 8a46d32 · 8a46d32
1 parent 49c76a1
commit 8a46d32
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 50 deletions.
diff --git a/src/Logger.ts b/src/Logger.ts
@@ -1,8 +1,8 @@
-import { LogPayloadParams, LogType, LoggerType } from './types/LogType';
+import { LogPayloadParams } from './types/LogType';
 
-const createUserId = () => {
-  // Todo: create random id
-  return 123;
+const createHashedId = (userId: string) => {
+  // Todo: create hashedId
+  return '';
 };
 
 const createTimestamp = () => {
@@ -11,60 +11,44 @@ const createTimestamp = () => {
   return now.toISOString();
 };
 
-const setLocalStorage = (logger: LogType) => {
-  if (window.localStorage.getItem('yls-web') == undefined) {
-    const list: any[] = [];
-    list.push(logger);
-    localStorage.setItem('yls-web', JSON.stringify(list));
-  } else {
-    const remainList: any[] = JSON.parse(localStorage.getItem('yls-web') as string) || [];
-    const updateList = [...remainList, logger];
-    localStorage.setItem('yls-web', JSON.stringify(updateList));
-  }
-};
-
 export const useYLSLogger = () => {
-  const screen = ({ serviceName, name }: LogPayloadParams) => {
-    //사용자에서 path,name,message를 넣어줌
-    const loggerType: LoggerType = {
+  const screen = ({ userId, serviceName, name }: LogPayloadParams) => {
+    //사용자에서 userId, name, message(선택) 등을 넣어줌
+    const loggerType: LogPayloadParams = {
+      userId: userId,
       path: '/',
-      serviceName: 'home',
+      serviceName: serviceName,
       name: '',
       message: '/',
     };
     const logger = Logger(loggerType);
-    console.log(`Logging screen information for path: ${serviceName}`);
+    console.log(`Logging screen information for screen: ${serviceName}`);
     logger.event.name = name;
-
-    setLocalStorage(logger);
   };
 
-  const click = ({ name }: LogPayloadParams) => {
-    console.log(`Logging click information for button: ${name}`);
-    //사용자에서 path,name,message를 넣어줌
-    const loggerType: LoggerType = {
+  const click = ({ userId, name }: LogPayloadParams) => {
+    //사용자에서 userId, name, message(선택) 등을 넣어줌
+    const loggerType: LogPayloadParams = {
+      userId: userId,
       path: '/',
       serviceName: 'home',
       name: '',
       message: '/',
     };
     const logger = Logger(loggerType);
-
+    console.log(`Logging click information for button: ${name}`);
     logger.event.name = name;
-
-    setLocalStorage(logger);
   };
-  // todo: 로컬스토리지 로그 개수가 10개 넘어가면 postLog.ts호출
 
   return {
     screen,
     click,
   };
 };
 
-export const Logger = ({ serviceName, name, message, path, tags }: LoggerType) => {
+export const Logger = ({ userId, serviceName, name, message, path, tags }: LogPayloadParams) => {
   return {
-    userId: createUserId(),
+    hashedId: createHashedId(userId),
     timestamp: createTimestamp(),
     event: {
       platform: 'web',

diff --git a/src/demo/Home.tsx b/src/demo/Home.tsx
@@ -12,16 +12,16 @@ export const Home = () => {
       <div className="card">
         <LogScreen
           params={{
-            userId: 123,
-            screenName: router.pathname,
-            eventName: '',
+            userId: 'test',
+            // serviceName: router.pathname,
+            serviceName: 'drawer', // 임시 값 (로컬 테스트 시 type을 잠시 변경해야 함)
+            name: '',
           }}
         >
           <LogClick
             params={{
-              userId: 123,
-              eventName: 'click',
-              screenName: '',
+              userId: 'test',
+              name: 'click',
             }}
           >
             <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>

diff --git a/src/types/LogType.ts b/src/types/LogType.ts
@@ -1,6 +1,6 @@
 // LogType: 최종 Log 형태
 export interface LogType {
-  userId: number;
+  hashedId: string;
   timestamp: string;
   event: {
     platform: string;
@@ -12,18 +12,9 @@ export interface LogType {
   };
 }
 
-// LoggerType: Log 내 event에 들어가는 값
-export interface LoggerType {
-  serviceName: 'drawer' | 'home' | 'search';
-  name: string;
-  message?: string;
-  path?: string;
-  tags?: string[];
-}
-
 // LogPayloadParams: 사용처에서 넣어주는 값
 export interface LogPayloadParams {
-  userId: number;
+  userId: string;
   name: string | '';
   serviceName?: 'drawer' | 'home' | 'search';
   message?: string;