From f20990e0827da5e37daece3574725eed4cc87ebd Mon Sep 17 00:00:00 2001 From: JY Date: Thu, 14 Jul 2022 14:14:39 +0900 Subject: [PATCH 01/25] =?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/25] =?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/25] =?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/25] =?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/25] =?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/25] =?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/25] =?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/25] =?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 2e67f73f32aa6196ff4affbd36a61bad3edc972c Mon Sep 17 00:00:00 2001 From: SNUPI Date: Thu, 14 Jul 2022 15:07:31 +0900 Subject: [PATCH 09/25] =?UTF-8?q?[=20fix=20]=20=EB=A0=88=EC=9D=B4=EC=95=84?= =?UTF-8?q?=EC=9B=83=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/MenuBar/index.tsx | 1 + src/components/Main/MenuBar/style.ts | 15 ++++----------- src/components/common/Header/index.tsx | 10 ---------- 3 files changed, 5 insertions(+), 21 deletions(-) diff --git a/src/components/Main/MenuBar/index.tsx b/src/components/Main/MenuBar/index.tsx index 282a3cff..a7d20b8c 100644 --- a/src/components/Main/MenuBar/index.tsx +++ b/src/components/Main/MenuBar/index.tsx @@ -9,6 +9,7 @@ const MenuBarDummy = { profileImg: , name: "윤지영", }; + export default function MenuBar(props: MenuBarProps) { const { handleModal } = props; diff --git a/src/components/Main/MenuBar/style.ts b/src/components/Main/MenuBar/style.ts index 56e52ccc..415f81a2 100644 --- a/src/components/Main/MenuBar/style.ts +++ b/src/components/Main/MenuBar/style.ts @@ -1,20 +1,12 @@ import styled from "styled-components"; -import { IcCloseBtn } from "../../../asset/icon"; - export const St = { Root: styled.section` - /* width: 36rem; - height: 100vh; */ + width: 36rem; + height: 100vh; background-color: ${({ theme }) => theme.colors.gray600}; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 10; `, @@ -25,7 +17,7 @@ export const St = { background-color: ${({ theme }) => theme.colors.white}; - padding-top: 10.1rem; + padding-top: 1.9em; padding-left: 1.8rem; `, @@ -39,6 +31,7 @@ export const St = { padding-bottom: 3.6rem; `, + WelcomeText: styled.h1` ${({ theme }) => theme.fonts.body1}; font-size: 24px; diff --git a/src/components/common/Header/index.tsx b/src/components/common/Header/index.tsx index 5c060a5d..7c8c45a5 100644 --- a/src/components/common/Header/index.tsx +++ b/src/components/common/Header/index.tsx @@ -12,16 +12,6 @@ export default function Header() { const handleModal = () => { setIsOpened(!isOpened); }; - // return ( - // - // - // - // - // - // - // - // - // ); useEffect(() => { console.log(isOpened); From f358ddc9fda32fb1360cbb0f6db8e13a2e53b508 Mon Sep 17 00:00:00 2001 From: SNUPI Date: Thu, 14 Jul 2022 15:24:38 +0900 Subject: [PATCH 10/25] [ feat ] add recoil --- package.json | 1 + src/components/common/Header/index.tsx | 23 +++++--------- .../{Main => common}/MenuBar/index.tsx | 13 ++++---- .../{Main => common}/MenuBar/style.ts | 0 src/core/atom/menuBar.ts | 10 ++++++ yarn.lock | 31 +++++++------------ 6 files changed, 37 insertions(+), 41 deletions(-) rename src/components/{Main => common}/MenuBar/index.tsx (83%) rename src/components/{Main => common}/MenuBar/style.ts (100%) create mode 100644 src/core/atom/menuBar.ts diff --git a/package.json b/package.json index a4289db2..2b535f30 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,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" }, diff --git a/src/components/common/Header/index.tsx b/src/components/common/Header/index.tsx index 7c8c45a5..9989233c 100644 --- a/src/components/common/Header/index.tsx +++ b/src/components/common/Header/index.tsx @@ -1,32 +1,25 @@ -import { useEffect, useState } from "react"; import { Link, useLocation } from "react-router-dom"; +import { useRecoilState } from "recoil"; import { IcHamburger, IcLogo } from "../../../asset/icon"; -import MenuBar from "../../Main/MenuBar"; +import { activeState } from "../../../core/atom/menuBar"; +import MenuBar from "../MenuBar"; import { St } from "./style"; export default function Header() { const { pathname } = useLocation(); - const [isOpened, setIsOpened] = useState(false); + const [isActive, setIsActive] = useRecoilState(activeState); - const handleModal = () => { - setIsOpened(!isOpened); - }; - - useEffect(() => { - console.log(isOpened); - }, [isOpened]); - - if (isOpened) { - return ; + if (isActive) { + return ; } else { return ( - - + + setIsActive((prevState) => !prevState)} /> ); diff --git a/src/components/Main/MenuBar/index.tsx b/src/components/common/MenuBar/index.tsx similarity index 83% rename from src/components/Main/MenuBar/index.tsx rename to src/components/common/MenuBar/index.tsx index a7d20b8c..8afac5fb 100644 --- a/src/components/Main/MenuBar/index.tsx +++ b/src/components/common/MenuBar/index.tsx @@ -1,22 +1,21 @@ +import { useSetRecoilState } from "recoil"; + import { IcCloseBtn, IcMenuBarImg } from "../../../asset/icon"; +import { activeState } from "../../../core/atom/menuBar"; import { St } from "./style"; -interface MenuBarProps { - handleModal: () => void; -} - const MenuBarDummy = { profileImg: , name: "윤지영", }; -export default function MenuBar(props: MenuBarProps) { - const { handleModal } = props; +export default function MenuBar() { + const setIsActive = useSetRecoilState(activeState); return ( - + setIsActive((prevState) => !prevState)}> diff --git a/src/components/Main/MenuBar/style.ts b/src/components/common/MenuBar/style.ts similarity index 100% rename from src/components/Main/MenuBar/style.ts rename to src/components/common/MenuBar/style.ts diff --git a/src/core/atom/menuBar.ts b/src/core/atom/menuBar.ts new file mode 100644 index 00000000..926c37d1 --- /dev/null +++ b/src/core/atom/menuBar.ts @@ -0,0 +1,10 @@ +import { atom } from "recoil"; + +enum StateType { + ACTIVE_STATE = "activestate", +} + +export const activeState = atom({ + key: StateType.ACTIVE_STATE, + default: false, +}); diff --git a/yarn.lock b/yarn.lock index 70741324..38f078dc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3364,13 +3364,6 @@ dependencies: "@types/react" "*" -"@types/react-slick@^0.23.10": - version "0.23.10" - resolved "https://registry.yarnpkg.com/@types/react-slick/-/react-slick-0.23.10.tgz#56126e6e4e95cdce7771535b2811c2c1931a7caa" - integrity sha512-ZiqdencANDZy6sWOWJ54LDvebuXFEhDlHtXU9FFipQR2BcYU2QJxZhvJPW6YK7cocibUiNn+YvDTbt1HtCIBVA== - dependencies: - "@types/react" "*" - "@types/react-syntax-highlighter@11.0.5": version "11.0.5" resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.5.tgz#0d546261b4021e1f9d85b50401c0a42acb106087" @@ -7918,6 +7911,11 @@ gzip-size@^6.0.0: dependencies: duplexer "^0.1.2" +hamt_plus@1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/hamt_plus/-/hamt_plus-1.0.2.tgz#e21c252968c7e33b20f6a1b094cd85787a265601" + integrity sha512-t2JXKaehnMb9paaYA7J0BX8QQAY8lwfQ9Gjf4pg/mk4krt+cmwmU652HOoWonf+7+EQV97ARPMhhVgU1ra2GhA== + handle-thing@^2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e" @@ -9713,13 +9711,6 @@ json2mq@^0.2.0: dependencies: string-convert "^0.2.0" -json2mq@^0.2.0: - version "0.2.0" - resolved "https://registry.yarnpkg.com/json2mq/-/json2mq-0.2.0.tgz#b637bd3ba9eabe122c83e9720483aeb10d2c904a" - integrity sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA== - dependencies: - string-convert "^0.2.0" - json5@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe" @@ -12670,6 +12661,13 @@ readdirp@~3.6.0: dependencies: picomatch "^2.2.1" +recoil@^0.7.4: + version "0.7.4" + resolved "https://registry.yarnpkg.com/recoil/-/recoil-0.7.4.tgz#d6508fa656d9c93e66fdf334e1f723a9e98801cf" + integrity sha512-sCXvQGMfSprkNU4ZRkJV4B0qFQSURJMgsICqY1952WRlg66NMwYqi6n67vhnhn0qw4zHU1gHXJuMvRDaiRNFZw== + dependencies: + hamt_plus "1.0.2" + recursive-readdir@^2.2.2: version "2.2.2" resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.2.2.tgz#9946fb3274e1628de6e36b2f6714953b4845094f" @@ -12919,11 +12917,6 @@ resize-observer-polyfill@^1.5.0: resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464" integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg== -resize-observer-polyfill@^1.5.0: - version "1.5.1" - resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464" - integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg== - resolve-cwd@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d" From d287ec9d8607e3b31a2d5bf21c574be320af595d Mon Sep 17 00:00:00 2001 From: SNUPI Date: Thu, 14 Jul 2022 15:38:39 +0900 Subject: [PATCH 11/25] [ feat ] add recoil --- src/index.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index 90fa3617..516ceef1 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,5 +1,6 @@ import React from "react"; import ReactDOM from "react-dom/client"; +import { RecoilRoot } from "recoil"; import { ThemeProvider } from "styled-components"; import App from "./App"; @@ -14,9 +15,11 @@ if (process.env.NODE_ENV === "development") { const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement); root.render( - - - - + + + + + + , ); From 2d16134fc966671254adee10c00eb677bcc60243 Mon Sep 17 00:00:00 2001 From: SNUPI Date: Thu, 14 Jul 2022 16:14:46 +0900 Subject: [PATCH 12/25] =?UTF-8?q?[=20feat=20]=20menu=20bar=20center=20?= =?UTF-8?q?=EC=A0=95=EB=A0=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/MenuBar/index.tsx | 48 +++++++++++++------------ src/components/common/MenuBar/style.ts | 13 +++++-- 2 files changed, 36 insertions(+), 25 deletions(-) diff --git a/src/components/common/MenuBar/index.tsx b/src/components/common/MenuBar/index.tsx index 8afac5fb..3ded1639 100644 --- a/src/components/common/MenuBar/index.tsx +++ b/src/components/common/MenuBar/index.tsx @@ -18,29 +18,31 @@ export default function MenuBar() { setIsActive((prevState) => !prevState)}> - - {MenuBarDummy.profileImg} - - {MenuBarDummy.name}님,
- 안녕하세요 - - 오늘도 피클과 함께 대화 나눠요 - - My 프로필 - 로그아웃 - - - - 대화 주제 추천 카드 - - Mood Piickles - 카테고리별 대화주제 추천 - - - Piickle Me - 진행중인 투표 - - + + + {MenuBarDummy.profileImg} + + {MenuBarDummy.name}님,
+ 안녕하세요 + + 오늘도 피클과 함께 대화 나눠요 + + My 프로필 + 로그아웃 + + + + 대화 주제 추천 카드 + + Mood Piickles + 카테고리별 대화주제 추천 + + + Piickle Me + 진행중인 투표 + + + ); diff --git a/src/components/common/MenuBar/style.ts b/src/components/common/MenuBar/style.ts index 415f81a2..be27d410 100644 --- a/src/components/common/MenuBar/style.ts +++ b/src/components/common/MenuBar/style.ts @@ -11,6 +11,12 @@ export const St = { `, ContentsContainer: styled.section` + display: flex; + flex-direction: column; + justify-content: center; + + position: relative; + width: 28.8rem; height: 100vh; float: right; @@ -21,9 +27,12 @@ export const St = { padding-left: 1.8rem; `, + Contents: styled.div``, + CloseBtnContainer: styled.div` - float: right; - margin-right: 1.6rem; + position: absolute; + top: 1.9rem; + right: 1.6rem; `, ProfileContainer: styled.article` From 427ff430da54ae3914fb71cb863c5de4e99e99ea Mon Sep 17 00:00:00 2001 From: SNUPI Date: Thu, 14 Jul 2022 16:38:10 +0900 Subject: [PATCH 13/25] [ fix ] menu bar layout --- src/components/common/Header/index.tsx | 12 ++++++------ src/components/common/MenuBar/style.ts | 5 ++++- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src/components/common/Header/index.tsx b/src/components/common/Header/index.tsx index 9989233c..e38267be 100644 --- a/src/components/common/Header/index.tsx +++ b/src/components/common/Header/index.tsx @@ -10,10 +10,8 @@ export default function Header() { const { pathname } = useLocation(); const [isActive, setIsActive] = useRecoilState(activeState); - if (isActive) { - return ; - } else { - return ( + return ( + <> @@ -22,6 +20,8 @@ export default function Header() { setIsActive((prevState) => !prevState)} /> - ); - } + + {isActive && } + + ); } diff --git a/src/components/common/MenuBar/style.ts b/src/components/common/MenuBar/style.ts index be27d410..e2a9998e 100644 --- a/src/components/common/MenuBar/style.ts +++ b/src/components/common/MenuBar/style.ts @@ -2,7 +2,10 @@ import styled from "styled-components"; export const St = { Root: styled.section` - width: 36rem; + position: absolute; + top: 0; + right: 0; + left: 0; height: 100vh; background-color: ${({ theme }) => theme.colors.gray600}; From 9fc08805da0a7be420a07ec32f3b80177bfc2f0e Mon Sep 17 00:00:00 2001 From: SNUPI Date: Thu, 14 Jul 2022 16:50:52 +0900 Subject: [PATCH 14/25] [ feat ] modal scroll none --- src/App.tsx | 6 ++++++ src/style/modalStyle.ts | 10 ++++++++++ 2 files changed, 16 insertions(+) create mode 100644 src/style/modalStyle.ts diff --git a/src/App.tsx b/src/App.tsx index 7204edfa..a9bfecbd 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,10 +1,16 @@ +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 ( + {isActive && } ); diff --git a/src/style/modalStyle.ts b/src/style/modalStyle.ts new file mode 100644 index 00000000..5ba98228 --- /dev/null +++ b/src/style/modalStyle.ts @@ -0,0 +1,10 @@ +import { createGlobalStyle } from "styled-components"; + +export const ModalStyle = createGlobalStyle` + body { + overflow: hidden; + } + body * { + touch-action: none; + } +`; From d2d3f56787a9f6aeecd763a3afeee926c07fdf25 Mon Sep 17 00:00:00 2001 From: SNUPI Date: Thu, 14 Jul 2022 16:58:12 +0900 Subject: [PATCH 15/25] [ fix ] menu bar layout --- src/components/Main/common/.keep | 0 src/components/common/Header/index.tsx | 18 ++++++++---------- 2 files changed, 8 insertions(+), 10 deletions(-) delete mode 100644 src/components/Main/common/.keep diff --git a/src/components/Main/common/.keep b/src/components/Main/common/.keep deleted file mode 100644 index e69de29b..00000000 diff --git a/src/components/common/Header/index.tsx b/src/components/common/Header/index.tsx index e38267be..c99198f2 100644 --- a/src/components/common/Header/index.tsx +++ b/src/components/common/Header/index.tsx @@ -11,17 +11,15 @@ export default function Header() { const [isActive, setIsActive] = useRecoilState(activeState); return ( - <> - - - - - - setIsActive((prevState) => !prevState)} /> - - + + + + + + setIsActive((prevState) => !prevState)} /> + {isActive && } - + ); } From 104c4df676f528ac723e682488c4deba31a11894 Mon Sep 17 00:00:00 2001 From: SNUPI Date: Thu, 14 Jul 2022 17:35:44 +0900 Subject: [PATCH 16/25] [ feat ] menu bar animation --- .../CardCollection/CardSlider/style.ts | 15 +----- src/components/common/MenuBar/index.tsx | 6 +-- src/components/common/MenuBar/style.ts | 50 ++++++++++++------- 3 files changed, 36 insertions(+), 35 deletions(-) diff --git a/src/components/CardCollection/CardSlider/style.ts b/src/components/CardCollection/CardSlider/style.ts index 680cb900..79cabcec 100644 --- a/src/components/CardCollection/CardSlider/style.ts +++ b/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; `, diff --git a/src/components/common/MenuBar/index.tsx b/src/components/common/MenuBar/index.tsx index 3ded1639..2d198bd4 100644 --- a/src/components/common/MenuBar/index.tsx +++ b/src/components/common/MenuBar/index.tsx @@ -2,7 +2,7 @@ import { useSetRecoilState } from "recoil"; import { IcCloseBtn, IcMenuBarImg } from "../../../asset/icon"; import { activeState } from "../../../core/atom/menuBar"; -import { St } from "./style"; +import { St, StContentsContainer } from "./style"; const MenuBarDummy = { profileImg: , @@ -14,7 +14,7 @@ export default function MenuBar() { return ( - + setIsActive((prevState) => !prevState)}> @@ -43,7 +43,7 @@ export default function MenuBar() { - + ); } diff --git a/src/components/common/MenuBar/style.ts b/src/components/common/MenuBar/style.ts index e2a9998e..b7dc11b7 100644 --- a/src/components/common/MenuBar/style.ts +++ b/src/components/common/MenuBar/style.ts @@ -1,4 +1,4 @@ -import styled from "styled-components"; +import styled, { keyframes } from "styled-components"; export const St = { Root: styled.section` @@ -13,23 +13,6 @@ export const St = { z-index: 10; `, - ContentsContainer: styled.section` - display: flex; - flex-direction: column; - justify-content: center; - - position: relative; - - width: 28.8rem; - height: 100vh; - float: right; - - background-color: ${({ theme }) => theme.colors.white}; - - padding-top: 1.9em; - padding-left: 1.8rem; - `, - Contents: styled.div``, CloseBtnContainer: styled.div` @@ -139,3 +122,34 @@ export const St = { color: ${({ theme }) => theme.colors.gray600}; `, }; + +const ani = keyframes` + 0% { + width: 0; + opacity: 0; + } + 50% { + width: 28.8rem; + } + 100% { + opacity: 1; + } + `; + +export const StContentsContainer = styled.section` + display: flex; + flex-direction: column; + justify-content: center; + + position: relative; + + width: 28.8rem; + height: 100vh; + float: right; + + background-color: ${({ theme }) => theme.colors.white}; + + padding-left: 1.8rem; + + animation: ${ani} 0.8s ease-in-out; +`; From 14f78bf47088ebf87623755503f8bcd6f3667166 Mon Sep 17 00:00:00 2001 From: SNUPI Date: Thu, 14 Jul 2022 20:24:01 +0900 Subject: [PATCH 17/25] [ 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 18/25] [ 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 19/25] [ 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 20/25] [ 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 ; From 6a3ccb580177813796f3525330f79db84b3451bb Mon Sep 17 00:00:00 2001 From: SNUPI Date: Fri, 15 Jul 2022 00:07:16 +0900 Subject: [PATCH 21/25] =?UTF-8?q?[=20etc=20]=20code=20review=20::=20?= =?UTF-8?q?=EC=83=81=EB=8C=80=EA=B8=B8=EC=9D=B4=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=ED=99=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Main/MenuBar/style.ts | 134 +++++++++++++++++++++++++ src/components/common/MenuBar/style.ts | 4 +- 2 files changed, 136 insertions(+), 2 deletions(-) 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..4c6a66ad --- /dev/null +++ b/src/components/Main/MenuBar/style.ts @@ -0,0 +1,134 @@ +import styled from "styled-components"; + +import { IcCloseBtn } from "../../../asset/icon"; + +export const St = { + Root: styled.section` + 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 0.2rem #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 0.15rem #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}; + `, +}; diff --git a/src/components/common/MenuBar/style.ts b/src/components/common/MenuBar/style.ts index b7dc11b7..351512b0 100644 --- a/src/components/common/MenuBar/style.ts +++ b/src/components/common/MenuBar/style.ts @@ -22,7 +22,7 @@ export const St = { `, ProfileContainer: styled.article` - border-bottom: solid 2px #f1f1f1; + border-bottom: solid 0.2rem #f1f1f1; padding-bottom: 3.6rem; `, @@ -60,7 +60,7 @@ export const St = { color: ${({ theme }) => theme.colors.gray600}; - border-right: solid 1.5px #606060; + border-right: solid 0.15rem #606060; padding-right: 1rem; `, From ad9c834afd4e7a39839dbbc544eb1fea7b15938c Mon Sep 17 00:00:00 2001 From: SNUPI Date: Fri, 15 Jul 2022 00:29:54 +0900 Subject: [PATCH 22/25] =?UTF-8?q?[=20feat=20]=20theme=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/style/theme.ts | 47 ++++++++++++++++++++++++++++++++-------------- 1 file changed, 33 insertions(+), 14 deletions(-) diff --git a/src/style/theme.ts b/src/style/theme.ts index 81cdeff1..5b4294b6 100644 --- a/src/style/theme.ts +++ b/src/style/theme.ts @@ -1,8 +1,12 @@ const colors = { + red: "#FF0000", green: "#19BE7E", - sub_green: "#DBFFF1", - sub_green1: "#B5F2DB", - sub_green2: "#7DE0B9", + sub_green1: "#7DE0B9", + sub_green2: "#B5F2DB", + sub_green3: "#DBFFF1", + sub_green4: "rgba(181, 242, 219, 0.7)", + sub_green5: "#EEF5F3", + bg: "#2A2A2A", black: "#000000", white: "#FFFFFF", gray100: "#F1F1F1", @@ -14,7 +18,6 @@ const colors = { gray700: "#404040", gray800: "#202020", caption2_color: "#575757", - bg: "#2A2A2A", sub1: "#F2F25A", sub3: "#706E2B", sub4: "#F2EFCE", @@ -24,14 +27,15 @@ const colors = { } as const; interface Font { - weight: 400 | 500 | 600 | 700; + weight: 300 | 400 | 500 | 600 | 700; size: number; lineHeight: number; + notoSans?: boolean; } -function FONT({ weight, size, lineHeight }: Font): string { +function FONT({ weight, size, lineHeight, notoSans }: Font): string { return ` - font-family: "Pretendard"; + font-family: ${notoSans ? "Noto Sans" : "Pretendard"}; font-weight: ${weight}; font-size: ${size}rem; line-height: ${lineHeight}%; @@ -41,15 +45,30 @@ function FONT({ weight, size, lineHeight }: Font): string { const fonts = { h1: FONT({ weight: 600, size: 2, lineHeight: 130 }), - h2: FONT({ weight: 400, size: 1.4, lineHeight: 130 }), + h2: FONT({ weight: 400, size: 1.2, lineHeight: 140 }), body1: FONT({ weight: 600, size: 1.6, lineHeight: 140 }), - body2: FONT({ weight: 400, size: 1.2, lineHeight: 140 }), - body3: FONT({ weight: 700, size: 2.4, lineHeight: 140 }), - body4: FONT({ weight: 400, size: 1.4, lineHeight: 140 }), - caption1: FONT({ weight: 400, size: 1, lineHeight: 130 }), - caption2: FONT({ weight: 500, size: 1.2, lineHeight: 126 }), + body2: FONT({ weight: 700, size: 2.4, lineHeight: 140 }), + body3: FONT({ weight: 600, size: 1.5, lineHeight: 140 }), + body4: FONT({ weight: 400, size: 1.2, lineHeight: 140 }), + body5: FONT({ weight: 700, size: 2.4, lineHeight: 140 }), + body6: FONT({ weight: 400, size: 1.4, lineHeight: 140 }), + body7: FONT({ weight: 500, size: 1.6, lineHeight: 140 }), + body8: FONT({ weight: 400, size: 1.2, lineHeight: 140, notoSans: true }), + body9: FONT({ weight: 600, size: 2, lineHeight: 130 }), + body10: FONT({ weight: 600, size: 2.4, lineHeight: 130 }), + body11: FONT({ weight: 400, size: 1.5, lineHeight: 140 }), + body12: FONT({ weight: 400, size: 1.6, lineHeight: 140 }), + caption1: FONT({ weight: 400, size: 1, lineHeight: 80 }), + caption2: FONT({ weight: 400, size: 1, lineHeight: 130 }), + caption3: FONT({ weight: 400, size: 1.2, lineHeight: 140 }), + caption4: FONT({ weight: 400, size: 1.2, lineHeight: 140 }), + caption5: FONT({ weight: 400, size: 1.1, lineHeight: 140 }), btn1: FONT({ weight: 400, size: 1.4, lineHeight: 140 }), - btn2: FONT({ weight: 400, size: 1.2, lineHeight: 150 }), + btn2: FONT({ weight: 400, size: 1.2, lineHeight: 130 }), + btn3: FONT({ weight: 300, size: 1.6, lineHeight: 140 }), + btn4: FONT({ weight: 300, size: 1, lineHeight: 140 }), + footer1: FONT({ weight: 600, size: 1.2, lineHeight: 140 }), + footer2: FONT({ weight: 400, size: 1.2, lineHeight: 140 }), } as const; const theme = { From fe6539e5ebc4e67b552fd13cb5fee9587076268d Mon Sep 17 00:00:00 2001 From: SNUPI Date: Fri, 15 Jul 2022 00:32:47 +0900 Subject: [PATCH 23/25] =?UTF-8?q?[=20fix=20]=20theme=20fonts=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Main/Footer/style.ts | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/src/components/Main/Footer/style.ts b/src/components/Main/Footer/style.ts index 3d858ca4..3f5b3f69 100644 --- a/src/components/Main/Footer/style.ts +++ b/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}; `, }; From 93f7f03c69553388b984a1d058f12259ed4527d4 Mon Sep 17 00:00:00 2001 From: SNUPI Date: Fri, 15 Jul 2022 01:15:51 +0900 Subject: [PATCH 24/25] [ fix ] define recoil --- src/components/common/Header/index.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/common/Header/index.tsx b/src/components/common/Header/index.tsx index f12219a9..bec71fe6 100644 --- a/src/components/common/Header/index.tsx +++ b/src/components/common/Header/index.tsx @@ -11,18 +11,18 @@ export default function Header() { const [isActive, setIsActive] = useRecoilState(activeState); const handleModal = () => { - setIsOpened(!isOpened); + setIsActive(!isActive); }; - if (isOpened) { - return ; + if (isActive) { + return ; } else { return ( - + From 8b3a5184b719595058233954cf7611daf7e20f1e Mon Sep 17 00:00:00 2001 From: SNUPI Date: Fri, 15 Jul 2022 01:27:19 +0900 Subject: [PATCH 25/25] =?UTF-8?q?[=20fix=20]=20main=20page=20fonts=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Main/BestPiickle/BestPiickleCard/style.ts | 2 +- src/components/Main/PiickleMe/index.tsx | 7 +++---- src/components/Main/PiickleMe/style.ts | 17 +++++++++++++---- src/components/common/MenuBar/style.ts | 14 +++++++------- 4 files changed, 24 insertions(+), 16 deletions(-) diff --git a/src/components/Main/BestPiickle/BestPiickleCard/style.ts b/src/components/Main/BestPiickle/BestPiickleCard/style.ts index b463c46e..fcafcce0 100644 --- a/src/components/Main/BestPiickle/BestPiickleCard/style.ts +++ b/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; diff --git a/src/components/Main/PiickleMe/index.tsx b/src/components/Main/PiickleMe/index.tsx index 3c99c761..4e62ab10 100644 --- a/src/components/Main/PiickleMe/index.tsx +++ b/src/components/Main/PiickleMe/index.tsx @@ -37,8 +37,8 @@ export default function PiickleMe() { - {representVoteData.contentText} - {representVoteData.discription} + {representVoteData.contentText} + {representVoteData.discription} 투표하기 {voteData.map((element) => { @@ -47,8 +47,7 @@ export default function PiickleMe() { {element.profileImg} - {element.contentText.slice(0, 18)}... - {element.subText} + {element.contentText.slice(0, 18)}... {element.voteBtn} diff --git a/src/components/Main/PiickleMe/style.ts b/src/components/Main/PiickleMe/style.ts index 06f94318..ff2e3eca 100644 --- a/src/components/Main/PiickleMe/style.ts +++ b/src/components/Main/PiickleMe/style.ts @@ -37,20 +37,29 @@ export const St = { flex-direction: column; `, - VoteContentText: styled.p<{ isFirst: boolean }>` + RepresentVoteContentText: styled.p` line-height: 1.4; margin-bottom: 0.4rem; - ${({ isFirst, theme }) => (isFirst ? theme.fonts.caption1 : theme.fonts.body2)}; + ${({ theme }) => theme.fonts.body3}; + color: ${({ theme }) => theme.colors.gray800}; `, - VoteContentSubText: styled.p<{ isFirst: boolean }>` - ${({ theme }) => theme.fonts.body2} + RepresentVoteContentSubText: styled.p` + ${({ theme }) => theme.fonts.caption3} color: ${({ theme }) => theme.colors.gray600}; `, + VoteContentText: styled.p` + line-height: 1.4; + + margin-bottom: 0.4rem; + + ${({ theme }) => theme.fonts.body4}; + `, + RepresentGoVoteBtn: styled.button` width: 7.6rem; height: 2.8rem; diff --git a/src/components/common/MenuBar/style.ts b/src/components/common/MenuBar/style.ts index 351512b0..5e649cc3 100644 --- a/src/components/common/MenuBar/style.ts +++ b/src/components/common/MenuBar/style.ts @@ -60,13 +60,13 @@ export const St = { color: ${({ theme }) => theme.colors.gray600}; - border-right: solid 0.15rem #606060; + border-right: solid 0.15rem ${({ theme }) => theme.colors.gray600}; padding-right: 1rem; `, LogoutBtn: styled.button` - ${({ theme }) => theme.fonts.body12}; + ${({ theme }) => theme.fonts.btn2}; color: ${({ theme }) => theme.colors.gray600}; padding-left: 1rem; @@ -77,7 +77,7 @@ export const St = { `, TitleText: styled.h1` - ${({ theme }) => theme.fonts.caption1}; + ${({ theme }) => theme.fonts.body1}; color: ${({ theme }) => theme.colors.bg}; `, @@ -89,7 +89,7 @@ export const St = { `, MoodPiickleText: styled.h2` - ${({ theme }) => theme.fonts.caption1}; + ${({ theme }) => theme.fonts.body1}; color: ${({ theme }) => theme.colors.bg}; @@ -97,7 +97,7 @@ export const St = { `, GoMoodPiickleBtn: styled.button` - ${({ theme }) => theme.fonts.body12}; + ${({ theme }) => theme.fonts.body4}; color: ${({ theme }) => theme.colors.gray600}; `, @@ -109,7 +109,7 @@ export const St = { `, PiickleMeText: styled.h2` - ${({ theme }) => theme.fonts.caption1}; + ${({ theme }) => theme.fonts.body1}; color: ${({ theme }) => theme.colors.bg}; @@ -117,7 +117,7 @@ export const St = { `, GoPiickleMeBtn: styled.button` - ${({ theme }) => theme.fonts.body12}; + ${({ theme }) => theme.fonts.body4}; color: ${({ theme }) => theme.colors.gray600}; `,