🎨 style: 로그인 페이지 리디자인 반영 #145

Team-inglo · Jan 6, 2025 · 3b18cd6 · 3b18cd6
1 parent 4b83fae
commit 3b18cd6
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 31 deletions.
diff --git a/src/components/Common/Header/B b/src/components/Common/Header/B
diff --git a/src/components/Signin/SigninInputSection.tsx b/src/components/Signin/SigninInputSection.tsx
@@ -5,6 +5,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { validateId, validatePassword } from '@/utils/signin';
 import { useSignIn } from '@/hooks/api/useAuth';
 import { useUserInfoforSigninStore } from '@/store/signup';
+import BottomButtonPanel from '../Common/BottomButtonPanel';
 
 const SigninInputSection = () => {
   const navigate = useNavigate();
@@ -57,8 +58,8 @@ const SigninInputSection = () => {
   }, [idValue, passwordValue]);
 
   return (
-    <div className="flex flex-col gap-2">
-      <div className="w-[20.5rem] flex flex-col gap-4">
+    <div className="w-full px-6 flex flex-col gap-2">
+      <div className="flex flex-col gap-4">
         <div>
           <p className="py-2 px-1 text-sm font-normal text-[#171719]">ID</p>
           <Input
@@ -94,28 +95,30 @@ const SigninInputSection = () => {
         </button>
         */}
       </div>
-      <div className="py-6 flex flex-col items-center gap-2">
-        <Button
-          type="large"
-          bgColor={isValid ? 'bg-[#FEF387]' : 'bg-[#F4F4F9]'}
-          fontColor={isValid ? 'text-[#1E1926]' : 'text-[#BDBDBD]'}
-          isBorder={false}
-          title="Sign In"
-          onClick={isValid ? handleSubmit : undefined}
-        />
-        <div className="flex items-center justify-center gap-2">
-          <p className="text-[#7D8A95] text-sm font-normal">
-            Don't have an account?
-          </p>
-          {/* 회원가입 화면 이동 */}
-          <button
-            className="text-[#7872ED] text-sm font-semibold"
-            onClick={() => navigate('/signup')}
-          >
-            Create Account
-          </button>
+      <BottomButtonPanel>
+        <div className="w-full flex flex-col items-center gap-2">
+          <div className="flex items-center justify-center gap-2">
+            <p className="text-[#7D8A95] text-sm font-normal">
+              Don't have an account?
+            </p>
+            {/* 회원가입 화면 이동 */}
+            <button
+              className="text-[#000] text-sm font-semibold"
+              onClick={() => navigate('/signup')}
+            >
+              Create Account
+            </button>
+          </div>
+          <Button
+            type="large"
+            bgColor={isValid ? 'bg-[#000]' : 'bg-[#F4F4F9]'}
+            fontColor={isValid ? 'text-[#FEF387]' : 'text-[#BDBDBD]'}
+            isBorder={false}
+            title="Sign In"
+            onClick={isValid ? handleSubmit : undefined}
+          />
         </div>
-      </div>
+      </BottomButtonPanel>
     </div>
   );
 };

diff --git a/src/pages/Signin/SigninPage.tsx b/src/pages/Signin/SigninPage.tsx
@@ -1,8 +1,8 @@
+import BaseHeader from '@/components/Common/Header/BaseHeader';
 import SigninInputSection from '@/components/Signin/SigninInputSection';
 import { useUserStore } from '@/store/user';
 import { deleteAccessToken, deleteRefreshToken } from '@/utils/auth';
 import { useEffect } from 'react';
-import CloseIcon from '@/assets/icons/CloseIcon.svg?react';
 import { useNavigate } from 'react-router-dom';
 
 const SigninPage = () => {
@@ -19,14 +19,20 @@ const SigninPage = () => {
   }, []);
 
   return (
-    <div className="h-[100vh] flex flex-col justify-center items-center px-7">
-      <CloseIcon
-        onClick={() => navigate('/')}
-        className="fixed top-6 right-6"
+    <div className="h-screen flex flex-col justify-center items-center">
+      <BaseHeader
+        hasBackButton={true}
+        hasMenuButton={false}
+        title="Sign In"
+        onClickBackButton={() => navigate('/')}
       />
-      <div className="text-[#1E1926] text-[1.75rem] font-semibold">Sign In</div>
-      <SigninInputSection />
-      {/* <SigninSocialButtons /> */}
+      <div className="w-full flex-grow flex flex-col">
+        <div className="flex items-start mx-6 my-[3.125rem] h-[5rem] text-[#1E1926] text-[1.75rem] font-semibold">
+          이메일로 로그인
+        </div>
+        <SigninInputSection />
+        {/* <SigninSocialButtons /> */}
+      </div>
     </div>
   );
 };