[ Login ] 로그인 뷰 구현

src/App.tsx

@@ -12,6 +12,8 @@ export default function App() {
 
 const St = {
   MobileContainer: styled.div`
+    position: relative;
+
     margin: 0 auto;
 
     @media screen and (min-width: 48rem), screen and (min-height: 48rem) and (orientation: landscape) {

src/asset/icon/index.ts

@@ -1,7 +1,9 @@
+export { ReactComponent as IcCloseBtn } from "./closeBtn.svg";
 export { ReactComponent as IcEmptyHeart } from "./emptyHeart.svg";
 export { ReactComponent as IcFilterBtn } from "./filterBtn.svg";
 export { ReactComponent as IcHamburger } from "./hamburger.svg";
 export { ReactComponent as IcLogo } from "./logo.svg";
-export { ReactComponent as IcNextCardBtmn } from "./nextCardBtn.svg";
+export { ReactComponent as IcMenuBarImg } from "./MenuBar Profile.svg";
+export { ReactComponent as IcNextCardBtn } from "./nextCardBtn.svg";
 export { ReactComponent as IcVoteImg1 } from "./voteImg1.svg";
 export { ReactComponent as IcVoteImg2 } from "./voteImg2.svg";

src/components/CardCollection/Card/LastCard/index.tsx

@@ -1,4 +1,4 @@
-import { IcNextCardBtmn } from "../../../../asset/icon";
+import { IcNextCardBtn } from "../../../../asset/icon";
 import { St } from "./style";
 
 export default function LastCard() {
@@ -16,7 +16,7 @@ export default function LastCard() {
       </St.Content>
 
       <St.CategoryLink to="/category">
-        <IcNextCardBtmn />
+        <IcNextCardBtn />
       </St.CategoryLink>
 
       <St.HomeLink to="/">홈으로 돌아가기</St.HomeLink>

src/components/Login/LoginForm/index.tsx

@@ -0,0 +1,38 @@
+/*
+마지막 편집자: 22-07-14 joohaem
+변경사항 및 참고:
+  - "react-hook-form" 도입 고려해도 좋을 것 같습니다
+
+고민점:
+  - 
+*/
+
+import { useState } from "react";
+
+import { St } from "./style";
+
+export default function LoginForm() {
+  const [errorMessage, setErrorMessage] = useState({ emailError: "", passwordError: "" });
+
+  const submitLoginForm = (e: React.FormEvent<HTMLElement>) => {
+    e.preventDefault();
+  };
+
+  return (
+    <St.Section onSubmit={submitLoginForm}>
+      <St.Title>로그인</St.Title>
+      <St.Form>
+        <St.Label htmlFor="email">이메일</St.Label>
+        <St.Input id="email" type="text" />
+        {errorMessage.emailError && <St.ErrorMessage>{errorMessage.emailError}</St.ErrorMessage>}
+        <St.Label htmlFor="password">비밀번호</St.Label>
+        <St.Input id="password" type="password" />
+        {errorMessage.passwordError && <St.ErrorMessage>{errorMessage.passwordError}</St.ErrorMessage>}
+        <St.LoginBtn type="submit">로그인하기</St.LoginBtn>
+      </St.Form>
+      <St.LinkWrapper>
+        <St.Link>회원가입</St.Link> <St.Delimeter>|</St.Delimeter> <St.Link>비밀번호 재설정</St.Link>
+      </St.LinkWrapper>
+    </St.Section>
+  );
+}

src/components/Login/LoginForm/style.ts

@@ -0,0 +1,80 @@
+import styled from "styled-components";
+
+export const St = {
+  Section: styled.section`
+    padding: 0 1.2rem;
+  `,
+
+  Form: styled.form``,
+
+  Title: styled.h2`
+    margin-bottom: 2rem;
+
+    ${({ theme }) => theme.fonts.h1};
+    color: ${({ theme }) => theme.colors.bg};
+  `,
+
+  Label: styled.label`
+    display: block;
+
+    margin: 1.6rem 0 1.2rem;
+
+    ${({ theme }) => theme.fonts.body6};
+    color: ${({ theme }) => theme.colors.gray600};
+  `,
+
+  ErrorMessage: styled.strong`
+    display: block;
+
+    margin: 0.8rem 0 0 2rem;
+
+    ${({ theme }) => theme.fonts.caption5};
+    color: ${({ theme }) => theme.colors.red}; ;
+  `,
+
+  Input: styled.input`
+    width: 100%;
+    height: 4.4rem;
+
+    padding: 1.2rem 0 1.2rem 2.4rem;
+
+    border: 0.1rem solid ${({ theme }) => theme.colors.gray300};
+    border-radius: 4.9rem;
+
+    ${({ theme }) => theme.fonts.body6};
+    color: ${({ theme }) => theme.colors.gray400};
+  `,
+
+  LoginBtn: styled.button`
+    width: 100%;
+    height: 5rem;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    margin-top: 2.4rem;
+
+    background-color: ${({ theme }) => theme.colors.bg};
+    border-radius: 5rem;
+
+    ${({ theme }) => theme.fonts.btn2};
+    color: ${({ theme }) => theme.colors.white};
+  `,
+
+  LinkWrapper: styled.ul`
+    margin: 3.9rem 0 19.3rem;
+
+    display: flex;
+    justify-content: center;
+
+    ${({ theme }) => theme.fonts.body6};
+    color: ${({ theme }) => theme.colors.gray600};
+  `,
+
+  Link: styled.li``,
+
+  Delimeter: styled.span`
+    margin: 0 1rem;
+  `,
+};

src/components/Login/index.tsx

@@ -1,9 +1,13 @@
 import Header from "../common/Header";
+import Footer from "../Main/Footer";
+import LoginForm from "./LoginForm";
 
 export default function Login() {
   return (
     <main>
       <Header />
+      <LoginForm />
+      <Footer />
     </main>
   );
 }

src/components/Main/CTABtn/index.tsx

@@ -1,5 +1,9 @@
 import { St } from "./style";
 
 export default function CTABtn() {
-  return <St.Button to="/category">대화주제 추천 바로가기</St.Button>;
+  return (
+    <St.Button role="button" to="/category">
+      대화주제 추천 바로가기
+    </St.Button>
+  );
 }

src/components/Main/MenuBar/index.tsx

@@ -0,0 +1,47 @@
+import { IcCloseBtn, IcMenuBarImg } from "../../../asset/icon";
+import { St } from "./style";
+
+interface MenuBarProps {
+  handleModal: () => void;
+}
+
+const MenuBarDummy = {
+  profileImg: <IcMenuBarImg />,
+  name: "윤지영",
+};
+export default function MenuBar(props: MenuBarProps) {
+  const { handleModal } = props;
+
+  return (
+    <St.Root>
+      <St.ContentsContainer>
+        <St.CloseBtnContainer onClick={handleModal}>
+          <IcCloseBtn />
+        </St.CloseBtnContainer>
+        <St.ProfileContainer>
+          {MenuBarDummy.profileImg}
+          <St.WelcomeText>
+            {MenuBarDummy.name}님, <br />
+            안녕하세요
+          </St.WelcomeText>
+          <St.DescriptText>오늘도 피클과 함께 대화 나눠요</St.DescriptText>
+          <St.BtnContainer>
+            <St.MyProfileBtn>My 프로필</St.MyProfileBtn>
+            <St.LogoutBtn>로그아웃</St.LogoutBtn>
+          </St.BtnContainer>
+        </St.ProfileContainer>
+        <St.RecomendContainer>
+          <St.TitleText>대화 주제 추천 카드</St.TitleText>
+          <St.MoodPiickleContainer>
+            <St.MoodPiickleText>Mood Piickles</St.MoodPiickleText>
+            <St.GoMoodPiickleBtn>카테고리별 대화주제 추천</St.GoMoodPiickleBtn>
+          </St.MoodPiickleContainer>
+          <St.PiickleMeContainer>
+            <St.PiickleMeText>Piickle Me</St.PiickleMeText>
+            <St.GoPiickleMeBtn>진행중인 투표</St.GoPiickleMeBtn>
+          </St.PiickleMeContainer>
+        </St.RecomendContainer>
+      </St.ContentsContainer>
+    </St.Root>
+  );
+}

src/components/Main/MenuBar/style.ts

@@ -0,0 +1,136 @@
+import styled from "styled-components";
+
+import { IcCloseBtn } from "../../../asset/icon";
+
+export const St = {
+  Root: styled.section`
+    /* width: 36rem;
+    height: 100vh; */
+
+    background-color: ${({ theme }) => theme.colors.gray600};
+
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    z-index: 10;
+  `,
+
+  ContentsContainer: styled.section`
+    width: 28.8rem;
+    height: 100vh;
+    float: right;
+
+    background-color: ${({ theme }) => theme.colors.white};
+
+    padding-top: 10.1rem;
+    padding-left: 1.8rem;
+  `,
+
+  CloseBtnContainer: styled.div`
+    float: right;
+    margin-right: 1.6rem;
+  `,
+
+  ProfileContainer: styled.article`
+    border-bottom: solid 2px #f1f1f1;
+
+    padding-bottom: 3.6rem;
+  `,
+  WelcomeText: styled.h1`
+    ${({ theme }) => theme.fonts.body1};
+    font-size: 24px;
+    line-height: 3.36rem;
+
+    color: ${({ theme }) => theme.colors.bg};
+
+    margin-top: 1.6rem;
+  `,
+
+  DescriptText: styled.h2`
+    ${({ theme }) => theme.fonts.body12};
+    font-size: 16px;
+
+    color: ${({ theme }) => theme.colors.gray600};
+
+    margin-top: 0.4rem;
+  `,
+
+  BtnContainer: styled.div`
+    display: flex;
+    align-items: center;
+
+    color: ${({ theme }) => theme.colors.gray600};
+
+    margin-top: 3.6rem;
+  `,
+
+  MyProfileBtn: styled.button`
+    ${({ theme }) => theme.fonts.btn2};
+
+    color: ${({ theme }) => theme.colors.gray600};
+
+    border-right: solid 1.5px #606060;
+
+    padding-right: 1rem;
+  `,
+
+  LogoutBtn: styled.button`
+    ${({ theme }) => theme.fonts.body12};
+    color: ${({ theme }) => theme.colors.gray600};
+
+    padding-left: 1rem;
+  `,
+
+  RecomendContainer: styled.article`
+    padding-top: 3.6rem;
+  `,
+
+  TitleText: styled.h1`
+    ${({ theme }) => theme.fonts.caption1};
+
+    color: ${({ theme }) => theme.colors.bg};
+  `,
+
+  MoodPiickleContainer: styled.div`
+    display: flex;
+
+    margin-top: 2.4rem;
+  `,
+
+  MoodPiickleText: styled.h2`
+    ${({ theme }) => theme.fonts.caption1};
+
+    color: ${({ theme }) => theme.colors.bg};
+
+    margin-right: 1.2rem;
+  `,
+
+  GoMoodPiickleBtn: styled.button`
+    ${({ theme }) => theme.fonts.body12};
+
+    color: ${({ theme }) => theme.colors.gray600};
+  `,
+
+  PiickleMeContainer: styled.div`
+    display: flex;
+
+    margin-top: 2.4rem;
+  `,
+
+  PiickleMeText: styled.h2`
+    ${({ theme }) => theme.fonts.caption1};
+
+    color: ${({ theme }) => theme.colors.bg};
+
+    margin-right: 1.2rem;
+  `,
+
+  GoPiickleMeBtn: styled.button`
+    ${({ theme }) => theme.fonts.body12};
+
+    color: ${({ theme }) => theme.colors.gray600};
+  `,
+};