From 51666e9993a2f4677f02d55c3fdb54288045eca6 Mon Sep 17 00:00:00 2001
From: cmlim0070 <87525734+cmlim0070@users.noreply.github.com>
Date: Sat, 4 Jan 2025 00:26:34 +0900
Subject: [PATCH] =?UTF-8?q?design=20:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8&?=
 =?UTF-8?q?=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=86=8C=ED=8F=AD=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/RegisterPage/EmailSection.tsx | 154 +++++++++----------
 src/pages/User/Login/LoginPage.tsx           |  11 +-
 src/pages/User/Register/RegisterPage.tsx     |  88 +++++------
 3 files changed, 123 insertions(+), 130 deletions(-)

diff --git a/src/components/RegisterPage/EmailSection.tsx b/src/components/RegisterPage/EmailSection.tsx
index 44da2216..2b341754 100644
--- a/src/components/RegisterPage/EmailSection.tsx
+++ b/src/components/RegisterPage/EmailSection.tsx
@@ -27,93 +27,89 @@ export const EmailSection = ({
         console.log(isVerifyLoading);
     }, [isVerifyLoading]);
     return (
-        <div className="flex flex-col gap-5">
-            <div>
+        <div className="flex flex-col gap-2">
+            <div className="flex w-full items-end gap-2">
+                <div className="w-full">
+                    {email && isEmailSend && isEmailVerified && (
+                        <div className="flex items-center h-6 text-[12px] text-green-500 md:text-base">
+                            ✔ 인증이 완료되었습니다.
+                        </div>
+                    )}
+                    <EmailInput onValueChange={onEmailChange} />
+                </div>
+                <button
+                    type="button"
+                    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>
+
+            {isEmailSend && (
                 <div className="flex w-full items-end gap-2">
                     <div className="w-full">
-                        {email && isEmailSend && isEmailVerified && (
-                            <div className="flex items-center h-6 text-[12px] text-green-500 md:text-base">
-                                ✔ 인증이 완료되었습니다.
-                            </div>
-                        )}
-                        <EmailInput onValueChange={onEmailChange} />
+                        <VerifyEmailInput onValueChange={onAuthNumChange} />
                     </div>
                     <button
                         type="button"
-                        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}
+                        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}
                     >
-                        {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>
-            </div>
-
-            <div>
-                {isEmailSend && (
-                    <div className="flex w-full items-end gap-2">
-                        <div className="w-full">
-                            <VerifyEmailInput onValueChange={onAuthNumChange} />
-                        </div>
-                        <button
-                            type="button"
-                            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}
-                        >
-                            확인
-                        </button>
-                    </div>
-                )}
-            </div>
+            )}
         </div>
     );
 };
diff --git a/src/pages/User/Login/LoginPage.tsx b/src/pages/User/Login/LoginPage.tsx
index 3742f78e..fbfd55fe 100644
--- a/src/pages/User/Login/LoginPage.tsx
+++ b/src/pages/User/Login/LoginPage.tsx
@@ -4,6 +4,7 @@ import { EmailInput } from '@/components/Common/Input/EmailInput';
 import { PasswordInput } from '@/components/Common/Input/PasswordInput';
 import { useToastStore } from '@/hooks/useToastStore';
 import { useLogin } from './../../../hooks/useLogin';
+import { Link } from 'react-router-dom';
 
 // const KAKAO_CLIENT_ID = import.meta.env.VITE_JAVASCRIPT_KEY as string;
 // const REDIRECT_URI = 'http://localhost:5173/login/kakao';
@@ -31,10 +32,6 @@ export const LoginPage = () => {
         mutate({ email, password });
     };
 
-    const handleNavigateRegister = () => {
-        navigate('/register');
-    };
-
     return (
         <div className="flex flex-col items-center gap-3 w-full h-full my-[50px]">
             <h2 className="text-2xl text-center text-sample-blue font-bold py-3">
@@ -60,12 +57,12 @@ export const LoginPage = () => {
                             </button>
                             <div>
                                 계정이 없으신가요?
-                                <a
+                                <Link
+                                    to="/register"
                                     className="text-bold text-sample-blue"
-                                    onClick={handleNavigateRegister}
                                 >
                                     {'  '}회원가입
-                                </a>
+                                </Link>
                             </div>
                         </div>
                     </div>
diff --git a/src/pages/User/Register/RegisterPage.tsx b/src/pages/User/Register/RegisterPage.tsx
index b07fedaf..ad16da63 100644
--- a/src/pages/User/Register/RegisterPage.tsx
+++ b/src/pages/User/Register/RegisterPage.tsx
@@ -23,51 +23,51 @@ export const RegisterPage = () => {
     };
 
     return (
-        <div className="flex flex-col gap-3 h-full my-[50px]">
-            <h2 className="font-bold text-2xl ">회원가입</h2>
-            <div>
-                <form
-                    className="flex flex-col gap-5"
-                    onSubmit={handleSubmit}
-                    onKeyDown={handleFormKeyDown}
-                    noValidate
-                >
-                    <EmailSection
-                        email={formState.email}
-                        onEmailChange={(value) => updateField('email', value)}
-                        onAuthNumChange={(value) =>
-                            updateField('authNum', value)
-                        }
-                        onRequestVerify={handleRequestEmailVerifyCode}
-                        onRequestAuthNumVerify={handleVerifyEmail}
-                        isVerifyLoading={validationState.isVerifyLoading}
-                        isEmailSend={validationState.isEmailSend}
-                        isEmailVerified={validationState.isEmailVerified}
-                    ></EmailSection>
-                    <PasswordSection
-                        onPasswordChange={(value) =>
-                            updateField('password', value)
-                        }
-                        onConfirmPasswordChange={(value) =>
-                            updateField('confirmPassword', value)
-                        }
-                    ></PasswordSection>
-                    <NicknameSection
-                        nickname={formState.nickname}
-                        onNicknameChange={(value) =>
-                            updateField('nickname', value)
-                        }
-                        onRequestNicknameVerify={handleCheckNickname}
-                        isNicknameChecked={validationState.isNicknameChecked}
-                        isNicknameValid={validationState.isNicknameValid}
-                    ></NicknameSection>
-                    <button type="submit" className="btn-primary-filled">
-                        가입하기
-                    </button>
-                    <Link to="/login">
-                        <div className="cursor-pointer">이미 회원이신가요?</div>
+        <div className="flex flex-col items-center gap-5 w-full h-full my-[50px] px-5">
+            <h2 className="text-2xl text-center text-sample-blue font-bold py-3 ">
+                Bottler
+            </h2>
+            <form
+                className="flex flex-col gap-2 w-full"
+                onSubmit={handleSubmit}
+                onKeyDown={handleFormKeyDown}
+                noValidate
+            >
+                <EmailSection
+                    email={formState.email}
+                    onEmailChange={(value) => updateField('email', value)}
+                    onAuthNumChange={(value) => updateField('authNum', value)}
+                    onRequestVerify={handleRequestEmailVerifyCode}
+                    onRequestAuthNumVerify={handleVerifyEmail}
+                    isVerifyLoading={validationState.isVerifyLoading}
+                    isEmailSend={validationState.isEmailSend}
+                    isEmailVerified={validationState.isEmailVerified}
+                ></EmailSection>
+                <PasswordSection
+                    onPasswordChange={(value) => updateField('password', value)}
+                    onConfirmPasswordChange={(value) =>
+                        updateField('confirmPassword', value)
+                    }
+                ></PasswordSection>
+                <NicknameSection
+                    nickname={formState.nickname}
+                    onNicknameChange={(value) => updateField('nickname', value)}
+                    onRequestNicknameVerify={handleCheckNickname}
+                    isNicknameChecked={validationState.isNicknameChecked}
+                    isNicknameValid={validationState.isNicknameValid}
+                ></NicknameSection>
+            </form>
+            <div className="flex flex-col w-full gap-2">
+                <button type="submit" className="btn-primary-filled">
+                    가입하기
+                </button>
+                <div>
+                    이미 회원이신가요?
+                    <Link to="/login" className="text-bold text-sample-blue">
+                        {' '}
+                        로그인
                     </Link>
-                </form>
+                </div>
             </div>
         </div>
     );