From 1344737ccfa12118bf6e30a21f2c0bdcfa6243f5 Mon Sep 17 00:00:00 2001 From: useonglee Date: Sat, 24 Feb 2024 16:48:05 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20=ED=83=80=EC=9E=84=EB=9D=BC=EC=9D=B8=20>?= =?UTF-8?q?=20=EC=83=88=EB=A1=9C=EA=B3=A0=EC=B9=A8=20=EC=8B=9C=20api=20?= =?UTF-8?q?=EB=AC=B4=ED=95=9C=20=ED=98=B8=EC=B6=9C=20=EC=9D=B4=EC=8A=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- services/web/src/api/timeline.ts | 21 ++++++++++ .../TimelineDefault/TimelineDefault.tsx | 42 ++++++++++++++----- .../my/timeline/hooks/useGetNearSchedule.ts | 22 +++------- .../my/timeline/hooks/useGetSearchSchedule.ts | 10 +---- services/web/src/app/my/timeline/page.tsx | 22 +++------- 5 files changed, 64 insertions(+), 53 deletions(-) create mode 100644 services/web/src/api/timeline.ts diff --git a/services/web/src/api/timeline.ts b/services/web/src/api/timeline.ts new file mode 100644 index 00000000..5ce02776 --- /dev/null +++ b/services/web/src/api/timeline.ts @@ -0,0 +1,21 @@ +import { GetTimelineRes } from '@app/friend/timeline/types/schedule'; +import { ky } from '@linker/ky'; + +export const getPrevTimeline = () => { + const res = ky.get('/v1/schedules/near-term?limit=32&type=PREV'); + + return res; +}; +export const getUpcomingTimeline = () => { + const res = ky.get('/v1/schedules/near-term?limit=32&type=UPCOMING'); + + return res; +}; + +export const getSearchSchedule = (from: string, to: string, limit: number) => { + const response = ky.get( + `/v1/schedules/search?from=${from}&to=${to}&limit=${limit}`, + ); + + return response; +}; diff --git a/services/web/src/app/my/timeline/component/TimelineDefault/TimelineDefault.tsx b/services/web/src/app/my/timeline/component/TimelineDefault/TimelineDefault.tsx index b8d93d0b..33d5f022 100644 --- a/services/web/src/app/my/timeline/component/TimelineDefault/TimelineDefault.tsx +++ b/services/web/src/app/my/timeline/component/TimelineDefault/TimelineDefault.tsx @@ -1,3 +1,4 @@ +/* eslint-disable react-hooks/exhaustive-deps */ 'use client'; import { Calendar, Spacing } from '@linker/lds'; @@ -6,19 +7,25 @@ import { colors } from '@linker/styles'; import { format, startOfMonth, endOfMonth } from 'date-fns'; import { useSetAtom } from 'jotai'; import { useRouter } from 'next/navigation'; -import { useEffect, useState } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import { timelineItemWrapper, timelineMonthWrapper } from './TimelineDefault.css'; +import { useGetPrevSchedule, useGetUpComingSchedule } from '../../hooks/useGetNearSchedule'; import { useGetSearchSchedule } from '../../hooks/useGetSearchSchedule'; import { selectDateAtom } from '../../stores/store'; -import { TimelineItemProps } from '../../types/schedule'; +import { GetTimelineRes, TimelineItemProps } from '../../types/schedule'; import TimelineItem from '../TimelineItem/TimelineItem'; +import TimelineNull from '../TimelineNull/TimelineNull'; interface TimelineDefaultProps { - concatSchedules: TimelineItemProps[]; + prevData: GetTimelineRes; + upcomingData: GetTimelineRes; } -const TimelineDefault = ({ concatSchedules }: TimelineDefaultProps) => { +const TimelineDefault = ({ prevData, upcomingData }: TimelineDefaultProps) => { + const { data: prevDataRes } = useGetPrevSchedule(prevData); + const { data: upcomingDataRes } = useGetUpComingSchedule(upcomingData); + const router = useRouter(); const setAtomDate = useSetAtom(selectDateAtom); @@ -29,6 +36,10 @@ const TimelineDefault = ({ concatSchedules }: TimelineDefaultProps) => { const [dropdownClick, setDropdownClick] = useState(-1); const [calendarDotData, setCalendarDotData] = useState>([]); + const concatSchedules: TimelineItemProps[] = [ + ...new Set([...prevDataRes.schedules, ...upcomingDataRes.schedules]), + ]; + const startDateYear = format(concatSchedules[0].startDateTime, 'yyyy'); const firstDayOfMonth = format(startOfMonth(date), 'yyyy-MM-dd 00:00:00'); const lastDayOfMonth = format(endOfMonth(date), 'yyyy-MM-dd 23:59:59'); @@ -36,14 +47,17 @@ const TimelineDefault = ({ concatSchedules }: TimelineDefaultProps) => { // 받아온 데이터들 중 다른 연도가 있는지 // 연도가 하나라도 다른게 판단이 되면 diffYear가 true가됨 - const hasDifferentYear = concatSchedules.some((item) => { - const formattedYear = format(item.startDateTime, 'yyyy'); + const hasDifferentYear = useMemo(() => { + return concatSchedules.some((item) => { + const formattedYear = format(item.startDateTime, 'yyyy'); + + return formattedYear === startDateYear; + }); + }, []); - return formattedYear === startDateYear; - }); // 연도가 다른 원소의 첫번째 인덱스를 리턴 const diffIdx = concatSchedules.findIndex((item, index) => { - return format(item.startDateTime, 'yyyy').toString() !== startDateYear.toString(); + return format(item.startDateTime, 'yyyy') !== startDateYear; }); useEffect(() => { @@ -53,21 +67,27 @@ const TimelineDefault = ({ concatSchedules }: TimelineDefaultProps) => { // nextYear에는 diffIdx부터 끝까지의 원소 저장 setNextYear(concatSchedules.slice(diffIdx)); }, [diffIdx, hasDifferentYear, concatSchedules]); + useEffect(() => { setAtomDate(format(date, 'yyyy-MM-dd')); }, [date, router, setAtomDate]); + useEffect(() => { if (selectDate) { router.push('/my/timeline/search'); } }, [selectDate, router]); + useEffect(() => { - let tempData: Array = []; + const tempData: Array = data.schedules.map((item) => item.startDateTime); - tempData = [...tempData, ...data.schedules.map((item) => item.startDateTime)]; setCalendarDotData(tempData); }, []); + if (concatSchedules.length === 0) { + return ; + } + return ( <> { - const res = kyClient.get('/v1/schedules/near-term?limit=32&type=PREV'); - - return res; -}; -const getUpcomingTimeline = () => { - const res = kyClient.get('/v1/schedules/near-term?limit=32&type=UPCOMING'); - - return res; -}; - -const useGetPrevSchedule = () => { +const useGetPrevSchedule = (data: GetTimelineRes) => { return useSuspenseQuery({ queryKey: useGetPrevSchedule.getKey(), queryFn: () => getPrevTimeline(), + initialData: data, }); }; -const useGetUpComingSchedule = () => { +const useGetUpComingSchedule = (data: GetTimelineRes) => { return useSuspenseQuery({ queryKey: useGetUpComingSchedule.getKey(), queryFn: () => getUpcomingTimeline(), + initialData: data, }); }; @@ -32,7 +22,7 @@ useGetPrevSchedule.getKey = () => { return ['/api/v1/schedules/near-term']; }; useGetUpComingSchedule.getKey = () => { - return ['/api/v1/schedules/near-term']; + return ['/api/v1/schedules/near-term/upcoming']; }; export { useGetPrevSchedule, useGetUpComingSchedule }; diff --git a/services/web/src/app/my/timeline/hooks/useGetSearchSchedule.ts b/services/web/src/app/my/timeline/hooks/useGetSearchSchedule.ts index 48934177..3642d6ae 100644 --- a/services/web/src/app/my/timeline/hooks/useGetSearchSchedule.ts +++ b/services/web/src/app/my/timeline/hooks/useGetSearchSchedule.ts @@ -1,17 +1,9 @@ 'use client'; -import { kyClient } from '@linker/ky'; +import { getSearchSchedule } from '@api/timeline'; import { useSuspenseQuery } from '@tanstack/react-query'; import { GetTimelineRes } from '../types/schedule'; -const getSearchSchedule = (from: string, to: string, limit: number) => { - const response = kyClient.get( - `/v1/schedules/search?from=${from}&to=${to}&limit=${limit}`, - ); - - return response; -}; - const useGetSearchSchedule = (from: string, to: string, limit: number) => { return useSuspenseQuery({ queryKey: useGetSearchSchedule.getKey(from, to, limit), diff --git a/services/web/src/app/my/timeline/page.tsx b/services/web/src/app/my/timeline/page.tsx index 7a90f829..2434d383 100644 --- a/services/web/src/app/my/timeline/page.tsx +++ b/services/web/src/app/my/timeline/page.tsx @@ -1,26 +1,14 @@ -'use client'; +import { getPrevTimeline, getUpcomingTimeline } from '@api/timeline'; import TimelineDefault from './component/TimelineDefault/TimelineDefault'; -import TimelineNull from './component/TimelineNull/TimelineNull'; -import { useGetPrevSchedule, useGetUpComingSchedule } from './hooks/useGetNearSchedule'; -export default function TimelinePage() { - const { data: prevData } = useGetPrevSchedule(); - const { data: upcomingData } = useGetUpComingSchedule(); - const concatSchedules = []; - - concatSchedules.push(prevData.schedules); - concatSchedules.push(upcomingData.schedules); - - const uniqueSchedules = [...new Set(concatSchedules)]; +export default async function TimelinePage() { + const prevData = await getPrevTimeline(); + const upcomingData = await getUpcomingTimeline(); return ( <> - {uniqueSchedules.length === 0 ? ( - - ) : ( - - )} + ); }