[FIX]: 오류 수정

Author: Seol-JY

client/.pnp.cjs

@@ -5,6 +5,7 @@
   "license": "MIT",
   "dependencies": {
     "@reduxjs/toolkit": "^1.8.6",
+    "lodash": "^4.17.21",
     "react": "18.2.0",
     "react-cookie": "^7.1.4",
     "react-dom": "18.2.0",

client/package.json

@@ -9,6 +9,7 @@ import { useState, useEffect } from "react";
 import { Provider } from "react-redux";
 import store from "./redux/store";
 import Draggable from "react-draggable";
+import _debounce from "lodash/debounce";
 
 function App() {
   const [section, setSection] = useState("1");
@@ -17,6 +18,7 @@ function App() {
   const [position, setPosition] = useState({ x: 0, y: 0 });
   const [daynight, setdaynight] = useState(1);
   const [finishTrigger, setFinishTrigger] = useState(-1);
+  const [amountIncrease, setAmountIncrease] = useState(0); // 클릭 수
   const [scale, setScale] = useState(
     Math.min(window.innerWidth / 1400, window.innerHeight / 900)
   );
@@ -39,21 +41,23 @@ function App() {
       console.error("Failed to fetch counter value:", error);
     }
   };
-
-  const increaseCounter = async (amount) => {
+  const increaseCounter = async () => {
     try {
-      const response = await fetch(`/counter?amount=${amount}`, {
+      const response = await fetch(`/counter?amount=${amountIncrease}`, {
         method: "POST",
       });
       if (!response.ok) {
         throw new Error("Failed to increase counter value");
       }
-      setCounterValue((prevValue) => prevValue + amount);
+      setCounterValue((prevValue) => prevValue + amountIncrease);
+      setAmountIncrease(0);
     } catch (error) {
       console.error("Failed to increase counter value:", error);
     }
   };
 
+  const increaseCounterDebounced = _debounce(increaseCounter, 1000); // 1000ms 디바운스 지연
+
   const handleResize = () => {
     setScale(Math.min(window.innerWidth / 1400, window.innerHeight / 900));
   };
@@ -70,7 +74,7 @@ function App() {
   };
 
   function easteregg() {
-    alert("안녕하세요!");
+    alert("Remove the window");
   }
 
   return (
@@ -85,14 +89,32 @@ function App() {
           display: "flex",
           justifyContent: "space-around",
           alignItems: "center",
-          height: "70px",
+          height: "100px",
           width: "300px",
-          backgroundColor: "#f0f0f0",
+          backgroundColor: "var(--topbar-background-color)",
           borderRadius: "10px",
+          transition: "background-color 0.3s",
+          flexDirection: "column",
         }}
       >
-        <h1 style={{ position: "static" }}>Counter Value: {counterValue}</h1>
-        <button onClick={() => increaseCounter(1)}>Increase by 1</button>
+        <h1 style={{ position: "static" }}>
+          Number of clicks: {counterValue.toLocaleString("ko-KR")}
+        </h1>
+        <button
+          onClick={() => {
+            setAmountIncrease((prevAmount) => prevAmount + 1);
+            increaseCounterDebounced();
+          }}
+          className="sidebarsection-list"
+          style={{
+            width: "120px",
+            height: "40px",
+            border: "0.8px solid darkgray",
+            borderRadius: "10px",
+          }}
+        >
+          Can you press it?
+        </button>
       </div>
       <div className="scale-wrapper" style={{ transform: `scale(${scale})` }}>
         <Draggable onDrag={(e, data) => trackPos(data)}>

client/src/App.js

@@ -28,4 +28,26 @@ export default function egg() {
     "color:#99FFED",
     "color:#FFFFFF"
   );
+  console.log(
+    `%c
+                                    
+  If you find a vulnerability that  
+can manipulate speed, please report 
+   it using the method below!!      
+                                    
+%c
+   속도를 조작할 수 있는 취약점을 발견하면,   
+       아래 방법으로 제보해주세요!!        
+
+%c  Mail : [email protected]
+  Issue: https://bit.ly/3Jc8PCZ
+
+%c                                    
+                                    
+`,
+    "color: #fff530; background-color: #212121; font-size: 11px;",
+    "color: balck; font-size: 11px; font-weight: bold;",
+    "color: balck; font-size: 10px;",
+    "color: #fff530; background-color: #212121; font-size: 11px;"
+  );
 }

client/src/utils/egg.js

@@ -11078,6 +11078,7 @@ __metadata:
     eslint: latest
     eslint-plugin-react: latest
     eslint-plugin-react-hooks: latest
+    lodash: ^4.17.21
     react: 18.2.0
     react-cookie: ^7.1.4
     react-dom: 18.2.0