feat: 손흔들기 요청 처리

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

@@ -0,0 +1,15 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { Http } from '@/common/apis/base.api';
+
+interface Request {
+  meetingId: number;
+  receiverMemberId: number;
+}
+
+export const useCreateHandWavings = () => {
+  return useMutation({
+    mutationFn: ({ meetingId, receiverMemberId }: Request) =>
+      Http.POST(`/v1/meetings/${meetingId}/hand-wavings`, { receiverMemberId }),
+  });
+};

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

@@ -3,16 +3,27 @@
 import { colors, size } from '@sambad/sds/theme';
 import { Button } from '@sds/components';
 
+import { useCreateHandWavings } from '@/about-me/common/apis/mutates/useCreateHandWavings';
 import { ActionBar } from '@/common/components/ActionBar/ActionBar';
 
+import { useGetFirstMeetingId } from '../hooks/useGetFirstMeetingId';
 import { useIsMyByParams } from '../hooks/useIsMyByParams';
 
 import { ProfileContainer } from './ProfileContainer';
 import { SegmentedControlContainer } from './SegmentedControlContainer';
 import { handWavingButtonCss, screenRootCss } from './styles';
 
 export const ScreenContainer = () => {
-  const { isMy } = useIsMyByParams();
+  const { isMy, meetingMemberId } = useIsMyByParams();
+  const { meetingId } = useGetFirstMeetingId();
+  const { mutate, isSuccess: wavingSuccess } = useCreateHandWavings();
+
+  // FIXME: 현재 손흔들기 응답 상태에 따라서도 같이 처리할 예정
+  const isProgressHandWavings = wavingSuccess;
+
+  const handleHandWaving = () => {
+    mutate({ meetingId, receiverMemberId: meetingMemberId });
+  };
 
   return (
     <div css={screenRootCss}>
@@ -22,8 +33,8 @@ export const ScreenContainer = () => {
         <SegmentedControlContainer style={sectionStyle} />
       </div>
       {!isMy && (
-        <Button size="large" css={handWavingButtonCss}>
-          손 흔들어 인사하기
+        <Button size="large" onClick={handleHandWaving} css={handWavingButtonCss}>
+          {isProgressHandWavings ? '손 흔들어 인사하기' : '손 흔들어 인사하기 완료!'}
         </Button>
       )}
     </div>

packages/web-domains/src/about-me/features/hooks/useGetFirstMeetingId.ts

@@ -0,0 +1,9 @@
+import { useGetMeetings } from '@/about-me/common/apis/queries/useGetMeetings';
+
+export const useGetFirstMeetingId = () => {
+  const { data } = useGetMeetings();
+  // NOTE: 하나의 모임에 참여할 수 있는 현재 스펙에서 첫 번째 meetingId를 가져옴
+  const meetingId = data?.meetings[0]?.meetingId || -1;
+
+  return { meetingId };
+};