FEAT: LocalStorage에 로그 적재작업

.eslintrc.cjs

@@ -1,8 +1,12 @@
 module.exports = {
+  globals: {
+    process: true,
+  },
   root: true,
   env: {
     browser: true,
     es2021: true,
+    node: true,
   },
   extends: [
     'eslint:recommended',

package.json

@@ -38,7 +38,7 @@
     "react-router-dom": "^6.21.3"
   },
   "devDependencies": {
-    "@types/react": "^18.2.43",
+    "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.17",
     "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^6.14.0",

src/Logger.ts

@@ -1,4 +1,5 @@
-import { LogPayloadParams } from './types/LogType';
+import { postLog } from './apis/postLog';
+import { LogPayloadParams, LogType } from './types/LogType';
 
 const createHashedId = (userId: string) => {
   // Todo: create hashedId
@@ -11,34 +12,62 @@ const createTimestamp = () => {
   return now.toISOString();
 };
 
+const setLocalStorageClear = () => {
+  const list: any[] = [];
+  localStorage.setItem('yls-web', JSON.stringify(list));
+};
+
+const setLocalStorage = async (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) || [];
+    if (remainList.length < 10) {
+      const updateList = [...remainList, logger];
+      localStorage.setItem('yls-web', JSON.stringify(updateList));
+    } else {
+      setLocalStorageClear();
+      const res = await postLog();
+    }
+  }
+};
+
 export const useYLSLogger = () => {
-  const screen = ({ userId, serviceName, name }: LogPayloadParams) => {
-    //사용자에서 userId, name, message(선택) 등을 넣어줌
+  const screen = ({ userId, serviceName, name, path }: LogPayloadParams) => {
     const loggerType: LogPayloadParams = {
       userId: userId,
       path: '/',
       serviceName: serviceName,
       name: '',
-      message: '/',
+      message: '',
     };
     const logger = Logger(loggerType);
-    console.log(`Logging screen information for screen: ${serviceName}`);
+    console.log(`Logging screen information for path: ${serviceName}`);
     logger.event.name = name;
+    logger.event.path = path;
+
+    setLocalStorage(logger);
   };
 
-  const click = ({ userId, name }: LogPayloadParams) => {
-    //사용자에서 userId, name, message(선택) 등을 넣어줌
+  const click = ({ userId, serviceName, name, path }: LogPayloadParams) => {
+    console.log(`Logging click information for button: ${name}`);
+    //사용자에서 path,name,message를 넣어줌
     const loggerType: LogPayloadParams = {
       userId: userId,
       path: '/',
-      serviceName: 'home',
+      serviceName: serviceName,
       name: '',
-      message: '/',
+      message: '',
     };
     const logger = Logger(loggerType);
-    console.log(`Logging click information for button: ${name}`);
+
     logger.event.name = name;
+    logger.event.path = path;
+    setLocalStorage(logger);
   };
+  // todo: 로컬스토리지 로그 개수가 10개 넘어가면 postLog.ts호출
 
   return {
     screen,

src/apis/customedAxios.ts

@@ -0,0 +1,11 @@
+import axios from 'axios';
+
+export const customedAxios = axios.create({
+  baseURL: import.meta.env.VITE_API_URL,
+  headers: {
+    'Content-Type': 'application/json',
+    withCredentials: true,
+  },
+});
+
+export default customedAxios;

src/apis/postLog.ts

@@ -1 +1,6 @@
-export const postLog = async () => {};
+import customedAxios from './customedAxios';
+
+export const postLog = async () => {
+  const res = await customedAxios.put('');
+  return res.data;
+};

src/demo/App.tsx

@@ -1,12 +1,14 @@
 import { BrowserRouter } from 'react-router-dom';
 import { Routes, Route } from 'react-router-dom';
 import { Home } from './Home';
+import { Drawer } from './Drawer';
 export const App = () => {
   return (
     <>
       <BrowserRouter>
         <Routes>
           <Route path="/" element={<Home />} />
+          <Route path="/drawer" element={<Drawer />} />
         </Routes>
       </BrowserRouter>
     </>

src/demo/Drawer.tsx

@@ -0,0 +1,35 @@
+import { useState } from 'react';
+import { LogClick } from '../LogClick';
+import { useLocation } from 'react-router-dom';
+import { LogScreen } from '../LogScreen';
+export const Drawer = () => {
+  const [count, setCount] = useState(0);
+  const router = useLocation();
+
+  return (
+    <>
+      <h1>Drawer</h1>
+      <div className="card">
+        <LogScreen
+          params={{
+            path: router.pathname,
+            name: '',
+            userId: 'test',
+            serviceName: 'home',
+          }}
+        >
+          <LogClick
+            params={{
+              name: 'click',
+              serviceName: 'home',
+              path: router.pathname,
+              userId: 'test',
+            }}
+          >
+            <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
+          </LogClick>
+        </LogScreen>
+      </div>
+    </>
+  );
+};

src/demo/Home.tsx

@@ -2,26 +2,29 @@ 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>
+      <h1>Home</h1>
       <div className="card">
         <LogScreen
           params={{
-            userId: 'test',
-            // serviceName: router.pathname,
-            serviceName: 'drawer', // 임시 값 (로컬 테스트 시 type을 잠시 변경해야 함)
+            path: router.pathname,
             name: '',
+            userId: 'test',
+            serviceName: 'home',
           }}
         >
           <LogClick
             params={{
-              userId: 'test',
               name: 'click',
+              serviceName: 'home',
+              path: router.pathname,
+              userId: 'test',
             }}
           >
             <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>

src/demo/main.tsx

@@ -2,8 +2,4 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { App } from './App';
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />);

src/types/LogType.ts

@@ -12,11 +12,12 @@ export interface LogType {
   };
 }
 
+export type ServiceNameType = 'drawer' | 'home' | 'search';
 // LogPayloadParams: 사용처에서 넣어주는 값
 export interface LogPayloadParams {
   userId: string;
   name: string | '';
-  serviceName?: 'drawer' | 'home' | 'search';
+  serviceName: ServiceNameType;
   message?: string;
   path?: string;
   tags?: string[];

yarn.lock

@@ -676,7 +676,7 @@
     "@types/history" "^4.7.11"
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^18.2.43":
+"@types/react@*":
   version "18.2.48"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.48.tgz#11df5664642d0bd879c1f58bc1d37205b064e8f1"
   integrity sha512-qboRCl6Ie70DQQG9hhNREz81jqC1cs9EVNcjQ1AU+jH6NFfSAhVVbrrY/+nSF+Bsk4AOwm9Qa61InvMCyV+H3w==
@@ -685,6 +685,15 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
+"@types/react@^18.2.55":
+  version "18.2.55"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.55.tgz#38141821b7084404b5013742bc4ae08e44da7a67"
+  integrity sha512-Y2Tz5P4yz23brwm2d7jNon39qoAtMMmalOQv6+fEFt1mT+FcM3D841wDpoUvFXhaYenuROCy3FZYqdTjM7qVyA==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/scheduler@*":
   version "0.16.8"
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.8.tgz#ce5ace04cfeabe7ef87c0091e50752e36707deff"