feat: 손 흔들기 상태 조회 처리

packages/web-domains/src/about-me/common/apis/mutates/useCreateHandWavings.ts

@@ -1,15 +1,20 @@
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { Http } from '@/common/apis/base.api';
 
+import { HAND_WAVINGS_STATUS_QUERY_KEY } from '../queries/useGetHandWavingsStatus';
+
 interface Request {
   meetingId: number;
   receiverMemberId: number;
 }
 
 export const useCreateHandWavings = () => {
+  const queryClient = useQueryClient();
+
   return useMutation({
     mutationFn: ({ meetingId, receiverMemberId }: Request) =>
       Http.POST(`/v1/meetings/${meetingId}/hand-wavings`, { receiverMemberId }),
+    onSuccess: (_, variable) => queryClient.invalidateQueries({ queryKey: [HAND_WAVINGS_STATUS_QUERY_KEY, variable] }),
   });
 };

packages/web-domains/src/about-me/common/apis/queries/useGetHandWavingsStatus.ts

@@ -0,0 +1,46 @@
+import { QueryClient, useQuery, UseQueryOptions } from '@tanstack/react-query';
+
+import { Http } from '@/common/apis/base.api';
+
+import { HandWavingStatusResponse } from '../schema/HandWavingStatusResponse';
+
+interface Params {
+  meetingId: number;
+  receiverMemberId: number;
+}
+
+interface QueryProps extends Params {
+  options?: UseQueryOptions<HandWavingStatusResponse>;
+}
+
+const queryFn = ({ meetingId, receiverMemberId }: Params) =>
+  Http.GET<HandWavingStatusResponse>(`/v1/meetings/${meetingId}/hand-wavings/receiver/${receiverMemberId}/status`);
+
+export const HAND_WAVINGS_STATUS_QUERY_KEY = 'HAND_WAVINGS_STATUS_QUERY_KEY ';
+
+export const useGetHandWavingsStatus = (props: QueryProps) => {
+  const { options, ...params } = props;
+
+  return useQuery({
+    queryKey: [HAND_WAVINGS_STATUS_QUERY_KEY, params],
+    queryFn: () => queryFn(params),
+    enabled: params.meetingId > 0,
+    staleTime: 1000 * 60 * 10, // 10분
+    ...options,
+  });
+};
+
+interface PrefetchProps extends Params {
+  queryClient: QueryClient;
+}
+
+export const getHandWavingsStatusPrefetch = (props: PrefetchProps) => {
+  const { queryClient, ...params } = props;
+
+  const prefetch = queryClient.prefetchQuery({
+    queryKey: [HAND_WAVINGS_STATUS_QUERY_KEY, params],
+    queryFn: () => queryFn(params),
+  });
+
+  return prefetch;
+};

packages/web-domains/src/about-me/common/apis/schema/HandWavingStatusResponse.ts

@@ -0,0 +1,4 @@
+export interface HandWavingStatusResponse {
+  HandWavingId: number;
+  status: 'REQUESTED' | 'ACCEPTED' | 'REJECTED';
+}

packages/web-domains/src/about-me/features/containers/ScreenContainer.tsx

@@ -4,6 +4,7 @@ import { colors, shadow, size } from '@sambad/sds/theme';
 import { Button } from '@sds/components';
 
 import { useCreateHandWavings } from '@/about-me/common/apis/mutates/useCreateHandWavings';
+import { useGetHandWavingsStatus } from '@/about-me/common/apis/queries/useGetHandWavingsStatus';
 import { ActionBar } from '@/common/components/ActionBar/ActionBar';
 
 import { useGetFirstMeetingId } from '../hooks/useGetFirstMeetingId';
@@ -16,10 +17,13 @@ import { handWavingButtonCss, screenRootCss } from './styles';
 export const ScreenContainer = () => {
   const { isMy, meetingMemberId } = useIsMyByParams();
   const { meetingId } = useGetFirstMeetingId();
-  const { mutate, isSuccess: wavingSuccess } = useCreateHandWavings();
+  const { data: wavingStatusData, isSuccess: getWavingStatusSuccess } = useGetHandWavingsStatus({
+    meetingId,
+    receiverMemberId: meetingMemberId,
+  });
+  const { mutate, isSuccess: sendWavingSuccess } = useCreateHandWavings();
 
-  // FIXME: 현재 손흔들기 응답 상태에 따라서도 같이 처리할 예정
-  const isProgressHandWavings = wavingSuccess;
+  const isProgressHandWavings = sendWavingSuccess || wavingStatusData?.status === 'REQUESTED';
 
   const handleHandWaving = () => {
     mutate({ meetingId, receiverMemberId: meetingMemberId });
@@ -32,7 +36,7 @@ export const ScreenContainer = () => {
         <ProfileContainer style={{ marginBottom: size['5xs'] }} />
         <SegmentedControlContainer style={sectionStyle} />
       </div>
-      {!isMy && (
+      {!isMy && getWavingStatusSuccess && (
         <Button
           size="large"
           disabled={isProgressHandWavings}