Merge branch 'develop' into feat/#36-filter_modal

package.json

@@ -24,6 +24,7 @@
     "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.1",
     "react-slick": "^0.29.0",
+    "recoil": "^0.7.4",
     "slick-carousel": "^1.8.1",
     "styled-components": "^5.3.5"
   },

src/App.tsx

@@ -1,17 +1,25 @@
+import { useRecoilValue } from "recoil";
 import styled from "styled-components";
 
+import { activeState } from "./core/atom/menuBar";
 import Router from "./Router";
+import { ModalStyle } from "./style/modalStyle";
 
 export default function App() {
+  const isActive = useRecoilValue(activeState);
+
   return (
     <St.MobileContainer>
+      {isActive && <ModalStyle />}
       <Router />
     </St.MobileContainer>
   );
 }
 
 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,8 +1,11 @@
+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 IcCloseBtn } from "./modalCloseBtn.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/CardCollection/CardSlider/style.ts

@@ -1,13 +1,3 @@
-/*
-마지막 편집자: 22-07-13 joohaem
-변경사항 및 참고:
-  - height/scale, background 애니메이션이 너무 이상하게 들어가서 
-  주석처리 된 부분들 디자인팀과 소통이 좀 필요할 것 같아요
-    
-고민점:
-  - 
-*/
-
 import styled from "styled-components";
 
 import { IcFilterBtn } from "../../../asset/icon";
@@ -30,9 +20,6 @@ export const St = {
       height: 100%;
       /* width: calc(100vw - 5.6rem); */
       /* height: calc(100vh - 10.5rem); */
-
-      /* background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), rgba(211, 245, 232, 0.5);
-      backdrop-filter: blur(1.2rem); */
     }
 
     & .slick-slide.slick-active article {
@@ -53,7 +40,7 @@ export const St = {
   `,
 
   IcFilterBtn: styled(IcFilterBtn)`
-    position: absolute;
+    position: fixed;
     right: 2.3rem;
     bottom: 3.4rem;
   `,

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/BestPiickle/BestPiickleCard/style.ts

@@ -25,7 +25,7 @@ export const St = {
   `,
 
   Content: styled.p`
-    ${({ theme }) => theme.fonts.caption1};
+    ${({ theme }) => theme.fonts.body1};
     color: ${({ theme }) => theme.colors.black};
 
     width: 17rem;

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/Footer/style.ts

@@ -26,12 +26,9 @@ export const St = {
   BasicInfoTitle: styled.li`
     height: 1.7rem;
 
+    ${({ theme }) => theme.fonts.footer1};
+
     font-family: "Pretendard";
-    font-style: normal;
-    font-weight: 600;
-    font-size: 1.2rem;
-    line-height: 140%;
-    letter-spacing: -0.04rem;
 
     color: ${({ theme }) => theme.colors.bg};
   `,
@@ -51,12 +48,7 @@ export const St = {
     height: 1.7rem;
     margin-bottom: 0.3rem;
 
-    font-family: "Pretendard";
-    font-style: normal;
-    font-weight: 600;
-    font-size: 1.2rem;
-    line-height: 140%;
-    letter-spacing: -0.04rem;
+    ${({ theme }) => theme.fonts.footer1};
 
     color: ${({ theme }) => theme.colors.bg};
   `,
@@ -65,7 +57,7 @@ export const St = {
     height: 1.7rem;
     margin-bottom: 2rem;
 
-    ${({ theme }) => theme.fonts.btn3};
+    ${({ theme }) => theme.fonts.footer2};
     color: ${({ theme }) => theme.colors.gray600};
   `,
 };