fix: 인증 여러 번 눌렀을 때 타이머 빠르게 동작하는 현상 해결

Principes-Artis-Mechanicae · Nov 2, 2024 · 833b7e5 · 833b7e5
1 parent 3901820
commit 833b7e5
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 18 deletions.
diff --git a/get-p-client/src/common/utils/format.ts b/get-p-client/src/common/utils/format.ts
@@ -1,8 +1,9 @@
 import { isValueAssigned } from "./validation";
 
 export const formatTime = (time: number): string => {
-    const minutes = Math.floor(time / 60);
-    const seconds = time % 60;
+    const total = Math.floor(time / 1000);
+    const minutes = Math.floor(total / 60);
+    const seconds = total % 60;
     return `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
 };
 

diff --git a/get-p-client/src/components/auth/SignUpInputSection/index.tsx b/get-p-client/src/components/auth/SignUpInputSection/index.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent, useCallback, useRef, useState } from "react";
+import { ChangeEvent, useCallback, useRef, useState, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { toast } from "react-toastify";
 
@@ -37,10 +37,12 @@ export default function SignUpInputSection() {
     const infoAgreementRef = useRef<HTMLInputElement>(null);
     const verificationRef = useRef<HTMLInputElement>(null);
 
+    const MINUTES_IN_MS = 5 * 60 * 1000;
+    const INTERVAL = 1000;
     const [isEmailVerificationFieldVisible, setIsEmailVerificationFieldVisible] = useState<boolean>(false);
     const [isPasswordCorrect, setIsPasswordCorrect] = useState<boolean>(false);
-    const [timer, setTimer] = useState<number>(300);
-    const [isTimerRunning, setIsTimerRunning] = useState<boolean>(false);
+    const [timeLeft, setTimeLeft] = useState<number>(MINUTES_IN_MS);
+    const [runningTimer, setRunningTimer] = useState<boolean>(false);
 
     const {
         value: email,
@@ -54,18 +56,31 @@ export default function SignUpInputSection() {
         onChange: onPasswordChange,
     } = useInputValidation(REGEXP_PASSWORD);
 
+    useEffect(() => {
+        let intervalId: NodeJS.Timeout;
+
+        if (runningTimer && timeLeft > 0) {
+            intervalId = setInterval(() => {
+                setTimeLeft((prevTime) => {
+                    if (prevTime <= 1000) {
+                        setRunningTimer(false);
+                        return 0;
+                    }
+                    return prevTime - INTERVAL;
+                });
+            }, INTERVAL);
+        }
+
+        return () => {
+            if (intervalId) {
+                clearInterval(intervalId);
+            }
+        };
+    }, [runningTimer]);
+
     const startTimer = () => {
-        setTimer(300);
-        setIsTimerRunning(true);
-        const intervalId = setInterval(() => {
-            setTimer((prevTimer) => {
-                if (prevTimer === 0) {
-                    clearInterval(intervalId);
-                    return 0;
-                }
-                return prevTimer - 1;
-            });
-        }, 1000);
+        setTimeLeft(MINUTES_IN_MS);
+        setRunningTimer(true);
     };
 
     const handleEmailVerificationBtnClick = useCallback(async () => {
@@ -174,9 +189,9 @@ export default function SignUpInputSection() {
                                         placeholder="인증번호를 입력해주세요"
                                     >
                                         <Button variant="side" width="50px" height="38px">
-                                            {isTimerRunning && (
+                                            {runningTimer !== null && (
                                                 <Text weight="bold" color="point">
-                                                    {formatTime(timer)}
+                                                    {formatTime(timeLeft)}
                                                 </Text>
                                             )}
                                         </Button>