diff --git a/packages/web-domains/src/home/common/apis/schema/Notification.schema.ts b/packages/web-domains/src/home/common/apis/schema/Notification.schema.ts index 393e2db6..4e1147bb 100644 --- a/packages/web-domains/src/home/common/apis/schema/Notification.schema.ts +++ b/packages/web-domains/src/home/common/apis/schema/Notification.schema.ts @@ -18,6 +18,7 @@ export type AlarmEventType = { status: 'ACTIVE' | 'INACTIVE'; additionalData: { handWavingId: number; + status?: 'NOT_REQUESTED' | 'REQUESTED' | 'ACCEPTED' | 'REJECTED'; } | null; createdAt: number; }; diff --git a/packages/web-domains/src/home/features/notification/containers/AlarmListContainer.tsx b/packages/web-domains/src/home/features/notification/containers/AlarmListContainer.tsx index b98427dd..70f5664f 100644 --- a/packages/web-domains/src/home/features/notification/containers/AlarmListContainer.tsx +++ b/packages/web-domains/src/home/features/notification/containers/AlarmListContainer.tsx @@ -17,49 +17,51 @@ export const AlarmListContainer = () => { switch (notification.type) { case 'HAND_WAVING_REQUESTED': { const handWavingId = notification.additionalData?.handWavingId; - + const isRequested = notification.additionalData?.status === 'REQUESTED'; return ( - - - - } + css={{ marginRight: '8px' }} + > + 나도 인사 건네기 + + + + ), + })} /> ); } diff --git a/packages/web-domains/src/home/features/notification/services/useAlarmListService.ts b/packages/web-domains/src/home/features/notification/services/useAlarmListService.ts index fdb93cd0..2a8685f5 100644 --- a/packages/web-domains/src/home/features/notification/services/useAlarmListService.ts +++ b/packages/web-domains/src/home/features/notification/services/useAlarmListService.ts @@ -1,10 +1,13 @@ +import { useQueryClient } from '@tanstack/react-query'; + import { useHandWavingIgonoreMutation } from '@/home/common/apis/mutations/useHandWavingIgnoreMutation'; import { useHandWavingResponseMutation } from '@/home/common/apis/mutations/useHandWavingResponseMutation'; -import { useGetEvents } from '@/home/common/apis/queries/useGetEvents'; +import { EVENTS_QUERY_KEY, useGetEvents } from '@/home/common/apis/queries/useGetEvents'; import { useGetMyInfo } from '@/home/common/apis/queries/useGetMyInfo'; import { useSetCurrentMeeting } from '@/home/common/hooks/useSetCurrentMeeting'; export const useAlarmListService = () => { + const queryClient = useQueryClient(); const { meetingId } = useSetCurrentMeeting(); const { data: myInfo } = useGetMyInfo({ @@ -19,9 +22,21 @@ export const useAlarmListService = () => { }, }); - const { mutate: ignoreHandWaving } = useHandWavingIgonoreMutation(); + const { mutate: ignoreHandWaving } = useHandWavingIgonoreMutation({ + options: { + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: [EVENTS_QUERY_KEY] }); + }, + }, + }); - const { mutate: handWavingResponse } = useHandWavingResponseMutation(); + const { mutate: handWavingResponse } = useHandWavingResponseMutation({ + options: { + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: [EVENTS_QUERY_KEY] }); + }, + }, + }); return { meetingId,