fix: merge conflict

package.json

@@ -38,13 +38,15 @@
     "react-router-dom": "^6.21.3"
   },
   "devDependencies": {
+    "@types/crypto-js": "^4.2.2",
     "@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",
     "@typescript-eslint/parser": "^6.14.0",
     "@vitejs/plugin-react": "^4.2.1",
     "axios": "^1.6.4",
+    "crypto-js": "^4.2.0",
     "eslint": "^8.55.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-import": "^2.28.1",

src/Logger.ts

@@ -1,9 +1,35 @@
-import { postLog } from './apis/postLog';
-import { LogPayloadParams, LogType } from './types/LogType';
+import { SetLocalStorage } from './SetLocalStorage';
+import { LogPayloadParams, ServiceNameType } from './types/LogType';
+import CryptoJS from 'crypto-js';
+
+const createRandomId = () => {
+  let randomId = '';
+  const charactersRange = { start: 33, end: 126 };
+
+  for (let i = 0; i < 10; i++) {
+    const randomCharCode =
+      Math.floor(Math.random() * (charactersRange.end - charactersRange.start + 1)) +
+      charactersRange.start;
+    randomId += String.fromCharCode(randomCharCode);
+  }
+
+  return randomId;
+};
 
 const createHashedId = (userId: string) => {
-  // Todo: create hashedId
-  return '';
+  let hashedId = '';
+  let localHashedId = '';
+  const existLocalHashedId = window.localStorage.getItem('yls-web');
+
+  if (userId === '' && existLocalHashedId) {
+    localHashedId = JSON.parse(window.localStorage.getItem('yls-web') as string).hashedId;
+  } else if (userId === '') {
+    userId = createRandomId();
+  }
+
+  hashedId = CryptoJS.SHA256(userId).toString(CryptoJS.enc.Base64);
+
+  return localHashedId ? localHashedId : hashedId;
 };
 
 const createTimestamp = () => {
@@ -12,59 +38,35 @@ const createTimestamp = () => {
   return now.toISOString();
 };
 
-const setLocalStorageClear = () => {
-  const list: any[] = [];
-  localStorage.setItem('yls-web', JSON.stringify(list));
-};
+const initialLog = (
+  userId: string,
+  serviceName: ServiceNameType,
+  name: string,
+  path: string | undefined
+) => {
+  const loggerType: LogPayloadParams = {
+    userId: userId,
+    path: '/',
+    serviceName: serviceName,
+    name: '',
+    message: '',
+  };
 
-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();
-    }
-  }
+  const logger = Logger(loggerType);
+
+  logger.event.name = name;
+  logger.event.path = path;
+
+  SetLocalStorage(logger);
 };
 
 export const useYLSLogger = () => {
   const screen = ({ userId, serviceName, name, path }: LogPayloadParams) => {
-    const loggerType: LogPayloadParams = {
-      userId: userId,
-      path: '/',
-      serviceName: serviceName,
-      name: '',
-      message: '',
-    };
-    const logger = Logger(loggerType);
-    console.log(`Logging screen information for path: ${serviceName}`);
-    logger.event.name = name;
-    logger.event.path = path;
-
-    setLocalStorage(logger);
+    initialLog(userId, serviceName, name, path);
   };
 
   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: serviceName,
-      name: '',
-      message: '',
-    };
-    const logger = Logger(loggerType);
-    logger.event.name = name;
-    logger.event.path = path;
-    setLocalStorage(logger);
+    initialLog(userId, serviceName, name, path);
   };
 
   return {

src/SetLocalStorage.ts

@@ -0,0 +1,24 @@
+import { postLog } from './apis/postLog';
+import { LogType } from './types/LogType';
+
+const SetLocalStorageClear = () => {
+  const list: any[] = [];
+  localStorage.setItem('yls-web', JSON.stringify(list));
+};
+
+export 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();
+    }
+  }
+};

src/LogClick.tsx → src/components/LogClick.tsx

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

src/LogScreen.tsx → src/components/LogScreen.tsx

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

src/demo/App.tsx

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

src/demo/Drawer.tsx

@@ -1,7 +1,8 @@
 import { useState } from 'react';
-import { LogClick } from '../LogClick';
+import { LogClick } from '../components/LogClick';
 import { useLocation } from 'react-router-dom';
-import { LogScreen } from '../LogScreen';
+import { LogScreen } from '../components/LogScreen';
+
 export const Drawer = () => {
   const [count, setCount] = useState(0);
   const router = useLocation();
@@ -14,7 +15,7 @@ export const Drawer = () => {
           params={{
             path: router.pathname,
             name: '',
-            userId: 'test',
+            userId: '',
             serviceName: 'home',
           }}
         >
@@ -23,7 +24,7 @@ export const Drawer = () => {
               name: 'click',
               serviceName: 'home',
               path: router.pathname,
-              userId: 'test',
+              userId: '',
             }}
           >
             <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>

src/demo/Home.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
-import { LogClick } from '../LogClick';
+import { LogClick } from '../components/LogClick';
 import { useLocation } from 'react-router-dom';
-import { LogScreen } from '../LogScreen';
+import { LogScreen } from '../components/LogScreen';
 
 export const Home = () => {
   const [count, setCount] = useState(0);

src/demo/main.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { App } from './App';
 

src/types/LogType.ts

@@ -1,18 +1,19 @@
+export type ServiceNameType = 'drawer' | 'home' | 'search';
+
 // LogType: 최종 Log 형태
 export interface LogType {
   hashedId: string;
   timestamp: string;
   event: {
     platform: string;
-    serviceName: 'drawer' | 'home' | 'search';
+    serviceName: ServiceNameType;
     name: string;
     message?: string;
     path?: string;
     tags?: string[];
   };
 }
 
-export type ServiceNameType = 'drawer' | 'home' | 'search';
 // LogPayloadParams: 사용처에서 넣어주는 값
 export interface LogPayloadParams {
   userId: string;

yarn.lock

@@ -627,6 +627,11 @@
   dependencies:
     "@babel/types" "^7.20.7"
 
+"@types/crypto-js@^4.2.2":
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/@types/crypto-js/-/crypto-js-4.2.2.tgz#771c4a768d94eb5922cc202a3009558204df0cea"
+  integrity sha512-sDOLlVbHhXpAUAL0YHDUUwDZf3iN4Bwi4W6a0W0b+QcAezUbRtH4FVb+9J4h+XFPW7l/gQ9F8qC7P+Ec4k8QVQ==
+
 "@types/[email protected]", "@types/estree@^1.0.0":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
@@ -1161,6 +1166,11 @@ cross-spawn@^7.0.2:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+crypto-js@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/crypto-js/-/crypto-js-4.2.0.tgz#4d931639ecdfd12ff80e8186dba6af2c2e856631"
+  integrity sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==
+
 csstype@^3.0.2:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"