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, };