From 9f75700338c55c4b203357f1ddfdff06ddbb15de Mon Sep 17 00:00:00 2001
From: yoonyesol <maniac970430@naver.com>
Date: Sun, 21 Jul 2024 02:27:38 +0900
Subject: [PATCH] =?UTF-8?q?Refactor:=20#35=20=EC=9D=B8=EC=A6=9D=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=A0=84=EB=B0=98=EC=A0=81?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EA=B2=B9=EC=B9=98=EB=8A=94=20=EC=8A=A4?=
 =?UTF-8?q?=ED=83=80=EC=9D=BC=EB=A7=81=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/user/authForm/AuthForm.tsx    |  2 +-
 src/components/user/authForm/FooterLinks.tsx | 20 ++++++--------------
 src/globals.css                              | 15 ++++++++++++---
 src/pages/user/SearchIdPage.tsx              |  4 ++--
 src/pages/user/SearchPasswordPage.tsx        |  4 ++--
 src/pages/user/SignInPage.tsx                |  6 +++---
 src/pages/user/SignUpPage.tsx                |  2 +-
 7 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/src/components/user/authForm/AuthForm.tsx b/src/components/user/authForm/AuthForm.tsx
index da770c4c..3119ad93 100644
--- a/src/components/user/authForm/AuthForm.tsx
+++ b/src/components/user/authForm/AuthForm.tsx
@@ -12,7 +12,7 @@ export default function AuthForm({ children, onSubmit }: AuthFormProps) {
         Welcome to our site!
         <br /> Grow Up your Life with us.
       </section>
-      <section className="flex flex-grow flex-col justify-center gap-8">{children}</section>
+      <section className="auth-form-section">{children}</section>
     </form>
   );
 }
diff --git a/src/components/user/authForm/FooterLinks.tsx b/src/components/user/authForm/FooterLinks.tsx
index 6c5f600f..170301d3 100644
--- a/src/components/user/authForm/FooterLinks.tsx
+++ b/src/components/user/authForm/FooterLinks.tsx
@@ -12,15 +12,11 @@ export default function FooterLinks({ type }: FooterLinksProps) {
       case 'signIn':
         return (
           <>
-            <button type="button" className="cursor-pointer bg-inherit font-bold" onClick={() => nav('/search/id')}>
+            <button type="button" className="inherit-btn" onClick={() => nav('/search/id')}>
               아이디 찾기
             </button>
             <p>|</p>
-            <button
-              type="button"
-              className="cursor-pointer bg-inherit font-bold"
-              onClick={() => nav('/search/password')}
-            >
+            <button type="button" className="inherit-btn" onClick={() => nav('/search/password')}>
               비밀번호 찾기
             </button>
           </>
@@ -28,15 +24,11 @@ export default function FooterLinks({ type }: FooterLinksProps) {
       case 'searchId':
         return (
           <>
-            <button type="button" className="cursor-pointer bg-inherit font-bold" onClick={() => nav('/signin')}>
+            <button type="button" className="inherit-btn" onClick={() => nav('/signin')}>
               로그인
             </button>
             <p>|</p>
-            <button
-              type="button"
-              className="cursor-pointer bg-inherit font-bold"
-              onClick={() => nav('/search/password')}
-            >
+            <button type="button" className="inherit-btn" onClick={() => nav('/search/password')}>
               비밀번호 찾기
             </button>
           </>
@@ -44,11 +36,11 @@ export default function FooterLinks({ type }: FooterLinksProps) {
       case 'searchPassword':
         return (
           <>
-            <button type="button" className="cursor-pointer bg-inherit font-bold" onClick={() => nav('/signin')}>
+            <button type="button" className="inherit-btn" onClick={() => nav('/signin')}>
               로그인
             </button>
             <p>|</p>
-            <button type="button" className="cursor-pointer bg-inherit font-bold" onClick={() => nav('/search/id')}>
+            <button type="button" className="inherit-btn" onClick={() => nav('/search/id')}>
               아이디 찾기
             </button>
           </>
diff --git a/src/globals.css b/src/globals.css
index 5f16f724..1920345a 100644
--- a/src/globals.css
+++ b/src/globals.css
@@ -87,11 +87,20 @@
     @apply absolute left-0 top-0 block h-30 w-3 bg-main content-[''];
   }
 
+  /* Auth Styles */
+  .auth-form-section {
+    @apply flex flex-grow flex-col justify-center gap-8;
+  }
+
   .auth-btn {
-    @apply flex h-30 items-center justify-center rounded-lg bg-sub px-8 font-bold;
+    @apply flex h-30 cursor-pointer items-center justify-center rounded-lg bg-sub px-8 font-bold shadow-md;
+  }
+
+  .inherit-btn {
+    @apply cursor-pointer bg-inherit font-bold;
   }
 
-  .auth-input {
-    @apply h-30 flex-grow rounded-lg border border-input px-8 text-sm outline-none placeholder:text-emphasis;
+  .centered-flex-col {
+    @apply flex flex-col text-center;
   }
 }
diff --git a/src/pages/user/SearchIdPage.tsx b/src/pages/user/SearchIdPage.tsx
index 8256e823..e9551ed6 100644
--- a/src/pages/user/SearchIdPage.tsx
+++ b/src/pages/user/SearchIdPage.tsx
@@ -24,7 +24,7 @@ export default function SearchIdPage() {
 
   return (
     <AuthForm onSubmit={handleSubmit(onSubmit)}>
-      <section className="flex flex-grow flex-col justify-center gap-8">
+      <section className="auth-form-section">
         {/* 이메일 */}
         <ValidationInput
           isButtonInput
@@ -41,7 +41,7 @@ export default function SearchIdPage() {
           register={register('code', STATUS_VALIDATION_RULES.CERTIFICATION())}
         />
 
-        <div className="flex flex-col gap-4 text-center">
+        <div className="centered-flex-col">
           <button type="submit" className="auth-btn" disabled={isSubmitting}>
             아이디 찾기
           </button>
diff --git a/src/pages/user/SearchPasswordPage.tsx b/src/pages/user/SearchPasswordPage.tsx
index 9b57a353..34f6747a 100644
--- a/src/pages/user/SearchPasswordPage.tsx
+++ b/src/pages/user/SearchPasswordPage.tsx
@@ -25,7 +25,7 @@ export default function SearchPasswordPage() {
 
   return (
     <AuthForm onSubmit={handleSubmit(onSubmit)}>
-      <section className="flex flex-grow flex-col justify-center gap-8">
+      <section className="auth-form-section">
         {/* 아이디 */}
         <ValidationInput
           placeholder="아이디"
@@ -49,7 +49,7 @@ export default function SearchPasswordPage() {
           register={register('code', STATUS_VALIDATION_RULES.CERTIFICATION())}
         />
 
-        <div className="flex flex-col gap-4 text-center">
+        <div className="centered-flex-col">
           <button type="submit" className="auth-btn" disabled={isSubmitting}>
             비밀번호 찾기
           </button>
diff --git a/src/pages/user/SignInPage.tsx b/src/pages/user/SignInPage.tsx
index 51499b83..f274eaa8 100644
--- a/src/pages/user/SignInPage.tsx
+++ b/src/pages/user/SignInPage.tsx
@@ -26,7 +26,7 @@ export default function SignInPage() {
 
   return (
     <AuthForm onSubmit={handleSubmit(onSubmit)}>
-      <section className="flex flex-grow flex-col justify-center gap-8">
+      <section className="auth-form-section">
         {/* 이메일(아이디) */}
         <ValidationInput
           placeholder="이메일"
@@ -42,7 +42,7 @@ export default function SignInPage() {
           register={register('password', STATUS_VALIDATION_RULES.PASSWORD())}
         />
 
-        <div className="flex flex-col gap-4 text-center">
+        <div className="centered-flex-col">
           <button type="submit" className="auth-btn" disabled={isSubmitting}>
             로그인
           </button>
@@ -51,7 +51,7 @@ export default function SignInPage() {
         <FooterLinks type="signIn" />
       </section>
 
-      <section className="flex h-1/6 flex-col gap-4 text-center">
+      <section className="flex h-1/6 flex-col gap-8 text-center">
         <button type="button" className="auth-btn bg-kakao" disabled={isSubmitting}>
           <div className="flex h-30 w-81 items-center justify-between">
             <img src={Kakao} alt="Kakao" className="size-15" />
diff --git a/src/pages/user/SignUpPage.tsx b/src/pages/user/SignUpPage.tsx
index 93dc3979..931bba5c 100644
--- a/src/pages/user/SignUpPage.tsx
+++ b/src/pages/user/SignUpPage.tsx
@@ -242,7 +242,7 @@ export default function SignUpPage() {
       </div>
 
       {/* 회원가입 버튼 */}
-      <div className="flex flex-col gap-4 text-center">
+      <div className="centered-flex-col gap-8">
         <button
           type="submit"
           className="flex h-30 items-center justify-center rounded-lg bg-sub px-8 font-bold"