From d8b908bebb66eb05b622006884c0feb51aa5c92a Mon Sep 17 00:00:00 2001 From: P1su Date: Wed, 28 Aug 2024 12:30:59 +0900 Subject: [PATCH 01/29] =?UTF-8?q?feat:=20=EB=8B=AC=EB=A0=A5=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1=ED=9B=84=20=EB=9D=BC=EC=9A=B0=ED=8A=B8=20?= =?UTF-8?q?=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/CalendarPage/CalendarPage.jsx | 10 ++++++++++ src/pages/CalendarPage/CalendarPage.style.js | 5 +++++ src/router/Router.jsx | 5 +++++ 3 files changed, 20 insertions(+) create mode 100644 src/pages/CalendarPage/CalendarPage.jsx create mode 100644 src/pages/CalendarPage/CalendarPage.style.js diff --git a/src/pages/CalendarPage/CalendarPage.jsx b/src/pages/CalendarPage/CalendarPage.jsx new file mode 100644 index 00000000..64b6fe10 --- /dev/null +++ b/src/pages/CalendarPage/CalendarPage.jsx @@ -0,0 +1,10 @@ +import * as S from './CalendarPage.style'; + +function CalendarPage() { + return( + + 달력 페이지입니다. + + ); +} +export default CalendarPage; \ No newline at end of file diff --git a/src/pages/CalendarPage/CalendarPage.style.js b/src/pages/CalendarPage/CalendarPage.style.js new file mode 100644 index 00000000..a93bd905 --- /dev/null +++ b/src/pages/CalendarPage/CalendarPage.style.js @@ -0,0 +1,5 @@ +import styled from 'styled-components'; + +export const CalendarPageWrapper = styled.div` + width: 100%; +`; \ No newline at end of file diff --git a/src/router/Router.jsx b/src/router/Router.jsx index f38a2b2c..ae291c50 100644 --- a/src/router/Router.jsx +++ b/src/router/Router.jsx @@ -19,6 +19,7 @@ import SharedView from '../pages/SharedView/SharedView'; import Information from '../pages/Information/Information'; import Weather from '../pages/Weather/Weather'; import LoginError from '../pages/LoginError/LoginError'; +import CalendarPage from './../pages/CalendarPage/CalendarPage'; /*이런 식으로 작성하기*/ const router = createBrowserRouter([ @@ -98,6 +99,10 @@ const router = createBrowserRouter([ path: '/weather', element: , }, + { + path: '/calendar', + element: , + } ], }, ]); From ac21bd937ef1df33bac4613ccc862cc010330a6f Mon Sep 17 00:00:00 2001 From: P1su Date: Wed, 28 Aug 2024 12:53:09 +0900 Subject: [PATCH 02/29] =?UTF-8?q?feat:=20=EB=8B=AC=EB=A0=A5=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=99=80=20=EB=A1=9C=EC=A7=81=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=EB=A5=BC=20=EB=8B=AC=EB=A0=A5=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=97=90=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/CalendarPage/CalendarPage.jsx | 28 +++++++++++++++++++- src/pages/CalendarPage/CalendarPage.style.js | 18 +++++++++++++ 2 files changed, 45 insertions(+), 1 deletion(-) diff --git a/src/pages/CalendarPage/CalendarPage.jsx b/src/pages/CalendarPage/CalendarPage.jsx index 64b6fe10..c1ec5b08 100644 --- a/src/pages/CalendarPage/CalendarPage.jsx +++ b/src/pages/CalendarPage/CalendarPage.jsx @@ -1,9 +1,35 @@ import * as S from './CalendarPage.style'; +import { clickedDiary } from '../../recoil/atoms'; +import { useRecoilValue } from 'recoil'; +import { format } from 'date-fns'; +import Calendar from '../../components/common/Calendar/Calendar'; +import DiaryListComponent from '../../components/common/DiaryListComponent/DiaryListComponent'; + function CalendarPage() { + const diaries = useRecoilValue(clickedDiary); + return( - 달력 페이지입니다. + + {diaries.length > 0 + ? ( + diaries.map(item => ( + + )) + ) + : ( + + 아직 작성된 일기가 없습니다. + + ) + } ); } diff --git a/src/pages/CalendarPage/CalendarPage.style.js b/src/pages/CalendarPage/CalendarPage.style.js index a93bd905..f2498ad0 100644 --- a/src/pages/CalendarPage/CalendarPage.style.js +++ b/src/pages/CalendarPage/CalendarPage.style.js @@ -1,5 +1,23 @@ import styled from 'styled-components'; export const CalendarPageWrapper = styled.div` + ${({ theme: { mixin } }) => mixin.flexCenter({})}; + background: ${({ theme }) => theme.colors.gradient.gradient_pink}; width: 100%; + min-height: 100vh; +`; +export const ErrorText = styled.div` + ${({ theme: { mixin } }) => mixin.flexCenter({})}; + width: 32rem; + height: 9.3rem; + flex-shrink: 0; + border-radius: 3rem; + background: rgba(255, 255, 255, 0.27); + -webkit-backdrop-filter: blur(1.5rem); + -moz-backdrop-filter: blur(1.5rem); + -o-backdrop-filter: blur(1.5rem); + -ms-backdrop-filter: blur(1.5rem); + backdrop-filter: blur(1.5rem); + color: #575757; + ${({ theme }) => theme.fonts.body_08} `; \ No newline at end of file From 8d5edc62fcf6ef04e8bf30b8601409ca91efd6be Mon Sep 17 00:00:00 2001 From: P1su Date: Wed, 28 Aug 2024 13:19:40 +0900 Subject: [PATCH 03/29] =?UTF-8?q?style:=20hieght=EC=88=98=EC=A0=95,=20them?= =?UTF-8?q?e=20=EC=82=AC=EC=9A=A9=20=EB=93=B1=20=EB=8B=AC=EB=A0=A5=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EC=99=80=20=EC=9D=BC=EA=B8=B0=20?= =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=BD=94=EB=93=9C=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 --- .../DiaryListComponent/DiaryListComponent.jsx | 21 +++--- .../DiaryListComponent.style.js | 68 ++++++++----------- src/pages/CalendarPage/CalendarPage.jsx | 4 +- src/pages/CalendarPage/CalendarPage.style.js | 12 ++-- 4 files changed, 43 insertions(+), 62 deletions(-) diff --git a/src/components/common/DiaryListComponent/DiaryListComponent.jsx b/src/components/common/DiaryListComponent/DiaryListComponent.jsx index 0ec89264..3ce3e9ea 100644 --- a/src/components/common/DiaryListComponent/DiaryListComponent.jsx +++ b/src/components/common/DiaryListComponent/DiaryListComponent.jsx @@ -26,7 +26,7 @@ export default function DiaryListComponent({ feelingListId, feelingListTitle, fe }else{ return text; } - }; + }; const handleSearchButton= () => { const body = { @@ -52,21 +52,21 @@ export default function DiaryListComponent({ feelingListId, feelingListTitle, fe return ( - + - + {feelingListTitle} - - + + {feelingListDate} - + + whileHover={{ scale: 1.1 }} + whileTap={{ scale: 0.8 }} // 클릭 애니메이션을 더 극적으로 + transition={{ duration: 0.3 }} + > { handleSearchButton(); @@ -78,7 +78,6 @@ export default function DiaryListComponent({ feelingListId, feelingListTitle, fe 조회하기 - ) diff --git a/src/components/common/DiaryListComponent/DiaryListComponent.style.js b/src/components/common/DiaryListComponent/DiaryListComponent.style.js index 9f325bde..0bf0c0df 100644 --- a/src/components/common/DiaryListComponent/DiaryListComponent.style.js +++ b/src/components/common/DiaryListComponent/DiaryListComponent.style.js @@ -1,46 +1,32 @@ import styled from 'styled-components'; -import theme from '../../../styles/theme'; +import { motion } from 'framer-motion'; export const DiaryListComponentWrapper = styled.div` - display: flex; - width: 32.0rem; - // height: 11.5rem; - flex-shrink: 0; - border-radius: 3rem; - background: white; - // theme colors 적용이 안되는 것 같아요... 왜이러지 - // ${({ theme }) => theme.colors.normal.white}; -` -export const Image = styled.img` - display: flex; - margin: 1rem 0 1rem 1rem; - width: 9.5rem; - height: 9.5rem; - flex-shrink: 0; - border-radius: 3rem; - background: #C7C7C7; -` + display: flex; + width: 32.0rem; + height: 11.5rem; + flex-shrink: 0; + border-radius: 3rem; + background: white; + margin-bottom: 0.8rem; + ${({ theme }) => theme.colors.normal.white}; +`; +export const PreviewImage = styled.img` + background: ${({ theme }) => theme.colors.gray.dark_gray}; + display: flex; + margin: 1rem 0 1rem 1rem; + width: 9.5rem; + height: 9.5rem; + border-radius: 3rem; +`; export const TextWrapper = styled.div` - margin-left: 1.2rem; - margin-bottom: 1.2rem; - margin-top: 1.8rem; - gap: 0rem; -` -export const TextTitle = styled.p` - ${({ theme }) => theme.fonts.body_02}; -` -export const TextDate = styled.p` - ${({ theme }) => theme.fonts.caption_02}; -` -export const SubmitBtnWrapper = styled.div` - ${({ theme: { mixin } }) => mixin.flexCenter({})}; - width: 18.5rem; - height: 4rem; - flex-shrink: 0; - border-radius: 3rem; - background: var(--Red-Pink, #FF5959); - margin-top: 0.3rem; -` -export const SubmitBtnTextWrapper = styled.p` - ${({ theme }) => theme.fonts.body_02}; + margin: 1.8rem 0 1.2rem 1.2rem; +`; +export const TitleText = styled.p` + ${({ theme }) => theme.fonts.body_02}; +`; +export const DateText = styled.p` + ${({ theme }) => theme.fonts.caption_02}; +`; +export const MotionButton = styled(motion.div)` ` \ No newline at end of file diff --git a/src/pages/CalendarPage/CalendarPage.jsx b/src/pages/CalendarPage/CalendarPage.jsx index c1ec5b08..c8759f93 100644 --- a/src/pages/CalendarPage/CalendarPage.jsx +++ b/src/pages/CalendarPage/CalendarPage.jsx @@ -25,9 +25,9 @@ function CalendarPage() { )) ) : ( - + 아직 작성된 일기가 없습니다. - + ) } diff --git a/src/pages/CalendarPage/CalendarPage.style.js b/src/pages/CalendarPage/CalendarPage.style.js index f2498ad0..16673808 100644 --- a/src/pages/CalendarPage/CalendarPage.style.js +++ b/src/pages/CalendarPage/CalendarPage.style.js @@ -5,19 +5,15 @@ export const CalendarPageWrapper = styled.div` background: ${({ theme }) => theme.colors.gradient.gradient_pink}; width: 100%; min-height: 100vh; + height: auto; + max-height: fit-content; `; -export const ErrorText = styled.div` +export const ErrorBox = styled.div` ${({ theme: { mixin } }) => mixin.flexCenter({})}; + ${({ theme }) => theme.fonts.body_08}; width: 32rem; height: 9.3rem; flex-shrink: 0; border-radius: 3rem; background: rgba(255, 255, 255, 0.27); - -webkit-backdrop-filter: blur(1.5rem); - -moz-backdrop-filter: blur(1.5rem); - -o-backdrop-filter: blur(1.5rem); - -ms-backdrop-filter: blur(1.5rem); - backdrop-filter: blur(1.5rem); - color: #575757; - ${({ theme }) => theme.fonts.body_08} `; \ No newline at end of file From 34895c5c4ed2ee64ce297aeec9d2ff2baa0ef5fc Mon Sep 17 00:00:00 2001 From: P1su Date: Wed, 28 Aug 2024 22:15:35 +0900 Subject: [PATCH 04/29] =?UTF-8?q?style:=20Submit=20=EB=B2=84=ED=8A=BC?= =?UTF-8?q?=EC=9D=98=20framer=20motion=20=ED=83=9C=EA=B7=B8=EB=A5=BC=20sty?= =?UTF-8?q?led-component=EB=A1=9C=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/DiaryListComponent/DiaryListComponent.jsx | 5 ++--- .../common/DiaryListComponent/DiaryListComponent.style.js | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/common/DiaryListComponent/DiaryListComponent.jsx b/src/components/common/DiaryListComponent/DiaryListComponent.jsx index 3ce3e9ea..7fddf92d 100644 --- a/src/components/common/DiaryListComponent/DiaryListComponent.jsx +++ b/src/components/common/DiaryListComponent/DiaryListComponent.jsx @@ -4,7 +4,6 @@ import { useRecoilState } from "recoil"; import { diaryContent, diaryAdvice, diaryTitle, diaryImage, diaryFeeling, createdDate, diaryId } from "../../../recoil/atoms"; import usePostDiary from "../../../hooks/queries/etc/usePostDiary"; import BtnSubmit from "../buttons/Submit/BtnSubmit"; -import { motion } from 'framer-motion'; export default function DiaryListComponent({ feelingListId, feelingListTitle, feelingListDate, imageUrl }) { const [content, setContent] = useRecoilState(diaryContent); @@ -62,7 +61,7 @@ export default function DiaryListComponent({ feelingListId, feelingListTitle, fe {feelingListDate} - 조회하기 - + ) diff --git a/src/components/common/DiaryListComponent/DiaryListComponent.style.js b/src/components/common/DiaryListComponent/DiaryListComponent.style.js index 0bf0c0df..c46a68f9 100644 --- a/src/components/common/DiaryListComponent/DiaryListComponent.style.js +++ b/src/components/common/DiaryListComponent/DiaryListComponent.style.js @@ -29,4 +29,4 @@ export const DateText = styled.p` ${({ theme }) => theme.fonts.caption_02}; `; export const MotionButton = styled(motion.div)` -` \ No newline at end of file +`; \ No newline at end of file From cfef6e46de8ae8c6ae87ab9c28ce51cec3af1ce6 Mon Sep 17 00:00:00 2001 From: P1su Date: Wed, 28 Aug 2024 22:22:59 +0900 Subject: [PATCH 05/29] =?UTF-8?q?style:=20=EB=8B=AC=EB=A0=A5=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=83=81=EB=8B=A8=20margin=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/pages/CalendarPage/CalendarPage.jsx | 4 +++- src/pages/CalendarPage/CalendarPage.style.js | 3 +++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/pages/CalendarPage/CalendarPage.jsx b/src/pages/CalendarPage/CalendarPage.jsx index c8759f93..bb618d11 100644 --- a/src/pages/CalendarPage/CalendarPage.jsx +++ b/src/pages/CalendarPage/CalendarPage.jsx @@ -11,7 +11,9 @@ function CalendarPage() { return( - + + + {diaries.length > 0 ? ( diaries.map(item => ( diff --git a/src/pages/CalendarPage/CalendarPage.style.js b/src/pages/CalendarPage/CalendarPage.style.js index 16673808..a5b0d4e4 100644 --- a/src/pages/CalendarPage/CalendarPage.style.js +++ b/src/pages/CalendarPage/CalendarPage.style.js @@ -16,4 +16,7 @@ export const ErrorBox = styled.div` flex-shrink: 0; border-radius: 3rem; background: rgba(255, 255, 255, 0.27); +`; +export const CalendarWrapper = styled.div` + margin: 10rem 0 2rem 0; `; \ No newline at end of file From da0b7e4ce5ae42394d179ae6348ae57825e79adc Mon Sep 17 00:00:00 2001 From: P1su Date: Wed, 28 Aug 2024 22:49:02 +0900 Subject: [PATCH 06/29] =?UTF-8?q?feat:=20slick=20=EA=B5=AC=EC=A1=B0=20?= =?UTF-8?q?=ED=95=B4=EC=B2=B4=20=ED=9B=84=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=9E=AC=EB=B0=B0=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MainStep/MainStep1/MainStep1.jsx | 11 +++-- .../MainStep/MainStep1/MainStep1.style.js | 1 - .../ThisMonthEmotion.style.js | 2 +- src/pages/Main/Main.jsx | 47 ++----------------- src/pages/Main/Main.style.js | 11 ++--- 5 files changed, 14 insertions(+), 58 deletions(-) diff --git a/src/components/MainStep/MainStep1/MainStep1.jsx b/src/components/MainStep/MainStep1/MainStep1.jsx index fe4fcb60..4c7f6777 100644 --- a/src/components/MainStep/MainStep1/MainStep1.jsx +++ b/src/components/MainStep/MainStep1/MainStep1.jsx @@ -4,17 +4,18 @@ import SearchByEmotionButton from '../../common/buttons/SearchByEmotionButton/Se import ThisMonthEmotion from '../../common/buttons/ThisMonthEmotion/ThisMonthEmotion'; import KakaoAd from '../../KakaoAd/KakaoAd'; import WeatherPlaylist from '../MainStep1/WeatherPlaylist/WeatherPlaylist'; -import { motion } from 'framer-motion'; export default function MainStep1() { return ( - - - - + + {/* + + + */} + diff --git a/src/components/MainStep/MainStep1/MainStep1.style.js b/src/components/MainStep/MainStep1/MainStep1.style.js index 6c06c4eb..56c8e73d 100644 --- a/src/components/MainStep/MainStep1/MainStep1.style.js +++ b/src/components/MainStep/MainStep1/MainStep1.style.js @@ -10,7 +10,6 @@ export const MainStep1Wrapper = styled.div` gap: 1.5rem; margin-bottom: 3.7rem; z-index: 10; - height: 100%; `; export const MainButtonWrapper = styled.div` ${({ theme: { mixin } }) => mixin.flexBox({ direction: 'column', justify: 'space-between' })}; diff --git a/src/components/common/buttons/ThisMonthEmotion/ThisMonthEmotion.style.js b/src/components/common/buttons/ThisMonthEmotion/ThisMonthEmotion.style.js index 6b884068..fc5baf0f 100644 --- a/src/components/common/buttons/ThisMonthEmotion/ThisMonthEmotion.style.js +++ b/src/components/common/buttons/ThisMonthEmotion/ThisMonthEmotion.style.js @@ -12,7 +12,7 @@ export const Bubble = styled.div` ` export const Wrapper = styled.div` z-index: 10; - width: 21rem; + width: 31.9rem; height: 18rem; flex-shrink: 0; border-radius: 30px; diff --git a/src/pages/Main/Main.jsx b/src/pages/Main/Main.jsx index 686656e9..ee117335 100644 --- a/src/pages/Main/Main.jsx +++ b/src/pages/Main/Main.jsx @@ -43,37 +43,8 @@ function Main() { }; return ( - - - {steps.map((step, idx) => ( - - {activeSlide === 0 ? ( - - - - - - ) : ( - - - - - - )} - {step.component} - - ))} - + + - - {activeSlide === 0 ? ( -
- -
- ) : ( -
- -
- )} - - + + ); } diff --git a/src/pages/Main/Main.style.js b/src/pages/Main/Main.style.js index 130ee7c5..01fcc770 100644 --- a/src/pages/Main/Main.style.js +++ b/src/pages/Main/Main.style.js @@ -4,15 +4,9 @@ import { IcHoneyBear } from '../../assets/svg'; export const WholeWrapper = styled.div` ` -export const Wrapper = styled.div` +export const MainWrapper = styled.div` ${({ theme: { mixin } }) => mixin.flexCenter({})}; - background: linear-gradient( - 187deg, - #ffbbcb 20.43%, - #ffdae3 81.25%, - #dcc6cc 100.45%, - #999 100.45% - ); + background: ${({ theme }) => theme.colors.gradient.gradient_pink}; `; export const Honeybear = styled(IcHoneyBear)``; export const MainStepWrapper = styled.div` @@ -38,6 +32,7 @@ export const ButtonMotionWrapper = styled(motion.div)` position: fixed; right: 0rem;; bottom: 0rem; + z-index: 100; `; export const CreateButtonField = styled.div` ${({ theme: { mixin } }) => mixin.flexBox({ From 6f9b75b3823ef1a0d57a3240eb71f5a5cc3ced3c Mon Sep 17 00:00:00 2001 From: P1su Date: Thu, 29 Aug 2024 20:49:35 +0900 Subject: [PATCH 07/29] =?UTF-8?q?feat:=20=ED=97=88=EB=8B=88=EB=B2=A0?= =?UTF-8?q?=EC=96=B4=EB=A5=BC=20absolute=EB=A1=9C=20=EB=B0=B0=EC=B9=98=20?= =?UTF-8?q?=ED=9B=84=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=9C=84?= =?UTF-8?q?=EC=B9=98=20=EC=9E=AC=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MainStep/MainStep1/MainStep1.jsx | 12 +++------ .../MainStep/MainStep1/MainStep1.style.js | 4 --- .../WeatherPlaylist/WeatherPlaylist.style.js | 1 + src/pages/Main/Main.jsx | 4 ++- src/pages/Main/Main.style.js | 27 +++++-------------- 5 files changed, 14 insertions(+), 34 deletions(-) diff --git a/src/components/MainStep/MainStep1/MainStep1.jsx b/src/components/MainStep/MainStep1/MainStep1.jsx index 4c7f6777..876c365e 100644 --- a/src/components/MainStep/MainStep1/MainStep1.jsx +++ b/src/components/MainStep/MainStep1/MainStep1.jsx @@ -1,6 +1,4 @@ import * as S from './MainStep1.style'; -import MyPageButton from '../../common/buttons/MyPageButton/MyPageButton'; -import SearchByEmotionButton from '../../common/buttons/SearchByEmotionButton/SearchByEmotionButton'; import ThisMonthEmotion from '../../common/buttons/ThisMonthEmotion/ThisMonthEmotion'; import KakaoAd from '../../KakaoAd/KakaoAd'; import WeatherPlaylist from '../MainStep1/WeatherPlaylist/WeatherPlaylist'; @@ -8,17 +6,15 @@ import WeatherPlaylist from '../MainStep1/WeatherPlaylist/WeatherPlaylist'; export default function MainStep1() { return ( - - - + + {/* */} - - + + - ); } diff --git a/src/components/MainStep/MainStep1/MainStep1.style.js b/src/components/MainStep/MainStep1/MainStep1.style.js index 56c8e73d..f0e5df00 100644 --- a/src/components/MainStep/MainStep1/MainStep1.style.js +++ b/src/components/MainStep/MainStep1/MainStep1.style.js @@ -4,11 +4,7 @@ export const Main1Wrapper = styled.div` ${({ theme: { mixin } }) => mixin.flexCenter({})}; width: 100%; height: 100vh; -`; -export const MainStep1Wrapper = styled.div` - ${({ theme: { mixin } }) => mixin.flexCenter({})}; gap: 1.5rem; - margin-bottom: 3.7rem; z-index: 10; `; export const MainButtonWrapper = styled.div` diff --git a/src/components/MainStep/MainStep1/WeatherPlaylist/WeatherPlaylist.style.js b/src/components/MainStep/MainStep1/WeatherPlaylist/WeatherPlaylist.style.js index 66862e2f..4aa01efc 100644 --- a/src/components/MainStep/MainStep1/WeatherPlaylist/WeatherPlaylist.style.js +++ b/src/components/MainStep/MainStep1/WeatherPlaylist/WeatherPlaylist.style.js @@ -2,6 +2,7 @@ import styled from "styled-components"; export const WeatherPlaylistWrapper = styled.div` width: 100%; + margin-bottom: 15rem; `; export const WeatherIcon = styled.img` width: 3rem; diff --git a/src/pages/Main/Main.jsx b/src/pages/Main/Main.jsx index ee117335..6e24f29a 100644 --- a/src/pages/Main/Main.jsx +++ b/src/pages/Main/Main.jsx @@ -44,8 +44,10 @@ function Main() { return ( + + + - mixin.flexCenter({})}; background: ${({ theme }) => theme.colors.gradient.gradient_pink}; `; -export const Honeybear = styled(IcHoneyBear)``; -export const MainStepWrapper = styled.div` - position: fixed; - left: 41.5%; - top: 1rem; +export const HoneyBear = styled(IcHoneyBear)``; +export const HoneyBearWrapper = styled.div` + width: 32rem; + position: absolute; + top: 10rem; `; export const ButtonMotionWrapper = styled(motion.div)` ${({ theme: { mixin } }) => mixin.flexBox({ @@ -44,17 +42,4 @@ export const CreateButtonField = styled.div` export const ButtonText = styled.p` ${({ theme }) => theme.fonts.body_01}; color: ${({ theme }) => theme.colors.normal.white}; -`; -export const MainStep1HoneyBearWrapper = styled.div` - position: fixed; - width: 100%; - height: 100vh; - top: 4rem; - left: 8.7rem; -`; -export const MainStep2HoneyBearWrapper = styled.div` - position: fixed; - height: 100vh; - right: 9rem; - top: 4rem; -`; +`; \ No newline at end of file From 8059a0141454ab3e5bf2041e0ddaeb79a649c660 Mon Sep 17 00:00:00 2001 From: P1su Date: Tue, 3 Sep 2024 01:44:16 +0900 Subject: [PATCH 08/29] =?UTF-8?q?style:=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EB=B3=80=EC=88=98=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Main/Main.jsx | 21 --------------------- 1 file changed, 21 deletions(-) diff --git a/src/pages/Main/Main.jsx b/src/pages/Main/Main.jsx index 6e24f29a..0d8ad0e9 100644 --- a/src/pages/Main/Main.jsx +++ b/src/pages/Main/Main.jsx @@ -1,35 +1,14 @@ import * as S from './Main.style'; import MainStep1 from '../../components/MainStep/MainStep1/MainStep1'; -import MainStep2 from '../../components/MainStep/MainStep2/MainStep2'; import React, { useState } from 'react'; -import Slider from 'react-slick'; import WriteDiaryButton from '../../components/common/buttons/WriteDiaryButton/WriteDiaryButton'; -import StepProgress from '../../components/common/StepPrgoress/StepProgress'; -import { motion } from 'framer-motion'; import BtnSlowDiary from '../../components/common/buttons/DiaryType/BtnSlowDiary'; import BtnFastDiary from './../../components/common/buttons/DiaryType/BtnFastDiary'; import { useNavigate } from 'react-router-dom'; function Main() { - const [oldSlide, setOldSlide] = useState(0); - const [activeSlide, setActiveSlide] = useState(0); const [isClick, setIsClick] = useState(false); const navigate = useNavigate(); - const settings = { - dots: false, - infinite: false, - slidesToShow: 1, - slidesToScroll: 1, - adaptiveHeight: true, - beforeChange: (current, next) => { - setOldSlide(current); - setActiveSlide(next); - }, - }; - const steps = [ - { name: 'MainStep1', component: }, - { name: 'MainStep2', component: }, - ]; const onUpdate = () => { setIsClick(!isClick); From c7a9989f296039f3fe2b1b16d9dc581b4da028b5 Mon Sep 17 00:00:00 2001 From: P1su Date: Tue, 3 Sep 2024 01:57:32 +0900 Subject: [PATCH 09/29] =?UTF-8?q?feat:=20=EB=88=84=EB=A5=B4=EB=A9=B4=20?= =?UTF-8?q?=EC=9E=91=EC=84=B1=ED=95=A0=20=EC=9D=BC=EA=B8=B0=20=ED=83=80?= =?UTF-8?q?=EC=9E=85=EC=9D=84=20=EB=B3=B4=EC=97=AC=EC=A3=BC=EB=8A=94=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=EC=9D=84=20=EA=B3=B5=ED=86=B5=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20=EC=A0=9C=EC=9E=91?= =?UTF-8?q?=ED=95=98=EC=97=AC=20=EB=A9=94=EC=9D=B8=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=EC=99=80=20=EB=8B=AC=EB=A0=A5=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=EC=97=90=20=EB=B0=B0=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CreateDiaryButtonFiedl.style.js | 34 +++++++++++++ .../CreateDiaryButtonField.jsx | 51 +++++++++++++++++++ src/pages/CalendarPage/CalendarPage.jsx | 3 +- src/pages/Main/Main.jsx | 30 +---------- 4 files changed, 89 insertions(+), 29 deletions(-) create mode 100644 src/components/CreateDiaryButtonField/CreateDiaryButtonFiedl.style.js create mode 100644 src/components/CreateDiaryButtonField/CreateDiaryButtonField.jsx diff --git a/src/components/CreateDiaryButtonField/CreateDiaryButtonFiedl.style.js b/src/components/CreateDiaryButtonField/CreateDiaryButtonFiedl.style.js new file mode 100644 index 00000000..025f8785 --- /dev/null +++ b/src/components/CreateDiaryButtonField/CreateDiaryButtonFiedl.style.js @@ -0,0 +1,34 @@ +import styled from 'styled-components'; +import { motion } from 'framer-motion'; + +export const ButtonMotionWrapper = styled(motion.div)` + ${({ theme: { mixin } }) => mixin.flexBox({ + 'direction': 'column', + 'justify': 'flex-end', + 'align': 'flex-end', + })}; + ${({ theme, isClick}) => ` + ${isClick && `background: ${theme.colors.gradient.gradient_black};`} + `}; + ${({ isClick }) => ` + ${isClick + ? `width: 100%;` + : `width: 50%;` + } + `} + position: fixed; + right: 0rem;; + bottom: 0rem; + z-index: 100; +`; +export const CreateButtonField = styled.div` + ${({ theme: { mixin } }) => mixin.flexBox({ + 'direction': 'row', + 'align': 'center', + })}; + padding-right: 1.5rem; +`; +export const ButtonText = styled.p` + ${({ theme }) => theme.fonts.body_01}; + color: ${({ theme }) => theme.colors.normal.white}; +`; \ No newline at end of file diff --git a/src/components/CreateDiaryButtonField/CreateDiaryButtonField.jsx b/src/components/CreateDiaryButtonField/CreateDiaryButtonField.jsx new file mode 100644 index 00000000..db138ab7 --- /dev/null +++ b/src/components/CreateDiaryButtonField/CreateDiaryButtonField.jsx @@ -0,0 +1,51 @@ +import * as S from './CreateDiaryButtonFiedl.style'; +import { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import WriteDiaryButton from '../common/buttons/WriteDiaryButton/WriteDiaryButton'; +import BtnFastDiary from '../common/buttons/DiaryType/BtnFastDiary'; +import BtnSlowDiary from '../common/buttons/DiaryType/BtnSlowDiary'; + +function CreateDiaryButtonField() { + const [isClick, setIsClick] = useState(false); + const navigate = useNavigate(); + + const onUpdate = () => { + setIsClick(!isClick); + }; + const handleFastDiary = () => { + navigate('/fastdiary'); + }; + const handleSlowDiary = () => { + navigate('/slowdiary'); + }; + + return( + + { + isClick && ( + <> + + + 직접 일기 쓰기 + + + + + + + 키워드로 빠르게 쓰기 + + + + + ) + } + + + ); +} +export default CreateDiaryButtonField; \ No newline at end of file diff --git a/src/pages/CalendarPage/CalendarPage.jsx b/src/pages/CalendarPage/CalendarPage.jsx index bb618d11..cc9da093 100644 --- a/src/pages/CalendarPage/CalendarPage.jsx +++ b/src/pages/CalendarPage/CalendarPage.jsx @@ -4,7 +4,7 @@ import { useRecoilValue } from 'recoil'; import { format } from 'date-fns'; import Calendar from '../../components/common/Calendar/Calendar'; import DiaryListComponent from '../../components/common/DiaryListComponent/DiaryListComponent'; - +import CreateDiaryButtonField from '../../components/CreateDiaryButtonField/CreateDiaryButtonField'; function CalendarPage() { const diaries = useRecoilValue(clickedDiary); @@ -32,6 +32,7 @@ function CalendarPage() { ) } + ); } diff --git a/src/pages/Main/Main.jsx b/src/pages/Main/Main.jsx index 0d8ad0e9..3ac5bff1 100644 --- a/src/pages/Main/Main.jsx +++ b/src/pages/Main/Main.jsx @@ -5,6 +5,7 @@ import WriteDiaryButton from '../../components/common/buttons/WriteDiaryButton/W import BtnSlowDiary from '../../components/common/buttons/DiaryType/BtnSlowDiary'; import BtnFastDiary from './../../components/common/buttons/DiaryType/BtnFastDiary'; import { useNavigate } from 'react-router-dom'; +import CreateDiaryButtonField from '../../components/CreateDiaryButtonField/CreateDiaryButtonField'; function Main() { const [isClick, setIsClick] = useState(false); @@ -27,34 +28,7 @@ function Main() { - - { - isClick && ( - <> - - - 직접 일기 쓰기 - - - - - - - 키워드로 빠르게 쓰기 - - - - - ) - } - - - - + ); } From df419269ed2565791b930a8cc36110033dea93ae Mon Sep 17 00:00:00 2001 From: P1su Date: Tue, 3 Sep 2024 01:59:45 +0900 Subject: [PATCH 10/29] =?UTF-8?q?style:=20=EB=A9=94=EC=9D=B8=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=97=90=EC=84=9C=20=EC=82=AC=EC=9A=A9?= =?UTF-8?q?=ED=95=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EB=9D=BC=EC=9D=B4?= =?UTF-8?q?=EB=B8=8C=EB=9F=AC=EB=A6=AC=EC=99=80=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EC=BD=94=EB=93=9C=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Main/Main.jsx | 19 ------------------- src/pages/Main/Main.style.js | 32 -------------------------------- 2 files changed, 51 deletions(-) diff --git a/src/pages/Main/Main.jsx b/src/pages/Main/Main.jsx index 3ac5bff1..c70ce895 100644 --- a/src/pages/Main/Main.jsx +++ b/src/pages/Main/Main.jsx @@ -1,27 +1,8 @@ import * as S from './Main.style'; import MainStep1 from '../../components/MainStep/MainStep1/MainStep1'; -import React, { useState } from 'react'; -import WriteDiaryButton from '../../components/common/buttons/WriteDiaryButton/WriteDiaryButton'; -import BtnSlowDiary from '../../components/common/buttons/DiaryType/BtnSlowDiary'; -import BtnFastDiary from './../../components/common/buttons/DiaryType/BtnFastDiary'; -import { useNavigate } from 'react-router-dom'; import CreateDiaryButtonField from '../../components/CreateDiaryButtonField/CreateDiaryButtonField'; function Main() { - const [isClick, setIsClick] = useState(false); - const navigate = useNavigate(); - - const onUpdate = () => { - setIsClick(!isClick); - }; - - const handleFastDiary = () => { - navigate('/fastdiary'); - }; - const handleSlowDiary = () => { - navigate('/slowdiary'); - }; - return ( diff --git a/src/pages/Main/Main.style.js b/src/pages/Main/Main.style.js index 4192917e..8052b8a7 100644 --- a/src/pages/Main/Main.style.js +++ b/src/pages/Main/Main.style.js @@ -1,5 +1,4 @@ import styled from 'styled-components'; -import { motion } from 'framer-motion'; import { IcHoneyBear } from '../../assets/svg'; export const MainWrapper = styled.div` @@ -11,35 +10,4 @@ export const HoneyBearWrapper = styled.div` width: 32rem; position: absolute; top: 10rem; -`; -export const ButtonMotionWrapper = styled(motion.div)` - ${({ theme: { mixin } }) => mixin.flexBox({ - 'direction': 'column', - 'justify': 'flex-end', - 'align': 'flex-end', - })}; - ${({ theme, isClick}) => ` - ${isClick && `background: ${theme.colors.gradient.gradient_black};`} - `}; - ${({ isClick }) => ` - ${isClick - ? `width: 100%;` - : `width: 50%;` - } - `} - position: fixed; - right: 0rem;; - bottom: 0rem; - z-index: 100; -`; -export const CreateButtonField = styled.div` - ${({ theme: { mixin } }) => mixin.flexBox({ - 'direction': 'row', - 'align': 'center', - })}; - padding-right: 1.5rem; -`; -export const ButtonText = styled.p` - ${({ theme }) => theme.fonts.body_01}; - color: ${({ theme }) => theme.colors.normal.white}; `; \ No newline at end of file From bac64f27a1a8fb5a55505c2fa123f9b977fa41cc Mon Sep 17 00:00:00 2001 From: P1su Date: Tue, 3 Sep 2024 02:13:45 +0900 Subject: [PATCH 11/29] =?UTF-8?q?feat:=20=EB=A9=94=EB=89=B4=20=ED=97=A4?= =?UTF-8?q?=EB=8D=94=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1=ED=9B=84=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/MainStep/MainStep1/MainStep1.jsx | 2 ++ src/components/MenuHeader/MenuHeader.jsx | 12 ++++++++++++ src/components/MenuHeader/MenuHeader.style.js | 9 +++++++++ 3 files changed, 23 insertions(+) create mode 100644 src/components/MenuHeader/MenuHeader.jsx create mode 100644 src/components/MenuHeader/MenuHeader.style.js diff --git a/src/components/MainStep/MainStep1/MainStep1.jsx b/src/components/MainStep/MainStep1/MainStep1.jsx index 876c365e..a5c0cfb0 100644 --- a/src/components/MainStep/MainStep1/MainStep1.jsx +++ b/src/components/MainStep/MainStep1/MainStep1.jsx @@ -2,10 +2,12 @@ import * as S from './MainStep1.style'; import ThisMonthEmotion from '../../common/buttons/ThisMonthEmotion/ThisMonthEmotion'; import KakaoAd from '../../KakaoAd/KakaoAd'; import WeatherPlaylist from '../MainStep1/WeatherPlaylist/WeatherPlaylist'; +import MenuHeader from '../../MenuHeader/MenuHeader'; export default function MainStep1() { return ( + {/* diff --git a/src/components/MenuHeader/MenuHeader.jsx b/src/components/MenuHeader/MenuHeader.jsx new file mode 100644 index 00000000..e54e4baa --- /dev/null +++ b/src/components/MenuHeader/MenuHeader.jsx @@ -0,0 +1,12 @@ +import * as S from './MenuHeader.style'; + +function MenuHeader() { + return( + + + + + + ); +} +export default MenuHeader; \ No newline at end of file diff --git a/src/components/MenuHeader/MenuHeader.style.js b/src/components/MenuHeader/MenuHeader.style.js new file mode 100644 index 00000000..742033d8 --- /dev/null +++ b/src/components/MenuHeader/MenuHeader.style.js @@ -0,0 +1,9 @@ +import styled from 'styled-components'; + +export const MenuHeaderWrapper = styled.div` + ${({ theme: { mixin } }) => mixin.flexBox({ 'justify' : 'flex-end' })}; + width: 100%; + gap: 2.5rem; + margin-bottom: 2rem; + margin-right: 2.7rem; +`; \ No newline at end of file From f3614de519e8f7e2d567df4b1a686ae93c32a3e4 Mon Sep 17 00:00:00 2001 From: P1su Date: Tue, 3 Sep 2024 16:04:47 +0900 Subject: [PATCH 12/29] =?UTF-8?q?feat:=20MainStep=20=ED=8F=B4=EB=8D=94=20?= =?UTF-8?q?=EB=B0=8F=20=ED=8C=8C=EC=9D=BC=20=EC=82=AD=EC=A0=9C=20=ED=9B=84?= =?UTF-8?q?=20Main=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=95=98=EC=9C=84=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=93=A4=20=EC=9E=AC?= =?UTF-8?q?=EB=B0=B0=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MainStep/MainStep1/MainStep1.jsx | 22 --------- .../MainStep/MainStep1/MainStep1.style.js | 16 ------- .../MainStep/MainStep2/MainStep2.jsx | 48 ------------------- .../MainStep/MainStep2/MainStep2.style.js | 34 ------------- src/components/MenuHeader/MenuHeader.style.js | 1 - .../WeatherPlaylist/WeatherPlaylist.jsx | 2 +- .../WeatherPlaylist/WeatherPlaylist.style.js | 1 + src/pages/Main/Main.jsx | 13 ++++- src/pages/Main/Main.style.js | 10 ++++ src/pages/Weather/Weather.jsx | 11 ----- src/pages/Weather/Weather.style.js | 6 --- src/router/Router.jsx | 5 -- 12 files changed, 23 insertions(+), 146 deletions(-) delete mode 100644 src/components/MainStep/MainStep1/MainStep1.jsx delete mode 100644 src/components/MainStep/MainStep1/MainStep1.style.js delete mode 100644 src/components/MainStep/MainStep2/MainStep2.jsx delete mode 100644 src/components/MainStep/MainStep2/MainStep2.style.js rename src/components/{MainStep/MainStep1 => }/WeatherPlaylist/WeatherPlaylist.jsx (91%) rename src/components/{MainStep/MainStep1 => }/WeatherPlaylist/WeatherPlaylist.style.js (97%) delete mode 100644 src/pages/Weather/Weather.jsx delete mode 100644 src/pages/Weather/Weather.style.js diff --git a/src/components/MainStep/MainStep1/MainStep1.jsx b/src/components/MainStep/MainStep1/MainStep1.jsx deleted file mode 100644 index a5c0cfb0..00000000 --- a/src/components/MainStep/MainStep1/MainStep1.jsx +++ /dev/null @@ -1,22 +0,0 @@ -import * as S from './MainStep1.style'; -import ThisMonthEmotion from '../../common/buttons/ThisMonthEmotion/ThisMonthEmotion'; -import KakaoAd from '../../KakaoAd/KakaoAd'; -import WeatherPlaylist from '../MainStep1/WeatherPlaylist/WeatherPlaylist'; -import MenuHeader from '../../MenuHeader/MenuHeader'; - -export default function MainStep1() { - return ( - - - - - {/* - - - */} - - - - - ); -} diff --git a/src/components/MainStep/MainStep1/MainStep1.style.js b/src/components/MainStep/MainStep1/MainStep1.style.js deleted file mode 100644 index f0e5df00..00000000 --- a/src/components/MainStep/MainStep1/MainStep1.style.js +++ /dev/null @@ -1,16 +0,0 @@ -import styled from 'styled-components'; - -export const Main1Wrapper = styled.div` - ${({ theme: { mixin } }) => mixin.flexCenter({})}; - width: 100%; - height: 100vh; - gap: 1.5rem; - z-index: 10; -`; -export const MainButtonWrapper = styled.div` - ${({ theme: { mixin } }) => mixin.flexBox({ direction: 'column', justify: 'space-between' })}; - width: 21rem; - margin-top: 8.7rem; - margin-right: 11rem; - gap: 1.5rem; -`; diff --git a/src/components/MainStep/MainStep2/MainStep2.jsx b/src/components/MainStep/MainStep2/MainStep2.jsx deleted file mode 100644 index d5bf88e9..00000000 --- a/src/components/MainStep/MainStep2/MainStep2.jsx +++ /dev/null @@ -1,48 +0,0 @@ -import React from "react"; -import { format } from "date-fns"; // date-fns에서 format 함수를 가져옵니다. -import * as S from './MainStep2.style'; -import Calendar from '../../common/Calendar/Calendar'; -import DiaryListComponent from '../../common/DiaryListComponent/DiaryListComponent'; - -import { clickedDiary } from '../../../recoil/atoms' -import { useRecoilValue } from "recoil"; - -export default function MainStep2() { - const diaries = useRecoilValue(clickedDiary); - - const parseQuotes = (text) => { - if(text[0] === '"'){ - return text.substring(1, text.length-1); - } - else{ - return text; - } - }; - - return ( - - - - - - {diaries.length > 0 ? ( - diaries.map(item => ( - - )) - ) : ( - - 아직 작성된 일기가 없습니다. - - )} - - - - - ); -} diff --git a/src/components/MainStep/MainStep2/MainStep2.style.js b/src/components/MainStep/MainStep2/MainStep2.style.js deleted file mode 100644 index 39393e59..00000000 --- a/src/components/MainStep/MainStep2/MainStep2.style.js +++ /dev/null @@ -1,34 +0,0 @@ -import styled from 'styled-components'; - -export const Main2Wrapper = styled.div` - ${({ theme: { mixin } }) => mixin.flexBox({ direction: 'column' })}; - width: 100%; - min-height: 100vh; - height: auto; - max-height: fit-content; -`; -export const MainStep2Wrapper = styled.div` - ${({ theme: { mixin } }) => mixin.flexCenter({})}; -`; -export const MainStep2ComponentWrapper = styled.div` - ${({ theme: { mixin } }) => mixin.flexCenter({})}; - width: 32rem; - margin: 19.8rem 0 10.9rem 0; - gap: 0.8rem; - z-index: 10; -`; -export const NoDiaryExist = styled.div` - ${({ theme: { mixin } }) => mixin.flexCenter({})}; - width: 32rem; - height: 9.3rem; - flex-shrink: 0; - border-radius: 3rem; - background: rgba(255, 255, 255, 0.27); - -webkit-backdrop-filter: blur(1.5rem); - -moz-backdrop-filter: blur(1.5rem); - -o-backdrop-filter: blur(1.5rem); - -ms-backdrop-filter: blur(1.5rem); - backdrop-filter: blur(1.5rem); - color: #575757; - ${({ theme }) => theme.fonts.body_08} -`; diff --git a/src/components/MenuHeader/MenuHeader.style.js b/src/components/MenuHeader/MenuHeader.style.js index 742033d8..6f66b5af 100644 --- a/src/components/MenuHeader/MenuHeader.style.js +++ b/src/components/MenuHeader/MenuHeader.style.js @@ -4,6 +4,5 @@ export const MenuHeaderWrapper = styled.div` ${({ theme: { mixin } }) => mixin.flexBox({ 'justify' : 'flex-end' })}; width: 100%; gap: 2.5rem; - margin-bottom: 2rem; margin-right: 2.7rem; `; \ No newline at end of file diff --git a/src/components/MainStep/MainStep1/WeatherPlaylist/WeatherPlaylist.jsx b/src/components/WeatherPlaylist/WeatherPlaylist.jsx similarity index 91% rename from src/components/MainStep/MainStep1/WeatherPlaylist/WeatherPlaylist.jsx rename to src/components/WeatherPlaylist/WeatherPlaylist.jsx index 8508c512..2c68a7c3 100644 --- a/src/components/MainStep/MainStep1/WeatherPlaylist/WeatherPlaylist.jsx +++ b/src/components/WeatherPlaylist/WeatherPlaylist.jsx @@ -1,5 +1,5 @@ import * as S from './WeatherPlaylist.style'; -import useGetWeather from '../../../../hooks/queries/main/useGetWeather'; +import useGetWeather from '../../hooks/queries/main/useGetWeather'; import { useState } from 'react'; function WeatherPlaylist(){ diff --git a/src/components/MainStep/MainStep1/WeatherPlaylist/WeatherPlaylist.style.js b/src/components/WeatherPlaylist/WeatherPlaylist.style.js similarity index 97% rename from src/components/MainStep/MainStep1/WeatherPlaylist/WeatherPlaylist.style.js rename to src/components/WeatherPlaylist/WeatherPlaylist.style.js index 4aa01efc..3b2d6c60 100644 --- a/src/components/MainStep/MainStep1/WeatherPlaylist/WeatherPlaylist.style.js +++ b/src/components/WeatherPlaylist/WeatherPlaylist.style.js @@ -3,6 +3,7 @@ import styled from "styled-components"; export const WeatherPlaylistWrapper = styled.div` width: 100%; margin-bottom: 15rem; + z-index: 100; `; export const WeatherIcon = styled.img` width: 3rem; diff --git a/src/pages/Main/Main.jsx b/src/pages/Main/Main.jsx index c70ce895..cfa7ad31 100644 --- a/src/pages/Main/Main.jsx +++ b/src/pages/Main/Main.jsx @@ -1,6 +1,9 @@ import * as S from './Main.style'; -import MainStep1 from '../../components/MainStep/MainStep1/MainStep1'; import CreateDiaryButtonField from '../../components/CreateDiaryButtonField/CreateDiaryButtonField'; +import KakaoAd from '../../components/KakaoAd/KakaoAd'; +import MenuHeader from '../../components/MenuHeader/MenuHeader'; +import WeatherPlaylist from '../../components/WeatherPlaylist/WeatherPlaylist'; +import ThisMonthEmotion from '../../components/common/buttons/ThisMonthEmotion/ThisMonthEmotion'; function Main() { return ( @@ -8,7 +11,13 @@ function Main() { - + + + + + + + ); diff --git a/src/pages/Main/Main.style.js b/src/pages/Main/Main.style.js index 8052b8a7..7ecf2fda 100644 --- a/src/pages/Main/Main.style.js +++ b/src/pages/Main/Main.style.js @@ -4,10 +4,20 @@ import { IcHoneyBear } from '../../assets/svg'; export const MainWrapper = styled.div` ${({ theme: { mixin } }) => mixin.flexCenter({})}; background: ${({ theme }) => theme.colors.gradient.gradient_pink}; + height: 100vh; + gap: 2rem; + padding-bottom: 2rem; `; export const HoneyBear = styled(IcHoneyBear)``; export const HoneyBearWrapper = styled.div` width: 32rem; position: absolute; top: 10rem; +`; +export const MainButtonWrapper = styled.div` + ${({ theme: { mixin } }) => mixin.flexBox({ direction: 'column', justify: 'space-between' })}; + width: 21rem; + margin-top: 8.7rem; + margin-right: 11rem; + gap: 1.5rem; `; \ No newline at end of file diff --git a/src/pages/Weather/Weather.jsx b/src/pages/Weather/Weather.jsx deleted file mode 100644 index 7bf01512..00000000 --- a/src/pages/Weather/Weather.jsx +++ /dev/null @@ -1,11 +0,0 @@ -import * as S from './Weather.style' -import WeatherPlaylist from "../../components/MainStep/MainStep1/WeatherPlaylist/WeatherPlaylist"; - -function Weather(){ - return( - - - - ); -} -export default Weather \ No newline at end of file diff --git a/src/pages/Weather/Weather.style.js b/src/pages/Weather/Weather.style.js deleted file mode 100644 index d84cc152..00000000 --- a/src/pages/Weather/Weather.style.js +++ /dev/null @@ -1,6 +0,0 @@ -import styled from "styled-components"; - -export const Wrapper = styled.div` - width: 100%; - height: 100vh; -`; \ No newline at end of file diff --git a/src/router/Router.jsx b/src/router/Router.jsx index ae291c50..d8ac3c56 100644 --- a/src/router/Router.jsx +++ b/src/router/Router.jsx @@ -17,7 +17,6 @@ import LoginCallback from '../components/common/buttons/KakaoLogin/LoginCallback import Loading from '../pages/Loading/Loading'; import SharedView from '../pages/SharedView/SharedView'; import Information from '../pages/Information/Information'; -import Weather from '../pages/Weather/Weather'; import LoginError from '../pages/LoginError/LoginError'; import CalendarPage from './../pages/CalendarPage/CalendarPage'; @@ -95,10 +94,6 @@ const router = createBrowserRouter([ path: '/information', element: , }, - { - path: '/weather', - element: , - }, { path: '/calendar', element: , From 1d4f7f084866313d1cad5b35df342e9d05e17cc9 Mon Sep 17 00:00:00 2001 From: P1su Date: Tue, 3 Sep 2024 16:10:02 +0900 Subject: [PATCH 13/29] =?UTF-8?q?style:=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EA=B0=84=20margin=20=EA=B0=92=20=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/MenuHeader/MenuHeader.style.js | 1 + src/components/WeatherPlaylist/WeatherPlaylist.style.js | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MenuHeader/MenuHeader.style.js b/src/components/MenuHeader/MenuHeader.style.js index 6f66b5af..b7aaf1a4 100644 --- a/src/components/MenuHeader/MenuHeader.style.js +++ b/src/components/MenuHeader/MenuHeader.style.js @@ -4,5 +4,6 @@ export const MenuHeaderWrapper = styled.div` ${({ theme: { mixin } }) => mixin.flexBox({ 'justify' : 'flex-end' })}; width: 100%; gap: 2.5rem; + margin-bottom: 10rem; margin-right: 2.7rem; `; \ No newline at end of file diff --git a/src/components/WeatherPlaylist/WeatherPlaylist.style.js b/src/components/WeatherPlaylist/WeatherPlaylist.style.js index 3b2d6c60..631e2694 100644 --- a/src/components/WeatherPlaylist/WeatherPlaylist.style.js +++ b/src/components/WeatherPlaylist/WeatherPlaylist.style.js @@ -2,7 +2,6 @@ import styled from "styled-components"; export const WeatherPlaylistWrapper = styled.div` width: 100%; - margin-bottom: 15rem; z-index: 100; `; export const WeatherIcon = styled.img` From 4781c784847e7096c0695894f7255f3932337a7a Mon Sep 17 00:00:00 2001 From: P1su Date: Tue, 3 Sep 2024 16:31:16 +0900 Subject: [PATCH 14/29] =?UTF-8?q?feat:=20MenuHeader=20=EC=97=90=EC=84=9C?= =?UTF-8?q?=20=EC=93=B0=EC=9D=B4=EB=8A=94=20svg=20=ED=8C=8C=EC=9D=BC?= =?UTF-8?q?=EB=93=A4=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svg/IcCalendarIcon.jsx | 73 +++++++++++++++++++++++++++++++ src/assets/svg/IcHomeIcon.jsx | 17 +++++++ src/assets/svg/IcMyPageIcon.jsx | 30 +++++++++++++ src/assets/svg/IcSearchIcon.jsx | 22 ++++++++++ src/assets/svg/index.js | 4 ++ 5 files changed, 146 insertions(+) create mode 100644 src/assets/svg/IcCalendarIcon.jsx create mode 100644 src/assets/svg/IcHomeIcon.jsx create mode 100644 src/assets/svg/IcMyPageIcon.jsx create mode 100644 src/assets/svg/IcSearchIcon.jsx diff --git a/src/assets/svg/IcCalendarIcon.jsx b/src/assets/svg/IcCalendarIcon.jsx new file mode 100644 index 00000000..237b4317 --- /dev/null +++ b/src/assets/svg/IcCalendarIcon.jsx @@ -0,0 +1,73 @@ +const SvgIcCalendarIcon = () => ( + + + + + + + + + + +); +export default SvgIcCalendarIcon; \ No newline at end of file diff --git a/src/assets/svg/IcHomeIcon.jsx b/src/assets/svg/IcHomeIcon.jsx new file mode 100644 index 00000000..1faa797f --- /dev/null +++ b/src/assets/svg/IcHomeIcon.jsx @@ -0,0 +1,17 @@ +const SvgIcHomeIcon = () => ( + + + +); +export default SvgIcHomeIcon; \ No newline at end of file diff --git a/src/assets/svg/IcMyPageIcon.jsx b/src/assets/svg/IcMyPageIcon.jsx new file mode 100644 index 00000000..a15742b7 --- /dev/null +++ b/src/assets/svg/IcMyPageIcon.jsx @@ -0,0 +1,30 @@ +const SvgIcMyPageIcon = () => ( + + + + + +); +export default SvgIcMyPageIcon; \ No newline at end of file diff --git a/src/assets/svg/IcSearchIcon.jsx b/src/assets/svg/IcSearchIcon.jsx new file mode 100644 index 00000000..e2ef788c --- /dev/null +++ b/src/assets/svg/IcSearchIcon.jsx @@ -0,0 +1,22 @@ +const SvgIcSearchIcon = () => ( + + + + +); +export default SvgIcSearchIcon; \ No newline at end of file diff --git a/src/assets/svg/index.js b/src/assets/svg/index.js index 6ddd37a9..7e05402c 100644 --- a/src/assets/svg/index.js +++ b/src/assets/svg/index.js @@ -52,3 +52,7 @@ export { default as IcStudentHoneyBee } from './IcStudentHoneyBee'; export { default as IcCreateButton } from './IcCreateButton'; export { default as IcFastCreateButton } from './IcFastCreateButton'; export { default as IcSlowCreateButton } from './IcSlowCreateButton'; +export { default as IcSearchIcon } from './IcSearchIcon'; +export { default as IcCalendarIcon } from './IcCalendarIcon'; +export { default as IcMyPageIcon } from './IcMyPageIcon'; +export { default as IcHomeIcon } from './IcHomeIcon'; \ No newline at end of file From 1e943250b876c0f97f571b722ac53eed1bd6b35d Mon Sep 17 00:00:00 2001 From: P1su Date: Tue, 3 Sep 2024 16:56:35 +0900 Subject: [PATCH 15/29] =?UTF-8?q?feat:=20MenuHeader=20=EC=97=90=20?= =?UTF-8?q?=EB=B0=B0=EC=B9=98=ED=95=A0=20=EB=B2=84=ED=8A=BC=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1=ED=9B=84=20?= =?UTF-8?q?=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=ED=95=B8=EB=93=A4=EB=9F=AC=20?= =?UTF-8?q?=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/MenuHeader/MenuHeader.jsx | 24 ++++++++++++++++--- .../common/buttons/Calendar/BtnCalendar.jsx | 14 +++++++++++ .../buttons/Calendar/BtnCalendar.style.js | 8 +++++++ .../common/buttons/MyPage/BtnMyPage.jsx | 14 +++++++++++ .../common/buttons/MyPage/BtnMyPage.style.js | 8 +++++++ .../common/buttons/Search/BtnSearch.jsx | 14 +++++++++++ .../common/buttons/Search/BtnSearch.style.js | 8 +++++++ 7 files changed, 87 insertions(+), 3 deletions(-) create mode 100644 src/components/common/buttons/Calendar/BtnCalendar.jsx create mode 100644 src/components/common/buttons/Calendar/BtnCalendar.style.js create mode 100644 src/components/common/buttons/MyPage/BtnMyPage.jsx create mode 100644 src/components/common/buttons/MyPage/BtnMyPage.style.js create mode 100644 src/components/common/buttons/Search/BtnSearch.jsx create mode 100644 src/components/common/buttons/Search/BtnSearch.style.js diff --git a/src/components/MenuHeader/MenuHeader.jsx b/src/components/MenuHeader/MenuHeader.jsx index e54e4baa..050d7dd7 100644 --- a/src/components/MenuHeader/MenuHeader.jsx +++ b/src/components/MenuHeader/MenuHeader.jsx @@ -1,11 +1,29 @@ import * as S from './MenuHeader.style'; +import BtnSearch from './../common/buttons/Search/BtnSearch'; +import BtnCalendar from './../common/buttons/Calendar/BtnCalendar'; +import BtnMyPage from './../common/buttons/MyPage/BtnMyPage'; +import { useNavigate } from 'react-router-dom'; function MenuHeader() { + const navigate = useNavigate(); + + const handleSearch = () => { + alert('삐용'); + //라우트 설정 완료되면 주석 해젷 사용하심 될 것 같습니다 ! + //navigate('/search'); + }; + const handleCalendar = () => { + navigate('/calendar'); + }; + const handleMyPage = () => { + navigate('/myPage'); + }; + return( - - - + + + ); } diff --git a/src/components/common/buttons/Calendar/BtnCalendar.jsx b/src/components/common/buttons/Calendar/BtnCalendar.jsx new file mode 100644 index 00000000..f64290ba --- /dev/null +++ b/src/components/common/buttons/Calendar/BtnCalendar.jsx @@ -0,0 +1,14 @@ +import * as S from './BtnCalendar.style'; + +function BtnCalendar({ onClick }) { + return ( + { + onClick(); + }} + > + + + ); +} +export default BtnCalendar; \ No newline at end of file diff --git a/src/components/common/buttons/Calendar/BtnCalendar.style.js b/src/components/common/buttons/Calendar/BtnCalendar.style.js new file mode 100644 index 00000000..abff3d80 --- /dev/null +++ b/src/components/common/buttons/Calendar/BtnCalendar.style.js @@ -0,0 +1,8 @@ +import styled from 'styled-components'; +import { IcCalendarIcon } from '../../../../assets/svg'; + +export const ButtonWrapper = styled.div` + background: transparent; +`; +export const CalendarIcon = styled(IcCalendarIcon)` +`; \ No newline at end of file diff --git a/src/components/common/buttons/MyPage/BtnMyPage.jsx b/src/components/common/buttons/MyPage/BtnMyPage.jsx new file mode 100644 index 00000000..774a8cc8 --- /dev/null +++ b/src/components/common/buttons/MyPage/BtnMyPage.jsx @@ -0,0 +1,14 @@ +import * as S from './BtnMyPage.style'; + +function BtnMyPage({ onClick }) { + return( + { + onClick(); + }} + > + + + ); +} +export default BtnMyPage; \ No newline at end of file diff --git a/src/components/common/buttons/MyPage/BtnMyPage.style.js b/src/components/common/buttons/MyPage/BtnMyPage.style.js new file mode 100644 index 00000000..6297375d --- /dev/null +++ b/src/components/common/buttons/MyPage/BtnMyPage.style.js @@ -0,0 +1,8 @@ +import styled from 'styled-components'; +import { IcMyPageIcon } from '../../../../assets/svg'; + +export const ButtonWrapper = styled.div` + background: transparent; +`; +export const MyPageIcon = styled(IcMyPageIcon)` +`; \ No newline at end of file diff --git a/src/components/common/buttons/Search/BtnSearch.jsx b/src/components/common/buttons/Search/BtnSearch.jsx new file mode 100644 index 00000000..58d18b05 --- /dev/null +++ b/src/components/common/buttons/Search/BtnSearch.jsx @@ -0,0 +1,14 @@ +import * as S from './BtnSearch.style'; + +function BtnSearch({ onClick }) { + return( + { + onClick(); + }} + > + + + ); +} +export default BtnSearch; \ No newline at end of file diff --git a/src/components/common/buttons/Search/BtnSearch.style.js b/src/components/common/buttons/Search/BtnSearch.style.js new file mode 100644 index 00000000..30eb4819 --- /dev/null +++ b/src/components/common/buttons/Search/BtnSearch.style.js @@ -0,0 +1,8 @@ +import styled from 'styled-components'; +import { IcSearchIcon } from '../../../../assets/svg'; + +export const ButtonWrapper = styled.div` + background: transparent; +`; +export const SearchIcon = styled(IcSearchIcon)` +`; \ No newline at end of file From ebfd94efca84a0a2c333c6fb1dbf08c826314dbb Mon Sep 17 00:00:00 2001 From: P1su Date: Tue, 3 Sep 2024 17:15:25 +0900 Subject: [PATCH 16/29] =?UTF-8?q?feat:=20useLocation=EC=9D=84=20=ED=86=B5?= =?UTF-8?q?=ED=95=98=EC=97=AC=20=ED=98=84=EC=9E=AC=20=EA=B2=BD=EB=A1=9C?= =?UTF-8?q?=EB=A5=BC=20=EB=B0=9B=EC=95=84=EC=99=80=20=EA=B0=81=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=97=90=20=EB=A7=9E=EA=B2=8C=20=ED=99=88?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=EA=B3=BC=20=EB=8B=AC=EB=A0=A5=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=EC=9D=84=20=EB=A0=8C=EB=8D=94=EB=A7=81=ED=95=98?= =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/MenuHeader/MenuHeader.jsx | 24 +++++++++++++++++-- .../buttons/Home/BtnHomeIcon/BtnHomeIcon.jsx | 14 +++++++++++ .../Home/BtnHomeIcon/BtnHomeIcon.style.js | 8 +++++++ src/pages/CalendarPage/CalendarPage.jsx | 2 ++ 4 files changed, 46 insertions(+), 2 deletions(-) create mode 100644 src/components/common/buttons/Home/BtnHomeIcon/BtnHomeIcon.jsx create mode 100644 src/components/common/buttons/Home/BtnHomeIcon/BtnHomeIcon.style.js diff --git a/src/components/MenuHeader/MenuHeader.jsx b/src/components/MenuHeader/MenuHeader.jsx index 050d7dd7..1ef83450 100644 --- a/src/components/MenuHeader/MenuHeader.jsx +++ b/src/components/MenuHeader/MenuHeader.jsx @@ -2,7 +2,8 @@ import * as S from './MenuHeader.style'; import BtnSearch from './../common/buttons/Search/BtnSearch'; import BtnCalendar from './../common/buttons/Calendar/BtnCalendar'; import BtnMyPage from './../common/buttons/MyPage/BtnMyPage'; -import { useNavigate } from 'react-router-dom'; +import { useNavigate, useLocation } from 'react-router-dom'; +import BtnHomeIcon from './../common/buttons/Home/BtnHomeIcon/BtnHomeIcon'; function MenuHeader() { const navigate = useNavigate(); @@ -18,11 +19,30 @@ function MenuHeader() { const handleMyPage = () => { navigate('/myPage'); }; + const handleMain = () => { + navigate('/main'); + }; + const getSegment = () => { + const location = useLocation(); + const path = location.pathname; + const segments = path.split('/').filter(Boolean); + const firstSegment = segments[0]; + + return firstSegment; + } + + const segment = getSegment(); return( - + { + segment === 'main' + ? + + : + + } ); diff --git a/src/components/common/buttons/Home/BtnHomeIcon/BtnHomeIcon.jsx b/src/components/common/buttons/Home/BtnHomeIcon/BtnHomeIcon.jsx new file mode 100644 index 00000000..11ad08a3 --- /dev/null +++ b/src/components/common/buttons/Home/BtnHomeIcon/BtnHomeIcon.jsx @@ -0,0 +1,14 @@ +import * as S from './BtnHomeIcon.style'; + +function BtnHomeIcon ({ onClick }) { + return( + { + onClick(); + }} + > + + + ); +} +export default BtnHomeIcon; \ No newline at end of file diff --git a/src/components/common/buttons/Home/BtnHomeIcon/BtnHomeIcon.style.js b/src/components/common/buttons/Home/BtnHomeIcon/BtnHomeIcon.style.js new file mode 100644 index 00000000..653b27e7 --- /dev/null +++ b/src/components/common/buttons/Home/BtnHomeIcon/BtnHomeIcon.style.js @@ -0,0 +1,8 @@ +import styled from 'styled-components'; +import { IcHomeIcon } from '../../../../../assets/svg'; + +export const ButtonWrapper = styled.div` + background: transparent; +`; +export const HomeIcon = styled(IcHomeIcon)` +`; \ No newline at end of file diff --git a/src/pages/CalendarPage/CalendarPage.jsx b/src/pages/CalendarPage/CalendarPage.jsx index cc9da093..638e3328 100644 --- a/src/pages/CalendarPage/CalendarPage.jsx +++ b/src/pages/CalendarPage/CalendarPage.jsx @@ -5,12 +5,14 @@ import { format } from 'date-fns'; import Calendar from '../../components/common/Calendar/Calendar'; import DiaryListComponent from '../../components/common/DiaryListComponent/DiaryListComponent'; import CreateDiaryButtonField from '../../components/CreateDiaryButtonField/CreateDiaryButtonField'; +import MenuHeader from './../../components/MenuHeader/MenuHeader'; function CalendarPage() { const diaries = useRecoilValue(clickedDiary); return( + From 4d57ae513ed42d00fa4ffdc53696321bf41f1826 Mon Sep 17 00:00:00 2001 From: P1su Date: Tue, 3 Sep 2024 22:32:02 +0900 Subject: [PATCH 17/29] =?UTF-8?q?style:=20MenuHeader=20fixed=EB=A1=9C=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20=ED=9B=84=20padding=20=EA=B0=92=20?= =?UTF-8?q?=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CreateDiaryButtonField/CreateDiaryButtonFiedl.style.js | 1 - src/components/MenuHeader/MenuHeader.style.js | 7 +++++-- src/components/WeatherPlaylist/WeatherPlaylist.style.js | 1 + src/pages/CalendarPage/CalendarPage.style.js | 1 + 4 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/CreateDiaryButtonField/CreateDiaryButtonFiedl.style.js b/src/components/CreateDiaryButtonField/CreateDiaryButtonFiedl.style.js index 025f8785..3a735cf8 100644 --- a/src/components/CreateDiaryButtonField/CreateDiaryButtonFiedl.style.js +++ b/src/components/CreateDiaryButtonField/CreateDiaryButtonFiedl.style.js @@ -19,7 +19,6 @@ export const ButtonMotionWrapper = styled(motion.div)` position: fixed; right: 0rem;; bottom: 0rem; - z-index: 100; `; export const CreateButtonField = styled.div` ${({ theme: { mixin } }) => mixin.flexBox({ diff --git a/src/components/MenuHeader/MenuHeader.style.js b/src/components/MenuHeader/MenuHeader.style.js index b7aaf1a4..aa18e7ba 100644 --- a/src/components/MenuHeader/MenuHeader.style.js +++ b/src/components/MenuHeader/MenuHeader.style.js @@ -2,8 +2,11 @@ import styled from 'styled-components'; export const MenuHeaderWrapper = styled.div` ${({ theme: { mixin } }) => mixin.flexBox({ 'justify' : 'flex-end' })}; + background-color: ${({ theme }) => theme.colors.pink.background_pink}; width: 100%; + position: fixed; + padding: 2rem 2rem 1rem 0; + top: 0; gap: 2.5rem; - margin-bottom: 10rem; - margin-right: 2.7rem; + z-index: 10; `; \ No newline at end of file diff --git a/src/components/WeatherPlaylist/WeatherPlaylist.style.js b/src/components/WeatherPlaylist/WeatherPlaylist.style.js index 631e2694..6d4c390a 100644 --- a/src/components/WeatherPlaylist/WeatherPlaylist.style.js +++ b/src/components/WeatherPlaylist/WeatherPlaylist.style.js @@ -2,6 +2,7 @@ import styled from "styled-components"; export const WeatherPlaylistWrapper = styled.div` width: 100%; + margin-top: 19rem; z-index: 100; `; export const WeatherIcon = styled.img` diff --git a/src/pages/CalendarPage/CalendarPage.style.js b/src/pages/CalendarPage/CalendarPage.style.js index a5b0d4e4..8fe92b79 100644 --- a/src/pages/CalendarPage/CalendarPage.style.js +++ b/src/pages/CalendarPage/CalendarPage.style.js @@ -7,6 +7,7 @@ export const CalendarPageWrapper = styled.div` min-height: 100vh; height: auto; max-height: fit-content; + padding-top: 10rem; `; export const ErrorBox = styled.div` ${({ theme: { mixin } }) => mixin.flexCenter({})}; From 5f1b195479a0f4ec1fa94671215a164ca511b47e Mon Sep 17 00:00:00 2001 From: P1su Date: Tue, 3 Sep 2024 22:45:32 +0900 Subject: [PATCH 18/29] =?UTF-8?q?feat:=20=EC=9D=BC=EA=B8=B0=20=EC=9E=91?= =?UTF-8?q?=EC=84=B1=ED=95=98=EB=9F=AC=EA=B0=80=EA=B8=B0=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=EC=98=81=EC=97=AD=EC=97=90=20z-index=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CreateDiaryButtonField/CreateDiaryButtonFiedl.style.js | 1 + src/pages/CalendarPage/CalendarPage.style.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/CreateDiaryButtonField/CreateDiaryButtonFiedl.style.js b/src/components/CreateDiaryButtonField/CreateDiaryButtonFiedl.style.js index 3a735cf8..025f8785 100644 --- a/src/components/CreateDiaryButtonField/CreateDiaryButtonFiedl.style.js +++ b/src/components/CreateDiaryButtonField/CreateDiaryButtonFiedl.style.js @@ -19,6 +19,7 @@ export const ButtonMotionWrapper = styled(motion.div)` position: fixed; right: 0rem;; bottom: 0rem; + z-index: 100; `; export const CreateButtonField = styled.div` ${({ theme: { mixin } }) => mixin.flexBox({ diff --git a/src/pages/CalendarPage/CalendarPage.style.js b/src/pages/CalendarPage/CalendarPage.style.js index 8fe92b79..13e9658a 100644 --- a/src/pages/CalendarPage/CalendarPage.style.js +++ b/src/pages/CalendarPage/CalendarPage.style.js @@ -19,5 +19,5 @@ export const ErrorBox = styled.div` background: rgba(255, 255, 255, 0.27); `; export const CalendarWrapper = styled.div` - margin: 10rem 0 2rem 0; + margin: 0 0 2rem 0; `; \ No newline at end of file From 513cced5ae1e5b3416fe9db0ad4932976fb161d5 Mon Sep 17 00:00:00 2001 From: P1su Date: Tue, 3 Sep 2024 22:55:37 +0900 Subject: [PATCH 19/29] =?UTF-8?q?style:=20MainProgressBar=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=ED=8F=B4=EB=8D=94=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MainProgressBar/MainProgressBar.jsx | 17 ----------------- .../MainProgressBar/MainProgressBar.style.js | 7 ------- 2 files changed, 24 deletions(-) delete mode 100644 src/components/MainProgressBar/MainProgressBar.jsx delete mode 100644 src/components/MainProgressBar/MainProgressBar.style.js diff --git a/src/components/MainProgressBar/MainProgressBar.jsx b/src/components/MainProgressBar/MainProgressBar.jsx deleted file mode 100644 index ce870e0f..00000000 --- a/src/components/MainProgressBar/MainProgressBar.jsx +++ /dev/null @@ -1,17 +0,0 @@ -import * as S from "./OnBoardingProgressBar.style" -import SvgIcProgressCircle from "../../assets/svg/IcProgressCircle" -import SvgIcCurrentProgressCircle from "../../assets/svg/IcCurrentProgressCircle" - -export default function MainProgressBar(props){ - const steps =['Step1', 'Step2'] - - return( - - - {steps.map((step, idx)=>( - props.cur === step ? : - ))} - - - ) -} \ No newline at end of file diff --git a/src/components/MainProgressBar/MainProgressBar.style.js b/src/components/MainProgressBar/MainProgressBar.style.js deleted file mode 100644 index 76062186..00000000 --- a/src/components/MainProgressBar/MainProgressBar.style.js +++ /dev/null @@ -1,7 +0,0 @@ -import styled from "styled-components"; - -export const Wrapper = styled.div` - display: flex; - margin: 2rem; - gap: 0.5rem; -` \ No newline at end of file From 9e587437aeae7c2d6c2aa8059734705ef95a47e8 Mon Sep 17 00:00:00 2001 From: P1su Date: Tue, 3 Sep 2024 23:32:16 +0900 Subject: [PATCH 20/29] =?UTF-8?q?feat:=20ThisMonthEmotion=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A5=BC=20MonthlyEmotion=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=AA=85=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=20=ED=9B=84=20UI=20=EB=B3=80=EA=B2=BD?= =?UTF-8?q?=EC=82=AC=ED=95=AD=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MonthlyEmotion.jsx} | 39 ++++++++--------- .../MonthlyEmotion/MonthlyEmotion.style.js | 42 +++++++++++++++++++ .../ThisMonthEmotion.style.js | 40 ------------------ src/pages/Main/Main.jsx | 5 +-- 4 files changed, 62 insertions(+), 64 deletions(-) rename src/components/{common/buttons/ThisMonthEmotion/ThisMonthEmotion.jsx => MonthlyEmotion/MonthlyEmotion.jsx} (53%) create mode 100644 src/components/MonthlyEmotion/MonthlyEmotion.style.js delete mode 100644 src/components/common/buttons/ThisMonthEmotion/ThisMonthEmotion.style.js diff --git a/src/components/common/buttons/ThisMonthEmotion/ThisMonthEmotion.jsx b/src/components/MonthlyEmotion/MonthlyEmotion.jsx similarity index 53% rename from src/components/common/buttons/ThisMonthEmotion/ThisMonthEmotion.jsx rename to src/components/MonthlyEmotion/MonthlyEmotion.jsx index f50d4328..381133a6 100644 --- a/src/components/common/buttons/ThisMonthEmotion/ThisMonthEmotion.jsx +++ b/src/components/MonthlyEmotion/MonthlyEmotion.jsx @@ -1,10 +1,10 @@ -import * as S from "./ThisMonthEmotion.style"; -import { convertFeelingText } from "../../../../utils/convertFeelingText"; -import useGetSummary from "../../../../hooks/queries/main/useGetSummary"; -import FeelingHoneyBear from "../../HoneyBear/FeelingHoneyBear"; -import usePostPlaylist from "../../../../hooks/queries/main/usePostPlaylist"; +import * as S from "./MonthlyEmotion.style"; +import { convertFeelingText } from "../../utils/convertFeelingText"; +import useGetSummary from "../../hooks/queries/main/useGetSummary"; +import FeelingHoneyBear from "../common/HoneyBear/FeelingHoneyBear"; +import usePostPlaylist from "../../hooks/queries/main/usePostPlaylist"; -export default function ThisMonthEmotion() { +function MonthlyEmotion() { const { data } = useGetSummary(); const firstFeeling = data.data.firstFeeling; const secondFeeling = data.data.secondFeeling; @@ -27,6 +27,10 @@ export default function ThisMonthEmotion() { return ( + + 한 달동안 가장 많았던
+ 감정들이에요. + - - {firstFeeling === null ? + {firstFeeling === null + ? '감정 분석 중' - : + : `${convertFeelingText(firstFeeling)} - ${convertFeelingText(secondFeeling)}` - } - + ${convertFeelingText(secondFeeling)}` + } - { - handlePlaylist(); - }} - > - 추천 플레이리스트 보러가기 - - ) -} \ No newline at end of file + ); +} +export default MonthlyEmotion; \ No newline at end of file diff --git a/src/components/MonthlyEmotion/MonthlyEmotion.style.js b/src/components/MonthlyEmotion/MonthlyEmotion.style.js new file mode 100644 index 00000000..0a23c4a8 --- /dev/null +++ b/src/components/MonthlyEmotion/MonthlyEmotion.style.js @@ -0,0 +1,42 @@ +import styled from "styled-components"; + +export const Wrapper = styled.div` + ${({ theme }) => theme.colors.gradient.this_month_emotion_gradient}; + z-index: 10; + width: 16.3rem; + height: 18rem; + border-radius: 30px; +`; +export const Bubble = styled.div` + ${({ theme: { mixin } }) => mixin.flexCenter({})}; + ${({ theme }) => theme.fonts.body_01}; + background-color: ${({ theme }) => theme.colors.normal.white}; + position: absolute; + width: 13.2rem; + height: 5rem; + margin-left: 1.6rem; + margin-top: 5rem; + border-radius: 3rem; + text-align: center; + filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); +`; +export const BubbleText = styled.span` + ${({ theme: { mixin } }) => mixin.flexCenter({})}; + ${({ theme }) => theme.fonts.body_08}; + font-weight: 600; + margin-top: 1.6rem; +` +export const PlayList = styled.p` + ${({ theme }) => theme.fonts.caption_01}; + margin-left: 3.9rem; + margin-top: 0.8rem; + cursor: pointer; +`; +export const HoneyBearWrapper = styled.div` + width: 10rem; + height: 0.1rem; + display: flex; + position: relative; + margin-left: 5rem; + bottom: 11rem; +`; \ No newline at end of file diff --git a/src/components/common/buttons/ThisMonthEmotion/ThisMonthEmotion.style.js b/src/components/common/buttons/ThisMonthEmotion/ThisMonthEmotion.style.js deleted file mode 100644 index fc5baf0f..00000000 --- a/src/components/common/buttons/ThisMonthEmotion/ThisMonthEmotion.style.js +++ /dev/null @@ -1,40 +0,0 @@ -import styled from "styled-components"; - -export const Bubble = styled.div` - ${({ theme: { mixin } }) => mixin.flexBox({})}; - background-color: ${({ theme }) => theme.colors.pink.btn_pink}; - width: 17.8rem; - height: 4.3rem; - flex-shrink: 0; - margin-left: 1.6rem; - margin-top: 10rem; - border-radius: 1.2rem; -` -export const Wrapper = styled.div` - z-index: 10; - width: 31.9rem; - height: 18rem; - flex-shrink: 0; - border-radius: 30px; - ${({ theme }) => theme.colors.gradient.this_month_emotion_gradient}; -` -export const ThisMonthEmotionText = styled.p` - ${({ theme }) => theme.fonts.body_01}; - width: 17.8rem; - padding-top: 1.2rem; - text-align: center; -` -export const PlayList = styled.p` - margin-left: 3.9rem; - margin-top: 0.8rem; - ${({ theme }) => theme.fonts.caption_01}; - cursor: pointer; -` -export const HoneyBearWrapper = styled.div` - width: 10rem; - height: 0.1rem; - display: flex; - position: relative; - margin-left: 2rem; - bottom: 9rem; -` \ No newline at end of file diff --git a/src/pages/Main/Main.jsx b/src/pages/Main/Main.jsx index cfa7ad31..21513322 100644 --- a/src/pages/Main/Main.jsx +++ b/src/pages/Main/Main.jsx @@ -3,7 +3,7 @@ import CreateDiaryButtonField from '../../components/CreateDiaryButtonField/Crea import KakaoAd from '../../components/KakaoAd/KakaoAd'; import MenuHeader from '../../components/MenuHeader/MenuHeader'; import WeatherPlaylist from '../../components/WeatherPlaylist/WeatherPlaylist'; -import ThisMonthEmotion from '../../components/common/buttons/ThisMonthEmotion/ThisMonthEmotion'; +import MonthlyEmotion from '../../components/MonthlyEmotion/MonthlyEmotion'; function Main() { return ( @@ -11,11 +11,10 @@ function Main() { - - + From b279a2a7c0ddd7e44d168f52ce35581ec07a12be Mon Sep 17 00:00:00 2001 From: P1su Date: Tue, 3 Sep 2024 23:33:55 +0900 Subject: [PATCH 21/29] =?UTF-8?q?style:=20MenuHeader=20width=EA=B0=92?= =?UTF-8?q?=EA=B3=BC=20padding=20=EA=B0=92=20=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/MenuHeader/MenuHeader.style.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/MenuHeader/MenuHeader.style.js b/src/components/MenuHeader/MenuHeader.style.js index aa18e7ba..1a342f30 100644 --- a/src/components/MenuHeader/MenuHeader.style.js +++ b/src/components/MenuHeader/MenuHeader.style.js @@ -3,9 +3,9 @@ import styled from 'styled-components'; export const MenuHeaderWrapper = styled.div` ${({ theme: { mixin } }) => mixin.flexBox({ 'justify' : 'flex-end' })}; background-color: ${({ theme }) => theme.colors.pink.background_pink}; - width: 100%; + width: 32rem; position: fixed; - padding: 2rem 2rem 1rem 0; + padding: 2rem 0 1rem 0; top: 0; gap: 2.5rem; z-index: 10; From 6ca309ef73c870009c2657139f83ca8c9f0f05fe Mon Sep 17 00:00:00 2001 From: P1su Date: Wed, 4 Sep 2024 00:32:34 +0900 Subject: [PATCH 22/29] =?UTF-8?q?feat:=20MonthlyPlaylist=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1=ED=9B=84=20?= =?UTF-8?q?=EB=B0=B0=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MonthlyEmotion/MonthlyEmotion.jsx | 6 +--- .../MonthlyPlaylist/MonthlyPlaylist.jsx | 30 +++++++++++++++++++ .../MonthlyPlaylist/MonthlyPlaylist.style.js | 20 +++++++++++++ src/pages/Main/Main.jsx | 17 ++++++++++- src/pages/Main/Main.style.js | 6 +++- 5 files changed, 72 insertions(+), 7 deletions(-) create mode 100644 src/components/MonthlyPlaylist/MonthlyPlaylist.jsx create mode 100644 src/components/MonthlyPlaylist/MonthlyPlaylist.style.js diff --git a/src/components/MonthlyEmotion/MonthlyEmotion.jsx b/src/components/MonthlyEmotion/MonthlyEmotion.jsx index 381133a6..6fd319de 100644 --- a/src/components/MonthlyEmotion/MonthlyEmotion.jsx +++ b/src/components/MonthlyEmotion/MonthlyEmotion.jsx @@ -1,13 +1,9 @@ import * as S from "./MonthlyEmotion.style"; import { convertFeelingText } from "../../utils/convertFeelingText"; -import useGetSummary from "../../hooks/queries/main/useGetSummary"; import FeelingHoneyBear from "../common/HoneyBear/FeelingHoneyBear"; import usePostPlaylist from "../../hooks/queries/main/usePostPlaylist"; -function MonthlyEmotion() { - const { data } = useGetSummary(); - const firstFeeling = data.data.firstFeeling; - const secondFeeling = data.data.secondFeeling; +function MonthlyEmotion({ firstFeeling, secondFeeling }) { const mutation = usePostPlaylist(); const handlePlaylist = () => { diff --git a/src/components/MonthlyPlaylist/MonthlyPlaylist.jsx b/src/components/MonthlyPlaylist/MonthlyPlaylist.jsx new file mode 100644 index 00000000..3d97def3 --- /dev/null +++ b/src/components/MonthlyPlaylist/MonthlyPlaylist.jsx @@ -0,0 +1,30 @@ +import * as S from './MonthlyPlaylist.style'; +import usePostPlaylist from '../../hooks/queries/main/usePostPlaylist'; + +function MonthlyPlaylist({ firstFeeling, secondFeeling }) { + const mutation = usePostPlaylist(); + const handlePlaylist = () => { + const body = { + 'month feeling 1': firstFeeling, + 'month feeling 2': secondFeeling, + + }; + mutation.mutate(body, { + onSuccess: (response) => { + const data = response.data.data; + console.log(data.playlist_url); + window.open(`${data.playlist_url}`); + } + }); + }; + return( + + + + 이번달 감정과 비슷한
+ 플리를 추천해드려요. + + + ); +} +export default MonthlyPlaylist; \ No newline at end of file diff --git a/src/components/MonthlyPlaylist/MonthlyPlaylist.style.js b/src/components/MonthlyPlaylist/MonthlyPlaylist.style.js new file mode 100644 index 00000000..1b715753 --- /dev/null +++ b/src/components/MonthlyPlaylist/MonthlyPlaylist.style.js @@ -0,0 +1,20 @@ +import styled from 'styled-components'; + +export const MonthlyPlaylistWrapper = styled.div` + ${({ theme: { mixin } }) => mixin.flexCenter({})}; + width: 14.7rem; + height: 18rem; + background: rgba(255, 255, 255, 0.59); + border-radius: 3rem; + z-index: 100; + gap: 1.2rem; +`; +export const ThumbnailImg = styled.img` + width: 11rem; + height: 10.6rem; + border-radius: 3rem; +`; +export const PlaylistText = styled.span` + ${({ theme }) => theme.fonts.body_10}; + font-weight: 700; +`; \ No newline at end of file diff --git a/src/pages/Main/Main.jsx b/src/pages/Main/Main.jsx index 21513322..c2cc957b 100644 --- a/src/pages/Main/Main.jsx +++ b/src/pages/Main/Main.jsx @@ -4,8 +4,14 @@ import KakaoAd from '../../components/KakaoAd/KakaoAd'; import MenuHeader from '../../components/MenuHeader/MenuHeader'; import WeatherPlaylist from '../../components/WeatherPlaylist/WeatherPlaylist'; import MonthlyEmotion from '../../components/MonthlyEmotion/MonthlyEmotion'; +import MonthlyPlaylist from '../../components/MonthlyPlaylist/MonthlyPlaylist'; +import useGetSummary from '../../hooks/queries/main/useGetSummary'; function Main() { + const { data } = useGetSummary(); + const firstFeeling = data.data.firstFeeling; + const secondFeeling = data.data.secondFeeling; + return ( @@ -14,7 +20,16 @@ function Main() { - + + + + diff --git a/src/pages/Main/Main.style.js b/src/pages/Main/Main.style.js index 7ecf2fda..41d0b95a 100644 --- a/src/pages/Main/Main.style.js +++ b/src/pages/Main/Main.style.js @@ -20,4 +20,8 @@ export const MainButtonWrapper = styled.div` margin-top: 8.7rem; margin-right: 11rem; gap: 1.5rem; -`; \ No newline at end of file +`; +export const MonthlyBox = styled.div` + ${({ theme: { mixin } }) => mixin.flexBox({ 'direction': 'row', 'justify': 'space-between' })}; + width: 32rem; +` \ No newline at end of file From cb48f05c7c05e693de3d3f0d4ee6d5973231c9a4 Mon Sep 17 00:00:00 2001 From: P1su Date: Tue, 10 Sep 2024 13:33:32 +0900 Subject: [PATCH 23/29] =?UTF-8?q?code=20review:=20DiaryListComponentWrappe?= =?UTF-8?q?r=20width=20=EA=B0=91=EC=9D=98=20rem=20=EB=8B=A8=EC=9C=84=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 --- .../common/DiaryListComponent/DiaryListComponent.style.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/common/DiaryListComponent/DiaryListComponent.style.js b/src/components/common/DiaryListComponent/DiaryListComponent.style.js index c46a68f9..6c97ae39 100644 --- a/src/components/common/DiaryListComponent/DiaryListComponent.style.js +++ b/src/components/common/DiaryListComponent/DiaryListComponent.style.js @@ -3,7 +3,7 @@ import { motion } from 'framer-motion'; export const DiaryListComponentWrapper = styled.div` display: flex; - width: 32.0rem; + width: 32rem; height: 11.5rem; flex-shrink: 0; border-radius: 3rem; From 48cf9a5d4856a1b40fb21c8ca6bfb4fa7529f405 Mon Sep 17 00:00:00 2001 From: P1su Date: Tue, 10 Sep 2024 13:44:39 +0900 Subject: [PATCH 24/29] =?UTF-8?q?style:=20WeatherPlaylist=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=82=AD=EC=A0=9C=20=ED=9B=84=20?= =?UTF-8?q?padding=20=EA=B0=92=20=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Main/Main.jsx | 2 -- src/pages/Main/Main.style.js | 6 +++--- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/pages/Main/Main.jsx b/src/pages/Main/Main.jsx index c2cc957b..c5cd0057 100644 --- a/src/pages/Main/Main.jsx +++ b/src/pages/Main/Main.jsx @@ -2,7 +2,6 @@ import * as S from './Main.style'; import CreateDiaryButtonField from '../../components/CreateDiaryButtonField/CreateDiaryButtonField'; import KakaoAd from '../../components/KakaoAd/KakaoAd'; import MenuHeader from '../../components/MenuHeader/MenuHeader'; -import WeatherPlaylist from '../../components/WeatherPlaylist/WeatherPlaylist'; import MonthlyEmotion from '../../components/MonthlyEmotion/MonthlyEmotion'; import MonthlyPlaylist from '../../components/MonthlyPlaylist/MonthlyPlaylist'; import useGetSummary from '../../hooks/queries/main/useGetSummary'; @@ -19,7 +18,6 @@ function Main() { - mixin.flexBox({ direction: 'column', justify: 'space-between' })}; + ${({ theme: { mixin } }) => mixin.flexBox({ direction: 'column', justify: 'space-between', align: 'center' })}; width: 21rem; - margin-top: 8.7rem; - margin-right: 11rem; + padding-top: 37rem; gap: 1.5rem; `; export const MonthlyBox = styled.div` ${({ theme: { mixin } }) => mixin.flexBox({ 'direction': 'row', 'justify': 'space-between' })}; width: 32rem; + height: 100%; ` \ No newline at end of file From 94740c8c96486c2146466863aaa121787d4170b8 Mon Sep 17 00:00:00 2001 From: P1su Date: Tue, 10 Sep 2024 14:20:23 +0900 Subject: [PATCH 25/29] =?UTF-8?q?code=20review:=20MenuHeader=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=EC=84=9C=20=20menuItems=20?= =?UTF-8?q?=EB=B0=B0=EC=97=B4=EC=9D=84=20=EC=83=9D=EC=84=B1=ED=95=98?= =?UTF-8?q?=EC=97=AC=20map=EC=9D=84=20=ED=86=B5=ED=95=9C=20=EB=A0=8C?= =?UTF-8?q?=EB=8D=94=EB=A7=81=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/MenuHeader/MenuHeader.jsx | 52 ++++++++++++++---------- 1 file changed, 31 insertions(+), 21 deletions(-) diff --git a/src/components/MenuHeader/MenuHeader.jsx b/src/components/MenuHeader/MenuHeader.jsx index 1ef83450..b936cf17 100644 --- a/src/components/MenuHeader/MenuHeader.jsx +++ b/src/components/MenuHeader/MenuHeader.jsx @@ -8,20 +8,6 @@ import BtnHomeIcon from './../common/buttons/Home/BtnHomeIcon/BtnHomeIcon'; function MenuHeader() { const navigate = useNavigate(); - const handleSearch = () => { - alert('삐용'); - //라우트 설정 완료되면 주석 해젷 사용하심 될 것 같습니다 ! - //navigate('/search'); - }; - const handleCalendar = () => { - navigate('/calendar'); - }; - const handleMyPage = () => { - navigate('/myPage'); - }; - const handleMain = () => { - navigate('/main'); - }; const getSegment = () => { const location = useLocation(); const path = location.pathname; @@ -32,18 +18,42 @@ function MenuHeader() { } const segment = getSegment(); + const menuItems = [ + { + id: 'search', + component: BtnSearch, + onClick: () => {alert('검색');}, + }, + { + id: 'calendar', + component: BtnCalendar, + onClick: () => {navigate('/calendar');}, + condition: segment === 'main', + }, + { + id: 'main', + component: BtnHomeIcon, + onClick: () => {navigate('/main');}, + condition: segment !=='main', + }, + { + id: 'myPage', + component: BtnMyPage, + onClick: () => {navigate('/myPage');}, + }, + ]; return( - { - segment === 'main' - ? - - : - + menuItems.filter(menu => menu.condition !== false) + .map((menuItem) => ( + + )) } - ); } From e600cb9334fc383c06e50d96af1421b9e9b3eb32 Mon Sep 17 00:00:00 2001 From: P1su Date: Sun, 15 Sep 2024 23:27:15 +0900 Subject: [PATCH 26/29] =?UTF-8?q?code=20review:=20=ED=97=88=EB=8B=88?= =?UTF-8?q?=EB=B2=A0=EC=96=B4=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20wid?= =?UTF-8?q?th=20=EA=B0=92=20=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Main/Main.style.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Main/Main.style.js b/src/pages/Main/Main.style.js index 4a86df45..ebf3db43 100644 --- a/src/pages/Main/Main.style.js +++ b/src/pages/Main/Main.style.js @@ -10,7 +10,7 @@ export const MainWrapper = styled.div` `; export const HoneyBear = styled(IcHoneyBear)``; export const HoneyBearWrapper = styled.div` - width: 32rem; + width: 35rem; position: absolute; top: 10rem; `; From da2efe002da23c2fd9da9a124a134c9c8ab08499 Mon Sep 17 00:00:00 2001 From: P1su Date: Sun, 15 Sep 2024 23:31:21 +0900 Subject: [PATCH 27/29] =?UTF-8?q?code=20review:=20=EC=BA=98=EB=A6=B0?= =?UTF-8?q?=EB=8D=94=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20padding=20?= =?UTF-8?q?=EA=B0=92=20=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/CalendarPage/CalendarPage.style.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/CalendarPage/CalendarPage.style.js b/src/pages/CalendarPage/CalendarPage.style.js index 13e9658a..f1cce37f 100644 --- a/src/pages/CalendarPage/CalendarPage.style.js +++ b/src/pages/CalendarPage/CalendarPage.style.js @@ -7,7 +7,6 @@ export const CalendarPageWrapper = styled.div` min-height: 100vh; height: auto; max-height: fit-content; - padding-top: 10rem; `; export const ErrorBox = styled.div` ${({ theme: { mixin } }) => mixin.flexCenter({})}; From b1e71cb76cc46e3004a957611f6e1de1c1560d0b Mon Sep 17 00:00:00 2001 From: P1su Date: Mon, 16 Sep 2024 00:04:36 +0900 Subject: [PATCH 28/29] =?UTF-8?q?feat:=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20?= =?UTF-8?q?=EB=B0=B0=EB=84=88=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/EventBanner/EventBanner.jsx | 23 +++++++++++++++++++ .../EventBanner/EventBanner.style.js | 14 +++++++++++ src/pages/Main/Main.jsx | 2 ++ src/pages/Main/Main.style.js | 6 ++--- 4 files changed, 42 insertions(+), 3 deletions(-) create mode 100644 src/components/EventBanner/EventBanner.jsx create mode 100644 src/components/EventBanner/EventBanner.style.js diff --git a/src/components/EventBanner/EventBanner.jsx b/src/components/EventBanner/EventBanner.jsx new file mode 100644 index 00000000..30145997 --- /dev/null +++ b/src/components/EventBanner/EventBanner.jsx @@ -0,0 +1,23 @@ +import { useNavigate } from 'react-router-dom'; +import * as S from './EventBanner.style'; + +function EventBanner() { + const navigate = useNavigate(); + const handleNavigate = () => { + alert('이동'); + }; + + return( + handleNavigate()}> + + 허니어리에
+ 당신의 추석을 기록해보세요! + + + > + + + ); +} + +export default EventBanner; \ No newline at end of file diff --git a/src/components/EventBanner/EventBanner.style.js b/src/components/EventBanner/EventBanner.style.js new file mode 100644 index 00000000..e664e4d6 --- /dev/null +++ b/src/components/EventBanner/EventBanner.style.js @@ -0,0 +1,14 @@ +import styled from 'styled-components'; + +export const EventBannerWrapper = styled.div` + ${({ theme: { mixin } }) => mixin.flexBox({ justify: 'space-between', align: 'center'})} + background: linear-gradient(90deg, rgba(148, 102, 83, 0.80) 0%, rgba(255, 78, 78, 0.80) 100%); + color: ${({ theme }) => theme.colors.normal.white}; + width: 32rem; + height: 10rem; + border-radius: 30px; + padding: 0 3rem 0 3rem; +`; +export const EventBannerText = styled.span` + ${({ theme }) => theme.fonts.body_02}; +`; \ No newline at end of file diff --git a/src/pages/Main/Main.jsx b/src/pages/Main/Main.jsx index c5cd0057..336f9e74 100644 --- a/src/pages/Main/Main.jsx +++ b/src/pages/Main/Main.jsx @@ -5,6 +5,7 @@ import MenuHeader from '../../components/MenuHeader/MenuHeader'; import MonthlyEmotion from '../../components/MonthlyEmotion/MonthlyEmotion'; import MonthlyPlaylist from '../../components/MonthlyPlaylist/MonthlyPlaylist'; import useGetSummary from '../../hooks/queries/main/useGetSummary'; +import EventBanner from '../../components/EventBanner/EventBanner'; function Main() { const { data } = useGetSummary(); @@ -18,6 +19,7 @@ function Main() { + mixin.flexCenter({})}; background: ${({ theme }) => theme.colors.gradient.gradient_pink}; height: 100vh; - gap: 2rem; padding-bottom: 2rem; `; export const HoneyBear = styled(IcHoneyBear)``; @@ -17,11 +16,12 @@ export const HoneyBearWrapper = styled.div` export const MainButtonWrapper = styled.div` ${({ theme: { mixin } }) => mixin.flexBox({ direction: 'column', justify: 'space-between', align: 'center' })}; width: 21rem; - padding-top: 37rem; + padding-top: 29rem; gap: 1.5rem; + z-index: 9999; `; export const MonthlyBox = styled.div` ${({ theme: { mixin } }) => mixin.flexBox({ 'direction': 'row', 'justify': 'space-between' })}; width: 32rem; - height: 100%; + height: 80%; ` \ No newline at end of file From 03b47f28254be70fe8170d1a8f70719858657e9d Mon Sep 17 00:00:00 2001 From: P1su Date: Mon, 16 Sep 2024 00:07:31 +0900 Subject: [PATCH 29/29] =?UTF-8?q?style:=20MainButtonWrapper=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=9D=98=20z-index=20=EB=B0=8F=20ma?= =?UTF-8?q?rgin=20=EA=B0=92=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Main/Main.style.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/Main/Main.style.js b/src/pages/Main/Main.style.js index 27864f5d..04588cf4 100644 --- a/src/pages/Main/Main.style.js +++ b/src/pages/Main/Main.style.js @@ -16,9 +16,9 @@ export const HoneyBearWrapper = styled.div` export const MainButtonWrapper = styled.div` ${({ theme: { mixin } }) => mixin.flexBox({ direction: 'column', justify: 'space-between', align: 'center' })}; width: 21rem; - padding-top: 29rem; gap: 1.5rem; - z-index: 9999; + z-index: 10; + margin-top: 29rem; `; export const MonthlyBox = styled.div` ${({ theme: { mixin } }) => mixin.flexBox({ 'direction': 'row', 'justify': 'space-between' })};