[FE-Feat] 확정되지 않은 일정 섹션의 상태를 jotai로 이전

frontend/apps/client/src/features/discussion/ui/DiscussionRank/index.tsx

@@ -24,7 +24,7 @@ const DiscussionRank = () => {
   return (
     <SegmentControl
       className={segmentControlStyle}
-      defaultValue='participant'
+      initialValue='participant'
       segmentOptions={segmentOptions}
       style='weak'
     >

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<OngoingSchedulesResponse> => {
     const response = await request.get(ENDPOINT_PREFIX + '/ongoing', {
       params: {

frontend/apps/client/src/features/shared-schedule/api/keys.ts

@@ -1,4 +1,4 @@
-import type { AttendType } from '../model';
+import type { OngoingScheduleAttendType } from '../model';
 
 export const sharedScheduleKey = ['shared-schedule'];
 
@@ -8,7 +8,7 @@ export const upcomingDetailsQueryKey = (discussionId: string) => ['upcomingDetai
 
 export const ongoingQueryKey = {
   all: [...sharedScheduleKey, 'ongoing'],
-  detail: (page: number, size: number, type: AttendType) => 
+  detail: (page: number, size: number, type: OngoingScheduleAttendType) => 
     [...ongoingQueryKey.all, page, size, type],
 };
 

frontend/apps/client/src/features/shared-schedule/api/prefetch.ts

@@ -1,6 +1,7 @@
 import type { QueryClient } from '@tanstack/react-query';
 
-import { type AttendType, FINISHED_SCHEDULE_FETCH_SIZE } from '../model';
+import type { OngoingScheduleAttendType } from '../model';
+import { FINISHED_SCHEDULE_FETCH_SIZE } from '../model';
 import { sharedSchedulesQueryOptions } from './queryOptions';
 
 export const prefetchUpcomingSchedules = async (queryClient: QueryClient) => {
@@ -11,7 +12,7 @@ export const prefetchOngoingSchedules = async (
   queryClient: QueryClient,
   page: number,
   size: number,
-  attendType: AttendType,
+  attendType: OngoingScheduleAttendType,
 ) => {
   await queryClient.prefetchQuery(sharedSchedulesQueryOptions.ongoing(page, size, attendType));
 };

frontend/apps/client/src/features/shared-schedule/api/queries.ts

@@ -5,7 +5,10 @@ import type {
   UpcomingScheduleDetailsResponse,
   UpcomingSchedulesResponse, 
 } from '../model';
-import type { AttendType, OngoingSchedulesResponse } from '../model/ongoingSchedules';
+import type { 
+  OngoingScheduleAttendType,
+  OngoingSchedulesResponse, 
+} from '../model/ongoingSchedules';
 import { sharedSchedulesQueryOptions } from './queryOptions';
 
 export const useUpcomingQuery = () => useQuery<UpcomingSchedulesResponse>(
@@ -18,12 +21,16 @@ export const useUpcomingDetailsQuery = (discussionId: string) => (
   )
 );
 
-export const useOngoingQuery = (page: number, size: number, attendType: AttendType) => 
+export const useOngoingQuery = (
+  page: number, 
+  size: number, 
+  attendType: OngoingScheduleAttendType,
+) => 
   useQuery<OngoingSchedulesResponse>(
     sharedSchedulesQueryOptions.ongoing(page, size, attendType),
   );
 
 export const useFinishedQuery = (page: number, size: number, year: number) =>
   useQuery<FinishedSchedulesResponse>(
     sharedSchedulesQueryOptions.finished(page, size, year),
-  );
+  );

frontend/apps/client/src/features/shared-schedule/api/queryOptions.ts

@@ -1,7 +1,7 @@
 
 import { keepPreviousData } from '@tanstack/react-query';
 
-import type { AttendType } from '../model';
+import type { OngoingScheduleAttendType } from '../model';
 import { schedulesApi } from '.';
 import {
   finishedQueryKey,
@@ -19,7 +19,7 @@ export const sharedSchedulesQueryOptions = {
     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 +28,4 @@ export const sharedSchedulesQueryOptions = {
     queryFn: () => schedulesApi.getFinishedSchedules(page, size, year),
     placeholderData: keepPreviousData,
   }),
-};
+};

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<typeof OngoingSchedulesResponseSchema>;
 export type OngoingSchedule = z.infer<typeof OngoingScheduleSchema>;

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 { ongoingSegmentAtomFamily } from '@/store/home';
 
 import { prefetchOngoingSchedules } from '../../api/prefetch';
 import { useOngoingQuery } from '../../api/queries';
@@ -30,16 +32,16 @@ interface OngoingScheduleListProps {
   segmentOption: OngoingSegmentOption;
 }
 
-// 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 );
-  if (isPending) return <div>pending...</div>;
-  if (!data || data.ongoingDiscussions.length === 0) 
-    return <NoDataAlt segmentValue={segmentOption.value} />;
+  const [segmentAtom, setSegmentAtom] = useAtom(ongoingSegmentAtomFamily(segmentOption.value));
+  const setPage = (page: number) => setSegmentAtom((prev) => ({ ...prev, page }));
+  const setListIndex = (index: number) => setSegmentAtom((prev) => ({ ...prev, listIndex: index }));
 
+  const { data, isPending } = useOngoingQuery(segmentAtom.page, PAGE_SIZE, segmentOption.value);
+
+  if (isPending) return <div>pending...</div>;
+  if (!data?.ongoingDiscussions.length) return <NoDataAlt segmentValue={segmentOption.value} />;
   return (
     <div className={mainContainerStyle}>
       <Flex
@@ -50,30 +52,28 @@ const OngoingScheduleList = ({ segmentOption }: OngoingScheduleListProps) => {
       >
         <ScheduleItems
           schedules={data.ongoingDiscussions}
-          selectedIndex={selectedIndex}
-          setSelectedIndex={setSelectedIndex}
+          selectedIndex={segmentAtom.listIndex}
+          setSelectedIndex={setListIndex}
         />
         <Pagination
           className={paginationStyle}
-          currentPage={currentPage}
+          currentPage={segmentAtom.page}
           onPageButtonHover={(page) =>
-            prefetchOngoingSchedules(queryClient, page, PAGE_SIZE, segmentOption.value )}
+            prefetchOngoingSchedules(queryClient, page, PAGE_SIZE, segmentOption.value)}
           onPageChange={(page: number) => {
-            setSelectedIndex(0);
-            handlePageChange(page); 
+            setListIndex(0);
+            setPage(page);
           }}
           totalPages={data.totalPages}
         />
       </Flex>
-      <ScheduleDetails discussionId={data.ongoingDiscussions[selectedIndex].discussionId} />
+      <ScheduleDetails discussionId={data.ongoingDiscussions[segmentAtom.listIndex].discussionId} />
     </div>
   );
 };
 
 interface ScheduleItemsProps {
-  schedules: NonNullable<
-    ReturnType<typeof useOngoingQuery>['data']
-  >['ongoingDiscussions'];
+  schedules: NonNullable<ReturnType<typeof useOngoingQuery>['data']>['ongoingDiscussions'];
   selectedIndex: number;
   setSelectedIndex: (index: number) => void;
 }

frontend/apps/client/src/features/shared-schedule/ui/OngoingSchedules/index.tsx

@@ -1,19 +1,22 @@
-
-import { Flex, SegmentControl, Text  } from '@endolphin/ui';
+import { Flex, SegmentControl, Text } from '@endolphin/ui';
 import { useQueryClient } from '@tanstack/react-query';
+import { useAtom } from 'jotai';
+
+import { ongoingSegmentValueAtom } from '@/store/home';
 
 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 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: AttendType;
+  value: OngoingScheduleAttendType;
 }
 
 const segmentOptions: OngoingSegmentOption[] = [
@@ -29,12 +32,15 @@ const OngoingSchedules = () => (
     justify='flex-start'
     width='full'
   >
-    <Text className={titleStyle} typo='h2'>확정되지 않은 일정</Text>
+    <Text className={titleStyle} typo='h2'>
+      확정되지 않은 일정
+    </Text>
     <Content />
   </Flex>
 );
 
 const Content = () => {
+  const [segmentValue, setSegmentValue] = useAtom(ongoingSegmentValueAtom);
   const queryClient = useQueryClient();
   const { data, isPending } = useOngoingQuery(1, 6, 'ALL');
   if (!data || isPending) return <div className={ongoingFallbackContainerStyle} />;
@@ -44,26 +50,28 @@ const Content = () => {
     );
     return <OngoingFallback />;
   }
-  
+
   return (
     <SegmentControl
       className={segmentControlStyle}
-      defaultValue='ALL'
-      onButtonHover={(value) => prefetchOngoingSchedules(
-        // TODO: segmentOption value의 타입을 제네릭으로 지정할 수 있게 구현 (as 변환 리팩토룅)
-        queryClient, 1, PAGE_SIZE, value as AttendType,
-      )}
+      initialValue={segmentValue}
+      onButtonHover={(value) =>
+        prefetchOngoingSchedules(
+          queryClient,
+          1,
+          PAGE_SIZE,
+          value,
+        )}
+      onValueChange={(value) => setSegmentValue(value)}
       segmentOptions={segmentOptions}
     >
       {segmentOptions.map((option, idx) => (
         <SegmentControl.Content key={`${option.value}-${idx}`} value={option.value}>
-          <OngoingScheduleList 
-            segmentOption={option} 
-          />
+          <OngoingScheduleList segmentOption={option} />
         </SegmentControl.Content>
       ))}
     </SegmentControl>
   );
 };
 
-export default OngoingSchedules;
+export default OngoingSchedules;

frontend/apps/client/src/pages/UpcomingScheduleDetailPage/index.tsx

@@ -1,8 +1,8 @@
 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 { useUpcomingDetailsQuery } from '@/features/shared-schedule/api/queries';
 import TimelineScheduleModal from '@/features/timeline-schedule/ui';
 
 import Header from './Header';
@@ -60,4 +60,4 @@ const TopBarContent = ({
   </Flex>
 );
 
-export default UpcomingScheduleDetailPage;
+export default UpcomingScheduleDetailPage;

frontend/apps/client/src/store/home/index.ts

@@ -0,0 +1,20 @@
+import { atom } from 'jotai';
+import { atomFamily } from 'jotai/utils';
+
+import type { OngoingScheduleAttendType } from '@/features/shared-schedule/model';
+
+export const ongoingSegmentValueAtom = atom<OngoingScheduleAttendType>('ALL');
+
+export interface OngoingSegmentStateAtom {
+  listIndex: number;
+  page: number;
+}
+
+export const ongoingSegmentAtomFamily = atomFamily((_: OngoingScheduleAttendType) => 
+  atom({
+    listIndex: 0,
+    page: 1,
+  } as OngoingSegmentStateAtom),
+);
+
+export const ongoingListIndexAtom = atom(0);