From 3b18cd6b91a2a038785aca9a5b1d9f702ba27a60 Mon Sep 17 00:00:00 2001
From: Hyeona01 <sha0209@dgu.ac.kr>
Date: Mon, 6 Jan 2025 19:03:32 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style:=20=EB=A1=9C=EA=B7=B8?=
 =?UTF-8?q?=EC=9D=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A6=AC=EB=94=94?=
 =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EB=B0=98=EC=98=81=20#145?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Common/Header/B               |  0
 src/components/Signin/SigninInputSection.tsx | 49 +++++++++++---------
 src/pages/Signin/SigninPage.tsx              | 22 +++++----
 3 files changed, 40 insertions(+), 31 deletions(-)
 create mode 100644 src/components/Common/Header/B

diff --git a/src/components/Common/Header/B b/src/components/Common/Header/B
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/Signin/SigninInputSection.tsx b/src/components/Signin/SigninInputSection.tsx
index 0edd48c0..20a7b061 100644
--- 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
index 1aaab24b..541b5eb2 100644
--- 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>
   );
 };