diff --git a/src/Login/components/Comment/Comment.style.ts b/src/Login/components/Comment/Comment.style.ts
new file mode 100644
index 00000000..d182874d
--- /dev/null
+++ b/src/Login/components/Comment/Comment.style.ts
@@ -0,0 +1,51 @@
+import styled from '@emotion/styled';
+
+export const CommentWrapper = styled.section`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ width: 100%;
+ height: calc(100dvh - 36.3rem);
+
+ border-bottom: 0.1rem solid ${({ theme }) => theme.colors.black};
+`;
+
+export const CommentSection = styled.div`
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+
+ width: 33rem;
+ height: 100%;
+`;
+
+export const Comment = styled.i`
+ &:nth-of-type(1) {
+ padding: 4.1rem 12.2rem 0 7.7rem;
+ }
+
+ &:nth-of-type(2) {
+ padding: 1.4rem 18.3rem 0 3.3rem;
+ }
+
+ &:nth-of-type(3) {
+ padding: 6.6rem 6.5rem 5.3rem 10.3rem;
+ }
+`;
+
+export const Line = styled.div`
+ display: flex;
+ justify-content: space-between;
+ flex-direction: column;
+
+ width: 4.2rem;
+ height: 100%;
+ padding: 5.3rem 0;
+
+ border-left: 0.1rem solid ${({ theme }) => theme.colors.black};
+`;
+
+export const Spring = styled.i`
+ margin-left: -2.1rem;
+`;
diff --git a/src/Login/components/Comment/index.tsx b/src/Login/components/Comment/index.tsx
new file mode 100644
index 00000000..3871b7db
--- /dev/null
+++ b/src/Login/components/Comment/index.tsx
@@ -0,0 +1,41 @@
+import {
+ ImgKakao01,
+ ImgKakao02,
+ ImgKakao03,
+ ImgKakaoSpring,
+} from '../../../assets';
+import * as S from './Comment.style';
+
+function Comment() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default Comment;
diff --git a/src/Login/components/Header/Header.style.ts b/src/Login/components/Header/Header.style.ts
new file mode 100644
index 00000000..6904292a
--- /dev/null
+++ b/src/Login/components/Header/Header.style.ts
@@ -0,0 +1,29 @@
+import styled from '@emotion/styled';
+
+export const HeaderWrapper = styled.section`
+ display: flex;
+ flex-direction: column;
+
+ width: 100%;
+ height: 8rem;
+`;
+
+export const Logo = styled.header`
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+
+ width: 100%;
+ height: 4.4rem;
+ padding: 0.8rem 1.3rem;
+
+ background-color: ${({ theme }) => theme.colors.black};
+`;
+
+export const OrangeBlock = styled.div`
+ width: 100%;
+ height: 3.6rem;
+
+ border-bottom: 0.1rem solid ${({ theme }) => theme.colors.black};
+ background-color: ${({ theme }) => theme.colors.key};
+`;
diff --git a/src/Login/components/Header/index.tsx b/src/Login/components/Header/index.tsx
new file mode 100644
index 00000000..02ac1461
--- /dev/null
+++ b/src/Login/components/Header/index.tsx
@@ -0,0 +1,16 @@
+import { ImgKakaoBook, ImgKakaoStarWhite } from '../../../assets';
+import * as S from './Header.style';
+
+function Header() {
+ return (
+
+
+
+
+
+
+
+ );
+}
+
+export default Header;
diff --git a/src/Login/components/LecueLogo/LecueLogo.style.ts b/src/Login/components/LecueLogo/LecueLogo.style.ts
new file mode 100644
index 00000000..056a4b40
--- /dev/null
+++ b/src/Login/components/LecueLogo/LecueLogo.style.ts
@@ -0,0 +1,25 @@
+import styled from '@emotion/styled';
+
+export const LogoWrapper = styled.section`
+ display: flex;
+ justify-content: center;
+
+ width: 100vw;
+ height: 11.2rem;
+
+ border-bottom: 0.1rem solid ${({ theme }) => theme.colors.black};
+`;
+
+export const Line = styled.div`
+ width: 11.2rem;
+
+ border-right: 0.1rem solid ${({ theme }) => theme.colors.black};
+`;
+
+export const Logo = styled.i`
+ display: flex;
+ justify-content: end;
+
+ width: 26.3rem;
+ padding: 1.8rem 1.4rem 2.2rem 2.9rem;
+`;
diff --git a/src/Login/components/LecueLogo/index.tsx b/src/Login/components/LecueLogo/index.tsx
new file mode 100644
index 00000000..032759b4
--- /dev/null
+++ b/src/Login/components/LecueLogo/index.tsx
@@ -0,0 +1,15 @@
+import { ImgKakaoLogo } from '../../../assets';
+import * as S from './LecueLogo.style';
+
+function LecueLogo() {
+ return (
+
+
+
+
+
+
+ );
+}
+
+export default LecueLogo;
diff --git a/src/Login/components/LoginBtnContainer/LoginBtnContainer.style.ts b/src/Login/components/LoginBtnContainer/LoginBtnContainer.style.ts
new file mode 100644
index 00000000..c97ef9ea
--- /dev/null
+++ b/src/Login/components/LoginBtnContainer/LoginBtnContainer.style.ts
@@ -0,0 +1,24 @@
+import styled from '@emotion/styled';
+
+export const LoginBtnWrapper = styled.section`
+ display: flex;
+ justify-content: end;
+ align-items: center;
+ flex-direction: column;
+
+ width: 100%;
+ margin: 3.4rem 0 5.5rem;
+ gap: 1.9rem;
+`;
+
+export const TextWrapper = styled.div`
+ display: flex;
+ justify-content: center;
+
+ width: 100%;
+ gap: 0.3rem;
+`;
+
+export const Text = styled.p`
+ ${({ theme }) => theme.fonts.Body2_M_14}
+`;
diff --git a/src/Login/components/LoginBtnContainer/index.tsx b/src/Login/components/LoginBtnContainer/index.tsx
new file mode 100644
index 00000000..e4a6bc0e
--- /dev/null
+++ b/src/Login/components/LoginBtnContainer/index.tsx
@@ -0,0 +1,24 @@
+import { BtnKakaologin, ImgKakaoStarOrange } from '../../../assets';
+import * as S from './LoginBtnContainer.style';
+
+function LoginBtnContainer() {
+ const handleClickLoginBtn = () => {
+ //로그인 버튼 클릭 시 이벤트
+ alert('로그인 버튼 클릭');
+ };
+
+ return (
+
+
+
+ 소중한 마음을 전달해보세요!
+
+
+
+
+ );
+}
+
+export default LoginBtnContainer;
diff --git a/src/Login/constants/.gitkeep b/src/Login/constants/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/src/Login/hooks/.gitkeep b/src/Login/hooks/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/src/Login/page/Login.style.ts b/src/Login/page/Login.style.ts
new file mode 100644
index 00000000..7e793e9a
--- /dev/null
+++ b/src/Login/page/Login.style.ts
@@ -0,0 +1,16 @@
+import styled from '@emotion/styled';
+
+export const LoginWrapper = styled.section`
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+
+ width: 100vw;
+ height: 100dvh;
+
+ background: linear-gradient(
+ 180deg,
+ ${({ theme }) => theme.colors.key} 1%,
+ ${({ theme }) => theme.colors.background} 55%
+ );
+`;
diff --git a/src/Login/page/index.tsx b/src/Login/page/index.tsx
new file mode 100644
index 00000000..2e3e27bd
--- /dev/null
+++ b/src/Login/page/index.tsx
@@ -0,0 +1,18 @@
+import Comment from '../components/Comment';
+import Header from '../components/Header';
+import LecueLogo from '../components/LecueLogo';
+import LoginBtnContainer from '../components/LoginBtnContainer';
+import * as S from './Login.style';
+
+function Login() {
+ return (
+
+
+
+
+
+
+ );
+}
+
+export default Login;
diff --git a/src/Router.tsx b/src/Router.tsx
index f158b838..28976413 100644
--- a/src/Router.tsx
+++ b/src/Router.tsx
@@ -2,6 +2,7 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom';
import DetailPage from './Detail/page/DetailPage';
import HomePage from './Home/page/HomePage';
+import Login from './Login/page';
import StickerPack from './StickerPack/page/StickerPack';
function Router() {
@@ -9,6 +10,7 @@ function Router() {
} />
+ }>
} />
} />
diff --git a/src/assets/button/btn_kakaologin.svg b/src/assets/button/btn_kakaologin.svg
new file mode 100644
index 00000000..c7394af9
--- /dev/null
+++ b/src/assets/button/btn_kakaologin.svg
@@ -0,0 +1,9 @@
+
diff --git a/src/assets/img/img_kakao_01.svg b/src/assets/img/img_kakao_01.svg
new file mode 100644
index 00000000..68b2c297
--- /dev/null
+++ b/src/assets/img/img_kakao_01.svg
@@ -0,0 +1,9 @@
+
diff --git a/src/assets/img/img_kakao_02.svg b/src/assets/img/img_kakao_02.svg
new file mode 100644
index 00000000..c631b18c
--- /dev/null
+++ b/src/assets/img/img_kakao_02.svg
@@ -0,0 +1,9 @@
+
diff --git a/src/assets/img/img_kakao_03.svg b/src/assets/img/img_kakao_03.svg
new file mode 100644
index 00000000..8b5db7e5
--- /dev/null
+++ b/src/assets/img/img_kakao_03.svg
@@ -0,0 +1,10 @@
+
diff --git a/src/assets/img/img_kakao_book.svg b/src/assets/img/img_kakao_book.svg
new file mode 100644
index 00000000..bc54ccc4
--- /dev/null
+++ b/src/assets/img/img_kakao_book.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/img/img_kakao_logo.svg b/src/assets/img/img_kakao_logo.svg
new file mode 100644
index 00000000..8843fc3a
--- /dev/null
+++ b/src/assets/img/img_kakao_logo.svg
@@ -0,0 +1,10 @@
+
diff --git a/src/assets/img/img_kakao_spring.svg b/src/assets/img/img_kakao_spring.svg
new file mode 100644
index 00000000..41208688
--- /dev/null
+++ b/src/assets/img/img_kakao_spring.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/assets/img/img_kakao_star_orange.svg b/src/assets/img/img_kakao_star_orange.svg
new file mode 100644
index 00000000..ff05fa8f
--- /dev/null
+++ b/src/assets/img/img_kakao_star_orange.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/img/img_kakao_star_white.svg b/src/assets/img/img_kakao_star_white.svg
new file mode 100644
index 00000000..fdfbf5d3
--- /dev/null
+++ b/src/assets/img/img_kakao_star_white.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/index.ts b/src/assets/index.ts
index ecbc85f6..62bd6c4f 100644
--- a/src/assets/index.ts
+++ b/src/assets/index.ts
@@ -4,6 +4,7 @@ import BtnFloatingList from './button/btn_floating_list.svg?react';
import BtnFloatingPostit from './button/btn_floating_postit.svg?react';
import BtnFloatingSticker from './button/btn_floating_sticker.svg?react';
import BtnFloatingWrite from './button/btn_floating_write.svg?react';
+import BtnKakaologin from './button/btn_kakaologin.svg?react';
import IcArrowLeftBlack from './icon/ic_arrow_left_black.svg?react';
import IcArrowLeftWhite from './icon/ic_arrow_left_white.svg?react';
import IcCamera from './icon/ic_camera.svg?react';
@@ -13,6 +14,14 @@ import IcHome from './icon/ic_home.svg?react';
import IcNotice from './icon/ic_notice.svg?react';
import IcSharing from './icon/ic_sharing.svg?react';
import ImgBook from './img/img_book.svg?react';
+import ImgKakao01 from './img/img_kakao_01.svg?react';
+import ImgKakao02 from './img/img_kakao_02.svg?react';
+import ImgKakao03 from './img/img_kakao_03.svg?react';
+import ImgKakaoBook from './img/img_kakao_book.svg?react';
+import ImgKakaoLogo from './img/img_kakao_logo.svg?react';
+import ImgKakaoSpring from './img/img_kakao_spring.svg?react';
+import ImgKakaoStarOrange from './img/img_kakao_star_orange.svg?react';
+import ImgKakaoStarWhite from './img/img_kakao_star_white.svg?react';
import ImgLe from './img/img_le.svg?react';
import ImgLogoLecue from './img/img_logo_lecue.svg?react';
import ImgStarOrangeLine from './img/img_star_orangeline.svg?react';
@@ -24,6 +33,7 @@ export {
BtnFloatingPostit,
BtnFloatingSticker,
BtnFloatingWrite,
+ BtnKakaologin,
IcArrowLeftBlack,
IcArrowLeftWhite,
IcCamera,
@@ -33,9 +43,17 @@ export {
IcNotice,
IcSharing,
ImgBook,
+ ImgKakao01,
+ ImgKakao02,
+ ImgKakao03,
+ ImgKakaoBook,
+ ImgKakaoLogo,
+ ImgKakaoSpring,
+ ImgKakaoStarOrange,
+ ImgKakaoStarWhite,
ImgLe,
ImgLogoLecue,
- ImgStarPosit,
ImgStarOrangeLine,
+ ImgStarPosit,
ImgSticker,
};