From f20990e0827da5e37daece3574725eed4cc87ebd Mon Sep 17 00:00:00 2001 From: JY Date: Thu, 14 Jul 2022 14:14:39 +0900 Subject: [PATCH 01/12] =?UTF-8?q?[=20design=20]=20position=20relative=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/App.tsx b/src/App.tsx index 1dd16ca1..7204edfa 100644 --- a/src/App.tsx +++ b/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) { From 615974bb47f98a75da8e3d0062da7a95e662fe7a Mon Sep 17 00:00:00 2001 From: JY Date: Thu, 14 Jul 2022 14:14:59 +0900 Subject: [PATCH 02/12] =?UTF-8?q?[=20disign=20]=20=EC=9D=B4=EB=AF=B8?= =?UTF-8?q?=EC=A7=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/asset/icon/MenuBar Profile.svg | 9 +++++++++ src/asset/icon/closeBtn.svg | 4 ++++ 2 files changed, 13 insertions(+) create mode 100644 src/asset/icon/MenuBar Profile.svg create mode 100644 src/asset/icon/closeBtn.svg diff --git a/src/asset/icon/MenuBar Profile.svg b/src/asset/icon/MenuBar Profile.svg new file mode 100644 index 00000000..2f524674 --- /dev/null +++ b/src/asset/icon/MenuBar Profile.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/asset/icon/closeBtn.svg b/src/asset/icon/closeBtn.svg new file mode 100644 index 00000000..e1e31c3e --- /dev/null +++ b/src/asset/icon/closeBtn.svg @@ -0,0 +1,4 @@ + + + + From 84acb29d715ad8de3b9a4f04fe4b58b62d3dab6a Mon Sep 17 00:00:00 2001 From: JY Date: Thu, 14 Jul 2022 14:15:15 +0900 Subject: [PATCH 03/12] =?UTF-8?q?[=20design=20]=20=EC=9D=B4=EB=AF=B8?= =?UTF-8?q?=EC=A7=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/asset/icon/index.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/asset/icon/index.ts b/src/asset/icon/index.ts index de94a289..e701c011 100644 --- a/src/asset/icon/index.ts +++ b/src/asset/icon/index.ts @@ -1,4 +1,6 @@ +export { ReactComponent as IcCloseBtn } from "./closeBtn.svg"; export { ReactComponent as IcHamburger } from "./hamburger.svg"; export { ReactComponent as IcLogo } from "./logo.svg"; +export { ReactComponent as IcMenuBarImg } from "./MenuBar Profile.svg"; export { ReactComponent as IcVoteImg1 } from "./voteImg1.svg"; export { ReactComponent as IcVoteImg2 } from "./voteImg2.svg"; From c52248cc46ce6c138e2d3e2b20bd1e8f70119ffa Mon Sep 17 00:00:00 2001 From: JY Date: Thu, 14 Jul 2022 14:16:05 +0900 Subject: [PATCH 04/12] =?UTF-8?q?[=20feat=20]=20=ED=97=A4=EB=8D=94=20?= =?UTF-8?q?=ED=96=84=EB=B2=84=EA=B1=B0=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20?= =?UTF-8?q?=EB=A9=94=EB=89=B4=EB=B0=94=20=EC=B6=9C=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Header/index.tsx | 44 +++++++++++++++++++++----- 1 file changed, 36 insertions(+), 8 deletions(-) diff --git a/src/components/common/Header/index.tsx b/src/components/common/Header/index.tsx index d57a41f4..35ad6aed 100644 --- a/src/components/common/Header/index.tsx +++ b/src/components/common/Header/index.tsx @@ -1,15 +1,43 @@ +import { useEffect, useState } from "react"; import { Link } from "react-router-dom"; import { IcHamburger, IcLogo } from "../../../asset/icon"; +import MenuBar from "../../Main/MenuBar"; import { St } from "./style"; export default function Header() { - return ( - - - - - - - ); + const [isOpened, setIsOpened] = useState(false); + + const handleModal = () => { + setIsOpened(!isOpened); + }; + // return ( + // + // + // + // + // + // + // + // + // ); + + useEffect(() => { + console.log(isOpened); + }, [isOpened]); + + if (isOpened) { + return ; + } else { + return ( + + + + + + + + + ); + } } From 12ab08e2a17a9393284fb3ffb0aa9b0a1b49b7e4 Mon Sep 17 00:00:00 2001 From: JY Date: Thu, 14 Jul 2022 14:16:44 +0900 Subject: [PATCH 05/12] =?UTF-8?q?[=20disign=20]=20=ED=96=84=EB=B2=84?= =?UTF-8?q?=EA=B1=B0container=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Header/style.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/common/Header/style.ts b/src/components/common/Header/style.ts index 70fedf19..ff673a54 100644 --- a/src/components/common/Header/style.ts +++ b/src/components/common/Header/style.ts @@ -16,4 +16,6 @@ export const St = { z-index: 10; `, + + HamburgerContainer: styled.div<{ isClicked: boolean }>``, }; From 42cb94b05739a931812774535f636adbc727fa6b Mon Sep 17 00:00:00 2001 From: JY Date: Thu, 14 Jul 2022 14:17:47 +0900 Subject: [PATCH 06/12] =?UTF-8?q?[=20fix=20]=20return=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Main/CTABtn/index.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/Main/CTABtn/index.tsx b/src/components/Main/CTABtn/index.tsx index b6b967b0..964fd66f 100644 --- a/src/components/Main/CTABtn/index.tsx +++ b/src/components/Main/CTABtn/index.tsx @@ -1,5 +1,9 @@ import { St } from "./style"; export default function CTABtn() { - return 대화주제 추천 바로가기; + return ( + + 대화주제 추천 바로가기 + + ); } From 5ceb9636a520a3bd2c57ea2e68db47977b360325 Mon Sep 17 00:00:00 2001 From: JY Date: Thu, 14 Jul 2022 14:18:08 +0900 Subject: [PATCH 07/12] =?UTF-8?q?[=20feat=20]=20=EB=A9=94=EB=89=B4?= =?UTF-8?q?=EB=B0=94=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Main/MenuBar/index.tsx | 47 +++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 src/components/Main/MenuBar/index.tsx diff --git a/src/components/Main/MenuBar/index.tsx b/src/components/Main/MenuBar/index.tsx new file mode 100644 index 00000000..282a3cff --- /dev/null +++ b/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: , + name: "윤지영", +}; +export default function MenuBar(props: MenuBarProps) { + const { handleModal } = props; + + return ( + + + + + + + {MenuBarDummy.profileImg} + + {MenuBarDummy.name}님,
+ 안녕하세요 + + 오늘도 피클과 함께 대화 나눠요 + + My 프로필 + 로그아웃 + + + + 대화 주제 추천 카드 + + Mood Piickles + 카테고리별 대화주제 추천 + + + Piickle Me + 진행중인 투표 + + + + + ); +} From 4dfd004fb20abd496d80fe6646c27b5921dd59a3 Mon Sep 17 00:00:00 2001 From: JY Date: Thu, 14 Jul 2022 14:18:23 +0900 Subject: [PATCH 08/12] =?UTF-8?q?[=20disign=20]=20=EB=A9=94=EB=89=B4?= =?UTF-8?q?=EB=B0=94=20style?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Main/MenuBar/style.ts | 136 +++++++++++++++++++++++++++ 1 file changed, 136 insertions(+) create mode 100644 src/components/Main/MenuBar/style.ts diff --git a/src/components/Main/MenuBar/style.ts b/src/components/Main/MenuBar/style.ts new file mode 100644 index 00000000..56e52ccc --- /dev/null +++ b/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}; + `, +}; From 14f78bf47088ebf87623755503f8bcd6f3667166 Mon Sep 17 00:00:00 2001 From: SNUPI Date: Thu, 14 Jul 2022 20:24:01 +0900 Subject: [PATCH 09/12] [ feat ] make up login page --- src/components/Login/LoginForm/index.tsx | 28 ++++++++++ src/components/Login/LoginForm/style.ts | 71 ++++++++++++++++++++++++ src/components/Login/index.tsx | 4 ++ 3 files changed, 103 insertions(+) create mode 100644 src/components/Login/LoginForm/index.tsx create mode 100644 src/components/Login/LoginForm/style.ts diff --git a/src/components/Login/LoginForm/index.tsx b/src/components/Login/LoginForm/index.tsx new file mode 100644 index 00000000..f167c40f --- /dev/null +++ b/src/components/Login/LoginForm/index.tsx @@ -0,0 +1,28 @@ +/* +마지막 편집자: 22-07-14 joohaem +변경사항 및 참고: + - "react-hook-form" 도입 고려해도 좋을 것 같습니다 + +고민점: + - +*/ + +import { St } from "./style"; + +export default function LoginForm() { + return ( + + 로그인 + + 이메일 + + 비밀번호 + + 로그인하기 + + + 회원가입 | 비밀번호 재설정 + + + ); +} diff --git a/src/components/Login/LoginForm/style.ts b/src/components/Login/LoginForm/style.ts new file mode 100644 index 00000000..2b119297 --- /dev/null +++ b/src/components/Login/LoginForm/style.ts @@ -0,0 +1,71 @@ +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: inline-block; + + margin: 1.6rem 0 1.2rem; + + ${({ theme }) => theme.fonts.body6}; + color: ${({ theme }) => theme.colors.gray600}; + `, + + 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; + `, +}; diff --git a/src/components/Login/index.tsx b/src/components/Login/index.tsx index ac070eaf..bac142af 100644 --- a/src/components/Login/index.tsx +++ b/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 (
+ +
); } From e467779c196d7f67f2913972f214574ae6f65abf Mon Sep 17 00:00:00 2001 From: SNUPI Date: Thu, 14 Jul 2022 20:33:48 +0900 Subject: [PATCH 10/12] [ feat ] make up login error message --- src/components/Login/LoginForm/index.tsx | 20 ++++++++++++++++---- src/components/Login/LoginForm/style.ts | 14 ++++++++++++++ 2 files changed, 30 insertions(+), 4 deletions(-) diff --git a/src/components/Login/LoginForm/index.tsx b/src/components/Login/LoginForm/index.tsx index f167c40f..e29bfaf5 100644 --- a/src/components/Login/LoginForm/index.tsx +++ b/src/components/Login/LoginForm/index.tsx @@ -7,18 +7,30 @@ - */ +import { useState } from "react"; + import { St } from "./style"; export default function LoginForm() { + const [errorMessage, setErrorMessage] = useState({ emailError: "", passwordError: "" }); + + const submitLoginForm = (e: React.FormEvent) => { + e.preventDefault(); + }; + return ( - + 로그인 - 이메일 + + 이메일{errorMessage.emailError && {errorMessage.emailError}} + - 비밀번호 + + 비밀번호{errorMessage.passwordError && {errorMessage.passwordError}} + - 로그인하기 + 로그인하기 회원가입 | 비밀번호 재설정 diff --git a/src/components/Login/LoginForm/style.ts b/src/components/Login/LoginForm/style.ts index 2b119297..6445efeb 100644 --- a/src/components/Login/LoginForm/style.ts +++ b/src/components/Login/LoginForm/style.ts @@ -23,6 +23,20 @@ export const St = { color: ${({ theme }) => theme.colors.gray600}; `, + ErrorMessage: styled.strong` + margin-left: 1.5rem; + + font-family: "Pretendard"; + font-style: normal; + font-weight: 400; + font-size: 11px; + line-height: 140%; + + /* piickle_red */ + + color: ${({ theme }) => theme.colors.red}; ; + `, + Input: styled.input` width: 100%; height: 4.4rem; From 2bbb632b62e3956b30c62505d0fbdb923382d2fe Mon Sep 17 00:00:00 2001 From: SNUPI Date: Thu, 14 Jul 2022 21:46:29 +0900 Subject: [PATCH 11/12] [ feat ] error message --- src/components/Login/LoginForm/index.tsx | 10 ++++------ src/components/Login/LoginForm/style.ts | 13 ++++--------- 2 files changed, 8 insertions(+), 15 deletions(-) diff --git a/src/components/Login/LoginForm/index.tsx b/src/components/Login/LoginForm/index.tsx index e29bfaf5..2606928e 100644 --- a/src/components/Login/LoginForm/index.tsx +++ b/src/components/Login/LoginForm/index.tsx @@ -22,14 +22,12 @@ export default function LoginForm() { 로그인 - - 이메일{errorMessage.emailError && {errorMessage.emailError}} - + 이메일 - - 비밀번호{errorMessage.passwordError && {errorMessage.passwordError}} - + {errorMessage.emailError && {errorMessage.emailError}} + 비밀번호 + {errorMessage.passwordError && {errorMessage.passwordError}} 로그인하기 diff --git a/src/components/Login/LoginForm/style.ts b/src/components/Login/LoginForm/style.ts index 6445efeb..8f0792fa 100644 --- a/src/components/Login/LoginForm/style.ts +++ b/src/components/Login/LoginForm/style.ts @@ -15,7 +15,7 @@ export const St = { `, Label: styled.label` - display: inline-block; + display: block; margin: 1.6rem 0 1.2rem; @@ -24,16 +24,11 @@ export const St = { `, ErrorMessage: styled.strong` - margin-left: 1.5rem; + display: block; - font-family: "Pretendard"; - font-style: normal; - font-weight: 400; - font-size: 11px; - line-height: 140%; - - /* piickle_red */ + margin: 0.8rem 0 0 2rem; + ${({ theme }) => theme.fonts.caption5}; color: ${({ theme }) => theme.colors.red}; ; `, From f36268609482a78bb50940e6d9c3c1616c133dc6 Mon Sep 17 00:00:00 2001 From: SNUPI Date: Fri, 15 Jul 2022 00:04:42 +0900 Subject: [PATCH 12/12] [ etc ] code review :: remove unused code --- src/components/Main/MenuBar/style.ts | 3 --- src/components/common/Header/index.tsx | 16 +--------------- 2 files changed, 1 insertion(+), 18 deletions(-) diff --git a/src/components/Main/MenuBar/style.ts b/src/components/Main/MenuBar/style.ts index 56e52ccc..f0d52083 100644 --- a/src/components/Main/MenuBar/style.ts +++ b/src/components/Main/MenuBar/style.ts @@ -4,9 +4,6 @@ import { IcCloseBtn } from "../../../asset/icon"; export const St = { Root: styled.section` - /* width: 36rem; - height: 100vh; */ - background-color: ${({ theme }) => theme.colors.gray600}; position: absolute; diff --git a/src/components/common/Header/index.tsx b/src/components/common/Header/index.tsx index 5c060a5d..66559e0f 100644 --- a/src/components/common/Header/index.tsx +++ b/src/components/common/Header/index.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from "react"; +import { useState } from "react"; import { Link, useLocation } from "react-router-dom"; import { IcHamburger, IcLogo } from "../../../asset/icon"; @@ -12,20 +12,6 @@ export default function Header() { const handleModal = () => { setIsOpened(!isOpened); }; - // return ( - // - // - // - // - // - // - // - // - // ); - - useEffect(() => { - console.log(isOpened); - }, [isOpened]); if (isOpened) { return ;