From ce424f9232dead47cc80e0d29c5a10c90f4c0788 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: Sat, 4 Jan 2025 13:33:03 +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=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B3=80=EA=B2=BD=20?=
 =?UTF-8?q?(#465)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* env : 개발 환경에서 서비스워커 캐싱 무효화

* design : 로그인 페이지 디자인 변경

* design : 로그인&회원가입 페이지 디자인 소폭 변경
---
 public/sw.js                                 |   6 +
 src/components/RegisterPage/EmailSection.tsx | 154 +++++++++----------
 src/pages/User/Login/LoginPage.tsx           |  31 ++--
 src/pages/User/Register/RegisterPage.tsx     |  88 +++++------
 4 files changed, 141 insertions(+), 138 deletions(-)

diff --git a/public/sw.js b/public/sw.js
index ce241bcb..dfb7557e 100644
--- a/public/sw.js
+++ b/public/sw.js
@@ -2,7 +2,13 @@ const cacheName = '::myServiceWorker';
 const version = 'v0.0.1';
 const cacheList = [];
 
+const isDev =
+    self.location.hostname === 'localhost' ||
+    self.location.hostname === '127.0.0.1';
+
 self.addEventListener('fetch', (e) => {
+    if (isDev) return e.respondWith(fetch(e.request));
+
     e.respondWith(
         caches.match(e.request).then((r) => {
             if (r) {
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 78d78847..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,38 +32,38 @@ export const LoginPage = () => {
         mutate({ email, password });
     };
 
-    const handleNavigateRegister = () => {
-        navigate('/register');
-    };
-
     return (
-        <div className="flex flex-col gap-3 h-full my-[50px]">
+        <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">
+                Bottler
+            </h2>
             <form
-                className="flex flex-col gap-5 "
+                className="flex flex-col gap-5 w-full p-5"
                 onSubmit={handleSubmit}
                 noValidate
             >
-                <h2 className="text-2xl font-bold ">로그인</h2>
                 <div className="flex flex-col gap-5">
                     <div className="flex flex-col gap-2">
                         <EmailInput></EmailInput>
                         <PasswordInput></PasswordInput>
                     </div>
                     <div className="flex flex-col gap-1 w-full">
-                        <div className="flex flex-row gap-1 w-full">
+                        <div className="flex flex-col gap-3 w-full">
                             <button
                                 className="btn-primary-filled"
                                 type="submit"
                             >
                                 로그인
                             </button>
-                            <button
-                                className="btn-primary"
-                                type="button"
-                                onClick={handleNavigateRegister}
-                            >
-                                회원가입
-                            </button>
+                            <div>
+                                계정이 없으신가요?
+                                <Link
+                                    to="/register"
+                                    className="text-bold text-sample-blue"
+                                >
+                                    {'  '}회원가입
+                                </Link>
+                            </div>
                         </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>
     );