From af592f93716955eaf5a9426fb0515ba42cac931d Mon Sep 17 00:00:00 2001 From: JjungminLee Date: Wed, 31 Jan 2024 18:14:27 +0900 Subject: [PATCH 1/7] =?UTF-8?q?feat:=20LogScreen,=20Log=20=EB=A1=9C?= =?UTF-8?q?=EC=BB=AC=EC=8A=A4=ED=86=A0=EB=A6=AC=EC=A7=80=20=EC=A0=80?= =?UTF-8?q?=EC=9E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 +- package.json | 3 ++- src/LogClick.tsx | 15 +++++++++-- src/LogParamsProvider.ts | 4 +-- src/LogScreen.tsx | 8 ++---- src/Logger.ts | 49 +++++++++++++++++++++++++++++------ src/apis/postLog.ts | 1 + src/demo/App.tsx | 14 ++++++++++ src/demo/Home.tsx | 32 +++++++++++++++++++++++ src/demo/main.tsx | 9 +++++++ src/types/LogPayloadParams.ts | 8 +++--- yarn.lock | 5 ++++ 12 files changed, 127 insertions(+), 23 deletions(-) create mode 100644 src/demo/App.tsx create mode 100644 src/demo/Home.tsx create mode 100644 src/demo/main.tsx diff --git a/index.html b/index.html index dbc2ba2..7de8ada 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,6 @@
- + diff --git a/package.json b/package.json index 9e0487f..6fc0083 100644 --- a/package.json +++ b/package.json @@ -40,5 +40,6 @@ "react-router-dom": "^6.21.3", "typescript": "^5.2.2", "vite": "^5.0.8" - } + }, + "dependencies": {} } diff --git a/src/LogClick.tsx b/src/LogClick.tsx index 1912689..9998b54 100644 --- a/src/LogClick.tsx +++ b/src/LogClick.tsx @@ -1,12 +1,23 @@ +import { Children, cloneElement } from 'react'; import { useYLSLogger } from '.'; +import { LogPayloadParams } from './types/LogPayloadParams'; interface Props { - children: React.ReactNode; + children: React.ReactElement; params: LogPayloadParams; } export const LogClick = ({ children, params }: Props) => { const logger = useYLSLogger(); + const child = Children.only(children); - return <>; + return cloneElement(child, { + onClick: (...args: any[]) => { + logger.click(params); + + if (child.props && typeof child.props['onClick'] === 'function') { + return child.props.onClick(...args); + } + }, + }); }; diff --git a/src/LogParamsProvider.ts b/src/LogParamsProvider.ts index 0c23ea9..32f9b3f 100644 --- a/src/LogParamsProvider.ts +++ b/src/LogParamsProvider.ts @@ -1,3 +1,3 @@ -import { createContext } from 'react'; +// import { createContext } from 'react'; -const LogParamsContext = createContext(null); +// const LogParamsContext = createContext(null); diff --git a/src/LogScreen.tsx b/src/LogScreen.tsx index 7a1f9bb..acaf415 100644 --- a/src/LogScreen.tsx +++ b/src/LogScreen.tsx @@ -1,6 +1,6 @@ import { useYLSLogger } from '.'; -import { useLocation } from 'react-router-dom'; import { useEffect } from 'react'; +import { LogPayloadParams } from './types/LogPayloadParams'; interface Props { children: React.ReactNode; @@ -9,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}; diff --git a/src/Logger.ts b/src/Logger.ts index 28b94e3..e167121 100644 --- a/src/Logger.ts +++ b/src/Logger.ts @@ -1,12 +1,14 @@ +import { LogPayloadParams } from './types/LogPayloadParams'; + interface LoggerType { - path: string; + path?: string; platform: string; serviceName: string; name: string; message: string; } -const createRandomId = () => { +const createUserId = () => { // Todo: create random id }; @@ -17,13 +19,39 @@ const createTimestamp = () => { }; export const useYLSLogger = () => { - const screen = ({ path }: LoggerType) => { - // console.log(`Logging screen information for path: ${path}`); + const loggerType: LoggerType = { + path: '/', + platform: 'web', + serviceName: 'home', + name: '', + message: '/', + }; + const logger = Logger(loggerType); + const screen = ({ screenName, eventName }: LogPayloadParams) => { + console.log(`Logging screen information for path: ${screenName}`); + const serviceName = 'Home'; + const logEvents: LogPayloadParams = { + userId: 0, + screenName: screenName, + eventName: eventName, + }; + logger.events = logEvents; + + 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)); + } }; - const click = ({ name }: LoggerType) => { - // console.log(`Logging click information for button: ${name}`); + const click = ({ eventName }: LogPayloadParams) => { + console.log(`Logging click information for button: ${eventName}`); }; + // todo: 로컬스토리지 로그 개수가 10개 넘어가면 postLog.ts호출 return { screen, @@ -31,15 +59,20 @@ export const useYLSLogger = () => { }; }; -export const Logger = ({ path, platform, serviceName, name, message }: LoggerType) => { +export const Logger = ( + { path, platform, serviceName, name, message }: LoggerType, + { events }: { events?: LogPayloadParams } = {} +) => { return { - userId: createRandomId(), + userId: createUserId(), timestamp: createTimestamp(), event: { platform, serviceName, name, message, + path, }, + events: events, }; }; diff --git a/src/apis/postLog.ts b/src/apis/postLog.ts index e69de29..473ae2a 100644 --- a/src/apis/postLog.ts +++ b/src/apis/postLog.ts @@ -0,0 +1 @@ +export const postLog = async () => {}; diff --git a/src/demo/App.tsx b/src/demo/App.tsx new file mode 100644 index 0000000..bcaea40 --- /dev/null +++ b/src/demo/App.tsx @@ -0,0 +1,14 @@ +import { BrowserRouter } from 'react-router-dom'; +import { Routes, Route } from 'react-router-dom'; +import { Home } from './Home'; +export const App = () => { + return ( + <> + + + } /> + + + + ); +}; diff --git a/src/demo/Home.tsx b/src/demo/Home.tsx new file mode 100644 index 0000000..cb70e32 --- /dev/null +++ b/src/demo/Home.tsx @@ -0,0 +1,32 @@ +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

+
+ + + + + +
+ + ); +}; diff --git a/src/demo/main.tsx b/src/demo/main.tsx new file mode 100644 index 0000000..6c14464 --- /dev/null +++ b/src/demo/main.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import { App } from './App'; + +ReactDOM.createRoot(document.getElementById('root')!).render( + + + +); diff --git a/src/types/LogPayloadParams.ts b/src/types/LogPayloadParams.ts index 14e90f6..a51aea4 100644 --- a/src/types/LogPayloadParams.ts +++ b/src/types/LogPayloadParams.ts @@ -1,6 +1,8 @@ -interface LogPayloadParams { - path: string; - name: string; +export interface LogPayloadParams { + userId: number; + screenName: string | ''; + eventName: string | ''; + path?: string; message?: string; tags?: string[]; } diff --git a/yarn.lock b/yarn.lock index bc2e890..49e689a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2635,6 +2635,11 @@ uri-js@^4.2.2: dependencies: punycode "^2.1.0" +uuid@^9.0.1: + version "9.0.1" + resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.1.tgz#e188d4c8853cc722220392c424cd637f32293f30" + integrity sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA== + vite@^5.0.8: version "5.0.12" resolved "https://registry.yarnpkg.com/vite/-/vite-5.0.12.tgz#8a2ffd4da36c132aec4adafe05d7adde38333c47" From a4858d7d1f583a62cd3bc87a8a19c95cadd234ae Mon Sep 17 00:00:00 2001 From: JjungminLee Date: Wed, 31 Jan 2024 19:03:37 +0900 Subject: [PATCH 2/7] =?UTF-8?q?fix:=20logger=20type=EA=B4=80=EB=A0=A8=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Logger.ts | 15 +++------------ 1 file changed, 3 insertions(+), 12 deletions(-) diff --git a/src/Logger.ts b/src/Logger.ts index e167121..d816b48 100644 --- a/src/Logger.ts +++ b/src/Logger.ts @@ -29,13 +29,8 @@ export const useYLSLogger = () => { const logger = Logger(loggerType); const screen = ({ screenName, eventName }: LogPayloadParams) => { console.log(`Logging screen information for path: ${screenName}`); - const serviceName = 'Home'; - const logEvents: LogPayloadParams = { - userId: 0, - screenName: screenName, - eventName: eventName, - }; - logger.events = logEvents; + logger.event.name = eventName; + logger.event.path = screenName; if (window.localStorage.getItem('yls-web') == undefined) { const list: any[] = []; @@ -59,10 +54,7 @@ export const useYLSLogger = () => { }; }; -export const Logger = ( - { path, platform, serviceName, name, message }: LoggerType, - { events }: { events?: LogPayloadParams } = {} -) => { +export const Logger = ({ path, platform, serviceName, name, message }: LoggerType) => { return { userId: createUserId(), timestamp: createTimestamp(), @@ -73,6 +65,5 @@ export const Logger = ( message, path, }, - events: events, }; }; From 08be457bdc94f850e576971f99c6fc3552c071b4 Mon Sep 17 00:00:00 2001 From: JjungminLee Date: Wed, 31 Jan 2024 20:59:58 +0900 Subject: [PATCH 3/7] =?UTF-8?q?fix:=20API=20=ED=95=84=EB=93=9C=EC=97=90=20?= =?UTF-8?q?=EB=A7=9E=EC=B6=B0=20eventName,serviceName=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Logger.ts | 38 ++++++++++++++++++++++++++++++-------- src/demo/Home.tsx | 1 + yarn.lock | 5 ----- 3 files changed, 31 insertions(+), 13 deletions(-) diff --git a/src/Logger.ts b/src/Logger.ts index d816b48..e089058 100644 --- a/src/Logger.ts +++ b/src/Logger.ts @@ -19,15 +19,16 @@ const createTimestamp = () => { }; export const useYLSLogger = () => { - const loggerType: LoggerType = { - path: '/', - platform: 'web', - serviceName: 'home', - name: '', - message: '/', - }; - const logger = Logger(loggerType); const screen = ({ screenName, eventName }: LogPayloadParams) => { + //사용자에서 path,name,message를 넣어줌 + const loggerType: LoggerType = { + path: '/', + platform: 'web', + serviceName: 'home', + name: '', + message: '/', + }; + const logger = Logger(loggerType); console.log(`Logging screen information for path: ${screenName}`); logger.event.name = eventName; logger.event.path = screenName; @@ -45,6 +46,27 @@ export const useYLSLogger = () => { const click = ({ eventName }: LogPayloadParams) => { console.log(`Logging click information for button: ${eventName}`); + //사용자에서 path,name,message를 넣어줌 + const loggerType: LoggerType = { + path: '/', + platform: 'web', + serviceName: 'home', + name: '', + message: '/', + }; + const logger = Logger(loggerType); + + logger.event.name = eventName; + + 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)); + } }; // todo: 로컬스토리지 로그 개수가 10개 넘어가면 postLog.ts호출 diff --git a/src/demo/Home.tsx b/src/demo/Home.tsx index cb70e32..a5bae26 100644 --- a/src/demo/Home.tsx +++ b/src/demo/Home.tsx @@ -5,6 +5,7 @@ import { LogScreen } from '../LogScreen'; export const Home = () => { const [count, setCount] = useState(0); const router = useLocation(); + return ( <>

Vite + React

diff --git a/yarn.lock b/yarn.lock index 49e689a..bc2e890 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2635,11 +2635,6 @@ uri-js@^4.2.2: dependencies: punycode "^2.1.0" -uuid@^9.0.1: - version "9.0.1" - resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.1.tgz#e188d4c8853cc722220392c424cd637f32293f30" - integrity sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA== - vite@^5.0.8: version "5.0.12" resolved "https://registry.yarnpkg.com/vite/-/vite-5.0.12.tgz#8a2ffd4da36c132aec4adafe05d7adde38333c47" From 8bec1c4c40c8d109e8d8a1a35c4f6ae8408c62ea Mon Sep 17 00:00:00 2001 From: Hanna922 Date: Wed, 31 Jan 2024 21:18:46 +0900 Subject: [PATCH 4/7] feat: modify type --- src/Logger.ts | 29 ++++++++++++++--------------- src/types/LogPayloadParams.ts | 7 ++++--- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/src/Logger.ts b/src/Logger.ts index e089058..4261609 100644 --- a/src/Logger.ts +++ b/src/Logger.ts @@ -1,11 +1,12 @@ import { LogPayloadParams } from './types/LogPayloadParams'; +// LoggerType: Log 내 event에 들어가는 값 interface LoggerType { - path?: string; - platform: string; - serviceName: string; + serviceName: 'drawer' | 'home' | 'search'; name: string; - message: string; + message?: string; + path?: string; + tags?: string[]; } const createUserId = () => { @@ -19,19 +20,17 @@ const createTimestamp = () => { }; export const useYLSLogger = () => { - const screen = ({ screenName, eventName }: LogPayloadParams) => { + const screen = ({ serviceName, name }: LogPayloadParams) => { //사용자에서 path,name,message를 넣어줌 const loggerType: LoggerType = { path: '/', - platform: 'web', serviceName: 'home', name: '', message: '/', }; const logger = Logger(loggerType); - console.log(`Logging screen information for path: ${screenName}`); - logger.event.name = eventName; - logger.event.path = screenName; + console.log(`Logging screen information for path: ${serviceName}`); + logger.event.name = name; if (window.localStorage.getItem('yls-web') == undefined) { const list: any[] = []; @@ -44,19 +43,18 @@ export const useYLSLogger = () => { } }; - const click = ({ eventName }: LogPayloadParams) => { - console.log(`Logging click information for button: ${eventName}`); + const click = ({ name }: LogPayloadParams) => { + console.log(`Logging click information for button: ${name}`); //사용자에서 path,name,message를 넣어줌 const loggerType: LoggerType = { path: '/', - platform: 'web', serviceName: 'home', name: '', message: '/', }; const logger = Logger(loggerType); - logger.event.name = eventName; + logger.event.name = name; if (window.localStorage.getItem('yls-web') == undefined) { const list: any[] = []; @@ -76,16 +74,17 @@ export const useYLSLogger = () => { }; }; -export const Logger = ({ path, platform, serviceName, name, message }: LoggerType) => { +export const Logger = ({ serviceName, name, message, path, tags }: LoggerType) => { return { userId: createUserId(), timestamp: createTimestamp(), event: { - platform, + platform: 'web', serviceName, name, message, path, + tags, }, }; }; diff --git a/src/types/LogPayloadParams.ts b/src/types/LogPayloadParams.ts index a51aea4..bcf2a55 100644 --- a/src/types/LogPayloadParams.ts +++ b/src/types/LogPayloadParams.ts @@ -1,8 +1,9 @@ +// LogPayloadParams: 사용처에서 넣어주는 값 export interface LogPayloadParams { userId: number; - screenName: string | ''; - eventName: string | ''; - path?: string; + name: string | ''; + serviceName?: 'drawer' | 'home' | 'search'; message?: string; + path?: string; tags?: string[]; } From e8a72dedff7183058e1978ad1161a8eea80394da Mon Sep 17 00:00:00 2001 From: Hanna922 Date: Wed, 31 Jan 2024 21:27:48 +0900 Subject: [PATCH 5/7] feat: add LogType --- src/types/LogType.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 src/types/LogType.ts diff --git a/src/types/LogType.ts b/src/types/LogType.ts new file mode 100644 index 0000000..0041fee --- /dev/null +++ b/src/types/LogType.ts @@ -0,0 +1,12 @@ +export interface LogType { + userId: number; + timestamp: string; + event: { + platform: string; + serviceName: 'drawer' | 'home' | 'search'; + name: string; + message?: string; + path?: string; + tags?: string[]; + }; +} From 46718719b0efe18551991980f97eabfc8b5bbfc0 Mon Sep 17 00:00:00 2001 From: Hanna922 Date: Wed, 31 Jan 2024 21:28:27 +0900 Subject: [PATCH 6/7] refactor: separate setLocalStorage --- src/Logger.ts | 34 ++++++++++++++++------------------ 1 file changed, 16 insertions(+), 18 deletions(-) diff --git a/src/Logger.ts b/src/Logger.ts index 4261609..4145f45 100644 --- a/src/Logger.ts +++ b/src/Logger.ts @@ -1,4 +1,5 @@ import { LogPayloadParams } from './types/LogPayloadParams'; +import { LogType } from './types/LogType'; // LoggerType: Log 내 event에 들어가는 값 interface LoggerType { @@ -11,6 +12,7 @@ interface LoggerType { const createUserId = () => { // Todo: create random id + return 123; }; const createTimestamp = () => { @@ -19,6 +21,18 @@ 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 = ({ serviceName, name }: LogPayloadParams) => { //사용자에서 path,name,message를 넣어줌 @@ -32,15 +46,7 @@ export const useYLSLogger = () => { console.log(`Logging screen information for path: ${serviceName}`); logger.event.name = name; - 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)); - } + setLocalStorage(logger); }; const click = ({ name }: LogPayloadParams) => { @@ -56,15 +62,7 @@ export const useYLSLogger = () => { logger.event.name = name; - 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)); - } + setLocalStorage(logger); }; // todo: 로컬스토리지 로그 개수가 10개 넘어가면 postLog.ts호출 From 448642e5277651b629a0a3f2e2a650439a54739d Mon Sep 17 00:00:00 2001 From: Hanna922 Date: Wed, 31 Jan 2024 21:35:03 +0900 Subject: [PATCH 7/7] refactor: separate interface --- src/LogClick.tsx | 2 +- src/LogScreen.tsx | 2 +- src/Logger.ts | 12 +----------- src/types/LogPayloadParams.ts | 9 --------- src/types/LogType.ts | 20 ++++++++++++++++++++ 5 files changed, 23 insertions(+), 22 deletions(-) delete mode 100644 src/types/LogPayloadParams.ts diff --git a/src/LogClick.tsx b/src/LogClick.tsx index 9998b54..d721f60 100644 --- a/src/LogClick.tsx +++ b/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; diff --git a/src/LogScreen.tsx b/src/LogScreen.tsx index acaf415..544bc7f 100644 --- a/src/LogScreen.tsx +++ b/src/LogScreen.tsx @@ -1,6 +1,6 @@ import { useYLSLogger } from '.'; import { useEffect } from 'react'; -import { LogPayloadParams } from './types/LogPayloadParams'; +import { LogPayloadParams } from './types/LogType'; interface Props { children: React.ReactNode; diff --git a/src/Logger.ts b/src/Logger.ts index 4145f45..21974b7 100644 --- a/src/Logger.ts +++ b/src/Logger.ts @@ -1,14 +1,4 @@ -import { LogPayloadParams } from './types/LogPayloadParams'; -import { LogType } from './types/LogType'; - -// LoggerType: Log 내 event에 들어가는 값 -interface LoggerType { - serviceName: 'drawer' | 'home' | 'search'; - name: string; - message?: string; - path?: string; - tags?: string[]; -} +import { LogPayloadParams, LogType, LoggerType } from './types/LogType'; const createUserId = () => { // Todo: create random id diff --git a/src/types/LogPayloadParams.ts b/src/types/LogPayloadParams.ts deleted file mode 100644 index bcf2a55..0000000 --- a/src/types/LogPayloadParams.ts +++ /dev/null @@ -1,9 +0,0 @@ -// LogPayloadParams: 사용처에서 넣어주는 값 -export interface LogPayloadParams { - userId: number; - name: string | ''; - serviceName?: 'drawer' | 'home' | 'search'; - message?: string; - path?: string; - tags?: string[]; -} diff --git a/src/types/LogType.ts b/src/types/LogType.ts index 0041fee..d787554 100644 --- a/src/types/LogType.ts +++ b/src/types/LogType.ts @@ -1,3 +1,4 @@ +// LogType: 최종 Log 형태 export interface LogType { userId: number; timestamp: string; @@ -10,3 +11,22 @@ export interface LogType { 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[]; +}