From 31b373ed95b1129df4829e4a779f14e5dab91d89 Mon Sep 17 00:00:00 2001
From: Jong <abg3000@naver.com>
Date: Tue, 27 Aug 2024 01:19:36 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=95=8C=EB=A6=BC=20=EC=9D=B8=EC=82=AC?=
 =?UTF-8?q?=ED=95=98=EA=B8=B0=20=EC=88=98=EB=9D=BD=20OR=20=EA=B1=B0?=
 =?UTF-8?q?=EC=A0=88=20=EB=B2=84=ED=8A=BC=20=EC=83=81=ED=83=9C=EC=97=90=20?=
 =?UTF-8?q?=EB=94=B0=EB=A5=B8=20=EB=85=B8=EC=B6=9C=20=EC=B2=98=EB=A6=AC=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=BF=BC=EB=A6=AC=20invalidation=20(#158)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 인사하기 수락이나 거절완료 한 경우 버튼 미노출

* fix: 인사하기 수락이나 거절 버튼 누른후 invalidate
---
 .../common/apis/schema/Notification.schema.ts |  1 +
 .../containers/AlarmListContainer.tsx         | 80 ++++++++++---------
 .../services/useAlarmListService.ts           | 21 ++++-
 3 files changed, 60 insertions(+), 42 deletions(-)

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 (
           <NotificationItem.AlarmItem
             alarm={notification}
-            footer={
-              <div css={{ display: 'flex', marginTop: '12px' }}>
-                <Button
-                  onClick={() => {
-                    if (handWavingId && meetingId) {
-                      handWavingResponse({ meetingId, handWavingId });
-                    }
-                  }}
-                  variant="primary"
-                  leftDecor={
-                    <Icon
-                      name="hand-shaving"
-                      size={15}
-                      css={{
-                        '& svg, & path': {
-                          width: 20,
-                          height: 20,
-                          fill: `none`,
-                        },
-                      }}
-                    />
-                  }
-                  css={{ marginRight: '8px' }}
-                >
-                  나도 인사 건네기
-                </Button>
-                <Button
-                  onClick={() => {
-                    if (handWavingId && meetingId) {
-                      ignoreHandwaving({ meetingId, handWavingId });
+            {...(isRequested && {
+              footer: (
+                <div css={{ display: 'flex', marginTop: '12px' }}>
+                  <Button
+                    onClick={() => {
+                      if (handWavingId && meetingId) {
+                        handWavingResponse({ meetingId, handWavingId });
+                      }
+                    }}
+                    variant="primary"
+                    leftDecor={
+                      <Icon
+                        name="hand-shaving"
+                        size={15}
+                        css={{
+                          '& svg, & path': {
+                            width: 20,
+                            height: 20,
+                            fill: `none`,
+                          },
+                        }}
+                      />
                     }
-                  }}
-                  variant="sub"
-                  leftDecor={<Icon name="close-icon" size={15} />}
-                >
-                  다음에 인사하기
-                </Button>
-              </div>
-            }
+                    css={{ marginRight: '8px' }}
+                  >
+                    나도 인사 건네기
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      if (handWavingId && meetingId) {
+                        ignoreHandwaving({ meetingId, handWavingId });
+                      }
+                    }}
+                    variant="sub"
+                    leftDecor={<Icon name="close-icon" size={15} />}
+                  >
+                    다음에 인사하기
+                  </Button>
+                </div>
+              ),
+            })}
           />
         );
       }
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,