Merge pull request #24 from yourssu/feat/#14

initialLog 함수 추가 및 Logger.ts 로직 분리

src/Logger.ts

@@ -1,5 +1,5 @@
-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 = () => {
@@ -38,62 +38,36 @@ 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);
   };
-  // todo: 로컬스토리지 로그 개수가 10개 넘어가면 postLog.ts호출
 
   return {
     screen,

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();

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/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();
+    }
+  }
+};