Merge pull request #67 from Team-Lecue/feature/Login

[ Login ] dev 머지 PR입니다!

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;
+`;

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 (
+    <S.CommentWrapper>
+      <S.CommentSection>
+        <S.Comment>
+          <ImgKakao01 />
+        </S.Comment>
+
+        <S.Comment>
+          <ImgKakao02 />
+        </S.Comment>
+
+        <S.Comment>
+          <ImgKakao03 />
+        </S.Comment>
+      </S.CommentSection>
+
+      <S.Line>
+        <S.Spring>
+          <ImgKakaoSpring />
+        </S.Spring>
+        <S.Spring>
+          <ImgKakaoSpring />
+        </S.Spring>
+        <S.Spring>
+          <ImgKakaoSpring />
+        </S.Spring>
+      </S.Line>
+    </S.CommentWrapper>
+  );
+}
+
+export default Comment;

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};
+`;

src/Login/components/Header/index.tsx

@@ -0,0 +1,16 @@
+import { ImgKakaoBook, ImgKakaoStarWhite } from '../../../assets';
+import * as S from './Header.style';
+
+function Header() {
+  return (
+    <S.HeaderWrapper>
+      <S.Logo>
+        <ImgKakaoStarWhite />
+        <ImgKakaoBook />
+      </S.Logo>
+      <S.OrangeBlock />
+    </S.HeaderWrapper>
+  );
+}
+
+export default Header;

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;
+`;

src/Login/components/LecueLogo/index.tsx

@@ -0,0 +1,15 @@
+import { ImgKakaoLogo } from '../../../assets';
+import * as S from './LecueLogo.style';
+
+function LecueLogo() {
+  return (
+    <S.LogoWrapper>
+      <S.Line />
+      <S.Logo>
+        <ImgKakaoLogo />
+      </S.Logo>
+    </S.LogoWrapper>
+  );
+}
+
+export default LecueLogo;

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}
+`;

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 (
+    <S.LoginBtnWrapper>
+      <S.TextWrapper>
+        <ImgKakaoStarOrange />
+        <S.Text>소중한 마음을 전달해보세요!</S.Text>
+        <ImgKakaoStarOrange />
+      </S.TextWrapper>
+      <button onClick={handleClickLoginBtn}>
+        <BtnKakaologin />
+      </button>
+    </S.LoginBtnWrapper>
+  );
+}
+
+export default LoginBtnContainer;

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%
+  );
+`;

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 (
+    <S.LoginWrapper>
+      <Header />
+      <LecueLogo />
+      <Comment />
+      <LoginBtnContainer />
+    </S.LoginWrapper>
+  );
+}
+
+export default Login;

src/Router.tsx

@@ -2,13 +2,15 @@ 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() {
   return (
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<HomePage />} />
+        <Route path="/login" element={<Login />}></Route>
         <Route path="/sticker-pack" element={<StickerPack />} />
         <Route path="/detail" element={<DetailPage />} />
       </Routes>