From 508b4097d70de3c9398cb2f590f673fde7b07cbd Mon Sep 17 00:00:00 2001 From: sumi-0011 Date: Fri, 9 Feb 2024 22:56:48 +0900 Subject: [PATCH 01/21] =?UTF-8?q?refactor:=20tab=20hook=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../index.tsx} | 0 src/app/result/page.tsx | 41 +++++++++++-------- 2 files changed, 23 insertions(+), 18 deletions(-) rename src/app/result/{OverallStatus.tsx => OverallStatus/index.tsx} (100%) diff --git a/src/app/result/OverallStatus.tsx b/src/app/result/OverallStatus/index.tsx similarity index 100% rename from src/app/result/OverallStatus.tsx rename to src/app/result/OverallStatus/index.tsx diff --git a/src/app/result/page.tsx b/src/app/result/page.tsx index ef6430cc..c1bde141 100644 --- a/src/app/result/page.tsx +++ b/src/app/result/page.tsx @@ -20,25 +20,9 @@ const handleLevelGuideClick = () => { function ResultPage() { const finishedMissionQueryData = useGetFinishedMissions(); - const finishedMissionCount = finishedMissionQueryData.data?.length ?? ''; + const finishedMissionCount = finishedMissionQueryData.data?.length ?? 0; - const { searchParams } = useSearchParamsTypedValue('tab'); - const initTabId = searchParams ?? ResultTabId.OVERALL_STATUS; - - const tabList = [ - { - id: ResultTabId.OVERALL_STATUS, - tabName: '전체 현황', - href: ROUTER.RESULT.HOME(ResultTabId.OVERALL_STATUS), - }, - { - id: ResultTabId.FINISHED_MISSION, - tabName: `종료 미션 ${finishedMissionCount === 0 ? '' : finishedMissionCount}`, - href: ROUTER.RESULT.HOME(ResultTabId.FINISHED_MISSION), - }, - ]; - - const tabProps = useTab(tabList, initTabId); + const tabProps = useResultTab(finishedMissionCount); return (
@@ -57,6 +41,27 @@ function ResultPage() { export default ResultPage; +const useResultTab = (finishedMissionCount: number) => { + const { searchParams } = useSearchParamsTypedValue('tab'); + const initTabId = searchParams ?? ResultTabId.OVERALL_STATUS; + + const tabList = [ + { + id: ResultTabId.OVERALL_STATUS, + tabName: '전체 현황', + href: ROUTER.RESULT.HOME(ResultTabId.OVERALL_STATUS), + }, + { + id: ResultTabId.FINISHED_MISSION, + tabName: `종료 미션 ${finishedMissionCount === 0 ? '' : finishedMissionCount}`, + href: ROUTER.RESULT.HOME(ResultTabId.FINISHED_MISSION), + }, + ]; + + const tabProps = useTab(tabList, initTabId); + + return tabProps; +}; const topWrapperCss = flex({ zIndex: 1, position: 'relative', From 933f54c81e32d8c8b8649d9b60dd58298912ce60 Mon Sep 17 00:00:00 2001 From: sumi-0011 Date: Sat, 10 Feb 2024 00:22:29 +0900 Subject: [PATCH 02/21] =?UTF-8?q?feat:=20=EA=B2=B0=EA=B3=BC=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=BA=98=EB=A6=B0=EB=8D=94=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/app/result/OverallStatus/Calendar.tsx | 156 ++++++++++++++++++ src/app/result/OverallStatus/CalendarItem.tsx | 72 ++++++++ src/app/result/OverallStatus/index.tsx | 11 ++ src/components/Graph/LastLevelGraph.tsx | 2 +- src/components/Graph/PastLevelGraph.tsx | 2 +- src/components/Icon/NormalCalenderIcon.tsx | 4 +- src/constants/eventLog.ts | 2 + 7 files changed, 245 insertions(+), 4 deletions(-) create mode 100644 src/app/result/OverallStatus/Calendar.tsx create mode 100644 src/app/result/OverallStatus/CalendarItem.tsx diff --git a/src/app/result/OverallStatus/Calendar.tsx b/src/app/result/OverallStatus/Calendar.tsx new file mode 100644 index 00000000..f812cec3 --- /dev/null +++ b/src/app/result/OverallStatus/Calendar.tsx @@ -0,0 +1,156 @@ +import { useState } from 'react'; +import CalendarItem from '@/app/result/OverallStatus/CalendarItem'; +import Icon from '@/components/Icon'; +import { WEEK_DAYS } from '@/components/MissionDetail/MissionCalender/MissionCalendar.constants'; +import { EVENT_LOG_CATEGORY, EVENT_LOG_NAME } from '@/constants/eventLog'; +import useCalendar from '@/hooks/useCalendar'; +import { eventLogger } from '@/utils'; +import { css, cx } from '@styled-system/css'; +import dayjs from 'dayjs'; + +function MissionCalendar() { + const currentData = dayjs(); + const [selectDate, setSelectDate] = useState(dayjs()); + + const { date, monthCalendarData, onPrevMonth, onNextMonth, isCurrentMonth } = useCalendar({ + currentData, + isQueryParams: true, + }); + + const currentYear = date.year(); + const currentMonth = date.month() + 1; + + const handlePrevMonth = () => { + eventLogger.logEvent(EVENT_LOG_CATEGORY.RESULT, EVENT_LOG_NAME.RESULT.CLICK_CALENDER_ARROW, { + direction: 'prev', + }); + onPrevMonth(); + }; + + const handleNextMonth = () => { + eventLogger.logEvent(EVENT_LOG_CATEGORY.RESULT, EVENT_LOG_NAME.RESULT.CLICK_CALENDER_ARROW, { + direction: 'next', + }); + onNextMonth(); + }; + + return ( +
+
+ +
+ + {currentYear}년 {currentMonth}월 + + {/* TODO : 나중에 넣어도 되려나 */} + {/* */} +
+ +
+ + + + {WEEK_DAYS.map((day) => ( + + ))} + + + + {monthCalendarData.map((week, i) => ( + + {week.map((day, index) => { + if (!day) return + ))} + +
{day}
; + // const { routerLink, ...restProps } = getMissionCalendarItemProps( + // missionStartedAt, + // day, + // data?.missionRecords || [], + // isFollow, + // ); + + const isToday = dayjs().isSame(`${day.year}-${day.month}-${day.date}`, 'day'); + const isSelected = selectDate.isSame(`${day.year}-${day.month}-${day.date}`, 'day'); + console.log('isToday: ', isToday); + const thisDay = `${day.year}-${day.month}-${day.date}`; + + return ( + { + setSelectDate(dayjs(thisDay)); + }} + // className={missionCalendarTdCss} + > + {day.date} + {/* {routerLink ? ( + handleClickCalendarItem(isToday)}> + + + ) : ( + + )} */} + + ); + })} +
+
+ ); +} + +export default MissionCalendar; + +const dateLabeWrapperCss = css({ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + gap: '12px', + height: '36px', +}); + +const buttonCss = css({ + padding: '8px', +}); + +const tableCss = css({ + width: '100%', + textAlign: 'center', + borderSpacing: '0 8px', +}); + +const dateLabelTextCss = css({ + textStyle: 'subtitle2', + color: 'text.secondary', + display: 'flex', + alignItems: 'center', + gap: '4px', +}); + +const missionCalendarTdCss = css({ + padding: ' 12px 0', +}); + +const calendarHeaderCss = css({ + width: '100%', + fontSize: '12px', + fontWeight: '400', + lineHeight: '18px', + color: 'text.secondary', + justifyContent: 'space-between', + height: '40px', +}); + +const calendarBodyCss = css({ + textStyle: 'body6', + color: 'text.tertiary', +}); diff --git a/src/app/result/OverallStatus/CalendarItem.tsx b/src/app/result/OverallStatus/CalendarItem.tsx new file mode 100644 index 00000000..115c9570 --- /dev/null +++ b/src/app/result/OverallStatus/CalendarItem.tsx @@ -0,0 +1,72 @@ +import { type PropsWithChildren } from 'react'; +import { css, cx } from '@/styled-system/css'; + +interface Props { + isSelected?: boolean; + onClick: () => void; +} + +function CalendarItem(props: PropsWithChildren) { + return ( + + + {props.children} + + + ); +} + +export default CalendarItem; + +const itemCss = css({ + position: 'relative', + textStyle: 'subtitle3', + width: '40px', + height: '40px', + cursor: 'pointer', + + '&::before': { + content: '""', + display: 'block', + position: 'absolute', + top: '50%', + left: '50%', + width: '40px', + height: '40px', + borderRadius: '50%', + border: '1px solid', + borderColor: 'purple.purple700 !', + transform: 'translate(-50%, -50%)', + pointerEvents: 'none', + background: + 'linear-gradient(0deg, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)), linear-gradient(0deg, #FFFFFF, #FFFFFF)', + zIndex: 0, + + opacity: 0, + transition: 'opacity 0.3s', + }, +}); + +const selectedCss = css({ + '&::before': { + opacity: 1, + }, +}); + +const textCss = css({ + position: 'relative', + zIndex: 1, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + width: '100%', + height: '100%', + transition: 'color 0.3s', +}); diff --git a/src/app/result/OverallStatus/index.tsx b/src/app/result/OverallStatus/index.tsx index 4c07322c..0596926c 100644 --- a/src/app/result/OverallStatus/index.tsx +++ b/src/app/result/OverallStatus/index.tsx @@ -9,6 +9,8 @@ import { css } from '@/styled-system/css'; import { grid } from '@/styled-system/patterns'; import { getLevel } from '@/utils/result'; +import MissionCalendar from './Calendar'; + function OverallStatus() { const { data, isLoading } = useGetMissionSummary(); @@ -44,6 +46,9 @@ function OverallStatus() { )} +
+ +
); } @@ -63,3 +68,9 @@ const imageSectionCss = css({ position: 'relative', height: '210px', }); + +const calendarWrapperCss = css({ + padding: '6px 12px 10px', + // maxWidth: '328px', + margin: '0 auto', +}); diff --git a/src/components/Graph/LastLevelGraph.tsx b/src/components/Graph/LastLevelGraph.tsx index f1e175ba..27f83095 100644 --- a/src/components/Graph/LastLevelGraph.tsx +++ b/src/components/Graph/LastLevelGraph.tsx @@ -10,7 +10,7 @@ function LastLevelGraph(props: LastLevelGraphType) { {/* TODO : progress bar label이 필요한지 확인 필요 to 디자이너 */} - 성공적으로 레벨을 완수했어요! + 레벨업에 성공했어요! ); } diff --git a/src/components/Graph/PastLevelGraph.tsx b/src/components/Graph/PastLevelGraph.tsx index ac15978a..c9abbe9a 100644 --- a/src/components/Graph/PastLevelGraph.tsx +++ b/src/components/Graph/PastLevelGraph.tsx @@ -7,7 +7,7 @@ function PastLevelGraph(props: PastLabelGraphType) { {/* TODO : progress bar label이 필요한지 확인 필요 to 디자이너 */} - 성공적으로 레벨을 완수했어요! + 레벨업에 성공했어요! ); } diff --git a/src/components/Icon/NormalCalenderIcon.tsx b/src/components/Icon/NormalCalenderIcon.tsx index a3a8aaa2..e18bd6a7 100644 --- a/src/components/Icon/NormalCalenderIcon.tsx +++ b/src/components/Icon/NormalCalenderIcon.tsx @@ -10,14 +10,14 @@ function NormalCalender(props: IconComponentProps) { diff --git a/src/constants/eventLog.ts b/src/constants/eventLog.ts index fc7fe4a5..de90d47d 100644 --- a/src/constants/eventLog.ts +++ b/src/constants/eventLog.ts @@ -60,6 +60,8 @@ export const EVENT_LOG_NAME = { }, RESULT: { CLICK_MISSION: 'click/levelGuide', + CLICK_CALENDER_ARROW: 'click/calendarArrow', + CLICK_CALENDER: 'click/calendar', }, LEVEL: { CLICK_LEVEL: 'click/level', From eb8029fe44d9f99a0ea5196bef2b39dfcde8e9fb Mon Sep 17 00:00:00 2001 From: sumi-0011 Date: Sat, 10 Feb 2024 00:57:08 +0900 Subject: [PATCH 03/21] =?UTF-8?q?feat:=20summary=20data=20=EC=83=81?= =?UTF-8?q?=EB=8B=A8=20=EC=B1=84=EC=9A=B0=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/getQueryKey.ts | 4 + src/apis/result.ts | 58 ++++++++ src/app/result/OverallStatus/Calendar.tsx | 135 ++++++++---------- src/app/result/OverallStatus/CalendarItem.tsx | 2 +- src/app/result/OverallStatus/MissionList.tsx | 62 ++++++++ .../result/OverallStatus/MissionSection.tsx | 25 ++++ src/app/result/OverallStatus/index.tsx | 13 +- src/msw/handlers/index.ts | 4 +- src/msw/handlers/result.ts | 37 +++++ 9 files changed, 255 insertions(+), 85 deletions(-) create mode 100644 src/apis/result.ts create mode 100644 src/app/result/OverallStatus/MissionList.tsx create mode 100644 src/app/result/OverallStatus/MissionSection.tsx create mode 100644 src/msw/handlers/result.ts diff --git a/src/apis/getQueryKey.ts b/src/apis/getQueryKey.ts index c8bd1c96..f294ef3b 100644 --- a/src/apis/getQueryKey.ts +++ b/src/apis/getQueryKey.ts @@ -37,6 +37,10 @@ type QueryList = { missionId: string; }; finishedMissions: undefined; + + missionSummaryList: { + date: string; + }; }; /** diff --git a/src/apis/result.ts b/src/apis/result.ts new file mode 100644 index 00000000..9cf37e5a --- /dev/null +++ b/src/apis/result.ts @@ -0,0 +1,58 @@ +import getQueryKey from '@/apis/getQueryKey'; +import { useQuery, type UseQueryOptions } from '@tanstack/react-query'; + +interface MissionSummaryType { + missionId: number; + name: string; + category: string; + visibility: string; + missionStatus: string; +} + +interface MissionSummaryListResponse { + missionAllCount: number; + missionCompleteCount: number; + missionNoneCount: number; + missionList: MissionSummaryType[]; +} + +const MissionSummaryListData = { + missionAllCount: 0, + missionCompleteCount: 0, + missionNoneCount: 0, + missionList: [ + { + missionId: 1, + name: 'UX방법론 1챕터씩 공부하기!', + category: 'STUDY', + visibility: 'ALL', + missionStatus: 'COMPLETED', + }, + { + missionId: 2, + name: '스쿼트하고 닭다리 되기!', + category: 'STUDY', + visibility: 'ALL', + missionStatus: 'COMPLETED', + }, + ], +}; + +const RESULT_API = { + getMissionSummaryList: async (_: string): Promise => { + // // const { data } = await apiInstance.get(`/missions/summary-list?date=${date}`); + // const { data } = await apiInstance.get(`/missions/summary-list`); + // return data; + return MissionSummaryListData; + }, +}; + +export default RESULT_API; + +export const useGetMissionSummaryList = (date: string, option?: UseQueryOptions) => { + return useQuery({ + queryKey: getQueryKey('missionSummaryList', { date }), + queryFn: () => RESULT_API.getMissionSummaryList(date), + ...option, + }); +}; diff --git a/src/app/result/OverallStatus/Calendar.tsx b/src/app/result/OverallStatus/Calendar.tsx index f812cec3..0aa003e7 100644 --- a/src/app/result/OverallStatus/Calendar.tsx +++ b/src/app/result/OverallStatus/Calendar.tsx @@ -1,4 +1,3 @@ -import { useState } from 'react'; import CalendarItem from '@/app/result/OverallStatus/CalendarItem'; import Icon from '@/components/Icon'; import { WEEK_DAYS } from '@/components/MissionDetail/MissionCalender/MissionCalendar.constants'; @@ -6,11 +5,15 @@ import { EVENT_LOG_CATEGORY, EVENT_LOG_NAME } from '@/constants/eventLog'; import useCalendar from '@/hooks/useCalendar'; import { eventLogger } from '@/utils'; import { css, cx } from '@styled-system/css'; -import dayjs from 'dayjs'; +import dayjs, { type Dayjs } from 'dayjs'; -function MissionCalendar() { +interface Props { + selectDate: Dayjs; + setSelectDate: (date: Dayjs) => void; +} + +function MissionCalendar({ selectDate, setSelectDate }: Props) { const currentData = dayjs(); - const [selectDate, setSelectDate] = useState(dayjs()); const { date, monthCalendarData, onPrevMonth, onNextMonth, isCurrentMonth } = useCalendar({ currentData, @@ -35,76 +38,64 @@ function MissionCalendar() { }; return ( -
-
- -
- - {currentYear}년 {currentMonth}월 - - {/* TODO : 나중에 넣어도 되려나 */} - {/* */} +
+
+
+ +
+ + {currentYear}년 {currentMonth}월 + + {/* TODO : 나중에 넣어도 되려나 */} + {/* */} +
+
- -
- - - - {WEEK_DAYS.map((day) => ( - - ))} - - - - {monthCalendarData.map((week, i) => ( - - {week.map((day, index) => { - if (!day) return + {monthCalendarData.map((week, i) => ( + + {week.map((day, index) => { + if (!day) return + ))} + +
{day}
; - // const { routerLink, ...restProps } = getMissionCalendarItemProps( - // missionStartedAt, - // day, - // data?.missionRecords || [], - // isFollow, - // ); - - const isToday = dayjs().isSame(`${day.year}-${day.month}-${day.date}`, 'day'); - const isSelected = selectDate.isSame(`${day.year}-${day.month}-${day.date}`, 'day'); - console.log('isToday: ', isToday); - const thisDay = `${day.year}-${day.month}-${day.date}`; - - return ( - { - setSelectDate(dayjs(thisDay)); - }} - // className={missionCalendarTdCss} - > - {day.date} - {/* {routerLink ? ( - handleClickCalendarItem(isToday)}> - - - ) : ( - - )} */} - - ); - })} + + + + {WEEK_DAYS.map((day) => ( + + ))} - ))} - -
{day}
- + +
; + + // const isToday = dayjs().isSame(`${day.year}-${day.month}-${day.date}`, 'day'); + const isSelected = selectDate.isSame(`${day.year}-${day.month}-${day.date}`, 'day'); + const thisDay = `${day.year}-${day.month}-${day.date}`; + + return ( + { + setSelectDate(dayjs(thisDay)); + }} + > + {day.date} + + ); + })} +
+
+
+
); } diff --git a/src/app/result/OverallStatus/CalendarItem.tsx b/src/app/result/OverallStatus/CalendarItem.tsx index 115c9570..d0e3d54f 100644 --- a/src/app/result/OverallStatus/CalendarItem.tsx +++ b/src/app/result/OverallStatus/CalendarItem.tsx @@ -8,7 +8,7 @@ interface Props { function CalendarItem(props: PropsWithChildren) { return ( - + +
+
+ + 전체 + + + {selectSummaryListData?.missionAllCount ?? 0} + +
+
+ 전체 + {selectSummaryListData?.missionAllCount ?? 0} +
+
+ 성공 + {selectSummaryListData?.missionCompleteCount ?? 0} +
+
+ 미완료 + {selectSummaryListData?.missionNoneCount ?? 0} +
+
+ + ); +} + +export default MissionList; + +const sectionCss = css({ + backgroundColor: 'bg.surface1', + borderRadius: '20px', + padding: '20px', +}); + +const infoWrapperCss = css({ + display: 'flex', + gap: '8px', + + '& div': { + display: 'flex', + gap: '4px', + }, + '& span': { + textStyle: 'body4', + color: 'text.secondary', + }, + '& b': { + color: 'purple.purple700', + }, +}); diff --git a/src/app/result/OverallStatus/MissionSection.tsx b/src/app/result/OverallStatus/MissionSection.tsx new file mode 100644 index 00000000..3a22f193 --- /dev/null +++ b/src/app/result/OverallStatus/MissionSection.tsx @@ -0,0 +1,25 @@ +import { useState } from 'react'; +import { css } from '@/styled-system/css'; +import dayjs from 'dayjs'; + +import MissionCalendar from './Calendar'; +import MissionList from './MissionList'; + +function MissionSection() { + const [selectDate, setSelectDate] = useState(dayjs()); + + return ( +
+
+ +
+ +
+ ); +} + +export default MissionSection; + +const calendarWrapperCss = css({ + padding: '6px 12px 10px', +}); diff --git a/src/app/result/OverallStatus/index.tsx b/src/app/result/OverallStatus/index.tsx index 0596926c..6d695964 100644 --- a/src/app/result/OverallStatus/index.tsx +++ b/src/app/result/OverallStatus/index.tsx @@ -2,6 +2,7 @@ import { useGetMissionSummary } from '@/apis/mission'; import Character from '@/app/level/guide/Character'; +import MissionSection from '@/app/result/OverallStatus/MissionSection'; import Banner from '@/components/Banner/Banner'; import LevelStatus from '@/components/LevelStatus/LevelStatus'; import MotionDiv from '@/components/Motion/MotionDiv'; @@ -9,8 +10,6 @@ import { css } from '@/styled-system/css'; import { grid } from '@/styled-system/patterns'; import { getLevel } from '@/utils/result'; -import MissionCalendar from './Calendar'; - function OverallStatus() { const { data, isLoading } = useGetMissionSummary(); @@ -46,9 +45,7 @@ function OverallStatus() { )} -
- -
+ ); } @@ -68,9 +65,3 @@ const imageSectionCss = css({ position: 'relative', height: '210px', }); - -const calendarWrapperCss = css({ - padding: '6px 12px 10px', - // maxWidth: '328px', - margin: '0 auto', -}); diff --git a/src/msw/handlers/index.ts b/src/msw/handlers/index.ts index 7226b734..cb2a8af2 100644 --- a/src/msw/handlers/index.ts +++ b/src/msw/handlers/index.ts @@ -1,8 +1,10 @@ +import resultHandlers from '@/msw/handlers/result'; + import followHandlers from './follow'; import memberHandlers from './member'; import missionHandlers from './mission'; import recordHandlers from './record'; -const handlers = [...missionHandlers, ...recordHandlers, ...memberHandlers, ...followHandlers]; +const handlers = [...missionHandlers, ...recordHandlers, ...memberHandlers, ...followHandlers, ...resultHandlers]; export default handlers; diff --git a/src/msw/handlers/result.ts b/src/msw/handlers/result.ts new file mode 100644 index 00000000..15008fcc --- /dev/null +++ b/src/msw/handlers/result.ts @@ -0,0 +1,37 @@ +import { http, HttpResponse } from 'msw'; + +const BASE_URL = process.env.NEXT_PUBLIC_SEVER_API; + +const MissionSummaryListData = { + missionAllCount: 0, + missionCompleteCount: 0, + missionNoneCount: 0, + missionList: [ + { + missionId: 1, + name: 'UX방법론 1챕터씩 공부하기!', + category: 'STUDY', + visibility: 'ALL', + missionStatus: 'COMPLETED', + }, + { + missionId: 2, + name: '스쿼트하고 닭다리 되기!', + category: 'STUDY', + visibility: 'ALL', + missionStatus: 'COMPLETED', + }, + ], +}; + +// 미션 전체 현황 - 리스트 +const getMissionSummaryList = http.get(BASE_URL + '/missions/summary-list', () => { + return HttpResponse.json({ + data: MissionSummaryListData, + }); +}); + +// TODO: 왜 안되지? +const resultHandlers = [getMissionSummaryList]; + +export default resultHandlers; From a7faed8515ea5259a0ccf7ecd325397b099929c0 Mon Sep 17 00:00:00 2001 From: sumi-0011 Date: Sat, 10 Feb 2024 23:04:39 +0900 Subject: [PATCH 04/21] =?UTF-8?q?feat:=20=EC=BA=98=EB=A6=B0=EB=8D=94=20?= =?UTF-8?q?=EB=AF=B8=EC=85=98=20=EB=82=B4=EC=97=AD=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/result.ts | 15 ++++++----- src/app/result/OverallStatus/MissionList.tsx | 27 +++++++++++++++---- .../result/OverallStatus/MissionSection.tsx | 10 +++++-- src/components/ListItem/TwoLineListItem.tsx | 3 ++- 4 files changed, 40 insertions(+), 15 deletions(-) diff --git a/src/apis/result.ts b/src/apis/result.ts index 9cf37e5a..46ba9d19 100644 --- a/src/apis/result.ts +++ b/src/apis/result.ts @@ -1,12 +1,13 @@ import getQueryKey from '@/apis/getQueryKey'; +import { MissionCategory, MissionStatus } from '@/apis/schema/mission'; import { useQuery, type UseQueryOptions } from '@tanstack/react-query'; interface MissionSummaryType { missionId: number; name: string; - category: string; + category: MissionCategory; visibility: string; - missionStatus: string; + missionStatus: MissionStatus; } interface MissionSummaryListResponse { @@ -16,7 +17,7 @@ interface MissionSummaryListResponse { missionList: MissionSummaryType[]; } -const MissionSummaryListData = { +const MissionSummaryListData: MissionSummaryListResponse = { missionAllCount: 0, missionCompleteCount: 0, missionNoneCount: 0, @@ -24,16 +25,16 @@ const MissionSummaryListData = { { missionId: 1, name: 'UX방법론 1챕터씩 공부하기!', - category: 'STUDY', + category: MissionCategory.STUDY, visibility: 'ALL', - missionStatus: 'COMPLETED', + missionStatus: MissionStatus.COMPLETED, }, { missionId: 2, name: '스쿼트하고 닭다리 되기!', - category: 'STUDY', + category: MissionCategory.STUDY, visibility: 'ALL', - missionStatus: 'COMPLETED', + missionStatus: MissionStatus.NONE, }, ], }; diff --git a/src/app/result/OverallStatus/MissionList.tsx b/src/app/result/OverallStatus/MissionList.tsx index ccd0285d..900d93bd 100644 --- a/src/app/result/OverallStatus/MissionList.tsx +++ b/src/app/result/OverallStatus/MissionList.tsx @@ -1,4 +1,8 @@ import { useGetMissionSummaryList } from '@/apis/result'; +import MissionBadge from '@/app/home/MissionBadge'; +import { TwoLineListItem } from '@/components/ListItem'; +import MotionDiv from '@/components/Motion/MotionDiv'; +import { MISSION_CATEGORY_LABEL } from '@/constants/mission'; import { css } from '@/styled-system/css'; interface Props { @@ -6,7 +10,6 @@ interface Props { } function MissionList(props: Props) { const { data: selectSummaryListData } = useGetMissionSummaryList(props.selectDate); - console.log('data: ', selectSummaryListData); return (
@@ -19,10 +22,6 @@ function MissionList(props: Props) { {selectSummaryListData?.missionAllCount ?? 0} -
- 전체 - {selectSummaryListData?.missionAllCount ?? 0} -
성공 {selectSummaryListData?.missionCompleteCount ?? 0} @@ -32,6 +31,20 @@ function MissionList(props: Props) { {selectSummaryListData?.missionNoneCount ?? 0}
+ +
    + {selectSummaryListData?.missionList.map((item) => ( + } + name={item.name} + subName={MISSION_CATEGORY_LABEL[item.category].label} + imageUrl={MISSION_CATEGORY_LABEL[item.category].imgUrl} + isBackground={false} + /> + ))} +
+
); } @@ -42,11 +55,13 @@ const sectionCss = css({ backgroundColor: 'bg.surface1', borderRadius: '20px', padding: '20px', + marginTop: '10px', }); const infoWrapperCss = css({ display: 'flex', gap: '8px', + marginBottom: '12px', '& div': { display: 'flex', @@ -60,3 +75,5 @@ const infoWrapperCss = css({ color: 'purple.purple700', }, }); + +const listCss = css({}); diff --git a/src/app/result/OverallStatus/MissionSection.tsx b/src/app/result/OverallStatus/MissionSection.tsx index 3a22f193..e8913d42 100644 --- a/src/app/result/OverallStatus/MissionSection.tsx +++ b/src/app/result/OverallStatus/MissionSection.tsx @@ -8,12 +8,14 @@ import MissionList from './MissionList'; function MissionSection() { const [selectDate, setSelectDate] = useState(dayjs()); + const formatSelectDate = selectDate.format('YYYY-MM-DD'); return (
- + +
); } @@ -21,5 +23,9 @@ function MissionSection() { export default MissionSection; const calendarWrapperCss = css({ - padding: '6px 12px 10px', + margin: '6px 12px 10px', +}); + +const blankCss = css({ + height: '156px', }); diff --git a/src/components/ListItem/TwoLineListItem.tsx b/src/components/ListItem/TwoLineListItem.tsx index 545df3c9..c519cbe4 100644 --- a/src/components/ListItem/TwoLineListItem.tsx +++ b/src/components/ListItem/TwoLineListItem.tsx @@ -58,5 +58,6 @@ const bgExistContainerCss = css({ const bgNoExistContainerCss = css({ background: 'transparent', - padding: '8px 0', + height: '56px !', + // padding: '8px 0', }); From d1ada5378f672c06fffc3cd4d0d3b2c25a14a268 Mon Sep 17 00:00:00 2001 From: sumi-0011 Date: Sat, 10 Feb 2024 23:28:13 +0900 Subject: [PATCH 05/21] =?UTF-8?q?feat:=20=EC=BA=90=EB=A6=AD=ED=84=B0=20?= =?UTF-8?q?=EC=84=B9=EC=85=98=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MissionHistoryBannerApi.tsx | 1 - src/app/result/OverallStatus/Calendar.tsx | 2 +- src/app/result/OverallStatus/index.tsx | 36 ++++++++++++++++--- src/app/result/layout.tsx | 15 ++++++++ src/app/result/page.tsx | 6 ++-- src/components/Graph/GraphBase.tsx | 15 +++++--- 6 files changed, 61 insertions(+), 14 deletions(-) create mode 100644 src/app/result/layout.tsx diff --git a/src/app/mission/[id]/detail/MissionHistoryBanner/MissionHistoryBannerApi.tsx b/src/app/mission/[id]/detail/MissionHistoryBanner/MissionHistoryBannerApi.tsx index ae672533..2886257e 100644 --- a/src/app/mission/[id]/detail/MissionHistoryBanner/MissionHistoryBannerApi.tsx +++ b/src/app/mission/[id]/detail/MissionHistoryBanner/MissionHistoryBannerApi.tsx @@ -5,7 +5,6 @@ import { MISSION_CATEGORY_LABEL } from '@/constants/mission'; function MissionHistoryBannerApi({ missionId }: { missionId: string }) { const { data } = useGetMissionDetailNoSuspense(missionId); - console.log('data: ', data); if (!data) return ; diff --git a/src/app/result/OverallStatus/Calendar.tsx b/src/app/result/OverallStatus/Calendar.tsx index 0aa003e7..11aa6abe 100644 --- a/src/app/result/OverallStatus/Calendar.tsx +++ b/src/app/result/OverallStatus/Calendar.tsx @@ -53,7 +53,7 @@ function MissionCalendar({ selectDate, setSelectDate }: Props) {