From ed97f9870b5e20fb76dacae7939d2c7b46c8260f Mon Sep 17 00:00:00 2001
From: JungminLee <85864699+JjungminLee@users.noreply.github.com>
Date: Wed, 7 Feb 2024 21:09:29 +0900
Subject: [PATCH] =?UTF-8?q?FEAT:=20LocalStorage=EC=97=90=20=EB=A1=9C?=
=?UTF-8?q?=EA=B7=B8=20=EC=A0=81=EC=9E=AC=EC=9E=91=EC=97=85=20(#20)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* feat: contextAPI 초안
* feat: localstorage에 로그 적재 작업
* fix: put 메서드로 변경
* fix: message변경
* fix: strict mode 제거+ 중복검사 함수 삭제
---
.eslintrc.cjs | 4 ++++
package.json | 2 +-
src/Logger.ts | 49 +++++++++++++++++++++++++++++++--------
src/apis/customedAxios.ts | 11 +++++++++
src/apis/postLog.ts | 7 +++++-
src/demo/App.tsx | 2 ++
src/demo/Drawer.tsx | 35 ++++++++++++++++++++++++++++
src/demo/Home.tsx | 13 +++++++----
src/demo/main.tsx | 6 +----
src/types/LogType.ts | 3 ++-
yarn.lock | 11 ++++++++-
11 files changed, 119 insertions(+), 24 deletions(-)
create mode 100644 src/apis/customedAxios.ts
create mode 100644 src/demo/Drawer.tsx
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index f9f0638..51ff6c1 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -1,8 +1,12 @@
module.exports = {
+ globals: {
+ process: true,
+ },
root: true,
env: {
browser: true,
es2021: true,
+ node: true,
},
extends: [
'eslint:recommended',
diff --git a/package.json b/package.json
index 721a6c5..9d0d8cb 100644
--- a/package.json
+++ b/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",
diff --git a/src/Logger.ts b/src/Logger.ts
index 458f317..e059874 100644
--- a/src/Logger.ts
+++ b/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,
diff --git a/src/apis/customedAxios.ts b/src/apis/customedAxios.ts
new file mode 100644
index 0000000..362c3d2
--- /dev/null
+++ b/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;
diff --git a/src/apis/postLog.ts b/src/apis/postLog.ts
index 473ae2a..31bd9a2 100644
--- a/src/apis/postLog.ts
+++ b/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;
+};
diff --git a/src/demo/App.tsx b/src/demo/App.tsx
index bcaea40..bdcad57 100644
--- a/src/demo/App.tsx
+++ b/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 (
<>
} />
+ } />
diff --git a/src/demo/Drawer.tsx b/src/demo/Drawer.tsx
new file mode 100644
index 0000000..79cd0fa
--- /dev/null
+++ b/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 (
+ <>
+ Drawer
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/demo/Home.tsx b/src/demo/Home.tsx
index e8a9a24..f7b6bf6 100644
--- a/src/demo/Home.tsx
+++ b/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 (
<>
- Vite + React
+ Home
diff --git a/src/demo/main.tsx b/src/demo/main.tsx
index 6c14464..6a90344 100644
--- a/src/demo/main.tsx
+++ b/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(
-
-
-
-);
+ReactDOM.createRoot(document.getElementById('root')!).render();
diff --git a/src/types/LogType.ts b/src/types/LogType.ts
index 0cd4288..a8ac324 100644
--- a/src/types/LogType.ts
+++ b/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[];
diff --git a/yarn.lock b/yarn.lock
index eba679b..2865675 100644
--- a/yarn.lock
+++ b/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"