[FEAT] LogScreen, Log 로컬스토리지 저장

package.json

@@ -40,5 +40,6 @@
     "react-router-dom": "^6.21.3",
     "typescript": "^5.2.2",
     "vite": "^5.0.8"
-  }
+  },
+  "dependencies": {}
 }

src/LogClick.tsx

@@ -1,6 +1,6 @@
 import { Children, cloneElement } from 'react';
 import { useYLSLogger } from '.';
-import { LogPayloadParams } from './types/LogPayloadParams';
+import { LogPayloadParams } from './types/LogType';
 
 interface Props {
   children: React.ReactElement;

src/LogParamsProvider.ts

@@ -1,3 +1,3 @@
-import { createContext } from 'react';
+// import { createContext } from 'react';
 
-const LogParamsContext = createContext(null);
+// const LogParamsContext = createContext(null);

src/LogScreen.tsx

@@ -1,7 +1,6 @@
 import { useYLSLogger } from '.';
-import { useLocation } from 'react-router-dom';
 import { useEffect } from 'react';
-import { LogPayloadParams } from './types/LogPayloadParams';
+import { LogPayloadParams } from './types/LogType';
 
 interface Props {
   children: React.ReactNode;
@@ -10,13 +9,9 @@ interface Props {
 
 export const LogScreen = ({ children, params }: Props) => {
   const logger = useYLSLogger();
-  const router = useLocation();
-  const { path } = params;
 
   useEffect(() => {
-    if (router) {
-      // logger.screen(path);
-    }
+    logger.screen(params);
   }, []);
 
   return <>{children}</>;

src/Logger.ts

@@ -1,15 +1,8 @@
-import { LogPayloadParams } from './types/LogPayloadParams';
+import { LogPayloadParams, LogType, LoggerType } from './types/LogType';
 
-interface LoggerType {
-  path: string;
-  platform: string;
-  serviceName: string;
-  name: string;
-  message: string;
-}
-
-const createRandomId = () => {
+const createUserId = () => {
   // Todo: create random id
+  return 123;
 };
 
 const createTimestamp = () => {
@@ -18,30 +11,68 @@ 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 = ({ path }: LogPayloadParams) => {
-    // console.log(`Logging screen information for path: ${path}`);
+  const screen = ({ serviceName, name }: LogPayloadParams) => {
+    //사용자에서 path,name,message를 넣어줌
+    const loggerType: LoggerType = {
+      path: '/',
+      serviceName: 'home',
+      name: '',
+      message: '/',
+    };
+    const logger = Logger(loggerType);
+    console.log(`Logging screen information for path: ${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 = {
+      path: '/',
+      serviceName: 'home',
+      name: '',
+      message: '/',
+    };
+    const logger = Logger(loggerType);
+
+    logger.event.name = name;
+
+    setLocalStorage(logger);
   };
+  // todo: 로컬스토리지 로그 개수가 10개 넘어가면 postLog.ts호출
 
   return {
     screen,
     click,
   };
 };
 
-export const Logger = ({ path, platform, serviceName, name, message }: LoggerType) => {
+export const Logger = ({ serviceName, name, message, path, tags }: LoggerType) => {
   return {
-    userId: createRandomId(),
+    userId: createUserId(),
     timestamp: createTimestamp(),
     event: {
-      platform,
+      platform: 'web',
       serviceName,
       name,
       message,
+      path,
+      tags,
     },
   };
 };

src/apis/postLog.ts

@@ -0,0 +1 @@
+export const postLog = async () => {};

src/demo/App.tsx

@@ -1,22 +1,14 @@
-import { useState } from 'react';
-import { LogClick } from '../LogClick';
-
+import { BrowserRouter } from 'react-router-dom';
+import { Routes, Route } from 'react-router-dom';
+import { Home } from './Home';
 export const App = () => {
-  const [count, setCount] = useState(0);
-
   return (
     <>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <LogClick
-          params={{
-            userId: 123,
-            name: 'click',
-          }}
-        >
-          <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
-        </LogClick>
-      </div>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<Home />} />
+        </Routes>
+      </BrowserRouter>
     </>
   );
 };

src/demo/Home.tsx

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+import { LogClick } from '../LogClick';
+import { useLocation } from 'react-router-dom';
+import { LogScreen } from '../LogScreen';
+export const Home = () => {
+  const [count, setCount] = useState(0);
+  const router = useLocation();
+
+  return (
+    <>
+      <h1>Vite + React</h1>
+      <div className="card">
+        <LogScreen
+          params={{
+            userId: 123,
+            screenName: router.pathname,
+            eventName: '',
+          }}
+        >
+          <LogClick
+            params={{
+              userId: 123,
+              eventName: 'click',
+              screenName: '',
+            }}
+          >
+            <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
+          </LogClick>
+        </LogScreen>
+      </div>
+    </>
+  );
+};

src/types/LogType.ts

@@ -0,0 +1,32 @@
+// LogType: 최종 Log 형태
+export interface LogType {
+  userId: number;
+  timestamp: string;
+  event: {
+    platform: string;
+    serviceName: 'drawer' | 'home' | 'search';
+    name: string;
+    message?: string;
+    path?: string;
+    tags?: string[];
+  };
+}
+
+// LoggerType: Log 내 event에 들어가는 값
+export interface LoggerType {
+  serviceName: 'drawer' | 'home' | 'search';
+  name: string;
+  message?: string;
+  path?: string;
+  tags?: string[];
+}
+
+// LogPayloadParams: 사용처에서 넣어주는 값
+export interface LogPayloadParams {
+  userId: number;
+  name: string | '';
+  serviceName?: 'drawer' | 'home' | 'search';
+  message?: string;
+  path?: string;
+  tags?: string[];
+}