Refactor: #35 인증 페이지 전반적으로 겹치는 스타일링 분리

GU-99 · Jul 20, 2024 · 9f75700 · 9f75700
1 parent 0a9ced4
commit 9f75700
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 26 deletions.
diff --git 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
@@ -12,43 +12,35 @@ 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>
           </>
         );
       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>
           </>
         );
       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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"