[FE-Feat] 홈 페이지 기능 구현 완료 (#251)

frontend/src/features/discussion/api/prefetch.ts

@@ -0,0 +1,15 @@
+import type { QueryClient } from '@tanstack/react-query';
+
+import type { DiscussionCalendarRequest } from '../model';
+import { discussionCalenderQueryOptions } from './queryOptions';
+
+export const prefetchDiscussionCalendar = (
+  queryClient: QueryClient,
+  body: DiscussionCalendarRequest,
+  discussionId: string,
+  gcTime: number,
+) => {
+  queryClient.prefetchQuery(
+    discussionCalenderQueryOptions(discussionId, body, gcTime),
+  );
+};

frontend/src/features/discussion/api/queries.ts

@@ -1,36 +1,37 @@
-import { useQuery } from '@tanstack/react-query';
+import { keepPreviousData, useQuery } from '@tanstack/react-query';
 
-import type { 
-  DiscussionCalendarRequest, 
+import type {
+  DiscussionCalendarRequest,
   DiscussionCalendarResponse,
   DiscussionConfirmResponse,
   DiscussionParticipantResponse,
   DiscussionRankRequest,
   DiscussionRankResponse,
-  DiscussionResponse, 
+  DiscussionResponse,
 } from '../model';
 import type { InviteResponse } from '../model/invitation';
 import { candidateApi, discussionApi } from '.';
-import { 
+import {
   candidateKeys,
   discussionKeys,
   hostKeys,
-  participantKeys, 
-  sharedEventKeys, 
+  participantKeys,
+  sharedEventKeys,
 } from './keys';
-import { invitationQueryOption } from './queryOptions';
+import { discussionCalenderQueryOptions, invitationQueryOption } from './queryOptions';
 
 export const discussionQuery = (discussionId: string) => ({
   queryKey: discussionKeys.detail(discussionId), 
   queryFn: () => discussionApi.getDiscussion(discussionId),
 });
 
 export const discussionCalendarQuery = (
-  discussionId: string, body: DiscussionCalendarRequest,
+  discussionId: string, body: DiscussionCalendarRequest, gcTime: number = 0,
 ) => ({
   queryKey: candidateKeys.calendar(discussionId, body),
   queryFn: () => candidateApi.postCalendarCandidate(discussionId, body),
-  gcTime: 0,
+  gcTime: gcTime,
+  placeholderData: keepPreviousData,
 });
 
 export const discussionRankQuery = (
@@ -45,6 +46,7 @@ export const discussionParticipantQuery = (discussionId: string) => ({
   queryKey: participantKeys.detail(discussionId),
   queryFn: () => candidateApi.getCandidateParticipants(discussionId),
   gcTime: 0,
+  placeholderData: keepPreviousData,
 });
 
 export const discussionConfirmQuery = (discussionId: string) => ({
@@ -65,10 +67,10 @@ export const useDiscussionQuery = (discussionId: string) => {
 };
 
 export const useDiscussionCalendarQuery = (
-  discussionId: string, body: DiscussionCalendarRequest,
+  discussionId: string, body: DiscussionCalendarRequest, gcTime: number = 0,
 ) => {  
   const { data: calendar, refetch, isPending } = useQuery<DiscussionCalendarResponse['events']>(
-    discussionCalendarQuery(discussionId, body),
+    discussionCalenderQueryOptions(discussionId, body, gcTime),
   );
 
   return { calendar, isPending, refetch };

frontend/src/features/discussion/api/queryOptions.ts

@@ -1,7 +1,17 @@
+import type { DiscussionCalendarRequest } from '../model';
+import { candidateApi } from '.';
 import { invitationApi } from './invitationApi';
-import { invitationQueryKey } from './keys';
+import { candidateKeys, invitationQueryKey } from './keys';
 
 export const invitationQueryOption = (discussionId: number) => ({
   queryKey: invitationQueryKey(discussionId),
   queryFn: () => invitationApi.getInvitationInfo(discussionId),
 });
+
+export const discussionCalenderQueryOptions = (
+  discussionId: string, body: DiscussionCalendarRequest, gcTime: number = 0,
+) => ({
+  queryKey: candidateKeys.calendar(discussionId, body),
+  queryFn: () => candidateApi.postCalendarCandidate(discussionId, body),
+  gcTime: gcTime,
+});

frontend/src/features/discussion/ui/DiscussionCard/DiscussionSmall.tsx

@@ -5,12 +5,11 @@ import { vars } from '@/theme/index.css';
 import { formatDateToTimeString } from '@/utils/date/format';
 
 import type { DiscussionDTO } from '../../model';
-import DiscussionConfirmButton from '../DiscussionConfirmButton';
 import { containerStyle } from './card.css';
 
 // 추후 삭제할 코드가 포함되어 있습니다.
 // TODO: 일정 확정 버튼 디테일 페이지로 이동
-// eslint-disable-next-line
+ 
 export const DiscussionSmall = (
   { discussion }: { discussion: DiscussionDTO },
 ) => {
@@ -23,10 +22,6 @@ export const DiscussionSmall = (
       gap={300}
       width='100%'
     >
-      <DiscussionConfirmButton 
-        endDateTime={discussion.endDateTime}
-        startDateTime={discussion.startDateTime}
-      />
       {isRecommend && <Chip color='blue' size='lg'>추천</Chip>}
       <Flex direction='column' gap={50}>
         <Text color={vars.color.Ref.Netural[600]} typo='b3R'>

frontend/src/features/discussion/ui/DiscussionCard/index.tsx

@@ -24,8 +24,7 @@ const DiscussionCard = ({ size, discussion, rank }: DiscussionCardProps) => {
         adjustCount: discussion.usersForAdjust.length,
         startDateTime: discussion.startDateTime,
         endDateTime: discussion.endDateTime,
-        selectedParticipantIds: memberContext?.formState.checkedList ?? []
-        ,
+        selectedParticipantIds: memberContext?.formState.checkedList ?? undefined,
       } }}
       to='/discussion/candidate/$id'
     >

frontend/src/features/discussion/ui/DiscussionForm/FormButton.tsx

@@ -1,7 +1,9 @@
+import { type QueryClient, useQueryClient } from '@tanstack/react-query';
 import { useNavigate } from '@tanstack/react-router';
 
 import Button from '@/components/Button';
 import { Flex } from '@/components/Flex';
+import { ongoingQueryKey, upcomingQueryKey } from '@/features/shared-schedule/api/keys';
 import clsx from '@/utils/clsx';
 
 import { useDiscussionMutation } from '../../api/mutations';
@@ -37,6 +39,7 @@ const FormButton = ({ type }: { type: FormType }) => {
 };
 
 const EnrollButton = ({ type }: { type: FormType }) => {
+  const queryClient = useQueryClient();
   const { name, formState, onSubmit, isValid } = useFormContext();
   const navigate = useNavigate();
   const { mutate } = useDiscussionMutation();
@@ -54,6 +57,7 @@ const EnrollButton = ({ type }: { type: FormType }) => {
 
   const handleClickEnrollButton = () => {
     const callback = (id: string) => {
+      invalidateScheduleCaches(queryClient);
       onSubmit();
       navigate({
         to: typeMap[type].navigate,
@@ -75,4 +79,9 @@ const EnrollButton = ({ type }: { type: FormType }) => {
   );
 };
 
+const invalidateScheduleCaches = (queryClient: QueryClient) => {
+  queryClient.invalidateQueries({ queryKey: upcomingQueryKey });
+  queryClient.invalidateQueries({ queryKey: ongoingQueryKey.all });
+};
+
 export default FormButton;

frontend/src/features/shared-schedule/api/index.ts

@@ -1,3 +1,4 @@
+import { MINUTE_IN_MILLISECONDS } from '@/utils/date';
 import { request } from '@/utils/fetch';
 
 import type {
@@ -13,6 +14,7 @@ import {
 import type { FinishedSchedulesResponse } from '../model/finishedSchedules';
 
 const ENDPOINT_PREFIX = '/api/v1/schedules';
+export const ONGOING_SCHEDULE_DETAIL_GC_TIME = 1 * MINUTE_IN_MILLISECONDS;
 
 export const schedulesApi = {
   getUpcomingSchedules: async (): Promise<UpcomingSchedulesResponse> => {

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

@@ -1,4 +1,6 @@
 
+import { keepPreviousData } from '@tanstack/react-query';
+
 import type { AttendType } from '../model';
 import { schedulesApi } from '.';
 import { finishedQueryKey, ongoingQueryKey, upcomingQueryKey } from './keys';
@@ -15,5 +17,6 @@ export const sharedSchedulesQueryOptions = {
   finished: (page: number, size: number, year: number) => ({
     queryKey: finishedQueryKey.detail(page, size, year),
     queryFn: () => schedulesApi.getFinishedSchedules(page, size, year),
+    placeholderData: keepPreviousData,
   }),
 };

frontend/src/features/shared-schedule/model/upcomingSchedules.ts

@@ -1,17 +1,15 @@
 import { z } from 'zod';
 
-import { zCoerceToDate } from '@/utils/zod';
-
 const SharedEventDtoSchema = z.object({
   id: z.number(),
-  startDateTime: zCoerceToDate,
-  endDateTime: zCoerceToDate,
+  startDateTime: z.string(),
+  endDateTime: z.string(),
 });
 
 export const UpcomingScheduleSchema = z.object({
   discussionId: z.number(),
   title: z.string(),
-  meetingMethodOrLocation: z.string(),
+  meetingMethodOrLocation: z.union([z.string(), z.null()]),
   sharedEventDto: SharedEventDtoSchema,
   participantPictureUrls: z.array(z.string()),
 });

frontend/src/features/shared-schedule/ui/Fallbacks/OngoingFallback.tsx

@@ -3,12 +3,12 @@ import { ClockGraphic } from '@/components/Icon/component/ClockGraphic';
 import { Text } from '@/components/Text';
 import { vars } from '@/theme/index.css';
 
-import { containerStyle } from './index.css';
+import { ongoingFallbackContainerStyle } from './index.css';
 
 const OngoingFallback = () => (
   <Flex
     align='center'
-    className={containerStyle}
+    className={ongoingFallbackContainerStyle}
     direction='column'
     gap={600}
     height='35.25rem'

frontend/src/features/shared-schedule/ui/Fallbacks/UpcomingFallback.tsx

@@ -3,12 +3,12 @@ import { CheckGraphic } from '@/components/Icon/component/CheckGraphic';
 import { Text } from '@/components/Text';
 import { vars } from '@/theme/index.css';
 
-import { containerStyle } from './index.css';
+import { ongoingFallbackContainerStyle } from './index.css';
 
 const UpcomingFallback = () => (
   <Flex
     align='center'
-    className={containerStyle}
+    className={ongoingFallbackContainerStyle}
     direction='column'
     gap={600}
     height='19.75rem'

frontend/src/features/shared-schedule/ui/Fallbacks/index.css.ts

@@ -2,7 +2,7 @@ import { style } from '@vanilla-extract/css';
 
 import { vars } from '@/theme/index.css';
 
-export const containerStyle = style({
+export const ongoingFallbackContainerStyle = style({
   backgroundColor: vars.color.Ref.CoolGrey[50],
   borderRadius: vars.radius[700],
 });