diff --git a/src/assets/svg/common/IcArrow.tsx b/src/assets/svg/common/IcArrow.tsx deleted file mode 100644 index 9943ca3..0000000 --- a/src/assets/svg/common/IcArrow.tsx +++ /dev/null @@ -1,22 +0,0 @@ -const IcArrow = () => ( - - - - - -); - -export default IcArrow; diff --git a/src/assets/svg/moment/IcGaugeBar.tsx b/src/assets/svg/moment/IcGaugeBar.tsx new file mode 100644 index 0000000..7db9647 --- /dev/null +++ b/src/assets/svg/moment/IcGaugeBar.tsx @@ -0,0 +1,35 @@ +const IcGaugeBar = () => { + return ( + + + + + + + + + + ); +}; + +export default IcGaugeBar; diff --git a/src/assets/svg/moment/IcMomentUpload.tsx b/src/assets/svg/moment/IcMomentUpload.tsx index 52c9235..9890df0 100644 --- a/src/assets/svg/moment/IcMomentUpload.tsx +++ b/src/assets/svg/moment/IcMomentUpload.tsx @@ -1,20 +1,17 @@ const IcMomentUpload = () => { return ( - - - - + + ); }; diff --git a/src/assets/svg/moment/IcTitleBox.tsx b/src/assets/svg/moment/IcTitleBox.tsx new file mode 100644 index 0000000..4d58d1d --- /dev/null +++ b/src/assets/svg/moment/IcTitleBox.tsx @@ -0,0 +1,35 @@ +const IcTitleBox = () => { + return ( + + + + + + + + + + ); +}; + +export default IcTitleBox; diff --git a/src/components/Moment/CheckList/CheckList.style.ts b/src/components/Moment/CheckList/CheckList.style.ts index 9be8e9d..dedb51f 100644 --- a/src/components/Moment/CheckList/CheckList.style.ts +++ b/src/components/Moment/CheckList/CheckList.style.ts @@ -1,30 +1,10 @@ import styled from 'styled-components'; -export const CheckListLayout = styled.div` - ${({ theme: { mixin } }) => mixin.flexCenter()}; - position: relative; - width: 100%; - padding: 4rem 2rem; - background-color: ${({ theme }) => theme.colors.blue}; -`; - -export const TitleSpan = styled.span` - position: absolute; - top: -1.9rem; - padding: 0.3rem 1.7rem; - border-radius: 1.5rem; - background-color: #000; - color: #fff; - text-align: center; - font-size: 18px; - line-height: 26px; -`; - export const InputContainer = styled.div` ${({ theme: { mixin } }) => mixin.flexBox({ align: 'flex-start' })}; width: 100%; min-height: 4rem; - padding: 1rem; + padding: 1rem 0.5rem; gap: 1rem; `; diff --git a/src/components/Moment/CheckList/CheckList.tsx b/src/components/Moment/CheckList/CheckList.tsx index 1cb55e3..5c65b66 100644 --- a/src/components/Moment/CheckList/CheckList.tsx +++ b/src/components/Moment/CheckList/CheckList.tsx @@ -4,7 +4,7 @@ import { handleResizeHeight, setBucketState, } from '../../../utils/moment'; -import { BucketType } from '../../../types/moment'; +import { BucketType, BucketItemType } from '../../../types/moment'; import usePostBucket from '../../../hooks/queries/bucketList/usePostBucket'; import usePatchBucket from '../../../hooks/queries/bucketList/usePatchBucket'; import useResponseMessage from '../../../hooks/common/useResponseMessage'; @@ -39,6 +39,8 @@ const CheckList = ({ type }: CheckListProps) => { const useTypeHook = TypeHooks[type]; const { data } = useTypeHook(); + console.log(data); + const hadleSubmitItem = (target: HTMLTextAreaElement) => { const trimmedItem = newItem.trim(); if (!trimmedItem) return; @@ -113,7 +115,9 @@ const CheckList = ({ type }: CheckListProps) => { }; return ( - + {/* 새 버킷리스트 추가 */} @@ -130,17 +134,23 @@ const CheckList = ({ type }: CheckListProps) => { {/* 기존 버킷리스트 목록 */} - {data.buckets.map((item) => ( - - ))} + {data.buckets + .sort((a, b) => { + const priority = (item: BucketItemType) => + item.isCompleted ? 2 : item.isChallenging ? 1 : 0; + return priority(a) - priority(b); + }) + .map((item) => ( + + ))} {isToastOpen && {toastMessage}} diff --git a/src/components/Moment/CheckList/CheckListItem/CheckListItem.style.ts b/src/components/Moment/CheckList/CheckListItem/CheckListItem.style.ts index af01c2d..600d36c 100644 --- a/src/components/Moment/CheckList/CheckListItem/CheckListItem.style.ts +++ b/src/components/Moment/CheckList/CheckListItem/CheckListItem.style.ts @@ -4,7 +4,7 @@ export const CheckListItemLayout = styled.div` ${({ theme: { mixin } }) => mixin.flexBox({ align: 'flex-start' })}; width: 100%; min-height: 4rem; - padding: 1rem; + padding: 1rem 0.5rem; gap: 1rem; `; diff --git a/src/components/Moment/ContainerLayout/ContainerLayout.style.ts b/src/components/Moment/ContainerLayout/ContainerLayout.style.ts index eaab134..9c5de75 100644 --- a/src/components/Moment/ContainerLayout/ContainerLayout.style.ts +++ b/src/components/Moment/ContainerLayout/ContainerLayout.style.ts @@ -4,90 +4,76 @@ export const ContainerLayout = styled.div` ${({ theme: { mixin } }) => mixin.flexCenter()}; position: relative; width: 33.5rem; - padding: 0.5rem 1.7rem; + padding: 1.5rem 2rem; background-color: ${({ theme }) => theme.colors.blue}; color: ${({ theme }) => theme.colors.white}; `; -export const TitleSpan = styled.span` - padding: 0.5rem 1.6rem; +export const TitleBox = styled.div` + position: relative; + ${({ theme: { mixin } }) => mixin.flexCenter()} + width: 19.2rem; + height: 3.6rem; margin-bottom: 1rem; - border-radius: 1.5rem; - background-color: ${({ theme }) => theme.colors.black}; +`; + +export const TitleSpan = styled.span` + position: absolute; + top: 0; text-align: center; - font-size: 18px; + font-size: 16px; border-radius: 1rem; - line-height: 20px; + line-height: 3.6rem; `; export const TopRightPixel = styled.div` position: absolute; top: 0; right: 0; - width: 1.7rem; - height: 1.2rem; + width: 2.2rem; + height: 0.6rem; background-color: ${({ theme }) => theme.colors.black}; - &::after { - content: ''; - position: absolute; - width: 1rem; - height: 0.6rem; - background-color: ${({ theme }) => theme.colors.blue}; - left: 0; - bottom: 0; - } + box-shadow: + 0.5rem 0.5rem 0 0 ${({ theme }) => theme.colors.black}, + 1.1rem 1.1rem 0 0 ${({ theme }) => theme.colors.black}, + 1.6rem 1.6rem 0 0 ${({ theme }) => theme.colors.black}; `; export const TopLeftPixel = styled.div` position: absolute; top: 0; left: 0; - width: 1.7rem; - height: 1.2rem; + width: 2.2rem; + height: 0.6rem; background-color: ${({ theme }) => theme.colors.black}; - &::after { - content: ''; - position: absolute; - width: 1rem; - height: 0.6rem; - background-color: ${({ theme }) => theme.colors.blue}; - right: 0; - bottom: 0; - } + box-shadow: + -0.5rem 0.5rem 0 0 ${({ theme }) => theme.colors.black}, + -1.1rem 1.1rem 0 0 ${({ theme }) => theme.colors.black}, + -1.6rem 1.6rem 0 0 ${({ theme }) => theme.colors.black}; `; export const BottomRightPixel = styled.div` position: absolute; bottom: 0; right: 0; - width: 1.7rem; - height: 1.2rem; + width: 2.2rem; + height: 0.6rem; background-color: ${({ theme }) => theme.colors.black}; - &::after { - content: ''; - position: absolute; - width: 1rem; - height: 0.6rem; - background-color: ${({ theme }) => theme.colors.blue}; - left: 0; - top: 0; - } + box-shadow: + 0.5rem -0.5rem 0 0 ${({ theme }) => theme.colors.black}, + 1.1rem -1.1rem 0 0 ${({ theme }) => theme.colors.black}, + 1.6rem -1.6rem 0 0 ${({ theme }) => theme.colors.black}; `; export const BottomLeftPixel = styled.div` position: absolute; bottom: 0; left: 0; - width: 1.7rem; - height: 1.2rem; + width: 2.2rem; + height: 0.6rem; background-color: ${({ theme }) => theme.colors.black}; - &::after { - content: ''; - position: absolute; - width: 1rem; - height: 0.6rem; - background-color: ${({ theme }) => theme.colors.blue}; - right: 0; - top: 0; - } + box-shadow: + -0.5rem -0.5rem 0 0 ${({ theme }) => theme.colors.black}, + -1.1rem -1.1rem 0 0 ${({ theme }) => theme.colors.black}, + -1.6rem -1.6rem 0 0 ${({ theme }) => theme.colors.black}; `; diff --git a/src/components/Moment/ContainerLayout/ContainerLayout.tsx b/src/components/Moment/ContainerLayout/ContainerLayout.tsx index bb1e60e..28d848d 100644 --- a/src/components/Moment/ContainerLayout/ContainerLayout.tsx +++ b/src/components/Moment/ContainerLayout/ContainerLayout.tsx @@ -1,22 +1,19 @@ -import { CSSProperties, ReactNode } from 'react'; +import { ReactNode } from 'react'; import * as S from './ContainerLayout.style'; +import IcTitleBox from '../../../assets/svg/moment/IcTitleBox'; interface ContainerLayoutProps { title: string; - containerStyle?: CSSProperties; - titleStyle?: CSSProperties; children: ReactNode; } -const ContainerLayout = ({ - title, - containerStyle, - titleStyle, - children, -}: ContainerLayoutProps) => { +const ContainerLayout = ({ title, children }: ContainerLayoutProps) => { return ( - - {title} + + + + {title} + diff --git a/src/components/Moment/Create/MomentPlanSetup/MomentPlanSetup.style.ts b/src/components/Moment/Create/MomentPlanSetup/MomentPlanSetup.style.ts index 9e743c6..60765f4 100644 --- a/src/components/Moment/Create/MomentPlanSetup/MomentPlanSetup.style.ts +++ b/src/components/Moment/Create/MomentPlanSetup/MomentPlanSetup.style.ts @@ -3,10 +3,11 @@ import styled from 'styled-components'; export const MomentPlanSetupLayout = styled.div` ${({ theme: { mixin } }) => mixin.flexCenter()}; width: 100%; + gap: 2rem; `; export const PlanTitle = styled.h3` - margin-top: 3rem; + margin-top: 1rem; font-size: 16px; color: ${({ theme }) => theme.colors.white}; text-align: center; diff --git a/src/components/Moment/Create/MomentPlanSetup/MomentPlanSetup.tsx b/src/components/Moment/Create/MomentPlanSetup/MomentPlanSetup.tsx index 9c98de9..a38512c 100644 --- a/src/components/Moment/Create/MomentPlanSetup/MomentPlanSetup.tsx +++ b/src/components/Moment/Create/MomentPlanSetup/MomentPlanSetup.tsx @@ -75,11 +75,7 @@ const MomentPlanSetup = ({ ) : ( <> - + {plan.map((item, index) => ( mixin.flexCenter()}; width: 100%; - padding: 1.4rem 1.5rem; + margin-top: 0.2rem; + padding: 1.4rem 1rem; border-radius: 1rem; background-color: ${({ theme }) => theme.colors.black}; display: flex; @@ -19,10 +20,10 @@ export const MomentItem = styled.div` export const MomentDetailsBox = styled.div` ${({ theme: { mixin } }) => mixin.flexBox({ justify: `space-between` })}; width: 100%; + margin-bottom: 0.5rem; padding: 0rem 1rem; gap: 1rem; font-size: 12px; - line-height: 26px; word-break: keep-all; overflow-wrap: anywhere; `; @@ -37,7 +38,7 @@ export const PercentageSpan = styled.span` export const Divider = styled.hr` width: 26.5rem; - height: 5px; + height: 3px; margin: 1.5rem 0rem; border: none; border-radius: 5px; @@ -46,8 +47,10 @@ export const Divider = styled.hr` export const EmptyContainer = styled.div` ${({ theme: { mixin } }) => mixin.flexCenter()}; - padding: 3.7rem 7.4rem; - margin: 1.5rem 0rem; + width: 100%; + padding: 5.1rem 0rem; + margin-top: 1.2rem; + margin-bottom: 0.3rem; border-radius: 1rem; background-color: ${({ theme }) => theme.colors.black}; display: flex; diff --git a/src/components/Moment/MomentAchievementStatus/MomentAchievementStatus.tsx b/src/components/Moment/MomentAchievementStatus/MomentAchievementStatus.tsx index a15736c..ad9bd6a 100644 --- a/src/components/Moment/MomentAchievementStatus/MomentAchievementStatus.tsx +++ b/src/components/Moment/MomentAchievementStatus/MomentAchievementStatus.tsx @@ -11,11 +11,7 @@ type MomentAchievementStatusProps = { const MomentAchievementStatus = ({ data }: MomentAchievementStatusProps) => { return ( - + {data.length > 0 ? ( {data.map((bucket, index) => ( diff --git a/src/components/Moment/MomentAchievementStatus/ProgressBar.style.ts b/src/components/Moment/MomentAchievementStatus/ProgressBar.style.ts index dd7d297..d95e7d8 100644 --- a/src/components/Moment/MomentAchievementStatus/ProgressBar.style.ts +++ b/src/components/Moment/MomentAchievementStatus/ProgressBar.style.ts @@ -1,29 +1,56 @@ import styled from 'styled-components'; export const ProgressBar = styled.div` + ${({ theme: { mixin } }) => mixin.flexBox({ justify: 'flex-start' })}; + position: relative; width: 100%; - height: 2.3rem; - border-radius: 2rem; + height: 2.7rem; + padding: 0rem 0.4rem; + gap: 0.1rem; background-color: ${({ theme }) => theme.colors.white}; overflow: hidden; `; -export const ProgressValue = styled.div<{ $value: number }>` - width: ${({ $value }) => `${$value}%`}; - height: 2.3rem; - border-radius: 2rem; - background: ${({ theme }) => theme.colors.yellow}; - box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset; - animation: scale-up-hor-left 700ms ease-out; +export const ProgressBarTopCorners = styled.div` + &::before { + content: ''; + position: absolute; + width: 0.4rem; + height: 0.5rem; + background-color: ${({ theme }) => theme.colors.black}; + top: 0; + left: 0; + } + + &::after { + content: ''; + position: absolute; + width: 0.4rem; + height: 0.5rem; + background-color: ${({ theme }) => theme.colors.black}; + top: 0; + right: 0; + } +`; + +export const ProgressBarBottomCorners = styled.div` + &::before { + content: ''; + position: absolute; + width: 0.4rem; + height: 0.5rem; + background-color: ${({ theme }) => theme.colors.black}; + bottom: 0; + left: 0; + } - @keyframes scale-up-hor-left { - 0% { - transform: scaleX(0); - transform-origin: 0% 0%; - } - 100% { - transform: scaleX(1); - transform-origin: 0% 0%; - } + &::after { + content: ''; + position: absolute; + width: 0.4rem; + height: 0.5rem; + background-color: ${({ theme }) => theme.colors.black}; + bottom: 0; + right: 0; } `; diff --git a/src/components/Moment/MomentAchievementStatus/ProgressBar.tsx b/src/components/Moment/MomentAchievementStatus/ProgressBar.tsx index 2aae53d..c9a7145 100644 --- a/src/components/Moment/MomentAchievementStatus/ProgressBar.tsx +++ b/src/components/Moment/MomentAchievementStatus/ProgressBar.tsx @@ -1,3 +1,4 @@ +import IcGaugeBar from '../../../assets/svg/moment/IcGaugeBar'; import * as S from './ProgressBar.style'; type ProgressBarProps = { @@ -7,7 +8,11 @@ type ProgressBarProps = { const ProgressBar = ({ value }: ProgressBarProps) => { return ( - + + + {Array.from({ length: Math.ceil(value / 10) }, (_, i) => ( + + ))} ); }; diff --git a/src/components/Moment/MomentUploadStatus/MomentUploadStatus.style.ts b/src/components/Moment/MomentUploadStatus/MomentUploadStatus.style.ts index a3cb264..4de991d 100644 --- a/src/components/Moment/MomentUploadStatus/MomentUploadStatus.style.ts +++ b/src/components/Moment/MomentUploadStatus/MomentUploadStatus.style.ts @@ -8,6 +8,8 @@ export const MomentContainer = styled.div` justify: 'flex-start', })}; width: 30.1rem; + margin-top: 0.9rem; + margin-bottom: 1rem; gap: 0.8rem; `; diff --git a/src/components/Moment/MomentUploadStatus/MomentUploadStatus.tsx b/src/components/Moment/MomentUploadStatus/MomentUploadStatus.tsx index 2dcbf37..62e612c 100644 --- a/src/components/Moment/MomentUploadStatus/MomentUploadStatus.tsx +++ b/src/components/Moment/MomentUploadStatus/MomentUploadStatus.tsx @@ -10,11 +10,7 @@ type MomentUploadStatusProps = { const MomentUploadStatus = ({ data }: MomentUploadStatusProps) => { return ( - + {data.length > 0 ? ( data.map(({ moments: [moment] }) => ( diff --git a/src/hooks/queries/moment/useGetChallengingMoment.tsx b/src/hooks/queries/moment/useGetChallengingMoment.tsx index c7f8105..a5f9eb4 100644 --- a/src/hooks/queries/moment/useGetChallengingMoment.tsx +++ b/src/hooks/queries/moment/useGetChallengingMoment.tsx @@ -8,10 +8,13 @@ const getChallengingMoment = return response.data; }; -const useGetChallengingMoment = () => - useSuspenseQuery({ +const useGetChallengingMoment = () => { + const { data } = useSuspenseQuery({ queryKey: ['moments', 'challenging'], queryFn: getChallengingMoment, }); + return { buckets: data.data }; +}; + export default useGetChallengingMoment; diff --git a/src/pages/Moment/Complete/MomentComplete.style.ts b/src/pages/Moment/Complete/MomentComplete.style.ts index 399992e..c944df1 100644 --- a/src/pages/Moment/Complete/MomentComplete.style.ts +++ b/src/pages/Moment/Complete/MomentComplete.style.ts @@ -7,14 +7,13 @@ export const MomentCompleteLayout = styled.div` justify: 'flex-start', })}; width: 100%; - gap: 1rem; + padding-top: 2rem; position: relative; `; export const MomentCompleteTitle = styled.h1` font-size: 20px; - margin-bottom: 20px; - margin-top: 40px; + line-height: 3.7rem; color: ${({ theme }) => theme.colors.white}; `; @@ -22,19 +21,24 @@ export const DateContainer = styled.div` position: relative; width: 29.5rem; height: 4.7rem; - margin-top: 2rem; + margin-top: 3rem; + margin-bottom: 2.2rem; `; export const DateText = styled.div` - ${({ theme: { mixin } }) => mixin.flexBox({ direction: 'row' })}; + ${({ theme: { mixin } }) => mixin.flexBox({ align: 'center' })}; width: 100%; - height: 100%; + height: 4.5rem; position: absolute; top: 0; - gap: 2.2rem; - font-size: 16px; + font-size: 12px; color: ${({ theme }) => theme.colors.black}; text-align: center; + span { + margin-right: 0.5rem; + font-size: 16px; + text-decoration-line: underline; + } `; export const MethodList = styled.div` @@ -42,7 +46,7 @@ export const MethodList = styled.div` mixin.flexBox({ direction: 'column', align: 'flex-start' })}; gap: 1rem; width: 100%; - padding: 1.5rem 0; + padding: 0.5rem 0; `; export const MethodItem = styled.div` diff --git a/src/pages/Moment/Complete/MomentComplete.tsx b/src/pages/Moment/Complete/MomentComplete.tsx index a831ef3..d2ec49c 100644 --- a/src/pages/Moment/Complete/MomentComplete.tsx +++ b/src/pages/Moment/Complete/MomentComplete.tsx @@ -1,4 +1,3 @@ -import IcArrow from '../../../assets/svg/common/IcArrow'; import * as S from './MomentComplete.style'; import Button from '../../../components/buttons/Button'; import { useNavigate, useLocation, Navigate } from 'react-router-dom'; @@ -49,24 +48,14 @@ const MomentComplete = () => { - {formatHeaderDate(moments[0].startDate)} - - {formatHeaderDate(moments[moments.length - 1].endDate)} + {formatHeaderDate(moments[0].startDate)} + 부터  + {formatHeaderDate(moments[moments.length - 1].endDate)} + 까지 - + {moments.map((moment) => ( @@ -78,7 +67,11 @@ const MomentComplete = () => { ))} - {RenderModal()} diff --git a/src/pages/Moment/Moment.style.ts b/src/pages/Moment/Moment.style.ts index 13d1809..9f16d32 100644 --- a/src/pages/Moment/Moment.style.ts +++ b/src/pages/Moment/Moment.style.ts @@ -5,5 +5,5 @@ export const MomentLayout = styled.div` mixin.flexBox({ direction: 'column', justify: 'flex-start' })}; width: 100%; margin-top: 8rem; - gap: 2rem; + gap: 1rem; `; diff --git a/src/pages/Moment/Moment.tsx b/src/pages/Moment/Moment.tsx index ff32477..5d184cf 100644 --- a/src/pages/Moment/Moment.tsx +++ b/src/pages/Moment/Moment.tsx @@ -3,56 +3,15 @@ import MomentAchievementStatus from '../../components/Moment/MomentAchievementSt import MomentUploadStatus from '../../components/Moment/MomentUploadStatus/MomentUploadStatus'; import useGetChallengingMoment from '../../hooks/queries/moment/useGetChallengingMoment'; import * as S from './Moment.style'; -import { useEffect, useState } from 'react'; -import { ChallengingBucket } from '../../types/moment'; -import useModal from '../../hooks/common/useModal'; -import Modal from '../../components/Modal/Modal'; -import SelectModal from '../../components/Modal/SelectModal/SelectModal'; -import { useNavigate } from 'react-router-dom'; const Moment = () => { - const { data } = useGetChallengingMoment(); - const [isOpen, openModal, closeModal] = useModal(); - const [buckets, setBuckets] = useState([]); - const [errorBucket, setErrorBucket] = useState( - null, - ); - const navigate = useNavigate(); - - useEffect(() => { - const filteredData = data.data.filter((bucket) => { - if (bucket.moments.length === 0) { - setErrorBucket(bucket); - openModal(); - return false; - } else { - return true; - } - }); - setBuckets(filteredData); - }, [data]); + const { buckets } = useGetChallengingMoment(); return ( - {isOpen && ( - - - navigate(`/moment/select-mode/${errorBucket?.bucketID}`) - } - > - {errorBucket?.content} -
- 모멘트를 불러올 수 없습니다. - - - )} ); };