Merge pull request #7 from yourssu/feat/#4

LogClick 구현
yourssu · Jan 31, 2024 · 4ac5e08 · 4ac5e08
2 parents ae8c130 + cb57b44
commit 4ac5e08
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/Logger.ts"></script>
+    <script type="module" src="/src/demo/main.tsx"></script>
   </body>
 </html>
diff --git 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/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
@@ -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/demo/App.tsx 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 (
+    <>
+      <h1>Vite + React</h1>
+      <div className="card">
+        <LogClick
+          params={{
+            userId: 123,
+            name: 'click',
+          }}
+        >
+          <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
+        </LogClick>
+      </div>
+    </>
+  );
+};
diff --git a/src/demo/main.tsx 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(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git 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[];
 }