From 3bf3c4005b99be93841b6db97bf0a7f545d67641 Mon Sep 17 00:00:00 2001 From: dioo1461 Date: Mon, 9 Jun 2025 02:45:09 +0900 Subject: [PATCH 01/17] =?UTF-8?q?chore:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20.lazy=20=EB=9D=BC=EC=9A=B0=ED=8A=B8=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../_main/discussion/candidate/$id.lazy.tsx | 21 ------------------- .../routes/_main/my-calendar/index.lazy.tsx | 17 --------------- .../_main/upcoming-schedule/index.lazy.tsx | 17 --------------- .../client/src/routes/login/index.lazy.tsx | 12 ----------- 4 files changed, 67 deletions(-) delete mode 100644 frontend/apps/client/src/routes/_main/discussion/candidate/$id.lazy.tsx delete mode 100644 frontend/apps/client/src/routes/_main/my-calendar/index.lazy.tsx delete mode 100644 frontend/apps/client/src/routes/_main/upcoming-schedule/index.lazy.tsx delete mode 100644 frontend/apps/client/src/routes/login/index.lazy.tsx diff --git a/frontend/apps/client/src/routes/_main/discussion/candidate/$id.lazy.tsx b/frontend/apps/client/src/routes/_main/discussion/candidate/$id.lazy.tsx deleted file mode 100644 index 9ce4ea69..00000000 --- a/frontend/apps/client/src/routes/_main/discussion/candidate/$id.lazy.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { createLazyFileRoute, useLocation } from '@tanstack/react-router'; - -import GlobalNavBar from '@/layout/GlobalNavBar'; -import CandidateSchedulePage from '@/pages/CandidateSchedulePage'; - -const CandidateSchedule = () => { - const { state } = useLocation(); - const { candidate } = state ?? {}; - if (!candidate) return
; - - return ( - <> - - - - ); -}; - -export const Route = createLazyFileRoute('/_main/discussion/candidate/$id')({ - component: CandidateSchedule, -}); diff --git a/frontend/apps/client/src/routes/_main/my-calendar/index.lazy.tsx b/frontend/apps/client/src/routes/_main/my-calendar/index.lazy.tsx deleted file mode 100644 index baff0985..00000000 --- a/frontend/apps/client/src/routes/_main/my-calendar/index.lazy.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { createLazyFileRoute } from '@tanstack/react-router'; - -import GlobalNavBar from '@/layout/GlobalNavBar'; -import MyCalendarPage from '@/pages/MyCalendarPage'; - -const MyCalendar = () => ( - <> - - - - - -); - -export const Route = createLazyFileRoute('/_main/my-calendar/')({ - component: MyCalendar, -}); diff --git a/frontend/apps/client/src/routes/_main/upcoming-schedule/index.lazy.tsx b/frontend/apps/client/src/routes/_main/upcoming-schedule/index.lazy.tsx deleted file mode 100644 index 102273af..00000000 --- a/frontend/apps/client/src/routes/_main/upcoming-schedule/index.lazy.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { createLazyFileRoute } from '@tanstack/react-router'; - -import GlobalNavBar from '@/layout/GlobalNavBar'; -import UpcomingSchedulePage from '@/pages/UpcomingSchedulePage'; - -const UpcomingSchedule = () => ( - <> - - - - - - -); -export const Route = createLazyFileRoute('/_main/upcoming-schedule/')({ - component: UpcomingSchedule, -}); diff --git a/frontend/apps/client/src/routes/login/index.lazy.tsx b/frontend/apps/client/src/routes/login/index.lazy.tsx deleted file mode 100644 index 22540ecf..00000000 --- a/frontend/apps/client/src/routes/login/index.lazy.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { createLazyFileRoute } from '@tanstack/react-router'; - -import LoginPage from '@/pages/LoginPage'; - -const Login = () => ( - -); - -export const Route = createLazyFileRoute('/login/')({ - component: Login, -}); - From 21be09e3f330cdd5a29379144c025caa68623dac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EC=9E=AC=EC=98=81?= Date: Mon, 17 Mar 2025 03:29:55 +0900 Subject: [PATCH 02/17] refactor: Rename defaultValue to initialValue in SegmentControl --- .../src/features/discussion/ui/DiscussionRank/index.tsx | 2 +- .../features/shared-schedule/ui/OngoingSchedules/index.tsx | 2 +- .../packages/ui/src/components/SegmentControl/index.tsx | 6 +++--- frontend/src/store/home/index.ts | 7 +++++++ 4 files changed, 12 insertions(+), 5 deletions(-) create mode 100644 frontend/src/store/home/index.ts diff --git a/frontend/apps/client/src/features/discussion/ui/DiscussionRank/index.tsx b/frontend/apps/client/src/features/discussion/ui/DiscussionRank/index.tsx index 0a00a9a2..d86235ef 100644 --- a/frontend/apps/client/src/features/discussion/ui/DiscussionRank/index.tsx +++ b/frontend/apps/client/src/features/discussion/ui/DiscussionRank/index.tsx @@ -24,7 +24,7 @@ const DiscussionRank = () => { return ( diff --git a/frontend/apps/client/src/features/shared-schedule/ui/OngoingSchedules/index.tsx b/frontend/apps/client/src/features/shared-schedule/ui/OngoingSchedules/index.tsx index ac227071..df43bcd0 100644 --- a/frontend/apps/client/src/features/shared-schedule/ui/OngoingSchedules/index.tsx +++ b/frontend/apps/client/src/features/shared-schedule/ui/OngoingSchedules/index.tsx @@ -48,7 +48,7 @@ const Content = () => { return ( prefetchOngoingSchedules( // TODO: segmentOption value의 타입을 제네릭으로 지정할 수 있게 구현 (as 변환 리팩토룅) queryClient, 1, PAGE_SIZE, value as AttendType, diff --git a/frontend/packages/ui/src/components/SegmentControl/index.tsx b/frontend/packages/ui/src/components/SegmentControl/index.tsx index d6ca8759..57989199 100644 --- a/frontend/packages/ui/src/components/SegmentControl/index.tsx +++ b/frontend/packages/ui/src/components/SegmentControl/index.tsx @@ -15,7 +15,7 @@ export interface SegmentControlProps extends PropsWithChildren { segmentOptions: SegmentOption[]; style?: 'weak' | 'filled'; shadow?: boolean; - defaultValue?: string; + initialValue?: string; onValueChange?: (value: string) => void; className?: string; onButtonHover?: (value: string) => void; @@ -25,13 +25,13 @@ const SegmentControl = ({ segmentOptions, style = 'filled', shadow = true, - defaultValue = segmentOptions[0]?.value ?? '', + initialValue = segmentOptions[0]?.value ?? '', onValueChange, children, className, onButtonHover, }: SegmentControlProps) => { - const [selectedValue, setSelectedValue] = useState(defaultValue); + const [selectedValue, setSelectedValue] = useState(initialValue); const handleSelect = (value: string) => { setSelectedValue(value); onValueChange?.(value); diff --git a/frontend/src/store/home/index.ts b/frontend/src/store/home/index.ts new file mode 100644 index 00000000..f6a00a1c --- /dev/null +++ b/frontend/src/store/home/index.ts @@ -0,0 +1,7 @@ +import { atom } from 'jotai'; + +import type { AttendType } from '@/features/shared-schedule/model'; + +export const checkboxAtom = atom(null); +export const tabAtom = atom<'calendar' | 'rank'>('rank'); +export const segmentAtom = atom<'participant' | 'time'>('participant'); \ No newline at end of file From a111e5d1c38d86546bdc23e604a3989c26022054 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EC=9E=AC=EC=98=81?= Date: Mon, 17 Mar 2025 03:32:02 +0900 Subject: [PATCH 03/17] refactor: Rename AttendType to OngoingScheduleAttendType --- .../src/features/shared-schedule/api/index.ts | 4 +- .../src/features/shared-schedule/api/keys.ts | 25 +++--- .../features/shared-schedule/api/prefetch.ts | 23 +++--- .../features/shared-schedule/api/queries.ts | 36 +++------ .../shared-schedule/api/queryOptions.ts | 22 ++--- .../shared-schedule/model/ongoingSchedules.ts | 2 +- .../ui/OngoingSchedules/index.tsx | 80 +++++++++---------- frontend/src/store/home/index.ts | 4 +- 8 files changed, 89 insertions(+), 107 deletions(-) diff --git a/frontend/apps/client/src/features/shared-schedule/api/index.ts b/frontend/apps/client/src/features/shared-schedule/api/index.ts index ccc6d6d1..bdf44f22 100644 --- a/frontend/apps/client/src/features/shared-schedule/api/index.ts +++ b/frontend/apps/client/src/features/shared-schedule/api/index.ts @@ -2,7 +2,7 @@ import { MINUTE_IN_MILLISECONDS } from '@endolphin/core/utils'; import { request } from '@utils/fetch'; import type { - AttendType, + OngoingScheduleAttendType, OngoingSchedulesResponse, UpcomingScheduleDetailsResponse, UpcomingSchedulesResponse, @@ -34,7 +34,7 @@ export const schedulesApi = { getOngoingSchedules: async ( page: number, size: number, - attendType: AttendType, + attendType: OngoingScheduleAttendType, ): Promise => { const response = await request.get(ENDPOINT_PREFIX + '/ongoing', { params: { diff --git a/frontend/apps/client/src/features/shared-schedule/api/keys.ts b/frontend/apps/client/src/features/shared-schedule/api/keys.ts index 4dc047f1..533cbf5b 100644 --- a/frontend/apps/client/src/features/shared-schedule/api/keys.ts +++ b/frontend/apps/client/src/features/shared-schedule/api/keys.ts @@ -1,19 +1,22 @@ -import type { AttendType } from '../model'; +import type { OngoingScheduleAttendType } from '../model' -export const sharedScheduleKey = ['shared-schedule']; +export const sharedScheduleKey = ['shared-schedule'] -export const upcomingQueryKey = [...sharedScheduleKey, 'upcoming']; +export const upcomingQueryKey = [...sharedScheduleKey, 'upcoming'] -export const upcomingDetailsQueryKey = (discussionId: string) => ['upcomingDetails', discussionId]; +export const upcomingDetailsQueryKey = (discussionId: string) => ['upcomingDetails', discussionId] export const ongoingQueryKey = { - all: [...sharedScheduleKey, 'ongoing'], - detail: (page: number, size: number, type: AttendType) => - [...ongoingQueryKey.all, page, size, type], -}; + all: ['ongoing'], + detail: (page: number, size: number, type: OngoingScheduleAttendType) => [ + ...ongoingQueryKey.all, + page, + size, + type, + ], +} export const finishedQueryKey = { all: [...sharedScheduleKey, 'finished'], - detail: (page: number, size: number, year: number) => - [...finishedQueryKey.all, page, size, year], -}; \ No newline at end of file + detail: (page: number, size: number, year: number) => [...finishedQueryKey.all, page, size, year], +} diff --git a/frontend/apps/client/src/features/shared-schedule/api/prefetch.ts b/frontend/apps/client/src/features/shared-schedule/api/prefetch.ts index 0621afff..59ee1edb 100644 --- a/frontend/apps/client/src/features/shared-schedule/api/prefetch.ts +++ b/frontend/apps/client/src/features/shared-schedule/api/prefetch.ts @@ -1,23 +1,24 @@ -import type { QueryClient } from '@tanstack/react-query'; +import type { QueryClient } from '@tanstack/react-query' -import { type AttendType, FINISHED_SCHEDULE_FETCH_SIZE } from '../model'; -import { sharedSchedulesQueryOptions } from './queryOptions'; +import { FINISHED_SCHEDULE_FETCH_SIZE } from '../model' +import type { OngoingScheduleAttendType } from '../model' +import { sharedSchedulesQueryOptions } from './queryOptions' export const prefetchUpcomingSchedules = async (queryClient: QueryClient) => { - await queryClient.prefetchQuery(sharedSchedulesQueryOptions.upcoming); -}; + await queryClient.prefetchQuery(sharedSchedulesQueryOptions.upcoming) +} export const prefetchOngoingSchedules = async ( queryClient: QueryClient, page: number, size: number, - attendType: AttendType, + attendType: OngoingScheduleAttendType ) => { - await queryClient.prefetchQuery(sharedSchedulesQueryOptions.ongoing(page, size, attendType)); -}; + await queryClient.prefetchQuery(sharedSchedulesQueryOptions.ongoing(page, size, attendType)) +} export const prefetchFinishedSchedules = async (queryClient: QueryClient) => { await queryClient.prefetchQuery( - sharedSchedulesQueryOptions.finished(1, FINISHED_SCHEDULE_FETCH_SIZE, new Date().getFullYear()), - ); -}; + sharedSchedulesQueryOptions.finished(1, FINISHED_SCHEDULE_FETCH_SIZE, new Date().getFullYear()) + ) +} diff --git a/frontend/apps/client/src/features/shared-schedule/api/queries.ts b/frontend/apps/client/src/features/shared-schedule/api/queries.ts index 851d5d1d..72cd5152 100644 --- a/frontend/apps/client/src/features/shared-schedule/api/queries.ts +++ b/frontend/apps/client/src/features/shared-schedule/api/queries.ts @@ -1,29 +1,17 @@ -import { useQuery } from '@tanstack/react-query'; +import { useQuery } from '@tanstack/react-query' -import type { - FinishedSchedulesResponse, - UpcomingScheduleDetailsResponse, - UpcomingSchedulesResponse, -} from '../model'; -import type { AttendType, OngoingSchedulesResponse } from '../model/ongoingSchedules'; -import { sharedSchedulesQueryOptions } from './queryOptions'; +import type { FinishedSchedulesResponse, UpcomingSchedulesResponse } from '../model' +import type { OngoingScheduleAttendType, OngoingSchedulesResponse } from '../model/ongoingSchedules' +import { sharedSchedulesQueryOptions } from './queryOptions' -export const useUpcomingQuery = () => useQuery( - sharedSchedulesQueryOptions.upcoming, -); +export const useUpcomingQuery = () => + useQuery(sharedSchedulesQueryOptions.upcoming) -export const useUpcomingDetailsQuery = (discussionId: string) => ( - useQuery( - sharedSchedulesQueryOptions.upcomingDetails(discussionId), - ) -); - -export const useOngoingQuery = (page: number, size: number, attendType: AttendType) => - useQuery( - sharedSchedulesQueryOptions.ongoing(page, size, attendType), - ); +export const useOngoingQuery = ( + page: number, + size: number, + attendType: OngoingScheduleAttendType +) => useQuery(sharedSchedulesQueryOptions.ongoing(page, size, attendType)) export const useFinishedQuery = (page: number, size: number, year: number) => - useQuery( - sharedSchedulesQueryOptions.finished(page, size, year), - ); + useQuery(sharedSchedulesQueryOptions.finished(page, size, year)) diff --git a/frontend/apps/client/src/features/shared-schedule/api/queryOptions.ts b/frontend/apps/client/src/features/shared-schedule/api/queryOptions.ts index 2f7e1df3..f11e11bb 100644 --- a/frontend/apps/client/src/features/shared-schedule/api/queryOptions.ts +++ b/frontend/apps/client/src/features/shared-schedule/api/queryOptions.ts @@ -1,25 +1,15 @@ +import { keepPreviousData } from '@tanstack/react-query' -import { keepPreviousData } from '@tanstack/react-query'; - -import type { AttendType } from '../model'; -import { schedulesApi } from '.'; -import { - finishedQueryKey, - ongoingQueryKey, - upcomingDetailsQueryKey, - upcomingQueryKey, -} from './keys'; +import { schedulesApi } from '.' +import type { OngoingScheduleAttendType } from '../model' +import { finishedQueryKey, ongoingQueryKey, upcomingQueryKey } from './keys' export const sharedSchedulesQueryOptions = { upcoming: { queryKey: upcomingQueryKey, queryFn: () => schedulesApi.getUpcomingSchedules(), }, - upcomingDetails: (discussionId: string) => ({ - queryKey: upcomingDetailsQueryKey(discussionId), - queryFn: () => schedulesApi.getUpcomingScheduleDetail(discussionId), - }), - ongoing: (page: number, size: number, attendtype: AttendType) => ({ + ongoing: (page: number, size: number, attendtype: OngoingScheduleAttendType) => ({ queryKey: ongoingQueryKey.detail(page, size, attendtype), queryFn: () => schedulesApi.getOngoingSchedules(page, size, attendtype), }), @@ -28,4 +18,4 @@ export const sharedSchedulesQueryOptions = { queryFn: () => schedulesApi.getFinishedSchedules(page, size, year), placeholderData: keepPreviousData, }), -}; +} diff --git a/frontend/apps/client/src/features/shared-schedule/model/ongoingSchedules.ts b/frontend/apps/client/src/features/shared-schedule/model/ongoingSchedules.ts index 8d2f33af..d5c92679 100644 --- a/frontend/apps/client/src/features/shared-schedule/model/ongoingSchedules.ts +++ b/frontend/apps/client/src/features/shared-schedule/model/ongoingSchedules.ts @@ -21,7 +21,7 @@ export const OngoingSchedulesResponseSchema = z.object({ ongoingDiscussions: z.array(OngoingScheduleSchema), }); -export type AttendType = 'HOST' | 'ATTENDEE' | 'ALL'; +export type OngoingScheduleAttendType = 'HOST' | 'ATTENDEE' | 'ALL'; export type OngoingSchedulesResponse = z.infer; export type OngoingSchedule = z.infer; diff --git a/frontend/apps/client/src/features/shared-schedule/ui/OngoingSchedules/index.tsx b/frontend/apps/client/src/features/shared-schedule/ui/OngoingSchedules/index.tsx index df43bcd0..05d5cd1d 100644 --- a/frontend/apps/client/src/features/shared-schedule/ui/OngoingSchedules/index.tsx +++ b/frontend/apps/client/src/features/shared-schedule/ui/OngoingSchedules/index.tsx @@ -1,69 +1,69 @@ +import { Flex, SegmentControl, Text } from '@endolphin/ui' +import { useQueryClient } from '@tanstack/react-query' -import { Flex, SegmentControl, Text } from '@endolphin/ui'; -import { useQueryClient } from '@tanstack/react-query'; - -import { prefetchOngoingSchedules } from '../../api/prefetch'; -import { useOngoingQuery } from '../../api/queries'; -import { sharedSchedulesQueryOptions } from '../../api/queryOptions'; -import { type AttendType, ONGOING_SCHEDULE_FETCH_SIZE } from '../../model/'; -import { ongoingFallbackContainerStyle } from '../Fallbacks/index.css'; -import OngoingFallback from '../Fallbacks/OngoingFallback'; -import { containerStyle, segmentControlStyle, titleStyle } from './index.css'; -import OngoingScheduleList, { PAGE_SIZE } from './OngoingScheduleList'; +import { prefetchOngoingSchedules } from '../../api/prefetch' +import { useOngoingQuery } from '../../api/queries' +import { sharedSchedulesQueryOptions } from '../../api/queryOptions' +import { ONGOING_SCHEDULE_FETCH_SIZE } from '../../model/' +import type { OngoingScheduleAttendType } from '../../model/' +import { ongoingFallbackContainerStyle } from '../Fallbacks/index.css' +import OngoingFallback from '../Fallbacks/OngoingFallback' +import { containerStyle, segmentControlStyle, titleStyle } from './index.css' +import OngoingScheduleList, { PAGE_SIZE } from './OngoingScheduleList' export interface OngoingSegmentOption { - label: string; - value: AttendType; + label: string + value: OngoingScheduleAttendType } const segmentOptions: OngoingSegmentOption[] = [ { label: '모든 일정', value: 'ALL' }, { label: '내가 만든 일정', value: 'HOST' }, { label: '공유 받은 일정', value: 'ATTENDEE' }, -]; +] const OngoingSchedules = () => ( - - 확정되지 않은 일정 + + + 확정되지 않은 일정 + -); +) const Content = () => { - const queryClient = useQueryClient(); - const { data, isPending } = useOngoingQuery(1, 6, 'ALL'); - if (!data || isPending) return
; + const queryClient = useQueryClient() + const { data, isPending } = useOngoingQuery(1, 6, 'ALL') + if (!data || isPending) return
if (data.totalPages === 0) { queryClient.fetchQuery( - sharedSchedulesQueryOptions.ongoing(1, ONGOING_SCHEDULE_FETCH_SIZE, 'ALL'), - ); - return ; + sharedSchedulesQueryOptions.ongoing(1, ONGOING_SCHEDULE_FETCH_SIZE, 'ALL') + ) + return } - + return ( prefetchOngoingSchedules( - // TODO: segmentOption value의 타입을 제네릭으로 지정할 수 있게 구현 (as 변환 리팩토룅) - queryClient, 1, PAGE_SIZE, value as AttendType, - )} + defaultValue='ALL' + onButtonHover={(value) => + prefetchOngoingSchedules( + // TODO: segmentOption value의 타입을 제네릭으로 지정할 수 있게 구현 (as 변환 리팩토룅) + queryClient, + 1, + PAGE_SIZE, + value as OngoingScheduleAttendType + ) + } segmentOptions={segmentOptions} > {segmentOptions.map((option, idx) => ( - + ))} - ); -}; + ) +} -export default OngoingSchedules; \ No newline at end of file +export default OngoingSchedules diff --git a/frontend/src/store/home/index.ts b/frontend/src/store/home/index.ts index f6a00a1c..6d8add74 100644 --- a/frontend/src/store/home/index.ts +++ b/frontend/src/store/home/index.ts @@ -1,7 +1,7 @@ import { atom } from 'jotai'; -import type { AttendType } from '@/features/shared-schedule/model'; +import type { OngoingScheduleAttendType } from '@/features/shared-schedule/model'; -export const checkboxAtom = atom(null); +export const checkboxAtom = atom(null); export const tabAtom = atom<'calendar' | 'rank'>('rank'); export const segmentAtom = atom<'participant' | 'time'>('participant'); \ No newline at end of file From fadc54e25294318e66b71b546f94db500e12382b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EC=9E=AC=EC=98=81?= Date: Mon, 17 Mar 2025 03:52:26 +0900 Subject: [PATCH 04/17] =?UTF-8?q?feat:=20=ED=99=95=EC=A0=95=EB=90=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EC=9D=80=20=EC=9D=BC=EC=A0=95=20=EC=84=B9?= =?UTF-8?q?=EC=85=98=EC=9D=98=20=EC=84=A0=ED=83=9D=20=EC=83=81=ED=83=9C?= =?UTF-8?q?=EA=B0=80=20=EC=9C=A0=EC=A7=80=EB=90=98=EB=8F=84=EB=A1=9D,=20?= =?UTF-8?q?=EC=83=81=ED=83=9C=20=EA=B4=80=EB=A6=AC=20=EC=B1=85=EC=9E=84?= =?UTF-8?q?=EC=9D=84=20useState=EC=97=90=EC=84=9C=20jotai=EB=A1=9C=20?= =?UTF-8?q?=EC=9D=B4=EC=A0=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../OngoingSchedules/OngoingScheduleList.tsx | 20 +++++++++---------- frontend/apps/client/src/store/home/index.ts | 7 +++++++ frontend/src/store/home/index.ts | 7 ------- 3 files changed, 17 insertions(+), 17 deletions(-) create mode 100644 frontend/apps/client/src/store/home/index.ts delete mode 100644 frontend/src/store/home/index.ts diff --git a/frontend/apps/client/src/features/shared-schedule/ui/OngoingSchedules/OngoingScheduleList.tsx b/frontend/apps/client/src/features/shared-schedule/ui/OngoingSchedules/OngoingScheduleList.tsx index 19b592d7..030985cf 100644 --- a/frontend/apps/client/src/features/shared-schedule/ui/OngoingSchedules/OngoingScheduleList.tsx +++ b/frontend/apps/client/src/features/shared-schedule/ui/OngoingSchedules/OngoingScheduleList.tsx @@ -1,7 +1,9 @@ import { vars } from '@endolphin/theme'; import { Flex, Pagination, Text } from '@endolphin/ui'; import { useQueryClient } from '@tanstack/react-query'; -import { useState } from 'react'; +import { useAtom } from 'jotai'; + +import { ongoingListIndexAtom, ongoingPageAtom } from '@/store/home'; import { prefetchOngoingSchedules } from '../../api/prefetch'; import { useOngoingQuery } from '../../api/queries'; @@ -33,11 +35,11 @@ interface OngoingScheduleListProps { // TODO: useEffect 뺄 수 있으면 다른 걸로 대체 const OngoingScheduleList = ({ segmentOption }: OngoingScheduleListProps) => { const queryClient = useQueryClient(); - const [currentPage, handlePageChange] = useState(1); - const [selectedIndex, setSelectedIndex] = useState(0); - const { data, isPending } = useOngoingQuery(currentPage, PAGE_SIZE, segmentOption.value ); + const [currentPage, handlePageChange] = useAtom(ongoingPageAtom); + const [selectedIndex, setSelectedIndex] = useAtom(ongoingListIndexAtom); + const { data, isPending } = useOngoingQuery(currentPage, PAGE_SIZE, segmentOption.value); if (isPending) return
pending...
; - if (!data || data.ongoingDiscussions.length === 0) + if (!data || data.ongoingDiscussions.length === 0) return ; return ( @@ -57,10 +59,10 @@ const OngoingScheduleList = ({ segmentOption }: OngoingScheduleListProps) => { className={paginationStyle} currentPage={currentPage} onPageButtonHover={(page) => - prefetchOngoingSchedules(queryClient, page, PAGE_SIZE, segmentOption.value )} + prefetchOngoingSchedules(queryClient, page, PAGE_SIZE, segmentOption.value)} onPageChange={(page: number) => { setSelectedIndex(0); - handlePageChange(page); + handlePageChange(page); }} totalPages={data.totalPages} /> @@ -71,9 +73,7 @@ const OngoingScheduleList = ({ segmentOption }: OngoingScheduleListProps) => { }; interface ScheduleItemsProps { - schedules: NonNullable< - ReturnType['data'] - >['ongoingDiscussions']; + schedules: NonNullable['data']>['ongoingDiscussions']; selectedIndex: number; setSelectedIndex: (index: number) => void; } diff --git a/frontend/apps/client/src/store/home/index.ts b/frontend/apps/client/src/store/home/index.ts new file mode 100644 index 00000000..622fa78e --- /dev/null +++ b/frontend/apps/client/src/store/home/index.ts @@ -0,0 +1,7 @@ +import { atom } from 'jotai'; + +import type { OngoingScheduleAttendType } from '@/features/shared-schedule/model'; + +export const ongoingSegmentValueAtom = atom('ALL'); +export const ongoingPageAtom = atom(1); +export const ongoingListIndexAtom = atom(0); diff --git a/frontend/src/store/home/index.ts b/frontend/src/store/home/index.ts deleted file mode 100644 index 6d8add74..00000000 --- a/frontend/src/store/home/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { atom } from 'jotai'; - -import type { OngoingScheduleAttendType } from '@/features/shared-schedule/model'; - -export const checkboxAtom = atom(null); -export const tabAtom = atom<'calendar' | 'rank'>('rank'); -export const segmentAtom = atom<'participant' | 'time'>('participant'); \ No newline at end of file From eff6d054c2609c6ae7ce85452ee4642412b28a0c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EC=9E=AC=EC=98=81?= Date: Mon, 17 Mar 2025 03:53:45 +0900 Subject: [PATCH 05/17] =?UTF-8?q?chore:=20=EB=B9=8C=EB=93=9C=20=EC=97=90?= =?UTF-8?q?=EB=9F=AC=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/SegmentControl/SegmentControl.stories.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/packages/ui/src/components/SegmentControl/SegmentControl.stories.tsx b/frontend/packages/ui/src/components/SegmentControl/SegmentControl.stories.tsx index 72d98310..44066f9b 100644 --- a/frontend/packages/ui/src/components/SegmentControl/SegmentControl.stories.tsx +++ b/frontend/packages/ui/src/components/SegmentControl/SegmentControl.stories.tsx @@ -6,7 +6,7 @@ const meta: Meta = { title: 'Components/SegmentControl', component: SegmentControl, argTypes: { - defaultValue: { + initialValue: { control: 'text', }, shadow: { @@ -24,13 +24,13 @@ export const Default: StoryObj = { { label: '라벨2', value: 'value2' }, { label: '라벨3', value: 'value3' }, ], - defaultValue: 'value1', + initialValue: 'value1', }, }; export const WithContent = () => ( Date: Mon, 17 Mar 2025 04:08:53 +0900 Subject: [PATCH 06/17] refactor: Rename handlePageChange to setCurrentPage for clarity --- .../ui/OngoingSchedules/OngoingScheduleList.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/apps/client/src/features/shared-schedule/ui/OngoingSchedules/OngoingScheduleList.tsx b/frontend/apps/client/src/features/shared-schedule/ui/OngoingSchedules/OngoingScheduleList.tsx index 030985cf..4478c166 100644 --- a/frontend/apps/client/src/features/shared-schedule/ui/OngoingSchedules/OngoingScheduleList.tsx +++ b/frontend/apps/client/src/features/shared-schedule/ui/OngoingSchedules/OngoingScheduleList.tsx @@ -35,7 +35,7 @@ interface OngoingScheduleListProps { // TODO: useEffect 뺄 수 있으면 다른 걸로 대체 const OngoingScheduleList = ({ segmentOption }: OngoingScheduleListProps) => { const queryClient = useQueryClient(); - const [currentPage, handlePageChange] = useAtom(ongoingPageAtom); + const [currentPage, setCurrentPage] = useAtom(ongoingPageAtom); const [selectedIndex, setSelectedIndex] = useAtom(ongoingListIndexAtom); const { data, isPending } = useOngoingQuery(currentPage, PAGE_SIZE, segmentOption.value); if (isPending) return
pending...
; @@ -62,7 +62,7 @@ const OngoingScheduleList = ({ segmentOption }: OngoingScheduleListProps) => { prefetchOngoingSchedules(queryClient, page, PAGE_SIZE, segmentOption.value)} onPageChange={(page: number) => { setSelectedIndex(0); - handlePageChange(page); + setCurrentPage(page); }} totalPages={data.totalPages} /> From 573d51b02bb327f648b7f4d1f4befb3eb3d4514f Mon Sep 17 00:00:00 2001 From: dioo1461 Date: Thu, 12 Jun 2025 22:23:17 +0900 Subject: [PATCH 07/17] chore: lint fix --- .../src/features/shared-schedule/api/keys.ts | 12 ++-- .../features/shared-schedule/api/prefetch.ts | 24 ++++---- .../features/shared-schedule/api/queries.ts | 24 +++++--- .../shared-schedule/api/queryOptions.ts | 10 ++-- .../ui/OngoingSchedules/index.tsx | 60 ++++++++++--------- .../UpcomingScheduleDetailPage/index.tsx | 41 +++++-------- 6 files changed, 87 insertions(+), 84 deletions(-) diff --git a/frontend/apps/client/src/features/shared-schedule/api/keys.ts b/frontend/apps/client/src/features/shared-schedule/api/keys.ts index 533cbf5b..f1ca5652 100644 --- a/frontend/apps/client/src/features/shared-schedule/api/keys.ts +++ b/frontend/apps/client/src/features/shared-schedule/api/keys.ts @@ -1,10 +1,10 @@ -import type { OngoingScheduleAttendType } from '../model' +import type { OngoingScheduleAttendType } from '../model'; -export const sharedScheduleKey = ['shared-schedule'] +export const sharedScheduleKey = ['shared-schedule']; -export const upcomingQueryKey = [...sharedScheduleKey, 'upcoming'] +export const upcomingQueryKey = [...sharedScheduleKey, 'upcoming']; -export const upcomingDetailsQueryKey = (discussionId: string) => ['upcomingDetails', discussionId] +export const upcomingDetailsQueryKey = (discussionId: string) => ['upcomingDetails', discussionId]; export const ongoingQueryKey = { all: ['ongoing'], @@ -14,9 +14,9 @@ export const ongoingQueryKey = { size, type, ], -} +}; export const finishedQueryKey = { all: [...sharedScheduleKey, 'finished'], detail: (page: number, size: number, year: number) => [...finishedQueryKey.all, page, size, year], -} +}; diff --git a/frontend/apps/client/src/features/shared-schedule/api/prefetch.ts b/frontend/apps/client/src/features/shared-schedule/api/prefetch.ts index 59ee1edb..987199e3 100644 --- a/frontend/apps/client/src/features/shared-schedule/api/prefetch.ts +++ b/frontend/apps/client/src/features/shared-schedule/api/prefetch.ts @@ -1,24 +1,24 @@ -import type { QueryClient } from '@tanstack/react-query' +import type { QueryClient } from '@tanstack/react-query'; -import { FINISHED_SCHEDULE_FETCH_SIZE } from '../model' -import type { OngoingScheduleAttendType } from '../model' -import { sharedSchedulesQueryOptions } from './queryOptions' +import type { OngoingScheduleAttendType } from '../model'; +import { FINISHED_SCHEDULE_FETCH_SIZE } from '../model'; +import { sharedSchedulesQueryOptions } from './queryOptions'; export const prefetchUpcomingSchedules = async (queryClient: QueryClient) => { - await queryClient.prefetchQuery(sharedSchedulesQueryOptions.upcoming) -} + await queryClient.prefetchQuery(sharedSchedulesQueryOptions.upcoming); +}; export const prefetchOngoingSchedules = async ( queryClient: QueryClient, page: number, size: number, - attendType: OngoingScheduleAttendType + attendType: OngoingScheduleAttendType, ) => { - await queryClient.prefetchQuery(sharedSchedulesQueryOptions.ongoing(page, size, attendType)) -} + await queryClient.prefetchQuery(sharedSchedulesQueryOptions.ongoing(page, size, attendType)); +}; export const prefetchFinishedSchedules = async (queryClient: QueryClient) => { await queryClient.prefetchQuery( - sharedSchedulesQueryOptions.finished(1, FINISHED_SCHEDULE_FETCH_SIZE, new Date().getFullYear()) - ) -} + sharedSchedulesQueryOptions.finished(1, FINISHED_SCHEDULE_FETCH_SIZE, new Date().getFullYear()), + ); +}; diff --git a/frontend/apps/client/src/features/shared-schedule/api/queries.ts b/frontend/apps/client/src/features/shared-schedule/api/queries.ts index 72cd5152..53531ca7 100644 --- a/frontend/apps/client/src/features/shared-schedule/api/queries.ts +++ b/frontend/apps/client/src/features/shared-schedule/api/queries.ts @@ -1,17 +1,25 @@ -import { useQuery } from '@tanstack/react-query' +import { useQuery } from '@tanstack/react-query'; -import type { FinishedSchedulesResponse, UpcomingSchedulesResponse } from '../model' -import type { OngoingScheduleAttendType, OngoingSchedulesResponse } from '../model/ongoingSchedules' -import { sharedSchedulesQueryOptions } from './queryOptions' +import type { + FinishedSchedulesResponse, + UpcomingSchedulesResponse, +} from '../model'; +import type { + OngoingScheduleAttendType, + OngoingSchedulesResponse, +} from '../model/ongoingSchedules'; +import { sharedSchedulesQueryOptions } from './queryOptions'; export const useUpcomingQuery = () => - useQuery(sharedSchedulesQueryOptions.upcoming) + useQuery(sharedSchedulesQueryOptions.upcoming); export const useOngoingQuery = ( page: number, size: number, - attendType: OngoingScheduleAttendType -) => useQuery(sharedSchedulesQueryOptions.ongoing(page, size, attendType)) + attendType: OngoingScheduleAttendType, +) => useQuery( + sharedSchedulesQueryOptions.ongoing(page, size, attendType), +); export const useFinishedQuery = (page: number, size: number, year: number) => - useQuery(sharedSchedulesQueryOptions.finished(page, size, year)) + useQuery(sharedSchedulesQueryOptions.finished(page, size, year)); diff --git a/frontend/apps/client/src/features/shared-schedule/api/queryOptions.ts b/frontend/apps/client/src/features/shared-schedule/api/queryOptions.ts index f11e11bb..34be624d 100644 --- a/frontend/apps/client/src/features/shared-schedule/api/queryOptions.ts +++ b/frontend/apps/client/src/features/shared-schedule/api/queryOptions.ts @@ -1,8 +1,8 @@ -import { keepPreviousData } from '@tanstack/react-query' +import { keepPreviousData } from '@tanstack/react-query'; -import { schedulesApi } from '.' -import type { OngoingScheduleAttendType } from '../model' -import { finishedQueryKey, ongoingQueryKey, upcomingQueryKey } from './keys' +import type { OngoingScheduleAttendType } from '../model'; +import { schedulesApi } from '.'; +import { finishedQueryKey, ongoingQueryKey, upcomingQueryKey } from './keys'; export const sharedSchedulesQueryOptions = { upcoming: { @@ -18,4 +18,4 @@ export const sharedSchedulesQueryOptions = { queryFn: () => schedulesApi.getFinishedSchedules(page, size, year), placeholderData: keepPreviousData, }), -} +}; diff --git a/frontend/apps/client/src/features/shared-schedule/ui/OngoingSchedules/index.tsx b/frontend/apps/client/src/features/shared-schedule/ui/OngoingSchedules/index.tsx index 05d5cd1d..e93c3114 100644 --- a/frontend/apps/client/src/features/shared-schedule/ui/OngoingSchedules/index.tsx +++ b/frontend/apps/client/src/features/shared-schedule/ui/OngoingSchedules/index.tsx @@ -1,45 +1,50 @@ -import { Flex, SegmentControl, Text } from '@endolphin/ui' -import { useQueryClient } from '@tanstack/react-query' +import { Flex, SegmentControl, Text } from '@endolphin/ui'; +import { useQueryClient } from '@tanstack/react-query'; -import { prefetchOngoingSchedules } from '../../api/prefetch' -import { useOngoingQuery } from '../../api/queries' -import { sharedSchedulesQueryOptions } from '../../api/queryOptions' -import { ONGOING_SCHEDULE_FETCH_SIZE } from '../../model/' -import type { OngoingScheduleAttendType } from '../../model/' -import { ongoingFallbackContainerStyle } from '../Fallbacks/index.css' -import OngoingFallback from '../Fallbacks/OngoingFallback' -import { containerStyle, segmentControlStyle, titleStyle } from './index.css' -import OngoingScheduleList, { PAGE_SIZE } from './OngoingScheduleList' +import { prefetchOngoingSchedules } from '../../api/prefetch'; +import { useOngoingQuery } from '../../api/queries'; +import { sharedSchedulesQueryOptions } from '../../api/queryOptions'; +import type { OngoingScheduleAttendType } from '../../model/'; +import { ONGOING_SCHEDULE_FETCH_SIZE } from '../../model/'; +import { ongoingFallbackContainerStyle } from '../Fallbacks/index.css'; +import OngoingFallback from '../Fallbacks/OngoingFallback'; +import { containerStyle, segmentControlStyle, titleStyle } from './index.css'; +import OngoingScheduleList, { PAGE_SIZE } from './OngoingScheduleList'; export interface OngoingSegmentOption { - label: string - value: OngoingScheduleAttendType + label: string; + value: OngoingScheduleAttendType; } const segmentOptions: OngoingSegmentOption[] = [ { label: '모든 일정', value: 'ALL' }, { label: '내가 만든 일정', value: 'HOST' }, { label: '공유 받은 일정', value: 'ATTENDEE' }, -] +]; const OngoingSchedules = () => ( - + 확정되지 않은 일정 -) +); const Content = () => { - const queryClient = useQueryClient() - const { data, isPending } = useOngoingQuery(1, 6, 'ALL') - if (!data || isPending) return
+ const queryClient = useQueryClient(); + const { data, isPending } = useOngoingQuery(1, 6, 'ALL'); + if (!data || isPending) return
; if (data.totalPages === 0) { queryClient.fetchQuery( - sharedSchedulesQueryOptions.ongoing(1, ONGOING_SCHEDULE_FETCH_SIZE, 'ALL') - ) - return + sharedSchedulesQueryOptions.ongoing(1, ONGOING_SCHEDULE_FETCH_SIZE, 'ALL'), + ); + return ; } return ( @@ -52,9 +57,8 @@ const Content = () => { queryClient, 1, PAGE_SIZE, - value as OngoingScheduleAttendType - ) - } + value as OngoingScheduleAttendType, + )} segmentOptions={segmentOptions} > {segmentOptions.map((option, idx) => ( @@ -63,7 +67,7 @@ const Content = () => { ))} - ) -} + ); +}; -export default OngoingSchedules +export default OngoingSchedules; diff --git a/frontend/apps/client/src/pages/UpcomingScheduleDetailPage/index.tsx b/frontend/apps/client/src/pages/UpcomingScheduleDetailPage/index.tsx index cbb473e7..b5e6c3ca 100644 --- a/frontend/apps/client/src/pages/UpcomingScheduleDetailPage/index.tsx +++ b/frontend/apps/client/src/pages/UpcomingScheduleDetailPage/index.tsx @@ -2,33 +2,32 @@ import { formatDateToDdayString } from '@endolphin/core/utils'; import { Chip, Flex, Text } from '@endolphin/ui'; import { useParams } from '@tanstack/react-router'; -import { useUpcomingDetailsQuery } from '@/features/shared-schedule/api/queries'; import TimelineScheduleModal from '@/features/timeline-schedule/ui'; import Header from './Header'; import { backdropStyle } from './index.css'; -const UpcomingScheduleDetailPage = () => { - const { id } = useParams({ from: '/_main/upcoming-schedule/$id' }); - - const { data, isPending } = useUpcomingDetailsQuery(id); - // TODO: 예외 처리? - if (!data || isPending) return
; +interface ScheduleInfo { + title: string; + startDateTime: string; + endDateTime: string; +}; - const start = data.startDateTime; - const end = data.endDateTime; +const UpcomingScheduleDetailPage = (scheduleInfo: ScheduleInfo) => { + const { id } = useParams({ from: '/_main/upcoming-schedule/$id' }); + const start = new Date(scheduleInfo.startDateTime); + const end = new Date(scheduleInfo.endDateTime); return ( <>
- +
@@ -38,26 +37,18 @@ const UpcomingScheduleDetailPage = () => { ); }; -interface TopBarContentProps { - title: string; - endDateTime: Date; -} - -const TopBarContent = ({ - title, - endDateTime, -}: TopBarContentProps) => ( +const TopBarContent = ({ scheduleInfo, end }: { scheduleInfo: ScheduleInfo; end: Date }) => ( - {title} + {scheduleInfo.title} - {formatDateToDdayString(endDateTime)} + {formatDateToDdayString(end)} ); -export default UpcomingScheduleDetailPage; +export default UpcomingScheduleDetailPage; \ No newline at end of file From e34b565adb3e55f88ab79436f29dcaf8bbfdfefa Mon Sep 17 00:00:00 2001 From: dioo1461 Date: Thu, 26 Jun 2025 22:57:56 +0900 Subject: [PATCH 08/17] =?UTF-8?q?chore:=20rebase=20=EB=8B=A8=EA=B3=84?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=EB=88=84=EB=9D=BD=EB=90=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD=EC=82=AC=ED=95=AD=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/features/shared-schedule/api/keys.ts | 15 +++---- .../features/shared-schedule/api/queries.ts | 31 ++++++++++----- .../shared-schedule/api/queryOptions.ts | 14 ++++++- .../ui/OngoingSchedules/index.tsx | 2 +- .../UpcomingScheduleDetailPage/index.tsx | 39 ++++++++++++------- 5 files changed, 64 insertions(+), 37 deletions(-) diff --git a/frontend/apps/client/src/features/shared-schedule/api/keys.ts b/frontend/apps/client/src/features/shared-schedule/api/keys.ts index f1ca5652..ea34187d 100644 --- a/frontend/apps/client/src/features/shared-schedule/api/keys.ts +++ b/frontend/apps/client/src/features/shared-schedule/api/keys.ts @@ -7,16 +7,13 @@ export const upcomingQueryKey = [...sharedScheduleKey, 'upcoming']; export const upcomingDetailsQueryKey = (discussionId: string) => ['upcomingDetails', discussionId]; export const ongoingQueryKey = { - all: ['ongoing'], - detail: (page: number, size: number, type: OngoingScheduleAttendType) => [ - ...ongoingQueryKey.all, - page, - size, - type, - ], + all: [...sharedScheduleKey, 'ongoing'], + detail: (page: number, size: number, type: OngoingScheduleAttendType) => + [...ongoingQueryKey.all, page, size, type], }; export const finishedQueryKey = { all: [...sharedScheduleKey, 'finished'], - detail: (page: number, size: number, year: number) => [...finishedQueryKey.all, page, size, year], -}; + detail: (page: number, size: number, year: number) => + [...finishedQueryKey.all, page, size, year], +}; \ No newline at end of file diff --git a/frontend/apps/client/src/features/shared-schedule/api/queries.ts b/frontend/apps/client/src/features/shared-schedule/api/queries.ts index 53531ca7..f5f0c030 100644 --- a/frontend/apps/client/src/features/shared-schedule/api/queries.ts +++ b/frontend/apps/client/src/features/shared-schedule/api/queries.ts @@ -1,25 +1,36 @@ import { useQuery } from '@tanstack/react-query'; import type { - FinishedSchedulesResponse, + FinishedSchedulesResponse, + UpcomingScheduleDetailsResponse, UpcomingSchedulesResponse, } from '../model'; import type { - OngoingScheduleAttendType, + OngoingScheduleAttendType, OngoingSchedulesResponse, } from '../model/ongoingSchedules'; import { sharedSchedulesQueryOptions } from './queryOptions'; -export const useUpcomingQuery = () => - useQuery(sharedSchedulesQueryOptions.upcoming); +export const useUpcomingQuery = () => useQuery( + sharedSchedulesQueryOptions.upcoming, +); + +export const useUpcomingDetailsQuery = (discussionId: string) => ( + useQuery( + sharedSchedulesQueryOptions.upcomingDetails(discussionId), + ) +); export const useOngoingQuery = ( - page: number, - size: number, + page: number, + size: number, attendType: OngoingScheduleAttendType, -) => useQuery( - sharedSchedulesQueryOptions.ongoing(page, size, attendType), -); +) => + useQuery( + sharedSchedulesQueryOptions.ongoing(page, size, attendType), + ); export const useFinishedQuery = (page: number, size: number, year: number) => - useQuery(sharedSchedulesQueryOptions.finished(page, size, year)); + useQuery( + sharedSchedulesQueryOptions.finished(page, size, year), + ); \ No newline at end of file diff --git a/frontend/apps/client/src/features/shared-schedule/api/queryOptions.ts b/frontend/apps/client/src/features/shared-schedule/api/queryOptions.ts index 34be624d..9c555467 100644 --- a/frontend/apps/client/src/features/shared-schedule/api/queryOptions.ts +++ b/frontend/apps/client/src/features/shared-schedule/api/queryOptions.ts @@ -1,14 +1,24 @@ + import { keepPreviousData } from '@tanstack/react-query'; import type { OngoingScheduleAttendType } from '../model'; import { schedulesApi } from '.'; -import { finishedQueryKey, ongoingQueryKey, upcomingQueryKey } from './keys'; +import { + finishedQueryKey, + ongoingQueryKey, + upcomingDetailsQueryKey, + upcomingQueryKey, +} from './keys'; export const sharedSchedulesQueryOptions = { upcoming: { queryKey: upcomingQueryKey, queryFn: () => schedulesApi.getUpcomingSchedules(), }, + upcomingDetails: (discussionId: string) => ({ + queryKey: upcomingDetailsQueryKey(discussionId), + queryFn: () => schedulesApi.getUpcomingScheduleDetail(discussionId), + }), ongoing: (page: number, size: number, attendtype: OngoingScheduleAttendType) => ({ queryKey: ongoingQueryKey.detail(page, size, attendtype), queryFn: () => schedulesApi.getOngoingSchedules(page, size, attendtype), @@ -18,4 +28,4 @@ export const sharedSchedulesQueryOptions = { queryFn: () => schedulesApi.getFinishedSchedules(page, size, year), placeholderData: keepPreviousData, }), -}; +}; \ No newline at end of file diff --git a/frontend/apps/client/src/features/shared-schedule/ui/OngoingSchedules/index.tsx b/frontend/apps/client/src/features/shared-schedule/ui/OngoingSchedules/index.tsx index e93c3114..e64d0e8a 100644 --- a/frontend/apps/client/src/features/shared-schedule/ui/OngoingSchedules/index.tsx +++ b/frontend/apps/client/src/features/shared-schedule/ui/OngoingSchedules/index.tsx @@ -50,7 +50,7 @@ const Content = () => { return ( prefetchOngoingSchedules( // TODO: segmentOption value의 타입을 제네릭으로 지정할 수 있게 구현 (as 변환 리팩토룅) diff --git a/frontend/apps/client/src/pages/UpcomingScheduleDetailPage/index.tsx b/frontend/apps/client/src/pages/UpcomingScheduleDetailPage/index.tsx index b5e6c3ca..a0ac07ff 100644 --- a/frontend/apps/client/src/pages/UpcomingScheduleDetailPage/index.tsx +++ b/frontend/apps/client/src/pages/UpcomingScheduleDetailPage/index.tsx @@ -1,5 +1,6 @@ import { formatDateToDdayString } from '@endolphin/core/utils'; import { Chip, Flex, Text } from '@endolphin/ui'; +import { useUpcomingDetailsQuery } from '@features/shared-schedule/api/queries'; import { useParams } from '@tanstack/react-router'; import TimelineScheduleModal from '@/features/timeline-schedule/ui'; @@ -7,27 +8,27 @@ import TimelineScheduleModal from '@/features/timeline-schedule/ui'; import Header from './Header'; import { backdropStyle } from './index.css'; -interface ScheduleInfo { - title: string; - startDateTime: string; - endDateTime: string; -}; - -const UpcomingScheduleDetailPage = (scheduleInfo: ScheduleInfo) => { +const UpcomingScheduleDetailPage = () => { const { id } = useParams({ from: '/_main/upcoming-schedule/$id' }); - const start = new Date(scheduleInfo.startDateTime); - const end = new Date(scheduleInfo.endDateTime); + + const { data, isPending } = useUpcomingDetailsQuery(id); + // TODO: 예외 처리? + if (!data || isPending) return
; + + const start = data.startDateTime; + const end = data.endDateTime; return ( <>
- +
@@ -37,16 +38,24 @@ const UpcomingScheduleDetailPage = (scheduleInfo: ScheduleInfo) => { ); }; -const TopBarContent = ({ scheduleInfo, end }: { scheduleInfo: ScheduleInfo; end: Date }) => ( +interface TopBarContentProps { + title: string; + endDateTime: Date; +} + +const TopBarContent = ({ + title, + endDateTime, +}: TopBarContentProps) => ( - {scheduleInfo.title} + {title} - {formatDateToDdayString(end)} + {formatDateToDdayString(endDateTime)} ); From b51ce78ee5d9a551fa9eba8ecae8c78b79c32ac3 Mon Sep 17 00:00:00 2001 From: dioo1461 Date: Fri, 27 Jun 2025 17:59:50 +0900 Subject: [PATCH 09/17] =?UTF-8?q?feat:=20segmentValue=EC=97=90=20=EC=A0=9C?= =?UTF-8?q?=EB=84=A4=EB=A6=AD=20=ED=83=80=EC=9E=85=20=EC=A3=BC=EC=9E=85=20?= =?UTF-8?q?=EA=B0=80=EB=8A=A5=ED=95=98=EA=B2=8C=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/SegmentControl/Content.tsx | 12 ++++---- .../SegmentControl/ControlButton.tsx | 16 +++++----- .../SegmentControl/SegmentControlContext.ts | 12 ++++---- .../src/components/SegmentControl/index.tsx | 30 ++++++++++--------- 4 files changed, 37 insertions(+), 33 deletions(-) diff --git a/frontend/packages/ui/src/components/SegmentControl/Content.tsx b/frontend/packages/ui/src/components/SegmentControl/Content.tsx index 0d519759..96241a4c 100644 --- a/frontend/packages/ui/src/components/SegmentControl/Content.tsx +++ b/frontend/packages/ui/src/components/SegmentControl/Content.tsx @@ -2,15 +2,17 @@ import { clsx } from '@endolphin/core/utils'; import type { PropsWithChildren } from 'react'; import { contentContainerStyle } from './index.css'; -import { useSegmentControlContext } from './SegmentControlContext'; +import { createSegmentControlContext } from './SegmentControlContext'; -export interface ContentProps extends PropsWithChildren { - value: string; +export interface ContentProps extends PropsWithChildren { + value: T; className?: string; } -const Content = ({ value, className, children }: ContentProps) => { - const { selectedValue } = useSegmentControlContext(); +/* eslint-disable-next-line @stylistic/comma-dangle */ +const Content = ({ value, className, children }: ContentProps) => { + const { useContextState } = createSegmentControlContext(); + const { selectedValue } = useContextState(); if (selectedValue !== value) return null; return
{children}
; }; diff --git a/frontend/packages/ui/src/components/SegmentControl/ControlButton.tsx b/frontend/packages/ui/src/components/SegmentControl/ControlButton.tsx index 8a4b036d..26e2fe5a 100644 --- a/frontend/packages/ui/src/components/SegmentControl/ControlButton.tsx +++ b/frontend/packages/ui/src/components/SegmentControl/ControlButton.tsx @@ -1,19 +1,21 @@ import Button from '../Button'; import type { SegmentControlProps, SegmentOption } from '.'; -import { useSegmentControlContext } from './SegmentControlContext'; +import { createSegmentControlContext } from './SegmentControlContext'; -interface ControlButtonProps { - segmentOption: SegmentOption; +interface ControlButtonProps { + segmentOption: SegmentOption; segmentControlStyle: SegmentControlProps['style']; - onButtonHover?: (value: string) => void; + onButtonHover?: (value: T) => void; } -const ControlButton = ({ +/* eslint-disable-next-line @stylistic/comma-dangle */ +const ControlButton = ({ segmentOption, segmentControlStyle, onButtonHover, -}: ControlButtonProps ) => { - const { selectedValue, handleSelect } = useSegmentControlContext(); +}: ControlButtonProps) => { + const { useContextState } = createSegmentControlContext(); + const { selectedValue, handleSelect } = useContextState(); const { label, value } = segmentOption; return (