From fd5734a0a355f18c8f3c3c350f83f332566c897d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=8B=A4=EB=B9=88?= <991012dabin@gmail.com>
Date: Mon, 8 Jan 2024 18:28:29 +0900
Subject: [PATCH 01/29] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A7=88=ED=81=AC=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Login/index.tsx | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 src/pages/Login/index.tsx

diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
new file mode 100644
index 00000000..fd1a5fc8
--- /dev/null
+++ b/src/pages/Login/index.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+const Login = () => {
+  return (
+    <div>
+      <div>
+        {/* <img src="/" alt="사장님 비서ya 로고" /> */}
+        <h1>사장님 비서ya</h1>
+        <h1>통합 로그인</h1>
+      </div>
+      <div>
+        <input
+          type="email"
+          placeholder="이메일 입력"
+        />
+        <input
+          type="password"
+          placeholder="비밀번호 입력"
+        />
+        <button>로그인</button>
+        <a href="/register">회원가입</a>
+      </div>
+    </div>
+  );
+};
+
+export default Login;

From bf3c2dcd44c58a732e72f79d4fafad5c83933ea2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=8B=A4=EB=B9=88?= <991012dabin@gmail.com>
Date: Mon, 8 Jan 2024 18:30:29 +0900
Subject: [PATCH 02/29] =?UTF-8?q?feat:=20=EB=A9=94=EC=9D=B8=20=EB=9D=BC?=
 =?UTF-8?q?=EC=9A=B0=ED=84=B0=EC=97=90=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/MainRouter/index.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/routes/MainRouter/index.tsx b/src/routes/MainRouter/index.tsx
index 2c6ef1c8..ab897a3b 100644
--- a/src/routes/MainRouter/index.tsx
+++ b/src/routes/MainRouter/index.tsx
@@ -1,3 +1,4 @@
+import Login from '@pages/Login';
 import { Route, Routes } from 'react-router-dom';
 import { Layout } from '@components/common';
 
@@ -6,9 +7,7 @@ const MainRouter = () => {
     <Routes>
       <Route
         path="/login"
-        element={
-          <p style={{ fontSize: '1rem' }}>🧃 로그인 페이지 입주 예정 🧃</p>
-        }
+        element={<Login />}
       />
       <Route
         path="/signup"

From 7a67ba265a0f70375dadd28113897b21c67cfc77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=8B=A4=EB=B9=88?= <991012dabin@gmail.com>
Date: Tue, 9 Jan 2024 02:20:36 +0900
Subject: [PATCH 03/29] =?UTF-8?q?feat:=20=ED=9A=8C=EC=9B=90=EA=B0=80?=
 =?UTF-8?q?=EC=9E=85=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A7=88=ED=81=AC?=
 =?UTF-8?q?=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Login/index.tsx         |  2 +-
 src/pages/SignUp/Footer/index.tsx | 16 ++++++++++
 src/pages/SignUp/index.tsx        | 52 +++++++++++++++++++++++++++++++
 3 files changed, 69 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/SignUp/Footer/index.tsx
 create mode 100644 src/pages/SignUp/index.tsx

diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
index fd1a5fc8..190140c1 100644
--- a/src/pages/Login/index.tsx
+++ b/src/pages/Login/index.tsx
@@ -18,7 +18,7 @@ const Login = () => {
           placeholder="비밀번호 입력"
         />
         <button>로그인</button>
-        <a href="/register">회원가입</a>
+        <a href="/signup">회원가입</a>
       </div>
     </div>
   );
diff --git a/src/pages/SignUp/Footer/index.tsx b/src/pages/SignUp/Footer/index.tsx
new file mode 100644
index 00000000..6fac6fd5
--- /dev/null
+++ b/src/pages/SignUp/Footer/index.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+const Footer = () => {
+  return (
+    <div>
+      <p>이용약관</p>
+      <p>개인정보 처리방침</p>
+      <p>
+        (주) 야놀자 Copyright © 2005-2023 Yanolja Co., Ltd. All rights
+        reserved.
+      </p>
+    </div>
+  );
+};
+
+export default Footer;
diff --git a/src/pages/SignUp/index.tsx b/src/pages/SignUp/index.tsx
new file mode 100644
index 00000000..e8151437
--- /dev/null
+++ b/src/pages/SignUp/index.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import Footer from './Footer';
+
+const SignUp = () => {
+  return (
+    <>
+      {/* <img src="/" alt="사장님 비서ya 로고" /> */}
+      <h1>사장님 비서ya</h1>
+      <div>
+        <h2>회원가입</h2>
+        <p>야놀자가 준비한 사장님 비서ya만의 혜택을 받아보세요.</p>
+        <form>
+          <label htmlFor="user_name">사장님 성함</label>
+          <input
+            type="text"
+            id="user_name"
+            // placeholder=''
+            required
+          />
+          <div>
+            <label htmlFor="user_email">이메일</label>
+            <input
+              type="email"
+              id="user_email"
+              placeholder="이메일 입력"
+              required
+            />
+            <button>중복확인</button>
+          </div>
+          <label htmlFor="user_password">비밀번호</label>
+          <input
+            type="password"
+            id="user_password"
+            placeholder="8-20자, 영문/숫자/특수문자 조합"
+            required
+          />
+          <label htmlFor="user_password_confirm">비밀번호 확인</label>
+          <input
+            type="password"
+            id="user_password_confirm"
+            placeholder="다시 한번 입력해주세요."
+            required
+          />
+          <button>회원가입</button>
+        </form>
+      </div>
+      <Footer />
+    </>
+  );
+};
+
+export default SignUp;

From b944c23698bfd40e1d694a0bcafc89a12cf7fb1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=8B=A4=EB=B9=88?= <991012dabin@gmail.com>
Date: Tue, 9 Jan 2024 02:21:12 +0900
Subject: [PATCH 04/29] =?UTF-8?q?feat:=20=EB=A9=94=EC=9D=B8=20=EB=9D=BC?=
 =?UTF-8?q?=EC=9A=B0=ED=84=B0=EC=97=90=20=ED=9A=8C=EC=9B=90=EA=B0=80?=
 =?UTF-8?q?=EC=9E=85=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/MainRouter/index.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/routes/MainRouter/index.tsx b/src/routes/MainRouter/index.tsx
index ab897a3b..94d37b91 100644
--- a/src/routes/MainRouter/index.tsx
+++ b/src/routes/MainRouter/index.tsx
@@ -1,4 +1,5 @@
 import Login from '@pages/Login';
+import SignUp from '@pages/SignUp';
 import { Route, Routes } from 'react-router-dom';
 import { Layout } from '@components/common';
 
@@ -11,9 +12,7 @@ const MainRouter = () => {
       />
       <Route
         path="/signup"
-        element={
-          <p style={{ fontSize: '1rem' }}>🧃 회원가입 페이지 입주 예정 🧃</p>
-        }
+        element={<SignUp />}
       />
       <Route element={<Layout />}>
         <Route

From b08c3ccd05ad4063c5a6e5b441536c983a9e81b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=8B=A4=EB=B9=88?= <991012dabin@gmail.com>
Date: Tue, 9 Jan 2024 23:52:45 +0900
Subject: [PATCH 05/29] =?UTF-8?q?design:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=94=94=EC=9E=90=EC=9D=B8=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc.cjs             |   3 +-
 src/pages/Login/index.tsx | 163 +++++++++++++++++++++++++++++++++-----
 2 files changed, 145 insertions(+), 21 deletions(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index da9fec22..f98224e3 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -14,6 +14,7 @@ module.exports = {
     'react-refresh/only-export-components': [
       'warn',
       { allowConstantExport: true }
-    ]
+    ],
+    '@typescript-eslint/no-unused-vars': 0
   }
 };
diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
index 190140c1..e30a3694 100644
--- a/src/pages/Login/index.tsx
+++ b/src/pages/Login/index.tsx
@@ -1,27 +1,150 @@
-import React from 'react';
+import React, { useState } from 'react';
+import styled from '@emotion/styled';
 
 const Login = () => {
+  // HACK: 유효성 검사 기능 구현 후 유효성 메세지 노출 여부 결정
+  const [isInvalid, setIsInvalid] = useState(true);
   return (
-    <div>
-      <div>
-        {/* <img src="/" alt="사장님 비서ya 로고" /> */}
-        <h1>사장님 비서ya</h1>
-        <h1>통합 로그인</h1>
-      </div>
-      <div>
-        <input
-          type="email"
-          placeholder="이메일 입력"
-        />
-        <input
-          type="password"
-          placeholder="비밀번호 입력"
-        />
-        <button>로그인</button>
-        <a href="/signup">회원가입</a>
-      </div>
-    </div>
+    <>
+      <Container>
+        <TitleWrapper>
+          {/* HACK: 지훈님 레이아웃 pull받아서 로고 이미지로 변경 예정 */}
+          <Title>사장님 비서ya</Title>
+          <Title>통합 로그인</Title>
+        </TitleWrapper>
+        <form>
+          <Inputs $isInvalid={isInvalid}>
+            <Input
+              type="email"
+              placeholder="이메일 입력"
+            />
+            <Input
+              type="password"
+              placeholder="비밀번호 입력"
+            />
+          </Inputs>
+          {isInvalid && (
+            <ValidationText>
+              <ValidationBoldText>아이디</ValidationBoldText>를 입력해 주세요
+            </ValidationText>
+          )}
+          <Buttons $isInvalid={isInvalid}>
+            <LoginButton $type="login">로그인</LoginButton>
+            <SignUpButton $type="signUp">회원가입</SignUpButton>
+          </Buttons>
+        </form>
+      </Container>
+      {/* HACK: 모달 제작 후 오류 메세지 표시 예정 */}
+    </>
   );
 };
 
 export default Login;
+
+const Container = styled.div`
+  max-width: 524px;
+
+  margin: 175px auto 0;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 65px;
+`;
+
+const TitleWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 11px;
+
+  text-align: center;
+`;
+
+const Title = styled.h1`
+  color: #1a2849;
+  font-size: 44.374px;
+  font-weight: 900;
+  line-height: 51.769px;
+`;
+
+const Inputs = styled.div<{ $isInvalid: boolean }>`
+  margin-bottom: ${props => (props.$isInvalid ? '10px' : '65px')};
+
+  display: flex;
+  flex-direction: column;
+  gap: 19px;
+`;
+
+const Input = styled.input`
+  width: 524px;
+
+  border-radius: 16px;
+  border: 2px solid #757676;
+  padding: 23px 20px;
+
+  display: flex;
+  align-items: center;
+
+  color: #1a2849;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 32px;
+
+  ::placeholder {
+    color: #979c9e;
+    font-size: 18px;
+    font-weight: 500;
+    line-height: 32px;
+  }
+
+  :focus {
+    outline: none;
+    border: 5px solid #1a2849;
+  }
+`;
+
+const ValidationText = styled.p`
+  padding-left: 12px;
+
+  color: #da1e28;
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 32px;
+`;
+
+const ValidationBoldText = styled.span`
+  font-weight: 700;
+`;
+
+const Buttons = styled.div<{ $isInvalid: boolean }>`
+  margin-top: ${props => (props.$isInvalid ? '23px' : 0)};
+
+  display: flex;
+  flex-direction: column;
+  gap: 13px;
+`;
+
+const LoginButton = styled.button<{ $type: string }>`
+  min-width: 524px;
+
+  border: none;
+  border-radius: 16px;
+  padding: 23px 0;
+
+  color: #fff;
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 32px;
+
+  background: ${props =>
+    props.$type === 'login'
+      ? '#1A2849'
+      : 'linear-gradient(91deg, #FF3478 1.39%, #FF83AD 98.63%)'};
+
+  :hover {
+    cursor: pointer;
+  }
+`;
+
+const SignUpButton = styled(LoginButton)<{ $type: string }>``;

From 4ad8ba6488437e720659a51eab6b47ef4fa241af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=8B=A4=EB=B9=88?= <991012dabin@gmail.com>
Date: Wed, 10 Jan 2024 00:18:23 +0900
Subject: [PATCH 06/29] =?UTF-8?q?move:=20Footer=20=ED=8F=B4=EB=8D=94=20?=
 =?UTF-8?q?=EC=9C=84=EC=B9=98=20pages=20->=20components=20=ED=8F=B4?=
 =?UTF-8?q?=EB=8D=94=20=ED=95=98=EC=9C=84=EB=A1=9C=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/{pages/SignUp => components/common}/Footer/index.tsx | 0
 src/components/common/index.tsx                          | 1 +
 src/pages/SignUp/index.tsx                               | 2 +-
 3 files changed, 2 insertions(+), 1 deletion(-)
 rename src/{pages/SignUp => components/common}/Footer/index.tsx (100%)

diff --git a/src/pages/SignUp/Footer/index.tsx b/src/components/common/Footer/index.tsx
similarity index 100%
rename from src/pages/SignUp/Footer/index.tsx
rename to src/components/common/Footer/index.tsx
diff --git a/src/components/common/index.tsx b/src/components/common/index.tsx
index 6c48faec..21773a97 100644
--- a/src/components/common/index.tsx
+++ b/src/components/common/index.tsx
@@ -1 +1,2 @@
 export { default as Layout } from './Layout';
+export { default as Footer } from './Footer';
diff --git a/src/pages/SignUp/index.tsx b/src/pages/SignUp/index.tsx
index e8151437..c246674a 100644
--- a/src/pages/SignUp/index.tsx
+++ b/src/pages/SignUp/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import Footer from './Footer';
+import { Footer } from '@components/common';
 
 const SignUp = () => {
   return (

From d0c3805ee57a7d6117710e81b09dacf523435d57 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=8B=A4=EB=B9=88?= <991012dabin@gmail.com>
Date: Wed, 10 Jan 2024 00:35:19 +0900
Subject: [PATCH 07/29] =?UTF-8?q?design:=20Footer=20=EB=94=94=EC=9E=90?=
 =?UTF-8?q?=EC=9D=B8=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Footer/index.tsx | 53 +++++++++++++++++++++++---
 1 file changed, 47 insertions(+), 6 deletions(-)

diff --git a/src/components/common/Footer/index.tsx b/src/components/common/Footer/index.tsx
index 6fac6fd5..673361f5 100644
--- a/src/components/common/Footer/index.tsx
+++ b/src/components/common/Footer/index.tsx
@@ -1,16 +1,57 @@
 import React from 'react';
+import styled from '@emotion/styled';
 
 const Footer = () => {
   return (
-    <div>
-      <p>이용약관</p>
-      <p>개인정보 처리방침</p>
-      <p>
+    <Container>
+      <Policy>
+        <Text>이용약관</Text>
+        <Text>|</Text>
+        <BoldText>개인정보 처리방침</BoldText>
+      </Policy>
+      <Copyright>
         (주) 야놀자 Copyright © 2005-2023 Yanolja Co., Ltd. All rights
         reserved.
-      </p>
-    </div>
+      </Copyright>
+    </Container>
   );
 };
 
 export default Footer;
+
+const Container = styled.div`
+  margin: 32px auto;
+
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+`;
+
+const Policy = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 7px;
+`;
+
+const Text = styled.p`
+  color: #404446;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+`;
+
+const BoldText = styled.p`
+  color: #404446;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+`;
+
+const Copyright = styled.p`
+  color: #e3e5e5;
+  font-size: 10px;
+  font-weight: 400;
+  line-height: 15px;
+  text-align: center;
+`;

From 3ddef8ebb38f624c1fe0e84116dee6389c55e99d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=8B=A4=EB=B9=88?= <991012dabin@gmail.com>
Date: Wed, 10 Jan 2024 03:32:34 +0900
Subject: [PATCH 08/29] =?UTF-8?q?design:=20=ED=9A=8C=EC=9B=90=EA=B0=80?=
 =?UTF-8?q?=EC=9E=85=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=94=94=EC=9E=90?=
 =?UTF-8?q?=EC=9D=B8=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/SignUp/index.tsx | 285 ++++++++++++++++++++++++++++++++-----
 1 file changed, 246 insertions(+), 39 deletions(-)

diff --git a/src/pages/SignUp/index.tsx b/src/pages/SignUp/index.tsx
index c246674a..cc7b79fe 100644
--- a/src/pages/SignUp/index.tsx
+++ b/src/pages/SignUp/index.tsx
@@ -1,52 +1,259 @@
-import React from 'react';
+import React, { useState } from 'react';
+import styled from '@emotion/styled';
+
+import { toRem } from '@utils/index';
+import logo from '@assets/icons/ic-logo.svg';
 import { Footer } from '@components/common';
 
 const SignUp = () => {
+  // TODO: react-hook-form 사용해서 유효성 검사 예정
+  const [isInvalid, setIsInvalid] = useState(true);
+  const [isEmailValidationVisible, setIsEmailValidationVisible] =
+    useState(true);
+
+  // 버튼 disabled 처리하기 위한 state
+  // TODO: 변수명이 길어서 가독성이 떨어지는 것같아 더 좋은 이름이 있다면 추천 부탁드려요
+  const [isEmailValidationButtonDisabled, setIsEmailValidationButtonDisabled] =
+    useState(true);
+  const [isSubmitButtonDisabled, setIsSubmitButtonDisabled] = useState(true);
   return (
     <>
-      {/* <img src="/" alt="사장님 비서ya 로고" /> */}
-      <h1>사장님 비서ya</h1>
-      <div>
-        <h2>회원가입</h2>
-        <p>야놀자가 준비한 사장님 비서ya만의 혜택을 받아보세요.</p>
-        <form>
-          <label htmlFor="user_name">사장님 성함</label>
-          <input
-            type="text"
-            id="user_name"
-            // placeholder=''
-            required
-          />
-          <div>
-            <label htmlFor="user_email">이메일</label>
-            <input
-              type="email"
-              id="user_email"
-              placeholder="이메일 입력"
+      <LogoIcon
+        src={logo}
+        alt="사장님 비서ya"
+      />
+      <Container>
+        <TitleWrapper>
+          <Title>회원가입</Title>
+          <Description>
+            야놀자가 준비한 사장님 비서ya만의 혜택을 받아보세요.
+          </Description>
+        </TitleWrapper>
+        <Form>
+          <InputLabelWrapper>
+            <Label htmlFor="user_name">이름</Label>
+            <Input
+              type="text"
+              id="user_name"
+              placeholder="이름 입력"
               required
             />
-            <button>중복확인</button>
-          </div>
-          <label htmlFor="user_password">비밀번호</label>
-          <input
-            type="password"
-            id="user_password"
-            placeholder="8-20자, 영문/숫자/특수문자 조합"
-            required
-          />
-          <label htmlFor="user_password_confirm">비밀번호 확인</label>
-          <input
-            type="password"
-            id="user_password_confirm"
-            placeholder="다시 한번 입력해주세요."
-            required
-          />
-          <button>회원가입</button>
-        </form>
-      </div>
+            {isInvalid && (
+              <ValidationText $isInvalid={isInvalid}>
+                이름을 입력해 주세요.
+              </ValidationText>
+            )}
+          </InputLabelWrapper>
+          <Divider />
+          <InputLabelWrapper>
+            <Label htmlFor="user_email">이메일</Label>
+            <EmailInputWrapper>
+              <EmailInput
+                type="email"
+                id="user_email"
+                placeholder="이메일 입력"
+                required
+              />
+              <EmailValidationButton
+                $isDisabled={isEmailValidationButtonDisabled}
+              >
+                중복확인
+              </EmailValidationButton>
+            </EmailInputWrapper>
+            {isEmailValidationVisible && (
+              <ValidationText $isInvalid={!isInvalid}>
+                사용 가능한 아이디입니다.
+              </ValidationText>
+            )}
+          </InputLabelWrapper>
+          <InputLabelWrapper>
+            <Label htmlFor="user_password">비밀번호</Label>
+            <Input
+              type="password"
+              id="user_password"
+              placeholder="8-20자, 영문/숫자/특수문자 조합"
+              required
+            />
+            {isInvalid && (
+              <ValidationText $isInvalid={isInvalid}>
+                비밀번호 형식이 아닙니다.
+              </ValidationText>
+            )}
+          </InputLabelWrapper>
+          <InputLabelWrapper>
+            <Label htmlFor="user_password_confirm">비밀번호 확인</Label>
+            <Input
+              type="password"
+              id="user_password_confirm"
+              placeholder="다시 한번 입력해주세요."
+              required
+            />
+            {isInvalid && (
+              <ValidationText $isInvalid={isInvalid}>
+                비밀번호가 일치하지 않습니다.
+              </ValidationText>
+            )}
+          </InputLabelWrapper>
+          <SubmitButton $isDisabled={isSubmitButtonDisabled}>
+            회원가입
+          </SubmitButton>
+        </Form>
+      </Container>
       <Footer />
     </>
   );
 };
 
 export default SignUp;
+
+const SubmitButton = styled.button<{ $isDisabled: boolean }>`
+  min-width: ${toRem(524)};
+  height: ${toRem(78)};
+
+  border: none;
+  border-radius: ${toRem(16)};
+  padding: ${toRem(23)} auto;
+
+  color: #fff;
+  font-size: ${toRem(22)};
+  font-weight: 700;
+  line-height: ${toRem(32)};
+
+  background: ${props => (props.$isDisabled ? '#C1C1C1' : '#1A2849')};
+
+  :hover {
+    cursor: pointer;
+  }
+`;
+const LogoIcon = styled.img`
+  width: ${toRem(172.8)};
+  height: ${toRem(36)};
+
+  margin-top: ${toRem(48)};
+  margin-left: ${toRem(57)};
+`;
+
+const Container = styled.div`
+  max-width: ${toRem(524)};
+
+  display: flex;
+  flex-direction: column;
+
+  margin: ${toRem(67)} auto ${toRem(141)};
+`;
+
+const TitleWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+`;
+
+const Title = styled.h1`
+  color: #202325;
+  font-size: ${toRem(26)};
+  font-weight: 700;
+  line-height: ${toRem(31)};
+  letter-spacing: ${toRem(-0.78)};
+`;
+
+const Description = styled.p`
+  color: #979c9e;
+  font-size: ${toRem(18)};
+  font-weight: 500;
+  line-height: ${toRem(32)};
+`;
+
+const InputLabelWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const Form = styled.form`
+  margin-top: ${toRem(26)};
+
+  div:nth-child(1) {
+    margin-bottom: ${toRem(16)};
+  }
+  hr:nth-child(2) {
+    margin-bottom: ${toRem(7)};
+  }
+  div:nth-child(3) {
+    margin-bottom: ${toRem(47)};
+  }
+  div:nth-child(4) {
+    margin-bottom: ${toRem(8)};
+  }
+  div:nth-child(5) {
+    margin-bottom: ${toRem(30)};
+  }
+`;
+
+const Divider = styled.hr`
+  width: ${toRem(525)};
+
+  margin: 0;
+  border: ${toRem(0.25)} solid #c7c7c7;
+`;
+
+const Label = styled.label`
+  margin-bottom: ${toRem(10)};
+
+  color: #757676;
+  font-size: ${toRem(18)};
+  font-weight: 700;
+  line-height: ${toRem(32)};
+`;
+
+const Input = styled.input`
+  width: ${toRem(524)};
+  height: ${toRem(79)};
+
+  border-radius: ${toRem(16)};
+  border: ${toRem(2)} solid #757676;
+  padding: ${toRem(23)} ${toRem(20)};
+
+  display: flex;
+  align-items: center;
+
+  color: #1a2849;
+  font-size: ${toRem(18)};
+  font-weight: 500;
+  line-height: ${toRem(32)};
+
+  ::placeholder {
+    color: #979c9e;
+    font-size: ${toRem(18)};
+    font-weight: 500;
+    line-height: ${toRem(32)};
+  }
+
+  :focus {
+    outline: none;
+    border: ${toRem(5)} solid #1a2849;
+  }
+`;
+
+const EmailInputWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+
+const EmailInput = styled(Input)`
+  width: ${toRem(358)};
+`;
+
+const EmailValidationButton = styled(SubmitButton)`
+  min-width: ${toRem(152)};
+`;
+
+const ValidationText = styled.p<{ $isInvalid: boolean }>`
+  margin-top: ${toRem(2)};
+  margin-left: ${toRem(12)};
+
+  color: ${props => (props.$isInvalid ? '#DA1E28' : '#1a2849')};
+  font-size: ${toRem(15)};
+  font-weight: 700;
+  line-height: ${toRem(32)};
+`;

From 7c978ddccfe0b4da6cd366fb441d7e1992a6061c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=8B=A4=EB=B9=88?= <991012dabin@gmail.com>
Date: Wed, 10 Jan 2024 03:45:28 +0900
Subject: [PATCH 09/29] =?UTF-8?q?modify:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=AA=A8=EB=93=A0=20px=EC=97=90?=
 =?UTF-8?q?=20toRem=20=ED=95=A8=EC=88=98=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Login/index.tsx | 57 ++++++++++++++++++++-------------------
 1 file changed, 30 insertions(+), 27 deletions(-)

diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
index e30a3694..08a33aad 100644
--- a/src/pages/Login/index.tsx
+++ b/src/pages/Login/index.tsx
@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import styled from '@emotion/styled';
 
+import { toRem } from '@utils/index';
+
 const Login = () => {
   // HACK: 유효성 검사 기능 구현 후 유효성 메세지 노출 여부 결정
   const [isInvalid, setIsInvalid] = useState(true);
@@ -42,75 +44,76 @@ const Login = () => {
 export default Login;
 
 const Container = styled.div`
-  max-width: 524px;
+  max-width: ${toRem(524)};
 
-  margin: 175px auto 0;
+  margin: ${toRem(175)} auto 0;
 
   display: flex;
   flex-direction: column;
   justify-content: center;
-  gap: 65px;
+  gap: ${toRem(65)};
 `;
 
 const TitleWrapper = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
-  gap: 11px;
+  gap: ${toRem(11)};
 
   text-align: center;
 `;
 
 const Title = styled.h1`
   color: #1a2849;
-  font-size: 44.374px;
+  font-size: ${toRem(44.374)};
   font-weight: 900;
-  line-height: 51.769px;
+  line-height: ${toRem(51.769)};
 `;
 
 const Inputs = styled.div<{ $isInvalid: boolean }>`
-  margin-bottom: ${props => (props.$isInvalid ? '10px' : '65px')};
+  margin-bottom: ${props =>
+    props.$isInvalid ? '${toRem(10)}' : '${toRem(65)}'};
 
   display: flex;
   flex-direction: column;
-  gap: 19px;
+  gap: ${toRem(19)};
 `;
 
 const Input = styled.input`
-  width: 524px;
+  width: ${toRem(524)};
 
-  border-radius: 16px;
-  border: 2px solid #757676;
-  padding: 23px 20px;
+  border-radius: ${toRem(16)};
+  border: ${toRem(2)} solid #757676;
+  padding: ${toRem(23)} ${toRem(20)};
 
   display: flex;
   align-items: center;
 
   color: #1a2849;
-  font-size: 18px;
+  font-size: ${toRem(18)};
   font-weight: 500;
-  line-height: 32px;
+  line-height: ${toRem(32)};
 
   ::placeholder {
     color: #979c9e;
-    font-size: 18px;
+    font-size: ${toRem(18)};
     font-weight: 500;
-    line-height: 32px;
+    line-height: ${toRem(32)};
   }
 
   :focus {
     outline: none;
-    border: 5px solid #1a2849;
+    border: ${toRem(5)} solid #1a2849;
   }
 `;
 
 const ValidationText = styled.p`
-  padding-left: 12px;
+  padding-left: ${toRem(12)};
 
   color: #da1e28;
-  font-size: 15px;
+  font-size: ${toRem(15)};
   font-weight: 500;
-  line-height: 32px;
+  line-height: ${toRem(32)};
 `;
 
 const ValidationBoldText = styled.span`
@@ -118,24 +121,24 @@ const ValidationBoldText = styled.span`
 `;
 
 const Buttons = styled.div<{ $isInvalid: boolean }>`
-  margin-top: ${props => (props.$isInvalid ? '23px' : 0)};
+  margin-top: ${props => (props.$isInvalid ? '${toRem(23)}' : 0)};
 
   display: flex;
   flex-direction: column;
-  gap: 13px;
+  gap: ${toRem(13)};
 `;
 
 const LoginButton = styled.button<{ $type: string }>`
-  min-width: 524px;
+  min-width: ${toRem(524)};
 
   border: none;
-  border-radius: 16px;
-  padding: 23px 0;
+  border-radius: ${toRem(16)};
+  padding: ${toRem(23)} 0;
 
   color: #fff;
-  font-size: 22px;
+  font-size: ${toRem(22)};
   font-weight: 700;
-  line-height: 32px;
+  line-height: ${toRem(32)};
 
   background: ${props =>
     props.$type === 'login'

From f3a8476b00b7e0494d3b01f15d1991d122568a2e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=8B=A4=EB=B9=88?= <991012dabin@gmail.com>
Date: Wed, 10 Jan 2024 03:55:13 +0900
Subject: [PATCH 10/29] =?UTF-8?q?modify:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A1=9C=EA=B3=A0=20=ED=85=8D?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20->=20=EC=9D=B4=EB=AF=B8=EC=A7=80=EB=A1=9C?=
 =?UTF-8?q?=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Login/index.tsx  | 13 +++++++++++--
 src/pages/SignUp/index.tsx |  1 +
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
index 08a33aad..a6a6de3b 100644
--- a/src/pages/Login/index.tsx
+++ b/src/pages/Login/index.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import styled from '@emotion/styled';
 
 import { toRem } from '@utils/index';
+import logo from '@assets/icons/ic-logo.svg';
 
 const Login = () => {
   // HACK: 유효성 검사 기능 구현 후 유효성 메세지 노출 여부 결정
@@ -10,8 +11,10 @@ const Login = () => {
     <>
       <Container>
         <TitleWrapper>
-          {/* HACK: 지훈님 레이아웃 pull받아서 로고 이미지로 변경 예정 */}
-          <Title>사장님 비서ya</Title>
+          <LogoIcon
+            src={logo}
+            alt="사장님 비서ya"
+          />
           <Title>통합 로그인</Title>
         </TitleWrapper>
         <form>
@@ -54,10 +57,16 @@ const Container = styled.div`
   gap: ${toRem(65)};
 `;
 
+const LogoIcon = styled.img`
+  width: ${toRem(288)};
+  height: ${toRem(60)};
+`;
+
 const TitleWrapper = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
+  align-items: center;
   gap: ${toRem(11)};
 
   text-align: center;
diff --git a/src/pages/SignUp/index.tsx b/src/pages/SignUp/index.tsx
index cc7b79fe..5678035a 100644
--- a/src/pages/SignUp/index.tsx
+++ b/src/pages/SignUp/index.tsx
@@ -125,6 +125,7 @@ const SubmitButton = styled.button<{ $isDisabled: boolean }>`
     cursor: pointer;
   }
 `;
+
 const LogoIcon = styled.img`
   width: ${toRem(172.8)};
   height: ${toRem(36)};

From 6689bbd63d905eeb6a1ce0aef84ed02c75fbc7c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=8B=A4=EB=B9=88?= <991012dabin@gmail.com>
Date: Thu, 11 Jan 2024 17:41:34 +0900
Subject: [PATCH 11/29] =?UTF-8?q?design:=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=EB=B0=B0=EA=B2=BD=EC=83=89=EC=9D=84=20=ED=9D=B0?=
 =?UTF-8?q?=EC=83=89=EC=9C=BC=EB=A1=9C=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Login/index.tsx  | 17 +++++++++++++++--
 src/pages/SignUp/index.tsx | 17 +++++++++++++++--
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
index a6a6de3b..878feb70 100644
--- a/src/pages/Login/index.tsx
+++ b/src/pages/Login/index.tsx
@@ -8,7 +8,7 @@ const Login = () => {
   // HACK: 유효성 검사 기능 구현 후 유효성 메세지 노출 여부 결정
   const [isInvalid, setIsInvalid] = useState(true);
   return (
-    <>
+    <WhiteBackground>
       <Container>
         <TitleWrapper>
           <LogoIcon
@@ -40,12 +40,25 @@ const Login = () => {
         </form>
       </Container>
       {/* HACK: 모달 제작 후 오류 메세지 표시 예정 */}
-    </>
+    </WhiteBackground>
   );
 };
 
 export default Login;
 
+const WhiteBackground = styled.div`
+  position: relative;
+
+  width: 100%;
+  height: 100%;
+  min-height: 100vh;
+
+  display: flex;
+  flex-direction: column;
+
+  background-color: #fff;
+`;
+
 const Container = styled.div`
   max-width: ${toRem(524)};
 
diff --git a/src/pages/SignUp/index.tsx b/src/pages/SignUp/index.tsx
index 5678035a..89f011e7 100644
--- a/src/pages/SignUp/index.tsx
+++ b/src/pages/SignUp/index.tsx
@@ -17,7 +17,7 @@ const SignUp = () => {
     useState(true);
   const [isSubmitButtonDisabled, setIsSubmitButtonDisabled] = useState(true);
   return (
-    <>
+    <WhiteBackground>
       <LogoIcon
         src={logo}
         alt="사장님 비서ya"
@@ -100,7 +100,7 @@ const SignUp = () => {
         </Form>
       </Container>
       <Footer />
-    </>
+    </WhiteBackground>
   );
 };
 
@@ -126,6 +126,19 @@ const SubmitButton = styled.button<{ $isDisabled: boolean }>`
   }
 `;
 
+const WhiteBackground = styled.div`
+  position: relative;
+
+  width: 100%;
+  height: 100%;
+  min-height: 100vh;
+
+  display: flex;
+  flex-direction: column;
+
+  background-color: #fff;
+`;
+
 const LogoIcon = styled.img`
   width: ${toRem(172.8)};
   height: ${toRem(36)};

From 85b762b50262f26b0eadde04bfcf0cbeb4a0cbd5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=8B=A4=EB=B9=88?= <991012dabin@gmail.com>
Date: Thu, 11 Jan 2024 17:45:34 +0900
Subject: [PATCH 12/29] =?UTF-8?q?design:=20Footer=20=EB=86=92=EC=9D=B4=20?=
 =?UTF-8?q?=EC=A7=80=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Footer/index.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/common/Footer/index.tsx b/src/components/common/Footer/index.tsx
index 673361f5..7d66a30a 100644
--- a/src/components/common/Footer/index.tsx
+++ b/src/components/common/Footer/index.tsx
@@ -20,10 +20,15 @@ const Footer = () => {
 export default Footer;
 
 const Container = styled.div`
-  margin: 32px auto;
+  position: relative;
+  bottom: 0;
+
+  height: 100px;
 
   display: flex;
   flex-direction: column;
+  justify-content: center;
+  align-items: center;
   gap: 7px;
 `;
 

From 7d39e884f01e4ee9a8f73650cb8d7b9418de9485 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=8B=A4=EB=B9=88?= <991012dabin@gmail.com>
Date: Thu, 11 Jan 2024 19:22:22 +0900
Subject: [PATCH 13/29] =?UTF-8?q?design:=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=EC=97=90=20=ED=91=B8=ED=84=B0=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Login/index.tsx  |  69 +++++++------
 src/pages/SignUp/index.tsx | 199 +++++++++++++++++++++----------------
 2 files changed, 153 insertions(+), 115 deletions(-)

diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
index 878feb70..846241d4 100644
--- a/src/pages/Login/index.tsx
+++ b/src/pages/Login/index.tsx
@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 
 import { toRem } from '@utils/index';
 import logo from '@assets/icons/ic-logo.svg';
+import { Footer } from '@components/common';
 
 const Login = () => {
   // HACK: 유효성 검사 기능 구현 후 유효성 메세지 노출 여부 결정
@@ -10,35 +11,38 @@ const Login = () => {
   return (
     <WhiteBackground>
       <Container>
-        <TitleWrapper>
-          <LogoIcon
-            src={logo}
-            alt="사장님 비서ya"
-          />
-          <Title>통합 로그인</Title>
-        </TitleWrapper>
-        <form>
-          <Inputs $isInvalid={isInvalid}>
-            <Input
-              type="email"
-              placeholder="이메일 입력"
+        <Content>
+          <TitleWrapper>
+            <LogoIcon
+              src={logo}
+              alt="사장님 비서ya"
             />
-            <Input
-              type="password"
-              placeholder="비밀번호 입력"
-            />
-          </Inputs>
-          {isInvalid && (
-            <ValidationText>
-              <ValidationBoldText>아이디</ValidationBoldText>를 입력해 주세요
-            </ValidationText>
-          )}
-          <Buttons $isInvalid={isInvalid}>
-            <LoginButton $type="login">로그인</LoginButton>
-            <SignUpButton $type="signUp">회원가입</SignUpButton>
-          </Buttons>
-        </form>
+            <Title>통합 로그인</Title>
+          </TitleWrapper>
+          <form>
+            <Inputs $isInvalid={isInvalid}>
+              <Input
+                type="email"
+                placeholder="이메일 입력"
+              />
+              <Input
+                type="password"
+                placeholder="비밀번호 입력"
+              />
+            </Inputs>
+            {isInvalid && (
+              <ValidationText>
+                <ValidationBoldText>아이디</ValidationBoldText>를 입력해 주세요
+              </ValidationText>
+            )}
+            <Buttons $isInvalid={isInvalid}>
+              <LoginButton $type="login">로그인</LoginButton>
+              <SignUpButton $type="signUp">회원가입</SignUpButton>
+            </Buttons>
+          </form>
+        </Content>
       </Container>
+      <Footer />
       {/* HACK: 모달 제작 후 오류 메세지 표시 예정 */}
     </WhiteBackground>
   );
@@ -55,14 +59,23 @@ const WhiteBackground = styled.div`
 
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
 
   background-color: #fff;
 `;
 
 const Container = styled.div`
   max-width: ${toRem(524)};
+  height: calc(100% - 100px);
+
+  margin: auto;
+`;
+
+const Content = styled.div`
+  width: 100%;
+  height: 100%;
 
-  margin: ${toRem(175)} auto 0;
+  margin: 50px auto;
 
   display: flex;
   flex-direction: column;
diff --git a/src/pages/SignUp/index.tsx b/src/pages/SignUp/index.tsx
index 89f011e7..11150ec7 100644
--- a/src/pages/SignUp/index.tsx
+++ b/src/pages/SignUp/index.tsx
@@ -7,9 +7,9 @@ import { Footer } from '@components/common';
 
 const SignUp = () => {
   // TODO: react-hook-form 사용해서 유효성 검사 예정
-  const [isInvalid, setIsInvalid] = useState(true);
+  const [isInvalid, setIsInvalid] = useState(false);
   const [isEmailValidationVisible, setIsEmailValidationVisible] =
-    useState(true);
+    useState(false);
 
   // 버튼 disabled 처리하기 위한 state
   // TODO: 변수명이 길어서 가독성이 떨어지는 것같아 더 좋은 이름이 있다면 추천 부탁드려요
@@ -18,87 +18,93 @@ const SignUp = () => {
   const [isSubmitButtonDisabled, setIsSubmitButtonDisabled] = useState(true);
   return (
     <WhiteBackground>
-      <LogoIcon
-        src={logo}
-        alt="사장님 비서ya"
-      />
-      <Container>
-        <TitleWrapper>
-          <Title>회원가입</Title>
-          <Description>
-            야놀자가 준비한 사장님 비서ya만의 혜택을 받아보세요.
-          </Description>
-        </TitleWrapper>
-        <Form>
-          <InputLabelWrapper>
-            <Label htmlFor="user_name">이름</Label>
-            <Input
-              type="text"
-              id="user_name"
-              placeholder="이름 입력"
-              required
-            />
-            {isInvalid && (
-              <ValidationText $isInvalid={isInvalid}>
-                이름을 입력해 주세요.
-              </ValidationText>
-            )}
-          </InputLabelWrapper>
-          <Divider />
-          <InputLabelWrapper>
-            <Label htmlFor="user_email">이메일</Label>
-            <EmailInputWrapper>
-              <EmailInput
-                type="email"
-                id="user_email"
-                placeholder="이메일 입력"
-                required
-              />
-              <EmailValidationButton
-                $isDisabled={isEmailValidationButtonDisabled}
-              >
-                중복확인
-              </EmailValidationButton>
-            </EmailInputWrapper>
-            {isEmailValidationVisible && (
-              <ValidationText $isInvalid={!isInvalid}>
-                사용 가능한 아이디입니다.
-              </ValidationText>
-            )}
-          </InputLabelWrapper>
-          <InputLabelWrapper>
-            <Label htmlFor="user_password">비밀번호</Label>
-            <Input
-              type="password"
-              id="user_password"
-              placeholder="8-20자, 영문/숫자/특수문자 조합"
-              required
-            />
-            {isInvalid && (
-              <ValidationText $isInvalid={isInvalid}>
-                비밀번호 형식이 아닙니다.
-              </ValidationText>
-            )}
-          </InputLabelWrapper>
-          <InputLabelWrapper>
-            <Label htmlFor="user_password_confirm">비밀번호 확인</Label>
-            <Input
-              type="password"
-              id="user_password_confirm"
-              placeholder="다시 한번 입력해주세요."
-              required
-            />
-            {isInvalid && (
-              <ValidationText $isInvalid={isInvalid}>
-                비밀번호가 일치하지 않습니다.
-              </ValidationText>
-            )}
-          </InputLabelWrapper>
-          <SubmitButton $isDisabled={isSubmitButtonDisabled}>
-            회원가입
-          </SubmitButton>
-        </Form>
-      </Container>
+      <WithoutFooterSection>
+        <Logo>
+          <LogoIcon
+            src={logo}
+            alt="사장님 비서ya"
+          />
+        </Logo>
+        <Container>
+          <Content>
+            <TitleWrapper>
+              <Title>회원가입</Title>
+              <Description>
+                야놀자가 준비한 사장님 비서ya만의 혜택을 받아보세요.
+              </Description>
+            </TitleWrapper>
+            <Form>
+              <InputLabelWrapper>
+                <Label htmlFor="user_name">이름</Label>
+                <Input
+                  type="text"
+                  id="user_name"
+                  placeholder="이름 입력"
+                  required
+                />
+                {isInvalid && (
+                  <ValidationText $isInvalid={isInvalid}>
+                    이름을 입력해 주세요.
+                  </ValidationText>
+                )}
+              </InputLabelWrapper>
+              <Divider />
+              <InputLabelWrapper>
+                <Label htmlFor="user_email">이메일</Label>
+                <EmailInputWrapper>
+                  <EmailInput
+                    type="email"
+                    id="user_email"
+                    placeholder="이메일 입력"
+                    required
+                  />
+                  <EmailValidationButton
+                    $isDisabled={isEmailValidationButtonDisabled}
+                  >
+                    중복확인
+                  </EmailValidationButton>
+                </EmailInputWrapper>
+                {isEmailValidationVisible && (
+                  <ValidationText $isInvalid={!isInvalid}>
+                    사용 가능한 아이디입니다.
+                  </ValidationText>
+                )}
+              </InputLabelWrapper>
+              <InputLabelWrapper>
+                <Label htmlFor="user_password">비밀번호</Label>
+                <Input
+                  type="password"
+                  id="user_password"
+                  placeholder="8-20자, 영문/숫자/특수문자 조합"
+                  required
+                />
+                {isInvalid && (
+                  <ValidationText $isInvalid={isInvalid}>
+                    비밀번호 형식이 아닙니다.
+                  </ValidationText>
+                )}
+              </InputLabelWrapper>
+              <InputLabelWrapper>
+                <Label htmlFor="user_password_confirm">비밀번호 확인</Label>
+                <Input
+                  type="password"
+                  id="user_password_confirm"
+                  placeholder="다시 한번 입력해주세요."
+                  required
+                />
+                {isInvalid && (
+                  <ValidationText $isInvalid={isInvalid}>
+                    비밀번호가 일치하지 않습니다.
+                  </ValidationText>
+                )}
+              </InputLabelWrapper>
+              <SubmitButton $isDisabled={isSubmitButtonDisabled}>
+                회원가입
+              </SubmitButton>
+            </Form>
+          </Content>
+        </Container>
+      </WithoutFooterSection>
       <Footer />
     </WhiteBackground>
   );
@@ -135,25 +141,44 @@ const WhiteBackground = styled.div`
 
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
+  gap: 50px;
 
   background-color: #fff;
 `;
 
-const LogoIcon = styled.img`
-  width: ${toRem(172.8)};
+const WithoutFooterSection = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  gap: 67px;
+`;
+
+const Logo = styled.div`
   height: ${toRem(36)};
 
   margin-top: ${toRem(48)};
   margin-left: ${toRem(57)};
 `;
 
+const LogoIcon = styled.img`
+  width: ${toRem(172.8)};
+  height: 100%;
+`;
+
 const Container = styled.div`
   max-width: ${toRem(524)};
+  height: calc(100% - 36px - 100px);
+
+  margin: auto;
+`;
+
+const Content = styled.div`
+  width: 100%;
+  height: 100%;
 
   display: flex;
   flex-direction: column;
-
-  margin: ${toRem(67)} auto ${toRem(141)};
 `;
 
 const TitleWrapper = styled.div`

From 10dfe5c324abf1bb9c88a7969251926520316d4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=8B=A4=EB=B9=88?= <991012dabin@gmail.com>
Date: Thu, 11 Jan 2024 22:24:33 +0900
Subject: [PATCH 14/29] =?UTF-8?q?modify:=20toRem=ED=95=A8=EC=88=98=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0=20=EB=B0=8F=20px=EB=A1=9C=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Login/index.tsx  | 63 ++++++++++++++-------------
 src/pages/SignUp/index.tsx | 87 +++++++++++++++++++-------------------
 2 files changed, 74 insertions(+), 76 deletions(-)

diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
index 846241d4..71efc1de 100644
--- a/src/pages/Login/index.tsx
+++ b/src/pages/Login/index.tsx
@@ -1,13 +1,12 @@
 import React, { useState } from 'react';
 import styled from '@emotion/styled';
 
-import { toRem } from '@utils/index';
 import logo from '@assets/icons/ic-logo.svg';
 import { Footer } from '@components/common';
 
 const Login = () => {
   // HACK: 유효성 검사 기능 구현 후 유효성 메세지 노출 여부 결정
-  const [isInvalid, setIsInvalid] = useState(true);
+  const [isInvalid, setIsInvalid] = useState(false);
   return (
     <WhiteBackground>
       <Container>
@@ -55,6 +54,7 @@ const WhiteBackground = styled.div`
 
   width: 100%;
   height: 100%;
+  min-width: 100vw;
   min-height: 100vh;
 
   display: flex;
@@ -65,7 +65,7 @@ const WhiteBackground = styled.div`
 `;
 
 const Container = styled.div`
-  max-width: ${toRem(524)};
+  max-width: 524px;
   height: calc(100% - 100px);
 
   margin: auto;
@@ -80,12 +80,12 @@ const Content = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
-  gap: ${toRem(65)};
+  gap: 65px;
 `;
 
 const LogoIcon = styled.img`
-  width: ${toRem(288)};
-  height: ${toRem(60)};
+  width: 288px;
+  height: 60px;
 `;
 
 const TitleWrapper = styled.div`
@@ -93,62 +93,61 @@ const TitleWrapper = styled.div`
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  gap: ${toRem(11)};
+  gap: 11px;
 
   text-align: center;
 `;
 
 const Title = styled.h1`
   color: #1a2849;
-  font-size: ${toRem(44.374)};
+  font-size: 44.374px;
   font-weight: 900;
-  line-height: ${toRem(51.769)};
+  line-height: 51.769px;
 `;
 
 const Inputs = styled.div<{ $isInvalid: boolean }>`
-  margin-bottom: ${props =>
-    props.$isInvalid ? '${toRem(10)}' : '${toRem(65)}'};
+  margin-bottom: ${props => (props.$isInvalid ? '10px' : '65px')};
 
   display: flex;
   flex-direction: column;
-  gap: ${toRem(19)};
+  gap: 19px;
 `;
 
 const Input = styled.input`
-  width: ${toRem(524)};
+  width: 524px;
 
-  border-radius: ${toRem(16)};
-  border: ${toRem(2)} solid #757676;
-  padding: ${toRem(23)} ${toRem(20)};
+  border-radius: 16px;
+  border: 2px solid #757676;
+  padding: 23px 20px;
 
   display: flex;
   align-items: center;
 
   color: #1a2849;
-  font-size: ${toRem(18)};
+  font-size: 18px;
   font-weight: 500;
-  line-height: ${toRem(32)};
+  line-height: 32px;
 
   ::placeholder {
     color: #979c9e;
-    font-size: ${toRem(18)};
+    font-size: 18px;
     font-weight: 500;
-    line-height: ${toRem(32)};
+    line-height: 32px;
   }
 
   :focus {
     outline: none;
-    border: ${toRem(5)} solid #1a2849;
+    border: 5px solid #1a2849;
   }
 `;
 
 const ValidationText = styled.p`
-  padding-left: ${toRem(12)};
+  padding-left: 12px;
 
   color: #da1e28;
-  font-size: ${toRem(15)};
+  font-size: 15px;
   font-weight: 500;
-  line-height: ${toRem(32)};
+  line-height: 32px;
 `;
 
 const ValidationBoldText = styled.span`
@@ -156,24 +155,24 @@ const ValidationBoldText = styled.span`
 `;
 
 const Buttons = styled.div<{ $isInvalid: boolean }>`
-  margin-top: ${props => (props.$isInvalid ? '${toRem(23)}' : 0)};
-
   display: flex;
   flex-direction: column;
-  gap: ${toRem(13)};
+  gap: 13px;
+
+  ${props => props.$isInvalid && 'margin-top: 23px'};
 `;
 
 const LoginButton = styled.button<{ $type: string }>`
-  min-width: ${toRem(524)};
+  min-width: 524px;
 
   border: none;
-  border-radius: ${toRem(16)};
-  padding: ${toRem(23)} 0;
+  border-radius: 16px;
+  padding: 23px 0;
 
   color: #fff;
-  font-size: ${toRem(22)};
+  font-size: 22px;
   font-weight: 700;
-  line-height: ${toRem(32)};
+  line-height: 32px;
 
   background: ${props =>
     props.$type === 'login'
diff --git a/src/pages/SignUp/index.tsx b/src/pages/SignUp/index.tsx
index 11150ec7..bee6ea83 100644
--- a/src/pages/SignUp/index.tsx
+++ b/src/pages/SignUp/index.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import styled from '@emotion/styled';
 
-import { toRem } from '@utils/index';
 import logo from '@assets/icons/ic-logo.svg';
 import { Footer } from '@components/common';
 
@@ -113,17 +112,17 @@ const SignUp = () => {
 export default SignUp;
 
 const SubmitButton = styled.button<{ $isDisabled: boolean }>`
-  min-width: ${toRem(524)};
-  height: ${toRem(78)};
+  min-width: 524px;
+  height: 78px;
 
   border: none;
-  border-radius: ${toRem(16)};
-  padding: ${toRem(23)} auto;
+  border-radius: 16px;
+  padding: 23px auto;
 
   color: #fff;
-  font-size: ${toRem(22)};
+  font-size: 22px;
   font-weight: 700;
-  line-height: ${toRem(32)};
+  line-height: 32px;
 
   background: ${props => (props.$isDisabled ? '#C1C1C1' : '#1A2849')};
 
@@ -155,19 +154,19 @@ const WithoutFooterSection = styled.div`
 `;
 
 const Logo = styled.div`
-  height: ${toRem(36)};
+  height: 36px;
 
-  margin-top: ${toRem(48)};
-  margin-left: ${toRem(57)};
+  margin-top: 48px;
+  margin-left: 57px;
 `;
 
 const LogoIcon = styled.img`
-  width: ${toRem(172.8)};
+  width: 172.8px;
   height: 100%;
 `;
 
 const Container = styled.div`
-  max-width: ${toRem(524)};
+  max-width: 524px;
   height: calc(100% - 36px - 100px);
 
   margin: auto;
@@ -190,17 +189,17 @@ const TitleWrapper = styled.div`
 
 const Title = styled.h1`
   color: #202325;
-  font-size: ${toRem(26)};
+  font-size: 26px;
   font-weight: 700;
-  line-height: ${toRem(31)};
-  letter-spacing: ${toRem(-0.78)};
+  line-height: 31px;
+  letter-spacing: -0.78px;
 `;
 
 const Description = styled.p`
   color: #979c9e;
-  font-size: ${toRem(18)};
+  font-size: 18px;
   font-weight: 500;
-  line-height: ${toRem(32)};
+  line-height: 32px;
 `;
 
 const InputLabelWrapper = styled.div`
@@ -209,67 +208,67 @@ const InputLabelWrapper = styled.div`
 `;
 
 const Form = styled.form`
-  margin-top: ${toRem(26)};
+  margin-top: 26px;
 
   div:nth-child(1) {
-    margin-bottom: ${toRem(16)};
+    margin-bottom: 16px;
   }
   hr:nth-child(2) {
-    margin-bottom: ${toRem(7)};
+    margin-bottom: 7px;
   }
   div:nth-child(3) {
-    margin-bottom: ${toRem(47)};
+    margin-bottom: 47px;
   }
   div:nth-child(4) {
-    margin-bottom: ${toRem(8)};
+    margin-bottom: 8px;
   }
   div:nth-child(5) {
-    margin-bottom: ${toRem(30)};
+    margin-bottom: 30px;
   }
 `;
 
 const Divider = styled.hr`
-  width: ${toRem(525)};
+  width: 525px;
 
   margin: 0;
-  border: ${toRem(0.25)} solid #c7c7c7;
+  border: 0.25px solid #c7c7c7;
 `;
 
 const Label = styled.label`
-  margin-bottom: ${toRem(10)};
+  margin-bottom: 10px;
 
   color: #757676;
-  font-size: ${toRem(18)};
+  font-size: 18px;
   font-weight: 700;
-  line-height: ${toRem(32)};
+  line-height: 32px;
 `;
 
 const Input = styled.input`
-  width: ${toRem(524)};
-  height: ${toRem(79)};
+  width: 524px;
+  height: 79px;
 
-  border-radius: ${toRem(16)};
-  border: ${toRem(2)} solid #757676;
-  padding: ${toRem(23)} ${toRem(20)};
+  border-radius: 16px;
+  border: 2px solid #757676;
+  padding: 23px 20px;
 
   display: flex;
   align-items: center;
 
   color: #1a2849;
-  font-size: ${toRem(18)};
+  font-size: 18px;
   font-weight: 500;
-  line-height: ${toRem(32)};
+  line-height: 32px;
 
   ::placeholder {
     color: #979c9e;
-    font-size: ${toRem(18)};
+    font-size: 18px;
     font-weight: 500;
-    line-height: ${toRem(32)};
+    line-height: 32px;
   }
 
   :focus {
     outline: none;
-    border: ${toRem(5)} solid #1a2849;
+    border: 5px solid #1a2849;
   }
 `;
 
@@ -280,19 +279,19 @@ const EmailInputWrapper = styled.div`
 `;
 
 const EmailInput = styled(Input)`
-  width: ${toRem(358)};
+  width: 358px;
 `;
 
 const EmailValidationButton = styled(SubmitButton)`
-  min-width: ${toRem(152)};
+  min-width: 152px;
 `;
 
 const ValidationText = styled.p<{ $isInvalid: boolean }>`
-  margin-top: ${toRem(2)};
-  margin-left: ${toRem(12)};
+  margin-top: 2px;
+  margin-left: 12px;
 
   color: ${props => (props.$isInvalid ? '#DA1E28' : '#1a2849')};
-  font-size: ${toRem(15)};
+  font-size: 15px;
   font-weight: 700;
-  line-height: ${toRem(32)};
+  line-height: 32px;
 `;

From 40684ae8d52baf19ef2d00ca4643b101b7292c1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=8B=A4=EB=B9=88?= <991012dabin@gmail.com>
Date: Thu, 11 Jan 2024 23:28:36 +0900
Subject: [PATCH 15/29] =?UTF-8?q?design:=20=ED=9A=8C=EC=9B=90=EA=B0=80?=
 =?UTF-8?q?=EC=9E=85=20=ED=8F=BC=20=EB=82=B4=EB=B6=80=20=EA=B5=AC=EB=B6=84?=
 =?UTF-8?q?=EC=84=A0=20=EC=82=AD=EC=A0=9C=20=EB=B0=8F=20input=EA=B0=84=20?=
 =?UTF-8?q?=EA=B0=84=EA=B2=A9=20=ED=86=B5=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/SignUp/index.tsx | 26 +++-----------------------
 1 file changed, 3 insertions(+), 23 deletions(-)

diff --git a/src/pages/SignUp/index.tsx b/src/pages/SignUp/index.tsx
index bee6ea83..fab6c814 100644
--- a/src/pages/SignUp/index.tsx
+++ b/src/pages/SignUp/index.tsx
@@ -47,7 +47,6 @@ const SignUp = () => {
                   </ValidationText>
                 )}
               </InputLabelWrapper>
-              <Divider />
               <InputLabelWrapper>
                 <Label htmlFor="user_email">이메일</Label>
                 <EmailInputWrapper>
@@ -210,28 +209,9 @@ const InputLabelWrapper = styled.div`
 const Form = styled.form`
   margin-top: 26px;
 
-  div:nth-child(1) {
-    margin-bottom: 16px;
-  }
-  hr:nth-child(2) {
-    margin-bottom: 7px;
-  }
-  div:nth-child(3) {
-    margin-bottom: 47px;
-  }
-  div:nth-child(4) {
-    margin-bottom: 8px;
-  }
-  div:nth-child(5) {
-    margin-bottom: 30px;
-  }
-`;
-
-const Divider = styled.hr`
-  width: 525px;
-
-  margin: 0;
-  border: 0.25px solid #c7c7c7;
+  display: flex;
+  flex-direction: column;
+  gap: 23px;
 `;
 
 const Label = styled.label`

From 2d44de5ce68605c6a35f3db0e476a479ed7831e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=8B=A4=EB=B9=88?= <991012dabin@gmail.com>
Date: Fri, 12 Jan 2024 00:19:36 +0900
Subject: [PATCH 16/29] =?UTF-8?q?design:=20input=20focus=20=EC=83=81?=
 =?UTF-8?q?=ED=83=9C=EC=97=90=EC=84=9C=20outline=EA=B3=BC=20border=20?=
 =?UTF-8?q?=EB=91=90=EA=BB=98=20=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20=EC=83=89?=
 =?UTF-8?q?=EC=83=81=20=ED=86=B5=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Login/index.tsx  | 5 +++--
 src/pages/SignUp/index.tsx | 4 ++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
index 71efc1de..c2c624aa 100644
--- a/src/pages/Login/index.tsx
+++ b/src/pages/Login/index.tsx
@@ -115,6 +115,7 @@ const Inputs = styled.div<{ $isInvalid: boolean }>`
 
 const Input = styled.input`
   width: 524px;
+  height: 79px;
 
   border-radius: 16px;
   border: 2px solid #757676;
@@ -136,8 +137,8 @@ const Input = styled.input`
   }
 
   :focus {
-    outline: none;
-    border: 5px solid #1a2849;
+    outline: 2px solid #1a2849;
+    border-color: #1a2849;
   }
 `;
 
diff --git a/src/pages/SignUp/index.tsx b/src/pages/SignUp/index.tsx
index fab6c814..c38c85f1 100644
--- a/src/pages/SignUp/index.tsx
+++ b/src/pages/SignUp/index.tsx
@@ -247,8 +247,8 @@ const Input = styled.input`
   }
 
   :focus {
-    outline: none;
-    border: 5px solid #1a2849;
+    outline: 2px solid #1a2849;
+    border-color: #1a2849;
   }
 `;
 

From 431a905f50519bf7b96661ab027e994dadd00099 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=8B=A4=EB=B9=88?= <991012dabin@gmail.com>
Date: Fri, 12 Jan 2024 00:45:13 +0900
Subject: [PATCH 17/29] =?UTF-8?q?move:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=ED=83=80=EC=9D=B4=ED=8B=80=EA=B3=BC=20=EC=9E=85=EB=A0=A5?=
 =?UTF-8?q?=ED=8F=BC=20=EA=B0=9C=EB=B3=84=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=EB=A1=9C=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Login/LoginForm/index.tsx  | 115 ++++++++++++++++++
 src/components/Login/LoginTitle/index.tsx |  40 +++++++
 src/components/Login/index.tsx            |   2 +
 src/pages/Login/index.tsx                 | 140 +---------------------
 4 files changed, 161 insertions(+), 136 deletions(-)
 create mode 100644 src/components/Login/LoginForm/index.tsx
 create mode 100644 src/components/Login/LoginTitle/index.tsx
 create mode 100644 src/components/Login/index.tsx

diff --git a/src/components/Login/LoginForm/index.tsx b/src/components/Login/LoginForm/index.tsx
new file mode 100644
index 00000000..7e31329c
--- /dev/null
+++ b/src/components/Login/LoginForm/index.tsx
@@ -0,0 +1,115 @@
+import React, { useState } from 'react';
+import styled from '@emotion/styled';
+
+const LoginForm = () => {
+  // HACK: 유효성 검사 기능 구현 후 유효성 메세지 노출 여부 결정
+  const [isInvalid, setIsInvalid] = useState(false);
+
+  return (
+    <form>
+      <Inputs $isInvalid={isInvalid}>
+        <Input
+          type="email"
+          placeholder="이메일 입력"
+        />
+        <Input
+          type="password"
+          placeholder="비밀번호 입력"
+        />
+      </Inputs>
+      {isInvalid && (
+        <ValidationText>
+          <ValidationBoldText>아이디</ValidationBoldText>를 입력해 주세요
+        </ValidationText>
+      )}
+      <Buttons $isInvalid={isInvalid}>
+        <LoginButton $type="login">로그인</LoginButton>
+        <SignUpButton $type="signUp">회원가입</SignUpButton>
+      </Buttons>
+    </form>
+  );
+};
+
+export default LoginForm;
+
+const Inputs = styled.div<{ $isInvalid: boolean }>`
+  margin-bottom: ${props => (props.$isInvalid ? '10px' : '65px')};
+
+  display: flex;
+  flex-direction: column;
+  gap: 19px;
+`;
+
+const Input = styled.input`
+  width: 524px;
+  height: 79px;
+
+  border-radius: 16px;
+  border: 2px solid #757676;
+  padding: 23px 20px;
+
+  display: flex;
+  align-items: center;
+
+  color: #1a2849;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 32px;
+
+  ::placeholder {
+    color: #979c9e;
+    font-size: 18px;
+    font-weight: 500;
+    line-height: 32px;
+  }
+
+  :focus {
+    outline: 2px solid #1a2849;
+    border-color: #1a2849;
+  }
+`;
+
+const ValidationText = styled.p`
+  padding-left: 12px;
+
+  color: #da1e28;
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 32px;
+`;
+
+const ValidationBoldText = styled.span`
+  font-weight: 700;
+`;
+
+const Buttons = styled.div<{ $isInvalid: boolean }>`
+  display: flex;
+  flex-direction: column;
+  gap: 13px;
+
+  ${props => props.$isInvalid && 'margin-top: 23px'};
+`;
+
+const LoginButton = styled.button<{ $type: string }>`
+  min-width: 524px;
+
+  border: none;
+  border-radius: 16px;
+  padding: 23px 0;
+
+  color: #fff;
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 32px;
+
+  background: ${props =>
+    props.$type === 'login'
+      ? '#1A2849'
+      : 'linear-gradient(91deg, #FF3478 1.39%, #FF83AD 98.63%)'};
+
+  :hover {
+    cursor: pointer;
+  }
+`;
+
+const SignUpButton = styled(LoginButton)<{ $type: string }>``;
diff --git a/src/components/Login/LoginTitle/index.tsx b/src/components/Login/LoginTitle/index.tsx
new file mode 100644
index 00000000..8740667c
--- /dev/null
+++ b/src/components/Login/LoginTitle/index.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+import logo from '@assets/icons/ic-logo.svg';
+
+const LoginTitle = () => {
+  return (
+    <TitleWrapper>
+      <LogoIcon
+        src={logo}
+        alt="사장님 비서ya"
+      />
+      <Title>통합 로그인</Title>
+    </TitleWrapper>
+  );
+};
+
+export default LoginTitle;
+
+const LogoIcon = styled.img`
+  width: 288px;
+  height: 60px;
+`;
+
+const TitleWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 11px;
+
+  text-align: center;
+`;
+
+const Title = styled.h1`
+  color: #1a2849;
+  font-size: 44.374px;
+  font-weight: 900;
+  line-height: 51.769px;
+`;
diff --git a/src/components/Login/index.tsx b/src/components/Login/index.tsx
new file mode 100644
index 00000000..58ab3487
--- /dev/null
+++ b/src/components/Login/index.tsx
@@ -0,0 +1,2 @@
+export { default as LoginTitle } from './LoginTitle';
+export { default as LoginForm } from './LoginForm';
diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
index c2c624aa..ac88767b 100644
--- a/src/pages/Login/index.tsx
+++ b/src/pages/Login/index.tsx
@@ -1,44 +1,16 @@
-import React, { useState } from 'react';
+import React from 'react';
 import styled from '@emotion/styled';
 
-import logo from '@assets/icons/ic-logo.svg';
 import { Footer } from '@components/common';
+import { LoginForm, LoginTitle } from '@components/Login';
 
 const Login = () => {
-  // HACK: 유효성 검사 기능 구현 후 유효성 메세지 노출 여부 결정
-  const [isInvalid, setIsInvalid] = useState(false);
   return (
     <WhiteBackground>
       <Container>
         <Content>
-          <TitleWrapper>
-            <LogoIcon
-              src={logo}
-              alt="사장님 비서ya"
-            />
-            <Title>통합 로그인</Title>
-          </TitleWrapper>
-          <form>
-            <Inputs $isInvalid={isInvalid}>
-              <Input
-                type="email"
-                placeholder="이메일 입력"
-              />
-              <Input
-                type="password"
-                placeholder="비밀번호 입력"
-              />
-            </Inputs>
-            {isInvalid && (
-              <ValidationText>
-                <ValidationBoldText>아이디</ValidationBoldText>를 입력해 주세요
-              </ValidationText>
-            )}
-            <Buttons $isInvalid={isInvalid}>
-              <LoginButton $type="login">로그인</LoginButton>
-              <SignUpButton $type="signUp">회원가입</SignUpButton>
-            </Buttons>
-          </form>
+          <LoginTitle />
+          <LoginForm />
         </Content>
       </Container>
       <Footer />
@@ -82,107 +54,3 @@ const Content = styled.div`
   justify-content: center;
   gap: 65px;
 `;
-
-const LogoIcon = styled.img`
-  width: 288px;
-  height: 60px;
-`;
-
-const TitleWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 11px;
-
-  text-align: center;
-`;
-
-const Title = styled.h1`
-  color: #1a2849;
-  font-size: 44.374px;
-  font-weight: 900;
-  line-height: 51.769px;
-`;
-
-const Inputs = styled.div<{ $isInvalid: boolean }>`
-  margin-bottom: ${props => (props.$isInvalid ? '10px' : '65px')};
-
-  display: flex;
-  flex-direction: column;
-  gap: 19px;
-`;
-
-const Input = styled.input`
-  width: 524px;
-  height: 79px;
-
-  border-radius: 16px;
-  border: 2px solid #757676;
-  padding: 23px 20px;
-
-  display: flex;
-  align-items: center;
-
-  color: #1a2849;
-  font-size: 18px;
-  font-weight: 500;
-  line-height: 32px;
-
-  ::placeholder {
-    color: #979c9e;
-    font-size: 18px;
-    font-weight: 500;
-    line-height: 32px;
-  }
-
-  :focus {
-    outline: 2px solid #1a2849;
-    border-color: #1a2849;
-  }
-`;
-
-const ValidationText = styled.p`
-  padding-left: 12px;
-
-  color: #da1e28;
-  font-size: 15px;
-  font-weight: 500;
-  line-height: 32px;
-`;
-
-const ValidationBoldText = styled.span`
-  font-weight: 700;
-`;
-
-const Buttons = styled.div<{ $isInvalid: boolean }>`
-  display: flex;
-  flex-direction: column;
-  gap: 13px;
-
-  ${props => props.$isInvalid && 'margin-top: 23px'};
-`;
-
-const LoginButton = styled.button<{ $type: string }>`
-  min-width: 524px;
-
-  border: none;
-  border-radius: 16px;
-  padding: 23px 0;
-
-  color: #fff;
-  font-size: 22px;
-  font-weight: 700;
-  line-height: 32px;
-
-  background: ${props =>
-    props.$type === 'login'
-      ? '#1A2849'
-      : 'linear-gradient(91deg, #FF3478 1.39%, #FF83AD 98.63%)'};
-
-  :hover {
-    cursor: pointer;
-  }
-`;
-
-const SignUpButton = styled(LoginButton)<{ $type: string }>``;

From a5023478f59d5301fd0c1d49b9188641f18ff747 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=8B=A4=EB=B9=88?= <991012dabin@gmail.com>
Date: Fri, 12 Jan 2024 00:53:53 +0900
Subject: [PATCH 18/29] =?UTF-8?q?move:=20=ED=9A=8C=EC=9B=90=EA=B0=80?=
 =?UTF-8?q?=EC=9E=85=20=ED=83=80=EC=9D=B4=ED=8B=80=EA=B3=BC=20=EC=9E=85?=
 =?UTF-8?q?=EB=A0=A5=ED=8F=BC=20=EA=B0=9C=EB=B3=84=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=EB=A1=9C=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SignUp/SignUpForm/index.tsx  | 179 +++++++++++++++++
 src/components/SignUp/SignUpTitle/index.tsx |  37 ++++
 src/components/SignUp/index.tsx             |   2 +
 src/pages/SignUp/index.tsx                  | 206 +-------------------
 4 files changed, 222 insertions(+), 202 deletions(-)
 create mode 100644 src/components/SignUp/SignUpForm/index.tsx
 create mode 100644 src/components/SignUp/SignUpTitle/index.tsx
 create mode 100644 src/components/SignUp/index.tsx

diff --git a/src/components/SignUp/SignUpForm/index.tsx b/src/components/SignUp/SignUpForm/index.tsx
new file mode 100644
index 00000000..2429384d
--- /dev/null
+++ b/src/components/SignUp/SignUpForm/index.tsx
@@ -0,0 +1,179 @@
+import React, { useState } from 'react';
+import styled from '@emotion/styled';
+
+const SignUpForm = () => {
+  // TODO: react-hook-form 사용해서 유효성 검사 예정
+  const [isInvalid, setIsInvalid] = useState(false);
+  const [isEmailValidationVisible, setIsEmailValidationVisible] =
+    useState(false);
+
+  // 버튼 disabled 처리하기 위한 state
+  // TODO: 변수명이 길어서 가독성이 떨어지는 것같아 더 좋은 이름이 있다면 추천 부탁드려요
+  const [isEmailValidationButtonDisabled, setIsEmailValidationButtonDisabled] =
+    useState(true);
+  const [isSubmitButtonDisabled, setIsSubmitButtonDisabled] = useState(true);
+
+  return (
+    <Form>
+      <InputLabelWrapper>
+        <Label htmlFor="user_name">이름</Label>
+        <Input
+          type="text"
+          id="user_name"
+          placeholder="이름 입력"
+          required
+        />
+        {isInvalid && (
+          <ValidationText $isInvalid={isInvalid}>
+            이름을 입력해 주세요.
+          </ValidationText>
+        )}
+      </InputLabelWrapper>
+      <InputLabelWrapper>
+        <Label htmlFor="user_email">이메일</Label>
+        <EmailInputWrapper>
+          <EmailInput
+            type="email"
+            id="user_email"
+            placeholder="이메일 입력"
+            required
+          />
+          <EmailValidationButton $isDisabled={isEmailValidationButtonDisabled}>
+            중복확인
+          </EmailValidationButton>
+        </EmailInputWrapper>
+        {isEmailValidationVisible && (
+          <ValidationText $isInvalid={!isInvalid}>
+            사용 가능한 아이디입니다.
+          </ValidationText>
+        )}
+      </InputLabelWrapper>
+      <InputLabelWrapper>
+        <Label htmlFor="user_password">비밀번호</Label>
+        <Input
+          type="password"
+          id="user_password"
+          placeholder="8-20자, 영문/숫자/특수문자 조합"
+          required
+        />
+        {isInvalid && (
+          <ValidationText $isInvalid={isInvalid}>
+            비밀번호 형식이 아닙니다.
+          </ValidationText>
+        )}
+      </InputLabelWrapper>
+      <InputLabelWrapper>
+        <Label htmlFor="user_password_confirm">비밀번호 확인</Label>
+        <Input
+          type="password"
+          id="user_password_confirm"
+          placeholder="다시 한번 입력해주세요."
+          required
+        />
+        {isInvalid && (
+          <ValidationText $isInvalid={isInvalid}>
+            비밀번호가 일치하지 않습니다.
+          </ValidationText>
+        )}
+      </InputLabelWrapper>
+      <SubmitButton $isDisabled={isSubmitButtonDisabled}>회원가입</SubmitButton>
+    </Form>
+  );
+};
+
+export default SignUpForm;
+
+const SubmitButton = styled.button<{ $isDisabled: boolean }>`
+  min-width: 524px;
+  height: 78px;
+
+  border: none;
+  border-radius: 16px;
+  padding: 23px auto;
+
+  color: #fff;
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 32px;
+
+  background: ${props => (props.$isDisabled ? '#C1C1C1' : '#1A2849')};
+
+  :hover {
+    cursor: pointer;
+  }
+`;
+
+const Form = styled.form`
+  margin-top: 26px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 23px;
+`;
+
+const InputLabelWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const Label = styled.label`
+  margin-bottom: 10px;
+
+  color: #757676;
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 32px;
+`;
+
+const Input = styled.input`
+  width: 524px;
+  height: 79px;
+
+  border-radius: 16px;
+  border: 2px solid #757676;
+  padding: 23px 20px;
+
+  display: flex;
+  align-items: center;
+
+  color: #1a2849;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 32px;
+
+  ::placeholder {
+    color: #979c9e;
+    font-size: 18px;
+    font-weight: 500;
+    line-height: 32px;
+  }
+
+  :focus {
+    outline: 2px solid #1a2849;
+    border-color: #1a2849;
+  }
+`;
+
+const EmailInputWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+
+const EmailInput = styled(Input)`
+  width: 358px;
+`;
+
+const EmailValidationButton = styled(SubmitButton)`
+  min-width: 152px;
+`;
+
+const ValidationText = styled.p<{ $isInvalid: boolean }>`
+  margin-top: 2px;
+  margin-left: 12px;
+
+  color: ${props => (props.$isInvalid ? '#DA1E28' : '#1a2849')};
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 32px;
+`;
diff --git a/src/components/SignUp/SignUpTitle/index.tsx b/src/components/SignUp/SignUpTitle/index.tsx
new file mode 100644
index 00000000..3c342e81
--- /dev/null
+++ b/src/components/SignUp/SignUpTitle/index.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+const SignUpTitle = () => {
+  return (
+    <TitleWrapper>
+      <Title>회원가입</Title>
+      <Description>
+        야놀자가 준비한 사장님 비서ya만의 혜택을 받아보세요.
+      </Description>
+    </TitleWrapper>
+  );
+};
+
+export default SignUpTitle;
+
+const TitleWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+`;
+
+const Title = styled.h1`
+  color: #202325;
+  font-size: 26px;
+  font-weight: 700;
+  line-height: 31px;
+  letter-spacing: -0.78px;
+`;
+
+const Description = styled.p`
+  color: #979c9e;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 32px;
+`;
diff --git a/src/components/SignUp/index.tsx b/src/components/SignUp/index.tsx
new file mode 100644
index 00000000..ec8af5fc
--- /dev/null
+++ b/src/components/SignUp/index.tsx
@@ -0,0 +1,2 @@
+export { default as SignUpForm } from './SignUpForm';
+export { default as SignUpTitle } from './SignUpTitle';
diff --git a/src/pages/SignUp/index.tsx b/src/pages/SignUp/index.tsx
index c38c85f1..6b938b9b 100644
--- a/src/pages/SignUp/index.tsx
+++ b/src/pages/SignUp/index.tsx
@@ -1,20 +1,11 @@
-import React, { useState } from 'react';
+import React from 'react';
 import styled from '@emotion/styled';
 
 import logo from '@assets/icons/ic-logo.svg';
 import { Footer } from '@components/common';
+import { SignUpForm, SignUpTitle } from '@components/SignUp';
 
 const SignUp = () => {
-  // TODO: react-hook-form 사용해서 유효성 검사 예정
-  const [isInvalid, setIsInvalid] = useState(false);
-  const [isEmailValidationVisible, setIsEmailValidationVisible] =
-    useState(false);
-
-  // 버튼 disabled 처리하기 위한 state
-  // TODO: 변수명이 길어서 가독성이 떨어지는 것같아 더 좋은 이름이 있다면 추천 부탁드려요
-  const [isEmailValidationButtonDisabled, setIsEmailValidationButtonDisabled] =
-    useState(true);
-  const [isSubmitButtonDisabled, setIsSubmitButtonDisabled] = useState(true);
   return (
     <WhiteBackground>
       <WithoutFooterSection>
@@ -26,80 +17,8 @@ const SignUp = () => {
         </Logo>
         <Container>
           <Content>
-            <TitleWrapper>
-              <Title>회원가입</Title>
-              <Description>
-                야놀자가 준비한 사장님 비서ya만의 혜택을 받아보세요.
-              </Description>
-            </TitleWrapper>
-            <Form>
-              <InputLabelWrapper>
-                <Label htmlFor="user_name">이름</Label>
-                <Input
-                  type="text"
-                  id="user_name"
-                  placeholder="이름 입력"
-                  required
-                />
-                {isInvalid && (
-                  <ValidationText $isInvalid={isInvalid}>
-                    이름을 입력해 주세요.
-                  </ValidationText>
-                )}
-              </InputLabelWrapper>
-              <InputLabelWrapper>
-                <Label htmlFor="user_email">이메일</Label>
-                <EmailInputWrapper>
-                  <EmailInput
-                    type="email"
-                    id="user_email"
-                    placeholder="이메일 입력"
-                    required
-                  />
-                  <EmailValidationButton
-                    $isDisabled={isEmailValidationButtonDisabled}
-                  >
-                    중복확인
-                  </EmailValidationButton>
-                </EmailInputWrapper>
-                {isEmailValidationVisible && (
-                  <ValidationText $isInvalid={!isInvalid}>
-                    사용 가능한 아이디입니다.
-                  </ValidationText>
-                )}
-              </InputLabelWrapper>
-              <InputLabelWrapper>
-                <Label htmlFor="user_password">비밀번호</Label>
-                <Input
-                  type="password"
-                  id="user_password"
-                  placeholder="8-20자, 영문/숫자/특수문자 조합"
-                  required
-                />
-                {isInvalid && (
-                  <ValidationText $isInvalid={isInvalid}>
-                    비밀번호 형식이 아닙니다.
-                  </ValidationText>
-                )}
-              </InputLabelWrapper>
-              <InputLabelWrapper>
-                <Label htmlFor="user_password_confirm">비밀번호 확인</Label>
-                <Input
-                  type="password"
-                  id="user_password_confirm"
-                  placeholder="다시 한번 입력해주세요."
-                  required
-                />
-                {isInvalid && (
-                  <ValidationText $isInvalid={isInvalid}>
-                    비밀번호가 일치하지 않습니다.
-                  </ValidationText>
-                )}
-              </InputLabelWrapper>
-              <SubmitButton $isDisabled={isSubmitButtonDisabled}>
-                회원가입
-              </SubmitButton>
-            </Form>
+            <SignUpTitle />
+            <SignUpForm />
           </Content>
         </Container>
       </WithoutFooterSection>
@@ -110,26 +29,6 @@ const SignUp = () => {
 
 export default SignUp;
 
-const SubmitButton = styled.button<{ $isDisabled: boolean }>`
-  min-width: 524px;
-  height: 78px;
-
-  border: none;
-  border-radius: 16px;
-  padding: 23px auto;
-
-  color: #fff;
-  font-size: 22px;
-  font-weight: 700;
-  line-height: 32px;
-
-  background: ${props => (props.$isDisabled ? '#C1C1C1' : '#1A2849')};
-
-  :hover {
-    cursor: pointer;
-  }
-`;
-
 const WhiteBackground = styled.div`
   position: relative;
 
@@ -178,100 +77,3 @@ const Content = styled.div`
   display: flex;
   flex-direction: column;
 `;
-
-const TitleWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: flex-start;
-`;
-
-const Title = styled.h1`
-  color: #202325;
-  font-size: 26px;
-  font-weight: 700;
-  line-height: 31px;
-  letter-spacing: -0.78px;
-`;
-
-const Description = styled.p`
-  color: #979c9e;
-  font-size: 18px;
-  font-weight: 500;
-  line-height: 32px;
-`;
-
-const InputLabelWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
-
-const Form = styled.form`
-  margin-top: 26px;
-
-  display: flex;
-  flex-direction: column;
-  gap: 23px;
-`;
-
-const Label = styled.label`
-  margin-bottom: 10px;
-
-  color: #757676;
-  font-size: 18px;
-  font-weight: 700;
-  line-height: 32px;
-`;
-
-const Input = styled.input`
-  width: 524px;
-  height: 79px;
-
-  border-radius: 16px;
-  border: 2px solid #757676;
-  padding: 23px 20px;
-
-  display: flex;
-  align-items: center;
-
-  color: #1a2849;
-  font-size: 18px;
-  font-weight: 500;
-  line-height: 32px;
-
-  ::placeholder {
-    color: #979c9e;
-    font-size: 18px;
-    font-weight: 500;
-    line-height: 32px;
-  }
-
-  :focus {
-    outline: 2px solid #1a2849;
-    border-color: #1a2849;
-  }
-`;
-
-const EmailInputWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-`;
-
-const EmailInput = styled(Input)`
-  width: 358px;
-`;
-
-const EmailValidationButton = styled(SubmitButton)`
-  min-width: 152px;
-`;
-
-const ValidationText = styled.p<{ $isInvalid: boolean }>`
-  margin-top: 2px;
-  margin-left: 12px;
-
-  color: ${props => (props.$isInvalid ? '#DA1E28' : '#1a2849')};
-  font-size: 15px;
-  font-weight: 700;
-  line-height: 32px;
-`;

From 7f44fd018df4e30046869be726e8d93a040987b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=8B=A4=EB=B9=88?= <991012dabin@gmail.com>
Date: Fri, 12 Jan 2024 18:36:16 +0900
Subject: [PATCH 19/29] =?UTF-8?q?modify:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20=EC=82=AC=EC=9A=A9=ED=95=98=EB=8A=94=20?=
 =?UTF-8?q?=ED=83=80=EC=9E=85=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Login/LoginForm/index.tsx | 15 ++++++++-------
 src/types/login.ts                       |  7 +++++++
 tsconfig.paths.json                      |  2 +-
 3 files changed, 16 insertions(+), 8 deletions(-)
 create mode 100644 src/types/login.ts

diff --git a/src/components/Login/LoginForm/index.tsx b/src/components/Login/LoginForm/index.tsx
index 7e31329c..de00b193 100644
--- a/src/components/Login/LoginForm/index.tsx
+++ b/src/components/Login/LoginForm/index.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import styled from '@emotion/styled';
+import { ButtonText, InputValidation } from '@/types/login';
 
 const LoginForm = () => {
   // HACK: 유효성 검사 기능 구현 후 유효성 메세지 노출 여부 결정
@@ -23,8 +24,8 @@ const LoginForm = () => {
         </ValidationText>
       )}
       <Buttons $isInvalid={isInvalid}>
-        <LoginButton $type="login">로그인</LoginButton>
-        <SignUpButton $type="signUp">회원가입</SignUpButton>
+        <LoginButton $text="login">로그인</LoginButton>
+        <SignUpButton $text="signUp">회원가입</SignUpButton>
       </Buttons>
     </form>
   );
@@ -32,7 +33,7 @@ const LoginForm = () => {
 
 export default LoginForm;
 
-const Inputs = styled.div<{ $isInvalid: boolean }>`
+const Inputs = styled.div<InputValidation>`
   margin-bottom: ${props => (props.$isInvalid ? '10px' : '65px')};
 
   display: flex;
@@ -82,7 +83,7 @@ const ValidationBoldText = styled.span`
   font-weight: 700;
 `;
 
-const Buttons = styled.div<{ $isInvalid: boolean }>`
+const Buttons = styled.div<InputValidation>`
   display: flex;
   flex-direction: column;
   gap: 13px;
@@ -90,7 +91,7 @@ const Buttons = styled.div<{ $isInvalid: boolean }>`
   ${props => props.$isInvalid && 'margin-top: 23px'};
 `;
 
-const LoginButton = styled.button<{ $type: string }>`
+const LoginButton = styled.button<ButtonText>`
   min-width: 524px;
 
   border: none;
@@ -103,7 +104,7 @@ const LoginButton = styled.button<{ $type: string }>`
   line-height: 32px;
 
   background: ${props =>
-    props.$type === 'login'
+    props.$text === 'login'
       ? '#1A2849'
       : 'linear-gradient(91deg, #FF3478 1.39%, #FF83AD 98.63%)'};
 
@@ -112,4 +113,4 @@ const LoginButton = styled.button<{ $type: string }>`
   }
 `;
 
-const SignUpButton = styled(LoginButton)<{ $type: string }>``;
+const SignUpButton = styled(LoginButton)<ButtonText>``;
diff --git a/src/types/login.ts b/src/types/login.ts
new file mode 100644
index 00000000..5625ef1d
--- /dev/null
+++ b/src/types/login.ts
@@ -0,0 +1,7 @@
+export type LoginFormStyleProps = {
+  $isInvalid: boolean;
+  $text: string;
+};
+
+export type InputValidation = Pick<LoginFormStyleProps, '$isInvalid'>;
+export type ButtonText = Pick<LoginFormStyleProps, '$text'>;
diff --git a/tsconfig.paths.json b/tsconfig.paths.json
index c1fd4d2e..2b7c97d6 100644
--- a/tsconfig.paths.json
+++ b/tsconfig.paths.json
@@ -7,7 +7,7 @@
       "@hooks/*": ["src/hooks/*"],
       "@pages/*": ["src/pages/*"],
       "@styles/*": ["src/styles/*"],
-      "@types/*": ["src/types/*"],
+      "@/types/*": ["src/types/*"],
       "@utils/*": ["src/utils/*"],
       "@api/*": ["src/utils/api/*"],
       "@constants/*": ["src/utils/constants/*"],

From dc8caf3310f5e93233b98f8ff9e8f49895846595 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=8B=A4=EB=B9=88?= <991012dabin@gmail.com>
Date: Fri, 12 Jan 2024 18:45:23 +0900
Subject: [PATCH 20/29] =?UTF-8?q?modify:=20=ED=9A=8C=EC=9B=90=EA=B0=80?=
 =?UTF-8?q?=EC=9E=85=EC=97=90=EC=84=9C=20=EC=82=AC=EC=9A=A9=ED=95=98?=
 =?UTF-8?q?=EB=8A=94=20=ED=83=80=EC=9E=85=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SignUp/SignUpForm/index.tsx | 5 +++--
 src/types/signUp.ts                        | 7 +++++++
 2 files changed, 10 insertions(+), 2 deletions(-)
 create mode 100644 src/types/signUp.ts

diff --git a/src/components/SignUp/SignUpForm/index.tsx b/src/components/SignUp/SignUpForm/index.tsx
index 2429384d..a3112292 100644
--- a/src/components/SignUp/SignUpForm/index.tsx
+++ b/src/components/SignUp/SignUpForm/index.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import styled from '@emotion/styled';
+import { SignUpDisabledButton, SignUpInputValidation } from '@/types/signUp';
 
 const SignUpForm = () => {
   // TODO: react-hook-form 사용해서 유효성 검사 예정
@@ -83,7 +84,7 @@ const SignUpForm = () => {
 
 export default SignUpForm;
 
-const SubmitButton = styled.button<{ $isDisabled: boolean }>`
+const SubmitButton = styled.button<SignUpDisabledButton>`
   min-width: 524px;
   height: 78px;
 
@@ -168,7 +169,7 @@ const EmailValidationButton = styled(SubmitButton)`
   min-width: 152px;
 `;
 
-const ValidationText = styled.p<{ $isInvalid: boolean }>`
+const ValidationText = styled.p<SignUpInputValidation>`
   margin-top: 2px;
   margin-left: 12px;
 
diff --git a/src/types/signUp.ts b/src/types/signUp.ts
new file mode 100644
index 00000000..627413d7
--- /dev/null
+++ b/src/types/signUp.ts
@@ -0,0 +1,7 @@
+export type SignUpFormStyleProps = {
+  $isDisabled: boolean;
+  $isInvalid: boolean;
+};
+
+export type SignUpDisabledButton = Pick<SignUpFormStyleProps, '$isDisabled'>;
+export type SignUpInputValidation = Pick<SignUpFormStyleProps, '$isInvalid'>;

From eb00d46b581d8602c356cb1aca9eae84d1d969d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=8B=A4=EB=B9=88?= <991012dabin@gmail.com>
Date: Fri, 12 Jan 2024 21:05:28 +0900
Subject: [PATCH 21/29] =?UTF-8?q?remove:=20=EC=82=AC=EC=9A=A9=ED=95=98?=
 =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20useState=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Login/LoginForm/index.tsx   |  4 ++--
 src/components/SignUp/SignUpForm/index.tsx | 12 +++++-------
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/components/Login/LoginForm/index.tsx b/src/components/Login/LoginForm/index.tsx
index de00b193..6262b7da 100644
--- a/src/components/Login/LoginForm/index.tsx
+++ b/src/components/Login/LoginForm/index.tsx
@@ -1,10 +1,10 @@
-import React, { useState } from 'react';
+import React from 'react';
 import styled from '@emotion/styled';
 import { ButtonText, InputValidation } from '@/types/login';
 
 const LoginForm = () => {
   // HACK: 유효성 검사 기능 구현 후 유효성 메세지 노출 여부 결정
-  const [isInvalid, setIsInvalid] = useState(false);
+  const isInvalid = true;
 
   return (
     <form>
diff --git a/src/components/SignUp/SignUpForm/index.tsx b/src/components/SignUp/SignUpForm/index.tsx
index a3112292..1b90ea4b 100644
--- a/src/components/SignUp/SignUpForm/index.tsx
+++ b/src/components/SignUp/SignUpForm/index.tsx
@@ -1,18 +1,16 @@
-import React, { useState } from 'react';
+import React from 'react';
 import styled from '@emotion/styled';
 import { SignUpDisabledButton, SignUpInputValidation } from '@/types/signUp';
 
 const SignUpForm = () => {
   // TODO: react-hook-form 사용해서 유효성 검사 예정
-  const [isInvalid, setIsInvalid] = useState(false);
-  const [isEmailValidationVisible, setIsEmailValidationVisible] =
-    useState(false);
+  const isInvalid = false;
+  const isEmailValidationVisible = false;
 
   // 버튼 disabled 처리하기 위한 state
   // TODO: 변수명이 길어서 가독성이 떨어지는 것같아 더 좋은 이름이 있다면 추천 부탁드려요
-  const [isEmailValidationButtonDisabled, setIsEmailValidationButtonDisabled] =
-    useState(true);
-  const [isSubmitButtonDisabled, setIsSubmitButtonDisabled] = useState(true);
+  const isEmailValidationButtonDisabled = true;
+  const isSubmitButtonDisabled = true;
 
   return (
     <Form>

From cc54b8c8292e36d67858b752c9eedf4c2d76b37a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=8B=A4=EB=B9=88?= <991012dabin@gmail.com>
Date: Fri, 12 Jan 2024 21:08:44 +0900
Subject: [PATCH 22/29] =?UTF-8?q?remove:=20import=20React=20=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Login/LoginForm/index.tsx    | 1 -
 src/components/Login/LoginTitle/index.tsx   | 1 -
 src/components/SignUp/SignUpForm/index.tsx  | 1 -
 src/components/SignUp/SignUpTitle/index.tsx | 1 -
 src/components/common/Footer/index.tsx      | 1 -
 src/pages/Login/index.tsx                   | 1 -
 src/pages/SignUp/index.tsx                  | 1 -
 7 files changed, 7 deletions(-)

diff --git a/src/components/Login/LoginForm/index.tsx b/src/components/Login/LoginForm/index.tsx
index 6262b7da..43fb6115 100644
--- a/src/components/Login/LoginForm/index.tsx
+++ b/src/components/Login/LoginForm/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { ButtonText, InputValidation } from '@/types/login';
 
diff --git a/src/components/Login/LoginTitle/index.tsx b/src/components/Login/LoginTitle/index.tsx
index 8740667c..521266c0 100644
--- a/src/components/Login/LoginTitle/index.tsx
+++ b/src/components/Login/LoginTitle/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 
 import logo from '@assets/icons/ic-logo.svg';
diff --git a/src/components/SignUp/SignUpForm/index.tsx b/src/components/SignUp/SignUpForm/index.tsx
index 1b90ea4b..84ba80b1 100644
--- a/src/components/SignUp/SignUpForm/index.tsx
+++ b/src/components/SignUp/SignUpForm/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { SignUpDisabledButton, SignUpInputValidation } from '@/types/signUp';
 
diff --git a/src/components/SignUp/SignUpTitle/index.tsx b/src/components/SignUp/SignUpTitle/index.tsx
index 3c342e81..13fc4f2d 100644
--- a/src/components/SignUp/SignUpTitle/index.tsx
+++ b/src/components/SignUp/SignUpTitle/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 
 const SignUpTitle = () => {
diff --git a/src/components/common/Footer/index.tsx b/src/components/common/Footer/index.tsx
index 7d66a30a..a0f9bb8c 100644
--- a/src/components/common/Footer/index.tsx
+++ b/src/components/common/Footer/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 
 const Footer = () => {
diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
index ac88767b..128a460f 100644
--- a/src/pages/Login/index.tsx
+++ b/src/pages/Login/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 
 import { Footer } from '@components/common';
diff --git a/src/pages/SignUp/index.tsx b/src/pages/SignUp/index.tsx
index 6b938b9b..597633ee 100644
--- a/src/pages/SignUp/index.tsx
+++ b/src/pages/SignUp/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 
 import logo from '@assets/icons/ic-logo.svg';

From 1a9d26426042580ae34f164aec5f8a83937c7330 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=8B=A4=EB=B9=88?= <991012dabin@gmail.com>
Date: Sat, 13 Jan 2024 01:43:32 +0900
Subject: [PATCH 23/29] =?UTF-8?q?modify:=20=EA=B0=80=EC=83=81=20=EC=9A=94?=
 =?UTF-8?q?=EC=86=8C=EC=97=90=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=A7=80?=
 =?UTF-8?q?=EC=A0=95=ED=95=A0=20=EB=95=8C=20&=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Login/LoginForm/index.tsx   | 6 +++---
 src/components/SignUp/SignUpForm/index.tsx | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Login/LoginForm/index.tsx b/src/components/Login/LoginForm/index.tsx
index 43fb6115..bdd12d8f 100644
--- a/src/components/Login/LoginForm/index.tsx
+++ b/src/components/Login/LoginForm/index.tsx
@@ -56,14 +56,14 @@ const Input = styled.input`
   font-weight: 500;
   line-height: 32px;
 
-  ::placeholder {
+  &::placeholder {
     color: #979c9e;
     font-size: 18px;
     font-weight: 500;
     line-height: 32px;
   }
 
-  :focus {
+  &:focus {
     outline: 2px solid #1a2849;
     border-color: #1a2849;
   }
@@ -107,7 +107,7 @@ const LoginButton = styled.button<ButtonText>`
       ? '#1A2849'
       : 'linear-gradient(91deg, #FF3478 1.39%, #FF83AD 98.63%)'};
 
-  :hover {
+  &:hover {
     cursor: pointer;
   }
 `;
diff --git a/src/components/SignUp/SignUpForm/index.tsx b/src/components/SignUp/SignUpForm/index.tsx
index 84ba80b1..6f099b87 100644
--- a/src/components/SignUp/SignUpForm/index.tsx
+++ b/src/components/SignUp/SignUpForm/index.tsx
@@ -96,7 +96,7 @@ const SubmitButton = styled.button<SignUpDisabledButton>`
 
   background: ${props => (props.$isDisabled ? '#C1C1C1' : '#1A2849')};
 
-  :hover {
+  &:hover {
     cursor: pointer;
   }
 `;
@@ -139,14 +139,14 @@ const Input = styled.input`
   font-weight: 500;
   line-height: 32px;
 
-  ::placeholder {
+  &::placeholder {
     color: #979c9e;
     font-size: 18px;
     font-weight: 500;
     line-height: 32px;
   }
 
-  :focus {
+  &:focus {
     outline: 2px solid #1a2849;
     border-color: #1a2849;
   }

From 0c678d9cddeb61920bb4877ad1e5185f5cecb5b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=8B=A4=EB=B9=88?= <991012dabin@gmail.com>
Date: Sat, 13 Jan 2024 01:46:42 +0900
Subject: [PATCH 24/29] =?UTF-8?q?modify:=20=EC=BB=A8=EB=B2=A4=EC=85=98?=
 =?UTF-8?q?=EC=97=90=20=EB=A7=9E=EA=B2=8C=20import=20=EA=B0=9C=ED=96=89=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EC=A0=95=EB=A0=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Login/LoginForm/index.tsx   | 1 +
 src/components/SignUp/SignUpForm/index.tsx | 1 +
 src/routes/MainRouter/index.tsx            | 5 +++--
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/Login/LoginForm/index.tsx b/src/components/Login/LoginForm/index.tsx
index bdd12d8f..fc808b8f 100644
--- a/src/components/Login/LoginForm/index.tsx
+++ b/src/components/Login/LoginForm/index.tsx
@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+
 import { ButtonText, InputValidation } from '@/types/login';
 
 const LoginForm = () => {
diff --git a/src/components/SignUp/SignUpForm/index.tsx b/src/components/SignUp/SignUpForm/index.tsx
index 6f099b87..d322de16 100644
--- a/src/components/SignUp/SignUpForm/index.tsx
+++ b/src/components/SignUp/SignUpForm/index.tsx
@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+
 import { SignUpDisabledButton, SignUpInputValidation } from '@/types/signUp';
 
 const SignUpForm = () => {
diff --git a/src/routes/MainRouter/index.tsx b/src/routes/MainRouter/index.tsx
index c063cda8..a5329761 100644
--- a/src/routes/MainRouter/index.tsx
+++ b/src/routes/MainRouter/index.tsx
@@ -1,7 +1,8 @@
-import Login from '@pages/Login';
-import SignUp from '@pages/SignUp';
 import { Route, Routes } from 'react-router-dom';
+
 import { Layout } from '@components/common';
+import Login from '@pages/Login';
+import SignUp from '@pages/SignUp';
 import Dashboard from '@pages/Dashboard.tsx';
 import Report from '@pages/Report.tsx';
 

From 772c1b3aabfcfec9c5880edf42a43cb47b76995e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=8B=A4=EB=B9=88?= <991012dabin@gmail.com>
Date: Sat, 13 Jan 2024 02:06:06 +0900
Subject: [PATCH 25/29] =?UTF-8?q?modify:=20=ED=9A=8C=EC=9B=90=EA=B0=80?=
 =?UTF-8?q?=EC=9E=85=20=EB=B2=84=ED=8A=BC=EC=9D=98=20disable=20=EC=83=81?=
 =?UTF-8?q?=ED=83=9C=EB=A5=BC=20=EA=B4=80=EB=A6=AC=ED=95=98=EB=8A=94=20?=
 =?UTF-8?q?=EB=B3=80=EC=88=98=EB=AA=85=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SignUp/SignUpForm/index.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/SignUp/SignUpForm/index.tsx b/src/components/SignUp/SignUpForm/index.tsx
index d322de16..f78b347a 100644
--- a/src/components/SignUp/SignUpForm/index.tsx
+++ b/src/components/SignUp/SignUpForm/index.tsx
@@ -7,10 +7,9 @@ const SignUpForm = () => {
   const isInvalid = false;
   const isEmailValidationVisible = false;
 
-  // 버튼 disabled 처리하기 위한 state
-  // TODO: 변수명이 길어서 가독성이 떨어지는 것같아 더 좋은 이름이 있다면 추천 부탁드려요
-  const isEmailValidationButtonDisabled = true;
-  const isSubmitButtonDisabled = true;
+  // 2가지 버튼 disabled 처리하기 위한 state
+  const isEmailValidationDisabled = true;
+  const isSubmitValidationDisabled = true;
 
   return (
     <Form>
@@ -37,7 +36,7 @@ const SignUpForm = () => {
             placeholder="이메일 입력"
             required
           />
-          <EmailValidationButton $isDisabled={isEmailValidationButtonDisabled}>
+          <EmailValidationButton $isDisabled={isEmailValidationDisabled}>
             중복확인
           </EmailValidationButton>
         </EmailInputWrapper>
@@ -75,7 +74,9 @@ const SignUpForm = () => {
           </ValidationText>
         )}
       </InputLabelWrapper>
-      <SubmitButton $isDisabled={isSubmitButtonDisabled}>회원가입</SubmitButton>
+      <SubmitButton $isDisabled={isSubmitValidationDisabled}>
+        회원가입
+      </SubmitButton>
     </Form>
   );
 };

From e1a46e32e2d2037f5b44dfcc8f7ca16d770b3647 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=8B=A4=EB=B9=88?= <991012dabin@gmail.com>
Date: Sat, 13 Jan 2024 02:28:53 +0900
Subject: [PATCH 26/29] =?UTF-8?q?modify:=20=EB=B6=88=ED=95=84=EC=9A=94?=
 =?UTF-8?q?=ED=95=9C=20flex-direction:=20row=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SignUp/SignUpForm/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/SignUp/SignUpForm/index.tsx b/src/components/SignUp/SignUpForm/index.tsx
index f78b347a..b43cb0c1 100644
--- a/src/components/SignUp/SignUpForm/index.tsx
+++ b/src/components/SignUp/SignUpForm/index.tsx
@@ -156,7 +156,6 @@ const Input = styled.input`
 
 const EmailInputWrapper = styled.div`
   display: flex;
-  flex-direction: row;
   justify-content: space-between;
 `;
 

From 5b8e0953f11d2ee2853477dfde1f4912a9171d7c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=8B=A4=EB=B9=88?= <991012dabin@gmail.com>
Date: Sat, 13 Jan 2024 03:17:22 +0900
Subject: [PATCH 27/29] =?UTF-8?q?modify:=20=ED=9A=8C=EC=9B=90=EA=B0=80?=
 =?UTF-8?q?=EC=9E=85=20=EC=9E=85=EB=A0=A5=ED=8F=BC=20height=20=EA=B3=84?=
 =?UTF-8?q?=EC=82=B0=EC=97=90=20=ED=95=84=EC=9A=94=ED=95=9C=20=EA=B0=92?=
 =?UTF-8?q?=EC=9D=84=20=EB=B3=80=EC=88=98=EB=A1=9C=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/SignUp/index.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/pages/SignUp/index.tsx b/src/pages/SignUp/index.tsx
index 597633ee..e668abfe 100644
--- a/src/pages/SignUp/index.tsx
+++ b/src/pages/SignUp/index.tsx
@@ -63,8 +63,11 @@ const LogoIcon = styled.img`
 `;
 
 const Container = styled.div`
+  --logo-height: 36px;
+  --footer-height: 100px;
+
   max-width: 524px;
-  height: calc(100% - 36px - 100px);
+  height: calc(100% - var(--logo-height) - var(--footer-height));
 
   margin: auto;
 `;

From a74ad1e6399d81bf20f29fe084ee70c096040974 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=8B=A4=EB=B9=88?= <991012dabin@gmail.com>
Date: Sun, 14 Jan 2024 17:44:21 +0900
Subject: [PATCH 28/29] =?UTF-8?q?modify:=20LoginButton,SignUpButton=20->?=
 =?UTF-8?q?=20Button=EC=9C=BC=EB=A1=9C=20=EC=9D=B4=EB=A6=84=20=ED=86=B5?=
 =?UTF-8?q?=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Login/LoginForm/index.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/Login/LoginForm/index.tsx b/src/components/Login/LoginForm/index.tsx
index fc808b8f..3afc88a2 100644
--- a/src/components/Login/LoginForm/index.tsx
+++ b/src/components/Login/LoginForm/index.tsx
@@ -24,8 +24,8 @@ const LoginForm = () => {
         </ValidationText>
       )}
       <Buttons $isInvalid={isInvalid}>
-        <LoginButton $text="login">로그인</LoginButton>
-        <SignUpButton $text="signUp">회원가입</SignUpButton>
+        <Button $text="login">로그인</Button>
+        <Button $text="signUp">회원가입</Button>
       </Buttons>
     </form>
   );
@@ -91,7 +91,7 @@ const Buttons = styled.div<InputValidation>`
   ${props => props.$isInvalid && 'margin-top: 23px'};
 `;
 
-const LoginButton = styled.button<ButtonText>`
+const Button = styled.button<ButtonText>`
   min-width: 524px;
 
   border: none;
@@ -112,5 +112,3 @@ const LoginButton = styled.button<ButtonText>`
     cursor: pointer;
   }
 `;
-
-const SignUpButton = styled(LoginButton)<ButtonText>``;

From 36fa8a56624df666c441ce84631d4ed1d1e79efa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=8B=A4=EB=B9=88?= <991012dabin@gmail.com>
Date: Mon, 15 Jan 2024 16:59:12 +0900
Subject: [PATCH 29/29] =?UTF-8?q?modify:=20=ED=91=B8=ED=84=B0=EC=97=90=20?=
 =?UTF-8?q?=ED=91=9C=EC=8B=9C=ED=95=A0=20=EC=97=B0=EB=8F=84=EB=A5=BC=20?=
 =?UTF-8?q?=ED=95=98=EB=93=9C=EC=BD=94=EB=94=A9=EC=97=90=EC=84=9C=20getFul?=
 =?UTF-8?q?lYear()=20=EB=A9=94=EC=86=8C=EB=93=9C=20=EC=82=AC=EC=9A=A9?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Footer/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/common/Footer/index.tsx b/src/components/common/Footer/index.tsx
index a0f9bb8c..54a93874 100644
--- a/src/components/common/Footer/index.tsx
+++ b/src/components/common/Footer/index.tsx
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 
 const Footer = () => {
+  const thisYear = new Date().getFullYear();
   return (
     <Container>
       <Policy>
@@ -9,7 +10,7 @@ const Footer = () => {
         <BoldText>개인정보 처리방침</BoldText>
       </Policy>
       <Copyright>
-        (주) 야놀자 Copyright © 2005-2023 Yanolja Co., Ltd. All rights
+        (주) 야놀자 Copyright © 2005-{thisYear} Yanolja Co., Ltd. All rights
         reserved.
       </Copyright>
     </Container>