From 79beb1978a327fb2a09e977fc9b7e32176a5e788 Mon Sep 17 00:00:00 2001 From: Gayeon Lee Date: Wed, 25 Jun 2025 21:54:35 +0900 Subject: [PATCH 1/6] =?UTF-8?q?style:=20=EB=AA=A8=EB=A9=98=ED=8A=B8=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20ContainerLayout=20=ED=94=BC?= =?UTF-8?q?=EA=B7=B8=EB=A7=88=20=EB=B3=80=EA=B2=BD=EC=82=AC=ED=95=AD=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svg/moment/IcTitleBox.tsx | 35 ++++++++ .../Moment/CheckList/CheckList.style.ts | 22 +---- src/components/Moment/CheckList/CheckList.tsx | 4 +- .../CheckListItem/CheckListItem.style.ts | 2 +- .../ContainerLayout/ContainerLayout.style.ts | 88 ++++++++----------- .../ContainerLayout/ContainerLayout.tsx | 19 ++-- .../MomentPlanSetup/MomentPlanSetup.style.ts | 3 +- .../MomentPlanSetup/MomentPlanSetup.tsx | 6 +- .../MomentAchievementStatus.style.ts | 13 +-- .../MomentAchievementStatus.tsx | 6 +- .../MomentUploadStatus.style.ts | 2 + .../MomentUploadStatus/MomentUploadStatus.tsx | 6 +- .../Moment/Complete/MomentComplete.style.ts | 2 +- src/pages/Moment/Complete/MomentComplete.tsx | 13 +-- src/pages/Moment/Moment.style.ts | 2 +- 15 files changed, 103 insertions(+), 120 deletions(-) create mode 100644 src/assets/svg/moment/IcTitleBox.tsx 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..02bb0a0 100644 --- a/src/components/Moment/CheckList/CheckList.tsx +++ b/src/components/Moment/CheckList/CheckList.tsx @@ -113,7 +113,9 @@ const CheckList = ({ type }: CheckListProps) => { }; return ( - + {/* 새 버킷리스트 추가 */} 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 1.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/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/pages/Moment/Complete/MomentComplete.style.ts b/src/pages/Moment/Complete/MomentComplete.style.ts index 399992e..3356aed 100644 --- a/src/pages/Moment/Complete/MomentComplete.style.ts +++ b/src/pages/Moment/Complete/MomentComplete.style.ts @@ -42,7 +42,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..dfd0168 100644 --- a/src/pages/Moment/Complete/MomentComplete.tsx +++ b/src/pages/Moment/Complete/MomentComplete.tsx @@ -55,18 +55,7 @@ const MomentComplete = () => { - + {moments.map((moment) => ( 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; `; From 66c5c7b88c9e389a3e0d9f461c60622654c7c8e0 Mon Sep 17 00:00:00 2001 From: Gayeon Lee Date: Wed, 25 Jun 2025 23:44:26 +0900 Subject: [PATCH 2/6] =?UTF-8?q?style:=20=EB=AA=A8=EB=A9=98=ED=8A=B8=20?= =?UTF-8?q?=EB=8B=AC=EC=84=B1=20=ED=98=84=ED=99=A9=20ProgressBar=20?= =?UTF-8?q?=ED=94=BC=EA=B7=B8=EB=A7=88=20=EB=B3=80=EA=B2=BD=EC=82=AC?= =?UTF-8?q?=ED=95=AD=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svg/moment/IcGaugeBar.tsx | 35 +++++++++++ .../MomentAchievementStatus.style.ts | 2 +- .../ProgressBar.style.ts | 63 +++++++++++++------ .../MomentAchievementStatus/ProgressBar.tsx | 7 ++- 4 files changed, 87 insertions(+), 20 deletions(-) create mode 100644 src/assets/svg/moment/IcGaugeBar.tsx 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/components/Moment/MomentAchievementStatus/MomentAchievementStatus.style.ts b/src/components/Moment/MomentAchievementStatus/MomentAchievementStatus.style.ts index 7c295f1..e5e3717 100644 --- a/src/components/Moment/MomentAchievementStatus/MomentAchievementStatus.style.ts +++ b/src/components/Moment/MomentAchievementStatus/MomentAchievementStatus.style.ts @@ -4,7 +4,7 @@ export const MomentContainer = styled.div` ${({ theme: { mixin } }) => mixin.flexCenter()}; width: 100%; margin-top: 0.2rem; - padding: 1.4rem 1.1rem; + padding: 1.4rem 1rem; border-radius: 1rem; background-color: ${({ theme }) => theme.colors.black}; display: flex; 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) => ( + + ))} ); }; From 8f07cbc07dd9cd6ba30f1927c7b033837709be31 Mon Sep 17 00:00:00 2001 From: Gayeon Lee Date: Wed, 25 Jun 2025 23:45:41 +0900 Subject: [PATCH 3/6] =?UTF-8?q?style:=20=EB=AA=A8=EB=A9=98=ED=8A=B8=20?= =?UTF-8?q?=EC=9D=B8=EC=A6=9D=ED=95=98=EA=B8=B0=20=EC=95=84=EC=9D=B4?= =?UTF-8?q?=EC=BD=98=20=20=EB=B3=80=EA=B2=BD=EC=82=AC=ED=95=AD=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svg/moment/IcMomentUpload.tsx | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) 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 ( - - - - + + ); }; From 4848cff6d9e2b8747c05592174e4f3bd8cc8b6a0 Mon Sep 17 00:00:00 2001 From: Gayeon Lee Date: Thu, 26 Jun 2025 00:16:36 +0900 Subject: [PATCH 4/6] =?UTF-8?q?style:=20=EB=AA=A8=EB=A9=98=ED=8A=B8=20?= =?UTF-8?q?=EC=99=84=EB=A3=8C=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=94=BC?= =?UTF-8?q?=EA=B7=B8=EB=A7=88=20=EB=B3=80=EA=B2=BD=EC=82=AC=ED=95=AD=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svg/common/IcArrow.tsx | 22 ------------------- .../Moment/Complete/MomentComplete.style.ts | 20 ++++++++++------- src/pages/Moment/Complete/MomentComplete.tsx | 14 +++++++----- 3 files changed, 21 insertions(+), 35 deletions(-) delete mode 100644 src/assets/svg/common/IcArrow.tsx 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/pages/Moment/Complete/MomentComplete.style.ts b/src/pages/Moment/Complete/MomentComplete.style.ts index 3356aed..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` diff --git a/src/pages/Moment/Complete/MomentComplete.tsx b/src/pages/Moment/Complete/MomentComplete.tsx index dfd0168..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,9 +48,10 @@ const MomentComplete = () => { - {formatHeaderDate(moments[0].startDate)} - - {formatHeaderDate(moments[moments.length - 1].endDate)} + {formatHeaderDate(moments[0].startDate)} + 부터  + {formatHeaderDate(moments[moments.length - 1].endDate)} + 까지 @@ -67,7 +67,11 @@ const MomentComplete = () => { ))} - {RenderModal()} From f7880b8af071c9f5d1aa5678bc0e1ece7967fa70 Mon Sep 17 00:00:00 2001 From: Gayeon Lee Date: Thu, 26 Jun 2025 17:05:31 +0900 Subject: [PATCH 5/6] =?UTF-8?q?refactor:=20=EC=9E=84=EC=8B=9C=EB=A1=9C=20?= =?UTF-8?q?=EC=9E=91=EC=84=B1=ED=95=9C=20=EC=97=90=EB=9F=AC=20=EB=B0=94?= =?UTF-8?q?=EC=9A=B4=EB=8D=94=EB=A6=AC=20=EC=BD=94=EB=93=9C=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 --- .../moment/useGetChallengingMoment.tsx | 7 ++- src/pages/Moment/Moment.tsx | 43 +------------------ 2 files changed, 6 insertions(+), 44 deletions(-) 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/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} -
- 모멘트를 불러올 수 없습니다. - - - )} ); }; From 03188e84ad75b409903f3db95339268f31fc6c91 Mon Sep 17 00:00:00 2001 From: Gayeon Lee Date: Thu, 26 Jun 2025 17:06:21 +0900 Subject: [PATCH 6/6] =?UTF-8?q?refactor:=20=EC=B2=B4=ED=81=AC=EB=A6=AC?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=83=81=ED=83=9C=EC=97=90=20=EB=94=B0?= =?UTF-8?q?=EB=A5=B8=20=EC=A0=95=EB=A0=AC=20=EC=BD=94=EB=93=9C=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 --- src/components/Moment/CheckList/CheckList.tsx | 32 ++++++++++++------- 1 file changed, 20 insertions(+), 12 deletions(-) diff --git a/src/components/Moment/CheckList/CheckList.tsx b/src/components/Moment/CheckList/CheckList.tsx index 02bb0a0..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; @@ -132,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}}