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 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/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/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 diff --git a/src/components/MainStep/MainStep1/MainStep1.jsx b/src/components/MainStep/MainStep1/MainStep1.jsx deleted file mode 100644 index fe4fcb60..00000000 --- a/src/components/MainStep/MainStep1/MainStep1.jsx +++ /dev/null @@ -1,23 +0,0 @@ -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'; -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 deleted file mode 100644 index 6c06c4eb..00000000 --- a/src/components/MainStep/MainStep1/MainStep1.style.js +++ /dev/null @@ -1,21 +0,0 @@ -import styled from 'styled-components'; - -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; - height: 100%; -`; -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.jsx b/src/components/MenuHeader/MenuHeader.jsx new file mode 100644 index 00000000..b936cf17 --- /dev/null +++ b/src/components/MenuHeader/MenuHeader.jsx @@ -0,0 +1,60 @@ +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, useLocation } from 'react-router-dom'; +import BtnHomeIcon from './../common/buttons/Home/BtnHomeIcon/BtnHomeIcon'; + +function MenuHeader() { + const navigate = useNavigate(); + + const getSegment = () => { + const location = useLocation(); + const path = location.pathname; + const segments = path.split('/').filter(Boolean); + const firstSegment = segments[0]; + + return firstSegment; + } + + 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( + + { + menuItems.filter(menu => menu.condition !== false) + .map((menuItem) => ( + + )) + } + + ); +} +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..1a342f30 --- /dev/null +++ b/src/components/MenuHeader/MenuHeader.style.js @@ -0,0 +1,12 @@ +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: 32rem; + position: fixed; + padding: 2rem 0 1rem 0; + top: 0; + gap: 2.5rem; + z-index: 10; +`; \ No newline at end of file diff --git a/src/components/MonthlyEmotion/MonthlyEmotion.jsx b/src/components/MonthlyEmotion/MonthlyEmotion.jsx new file mode 100644 index 00000000..6fd319de --- /dev/null +++ b/src/components/MonthlyEmotion/MonthlyEmotion.jsx @@ -0,0 +1,49 @@ +import * as S from "./MonthlyEmotion.style"; +import { convertFeelingText } from "../../utils/convertFeelingText"; +import FeelingHoneyBear from "../common/HoneyBear/FeelingHoneyBear"; +import usePostPlaylist from "../../hooks/queries/main/usePostPlaylist"; + +function MonthlyEmotion({ 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 ( + + + 한 달동안 가장 많았던
+ 감정들이에요. + + + + + + {firstFeeling === null + ? + '감정 분석 중' + : + `${convertFeelingText(firstFeeling)} + ${convertFeelingText(secondFeeling)}` + } + + + + ); +} +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/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/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 94% rename from src/components/MainStep/MainStep1/WeatherPlaylist/WeatherPlaylist.style.js rename to src/components/WeatherPlaylist/WeatherPlaylist.style.js index 66862e2f..6d4c390a 100644 --- a/src/components/MainStep/MainStep1/WeatherPlaylist/WeatherPlaylist.style.js +++ b/src/components/WeatherPlaylist/WeatherPlaylist.style.js @@ -2,6 +2,8 @@ import styled from "styled-components"; export const WeatherPlaylistWrapper = styled.div` width: 100%; + margin-top: 19rem; + z-index: 100; `; export const WeatherIcon = styled.img` width: 3rem; diff --git a/src/components/common/DiaryListComponent/DiaryListComponent.jsx b/src/components/common/DiaryListComponent/DiaryListComponent.jsx index 0ec89264..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); @@ -26,7 +25,7 @@ export default function DiaryListComponent({ feelingListId, feelingListTitle, fe }else{ return text; } - }; + }; const handleSearchButton= () => { const body = { @@ -52,21 +51,21 @@ export default function DiaryListComponent({ feelingListId, feelingListTitle, fe return ( - + - + {feelingListTitle} - - + + {feelingListDate} - + - + { handleSearchButton(); @@ -77,8 +76,7 @@ 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..6c97ae39 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: 32rem; + 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}; -` \ No newline at end of file + 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/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/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/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 diff --git a/src/components/common/buttons/ThisMonthEmotion/ThisMonthEmotion.jsx b/src/components/common/buttons/ThisMonthEmotion/ThisMonthEmotion.jsx deleted file mode 100644 index f50d4328..00000000 --- a/src/components/common/buttons/ThisMonthEmotion/ThisMonthEmotion.jsx +++ /dev/null @@ -1,56 +0,0 @@ -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"; - -export default function ThisMonthEmotion() { - const { data } = useGetSummary(); - const firstFeeling = data.data.firstFeeling; - const secondFeeling = data.data.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 ( - - - - - - - {firstFeeling === null ? - '감정 분석 중' - : - `${convertFeelingText(firstFeeling)} - ${convertFeelingText(secondFeeling)}` - } - - - - { - handlePlaylist(); - }} - > - 추천 플레이리스트 보러가기 - - - ) -} \ 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 6b884068..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: 21rem; - 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/CalendarPage/CalendarPage.jsx b/src/pages/CalendarPage/CalendarPage.jsx new file mode 100644 index 00000000..638e3328 --- /dev/null +++ b/src/pages/CalendarPage/CalendarPage.jsx @@ -0,0 +1,41 @@ +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'; +import CreateDiaryButtonField from '../../components/CreateDiaryButtonField/CreateDiaryButtonField'; +import MenuHeader from './../../components/MenuHeader/MenuHeader'; + +function CalendarPage() { + const diaries = useRecoilValue(clickedDiary); + + return( + + + + + + {diaries.length > 0 + ? ( + diaries.map(item => ( + + )) + ) + : ( + + 아직 작성된 일기가 없습니다. + + ) + } + + + ); +} +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..f1cce37f --- /dev/null +++ b/src/pages/CalendarPage/CalendarPage.style.js @@ -0,0 +1,22 @@ +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; + height: auto; + max-height: fit-content; +`; +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); +`; +export const CalendarWrapper = styled.div` + margin: 0 0 2rem 0; +`; \ No newline at end of file diff --git a/src/pages/Main/Main.jsx b/src/pages/Main/Main.jsx index 686656e9..336f9e74 100644 --- a/src/pages/Main/Main.jsx +++ b/src/pages/Main/Main.jsx @@ -1,119 +1,39 @@ 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'; +import CreateDiaryButtonField from '../../components/CreateDiaryButtonField/CreateDiaryButtonField'; +import KakaoAd from '../../components/KakaoAd/KakaoAd'; +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 [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); - }; - - const handleFastDiary = () => { - navigate('/fastdiary'); - }; - const handleSlowDiary = () => { - navigate('/slowdiary'); - }; + const { data } = useGetSummary(); + const firstFeeling = data.data.firstFeeling; + const secondFeeling = data.data.secondFeeling; return ( - - - {steps.map((step, idx) => ( - - {activeSlide === 0 ? ( - - - - - - ) : ( - - - - - - )} - {step.component} - - ))} - - - - { - isClick && ( - <> - - - 직접 일기 쓰기 - - - - - - - 키워드로 빠르게 쓰기 - - - - - ) - } - - - - - {activeSlide === 0 ? ( -
- -
- ) : ( -
- -
- )} - - + + + + + + + + + + + + + + + ); } diff --git a/src/pages/Main/Main.style.js b/src/pages/Main/Main.style.js index 130ee7c5..04588cf4 100644 --- a/src/pages/Main/Main.style.js +++ b/src/pages/Main/Main.style.js @@ -1,65 +1,27 @@ import styled from 'styled-components'; -import { motion } from 'framer-motion'; 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% - ); -`; -export const Honeybear = styled(IcHoneyBear)``; -export const MainStepWrapper = styled.div` - position: fixed; - left: 41.5%; - top: 1rem; -`; -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; -`; -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}; -`; -export const MainStep1HoneyBearWrapper = styled.div` - position: fixed; - width: 100%; + background: ${({ theme }) => theme.colors.gradient.gradient_pink}; height: 100vh; - top: 4rem; - left: 8.7rem; + padding-bottom: 2rem; `; -export const MainStep2HoneyBearWrapper = styled.div` - position: fixed; - height: 100vh; - right: 9rem; - top: 4rem; +export const HoneyBear = styled(IcHoneyBear)``; +export const HoneyBearWrapper = styled.div` + width: 35rem; + position: absolute; + top: 10rem; +`; +export const MainButtonWrapper = styled.div` + ${({ theme: { mixin } }) => mixin.flexBox({ direction: 'column', justify: 'space-between', align: 'center' })}; + width: 21rem; + gap: 1.5rem; + z-index: 10; + margin-top: 29rem; `; +export const MonthlyBox = styled.div` + ${({ theme: { mixin } }) => mixin.flexBox({ 'direction': 'row', 'justify': 'space-between' })}; + width: 32rem; + height: 80%; +` \ 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 f38a2b2c..d8ac3c56 100644 --- a/src/router/Router.jsx +++ b/src/router/Router.jsx @@ -17,8 +17,8 @@ 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'; /*이런 식으로 작성하기*/ const router = createBrowserRouter([ @@ -95,9 +95,9 @@ const router = createBrowserRouter([ element: , }, { - path: '/weather', - element: , - }, + path: '/calendar', + element: , + } ], }, ]);