From a91fe054841252755c11e5714edf321a2ffe67eb Mon Sep 17 00:00:00 2001 From: Hanna922 Date: Mon, 29 Jan 2024 19:07:23 +0900 Subject: [PATCH 1/3] feat: revise LogPayloadParams --- src/LogScreen.tsx | 1 + src/Logger.ts | 8 +++++--- src/types/LogPayloadParams.ts | 5 +++-- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/src/LogScreen.tsx b/src/LogScreen.tsx index 7a1f9bb..1a4724c 100644 --- a/src/LogScreen.tsx +++ b/src/LogScreen.tsx @@ -1,6 +1,7 @@ import { useYLSLogger } from '.'; import { useLocation } from 'react-router-dom'; import { useEffect } from 'react'; +import { LogPayloadParams } from './types/LogPayloadParams'; interface Props { children: React.ReactNode; diff --git a/src/Logger.ts b/src/Logger.ts index 28b94e3..cd88c68 100644 --- a/src/Logger.ts +++ b/src/Logger.ts @@ -1,3 +1,5 @@ +import { LogPayloadParams } from './types/LogPayloadParams'; + interface LoggerType { path: string; platform: string; @@ -17,12 +19,12 @@ const createTimestamp = () => { }; export const useYLSLogger = () => { - const screen = ({ path }: LoggerType) => { + const screen = ({ path }: LogPayloadParams) => { // console.log(`Logging screen information for path: ${path}`); }; - const click = ({ name }: LoggerType) => { - // console.log(`Logging click information for button: ${name}`); + const click = ({ name }: LogPayloadParams) => { + console.log(`Logging click information for button: ${name}`); }; return { diff --git a/src/types/LogPayloadParams.ts b/src/types/LogPayloadParams.ts index 14e90f6..dd30351 100644 --- a/src/types/LogPayloadParams.ts +++ b/src/types/LogPayloadParams.ts @@ -1,6 +1,7 @@ -interface LogPayloadParams { - path: string; +export interface LogPayloadParams { + userId: number; name: string; + path?: string; message?: string; tags?: string[]; } From e2a753612725587ffeec5e4a28b43f5cc5757b22 Mon Sep 17 00:00:00 2001 From: Hanna922 Date: Mon, 29 Jan 2024 19:08:23 +0900 Subject: [PATCH 2/3] feat: add LogClick --- src/LogClick.tsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) 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); + } + }, + }); }; From cb57b44864e6f9873b9488349197997b83b0a151 Mon Sep 17 00:00:00 2001 From: Hanna922 Date: Mon, 29 Jan 2024 19:08:49 +0900 Subject: [PATCH 3/3] feat: add demo MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 테스트 간단하게 하려고 demo 만들었는데 나중에 삭제할게요! --- index.html | 2 +- src/demo/App.tsx | 22 ++++++++++++++++++++++ src/demo/main.tsx | 9 +++++++++ 3 files changed, 32 insertions(+), 1 deletion(-) create mode 100644 src/demo/App.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/src/demo/App.tsx b/src/demo/App.tsx new file mode 100644 index 0000000..9c1d4e4 --- /dev/null +++ b/src/demo/App.tsx @@ -0,0 +1,22 @@ +import { useState } from 'react'; +import { LogClick } from '../LogClick'; + +export const App = () => { + const [count, setCount] = useState(0); + + 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( + + + +);