chore : 버튼, 스타일, 링크 관련 수정 (#402)

* chore : 사용하지 않는 버튼 제거 * feat : 로딩 상태 버튼 추가 * chore : 회원가입 파트 누락된 링크 추가
prgrms-web-devcourse-final-project · Dec 9, 2024 · 19c2ccc · 19c2ccc
1 parent 7f348b3
commit 19c2ccc
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>