feat: 나눔 신청, 나눔 신청 취소 API 연동

src/components/organisms/ShareDetailFriendBottomWrapper.tsx

@@ -0,0 +1,61 @@
+import { useApplyShare, useDeleteApplyShare } from '@/hooks/queries/share';
+
+import React from 'react';
+import type { ShareStatusType } from '@/types/friendship';
+import useToast from '@/hooks/useToast';
+
+const APPLY_SUCCESS_MESSAGE = '나눔 신청이 완료되었습니다.';
+const APPLY_DELETE_SUCCESS_MESSAGE = '나눔 신청이 취소되었습니다.';
+
+const ShareDetailFriendBottomWrapper: React.FC<{
+  id: string | string[] | undefined;
+  isApplied: boolean;
+  curStatus: ShareStatusType;
+  refetch: () => void;
+}> = ({ id, isApplied, curStatus, refetch }) => {
+  const { showToast } = useToast();
+  const applyShare = useApplyShare({
+    onSuccess: () => {
+      showToast(APPLY_SUCCESS_MESSAGE, 'success');
+      refetch();
+    },
+  });
+  const deleteShare = useDeleteApplyShare({
+    id: Number(id),
+    onSuccess: () => {
+      showToast(APPLY_DELETE_SUCCESS_MESSAGE, 'success');
+      refetch();
+    },
+  });
+
+  const onApply = () => {
+    applyShare.mutate({ shareId: Number(id) });
+  };
+
+  const onApplyCancel = () => {
+    deleteShare.mutate({});
+  };
+
+  if (curStatus === 'SHARE_COMPLETE') {
+    return (
+      <div className="fixed w-full max-w-[480px] bottom-0 p-[20px] pb-[32px] z-300 bg-gray1">
+        <p className="w-full text-center py-[16px] rounded-[12px] text-gray0 bg-gray3 heading4-semibold">
+          나눔 신청 종료
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="fixed w-full max-w-[480px] bottom-0 p-[20px] pb-[32px] z-300 bg-gray1">
+      <button
+        onClick={isApplied ? onApplyCancel : onApply}
+        className="w-full text-center py-[16px] rounded-[12px] text-white bg-primary2 heading4-semibold"
+      >
+        {isApplied ? '나눔 신청 완료' : '나눔 신청'}
+      </button>
+    </div>
+  );
+};
+
+export default ShareDetailFriendBottomWrapper;

src/components/organisms/index.ts

@@ -15,3 +15,4 @@ export { default as FriendListItem } from './FriendListItem';
 export { default as BulletNoticeBox } from './BulletNoticeBox';
 export { default as SelectFridgeModal } from './SelectFridgeModal';
 export { default as SelectFridgeBoard } from './SelectFridgeBoard';
+export { default as ShareDetailFriendBottomWrapper } from './ShareDetailFriendBottomWrapper';

src/pages/share/[id].tsx

@@ -1,5 +1,5 @@
 import { ClockIcon, DateIcon, LocationIcon } from '@/assets/icons';
-import { Header, ShareDetailAuthorBottomWrapper } from '@/components/organisms';
+import { Header, ShareDetailAuthorBottomWrapper, ShareDetailFriendBottomWrapper } from '@/components/organisms';
 import { Lottie, ShareStatusBadge } from '@/components/atoms';
 import { ShareInfoRowItem, VerticalLabelValue } from '@/components/molecules';
 
@@ -85,11 +85,12 @@ const ShareDetailPage: NextPage = () => {
       {data.data?.isCreatedByCurrentLoginUser ? (
         <ShareDetailAuthorBottomWrapper id={id} refetch={refetch} curStatus={data.data.status} />
       ) : (
-        <div className="fixed w-full max-w-[480px] bottom-0 p-[20px] pb-[32px] z-300 bg-gray1">
-          <button className="w-full text-center py-[16px] rounded-[12px] text-white bg-primary2 heading4-semibold">
-            나눔 신청
-          </button>
-        </div>
+        <ShareDetailFriendBottomWrapper
+          id={id}
+          curStatus={data.data?.status as ShareStatusType}
+          isApplied={data.data?.isApplied as boolean}
+          refetch={refetch}
+        />
       )}
     </>
   );