From 19c2ccc22f0e9206d06e681948ebdedd86f6dec8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9E=84=EC=B1=84=EB=AF=BC?=
 <87525734+cmlim0070@users.noreply.github.com>
Date: Mon, 9 Dec 2024 20:28:33 +0900
Subject: [PATCH] =?UTF-8?q?chore=20:=20=EB=B2=84=ED=8A=BC,=20=EC=8A=A4?=
 =?UTF-8?q?=ED=83=80=EC=9D=BC,=20=EB=A7=81=ED=81=AC=20=EA=B4=80=EB=A0=A8?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95=20(#402)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore : 사용하지 않는 버튼 제거

* feat : 로딩 상태 버튼 추가

* chore : 회원가입 파트 누락된 링크 추가
---
 src/components/RegisterPage/EmailSection.tsx  | 62 ++++++++++++++++++-
 .../RegisterPage/NicknameSection.tsx          |  2 +-
 src/hooks/useRegisterForm.tsx                 | 12 +++-
 src/pages/User/Login/LoginPage.tsx            |  7 +--
 src/pages/User/Register/RegisterPage.tsx      | 17 ++---
 5 files changed, 77 insertions(+), 23 deletions(-)

diff --git a/src/components/RegisterPage/EmailSection.tsx b/src/components/RegisterPage/EmailSection.tsx
index 78aaaa2d..44da2216 100644
--- a/src/components/RegisterPage/EmailSection.tsx
+++ b/src/components/RegisterPage/EmailSection.tsx
@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { EmailInput } from '../Common/Input/EmailInput';
 import { VerifyEmailInput } from '../Common/Input/VerifyEmailInput';
 
@@ -9,6 +10,7 @@ interface EmailSectionProps {
     onRequestAuthNumVerify: () => void;
     isEmailSend: boolean;
     isEmailVerified: boolean;
+    isVerifyLoading: boolean;
 }
 
 export const EmailSection = ({
@@ -18,8 +20,12 @@ export const EmailSection = ({
     onRequestVerify,
     onRequestAuthNumVerify,
     isEmailSend,
-    isEmailVerified
+    isEmailVerified,
+    isVerifyLoading
 }: EmailSectionProps) => {
+    useEffect(() => {
+        console.log(isVerifyLoading);
+    }, [isVerifyLoading]);
     return (
         <div className="flex flex-col gap-5">
             <div>
@@ -34,9 +40,59 @@ export const EmailSection = ({
                     </div>
                     <button
                         type="button"
-                        className="border border-sample-blue h-8 px-3 rounded text-sample-blue hover:bg-blue-500 hover:text-white transition-colors whitespace-nowrap"
+                        className="flex flex-row justify-center items-center gap-2 border border-sample-blue h-8 px-3 w-[200px] rounded text-sample-blue hover:bg-sample-blue hover:text-white transition-colors whitespace-nowrap"
                         onClick={onRequestVerify}
                     >
+                        {isVerifyLoading ? (
+                            <svg
+                                className="animate-spin h-5 w-5"
+                                xmlns="http://www.w3.org/2000/svg"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                            >
+                                <circle
+                                    className="opacity-25"
+                                    cx="12"
+                                    cy="12"
+                                    r="10"
+                                    stroke="currentColor"
+                                    strokeWidth="4"
+                                />
+                                <path
+                                    className="opacity-75"
+                                    fill="currentColor"
+                                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                                />
+                            </svg>
+                        ) : isEmailVerified ? (
+                            <svg
+                                className="h-5 w-5"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                            >
+                                <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth={2}
+                                    d="M5 13l4 4L19 7"
+                                />
+                            </svg>
+                        ) : (
+                            <svg
+                                className="h-5 w-5"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                            >
+                                <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth={2}
+                                    d="M14 5l7 7m0 0l-7 7m7-7H3"
+                                />
+                            </svg>
+                        )}
                         인증번호 전송
                     </button>
                 </div>
@@ -50,7 +106,7 @@ export const EmailSection = ({
                         </div>
                         <button
                             type="button"
-                            className="border border-sample-blue h-8 px-3 rounded text-sample-blue hover:bg-blue-500 hover:text-white transition-colors whitespace-nowrap items-end"
+                            className="border border-sample-blue h-8 px-3 rounded text-sample-blue hover:bg-sample-blue hover:text-white transition-colors whitespace-nowrap items-end"
                             onClick={onRequestAuthNumVerify}
                         >
                             확인
diff --git a/src/components/RegisterPage/NicknameSection.tsx b/src/components/RegisterPage/NicknameSection.tsx
index 79254b8f..b15a88f8 100644
--- a/src/components/RegisterPage/NicknameSection.tsx
+++ b/src/components/RegisterPage/NicknameSection.tsx
@@ -50,7 +50,7 @@ export const NicknameSection = ({
                 </div>
                 <button
                     type="button"
-                    className="border border-blue-500 h-8 px-3 rounded text-blue-500 hover:bg-blue-500 hover:text-white transition-colors whitespace-nowrap"
+                    className="border border-sample-blue h-8 px-3 rounded text-sample-blue hover:bg-sample-blue hover:text-white transition-colors whitespace-nowrap"
                     onClick={onRequestNicknameVerify}
                 >
                     중복 확인
diff --git a/src/hooks/useRegisterForm.tsx b/src/hooks/useRegisterForm.tsx
index 0969c9b8..7d13bb7b 100644
--- a/src/hooks/useRegisterForm.tsx
+++ b/src/hooks/useRegisterForm.tsx
@@ -22,6 +22,7 @@ interface RegisterFormState {
 interface ValidationState {
     isEmailSend: boolean;
     isEmailVerified: boolean;
+    isVerifyLoading: boolean;
     isNicknameChecked: boolean;
     isNicknameValid: boolean;
 }
@@ -42,6 +43,7 @@ export const useRegisterForm = () => {
     // 회원가입 폼 유효성 검사 상태
     const [validationState, setValidationState] = useState<ValidationState>({
         isEmailSend: false,
+        isVerifyLoading: false,
         isEmailVerified: false,
         isNicknameChecked: false,
         isNicknameValid: false
@@ -58,7 +60,8 @@ export const useRegisterForm = () => {
                     setValidationState((prev) => ({
                         ...prev,
                         isEmailSend: false,
-                        isEmailVerified: false
+                        isEmailVerified: false,
+                        isVerifyLoading: false
                     }));
                 }
                 break;
@@ -81,12 +84,17 @@ export const useRegisterForm = () => {
             addToast('이메일을 입력해주세요.', 'warning');
             return;
         }
+        setValidationState((prev) => ({ ...prev, isVerifyLoading: true }));
         const response = await sendEmail({ email: formState.email });
         console.log(response);
         switch (response.code) {
             case 'COMMON200':
                 addToast('인증번호가 전송되었습니다.', 'success');
-                setValidationState((prev) => ({ ...prev, isEmailSend: true }));
+                setValidationState((prev) => ({
+                    ...prev,
+                    isEmailSend: true,
+                    isVerifyLoading: false
+                }));
                 return true;
             case 'USER4000':
                 addToast('유효한 이메일 형식이 아닙니다.', 'warning');
diff --git a/src/pages/User/Login/LoginPage.tsx b/src/pages/User/Login/LoginPage.tsx
index 5e59bac8..e545bfe6 100644
--- a/src/pages/User/Login/LoginPage.tsx
+++ b/src/pages/User/Login/LoginPage.tsx
@@ -68,15 +68,10 @@ export const LoginPage = () => {
                                 회원가입
                             </button>
                         </div>
-                        {/* <button onClick={handleKakaoLogin}>
-                            카카오 로그인
-                        </button> */}
                     </div>
                 </div>
             </form>
-            {/* <div className="flex gap-3 flex-">
-                <div className="text-caption">회원 정보 찾기</div>
-            </div> */}
+
         </div>
     );
 };
diff --git a/src/pages/User/Register/RegisterPage.tsx b/src/pages/User/Register/RegisterPage.tsx
index 7be37fa8..c0048cea 100644
--- a/src/pages/User/Register/RegisterPage.tsx
+++ b/src/pages/User/Register/RegisterPage.tsx
@@ -3,7 +3,8 @@ import { useRegisterForm } from '@/hooks/useRegisterForm';
 import { EmailSection } from '@/components/RegisterPage/EmailSection';
 import { PasswordSection } from '@/components/RegisterPage/PasswordSection';
 import { NicknameSection } from '@/components/RegisterPage/NicknameSection';
-import { useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
+
 
 export const RegisterPage = () => {
     const {
@@ -24,10 +25,6 @@ export const RegisterPage = () => {
         }
     };
 
-    const handleNavigateLogin = () => {
-        navigate('/login');
-    };
-
     return (
         <div className="flex flex-col gap-3 h-full my-[50px]">
             <h2 className="font-bold text-2xl ">회원가입</h2>
@@ -46,6 +43,7 @@ export const RegisterPage = () => {
                         }
                         onRequestVerify={handleRequestEmailVerifyCode}
                         onRequestAuthNumVerify={handleVerifyEmail}
+                        isVerifyLoading={validationState.isVerifyLoading}
                         isEmailSend={validationState.isEmailSend}
                         isEmailVerified={validationState.isEmailVerified}
                     ></EmailSection>
@@ -69,12 +67,9 @@ export const RegisterPage = () => {
                     <button type="submit" className="btn-primary-filled">
                         가입하기
                     </button>
-                    <div
-                        onClick={handleNavigateLogin}
-                        className="cursor-pointer"
-                    >
-                        이미 계정을 가지고 있으신가요?
-                    </div>
+                    <Link to="/login">
+                        <div className="cursor-pointer">이미 회원이신가요?</div>
+                    </Link>
                 </form>
             </div>
         </div>