Feat: 시니또 콜백 수락/취소/완료 api 추가

src/pages/sinitto/call-back/detail/CallBackDetailPage.tsx

@@ -1,14 +1,12 @@
-import { useState } from 'react';
 import { useParams, Outlet } from 'react-router-dom';
 
+import { useGetAccepted } from './api/hooks';
+import { CallbackMenu } from './components';
 import { GuideLineList } from './components/guide-line-list';
-import { PostAcceptMenu } from './components/menu/post-accept';
-import { PreAcceptMenu } from './components/menu/pre-accept';
 import { useGetCallback } from '@/shared/api/hooks';
 import { Notice } from '@/shared/components';
 import { handleCallbackError } from '@/shared/utils';
-import { Divider } from '@chakra-ui/react';
-import { Spinner } from '@chakra-ui/react';
+import { Divider, Spinner } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 
 export type CallBackDetailParams = {
@@ -17,47 +15,47 @@ export type CallBackDetailParams = {
 
 export const CallBackDetailPage = () => {
   const { callBackId = '' } = useParams<CallBackDetailParams>();
-  const [accept, setAccept] = useState(false);
-  const { data, isLoading, isError, error } = useGetCallback(callBackId);
 
-  handleCallbackError(isError, error);
+  const {
+    data: callbackData,
+    isLoading: isCallBackLoading,
+    isError: isCallBackError,
+    error: callBackError,
+  } = useGetCallback(callBackId);
+  handleCallbackError(isCallBackError, callBackError);
 
-  const handleRequestAccept = () => {
-    // 도움 수락
-    setAccept(true);
-  };
-
-  const handleComplete = () => {
-    // 도움 완료
-  };
-
-  const handleCancle = () => {
-    // 도움 포기
-  };
+  const {
+    data: currentReq,
+    isLoading: iscurrentReqLoading,
+    isError: iscurrentReqError,
+  } = useGetAccepted();
+  const accept =
+    iscurrentReqError || !currentReq
+      ? false
+      : currentReq.callbackId == Number(callBackId);
 
   return (
     <>
       <Wrapper>
-        {isLoading && <Spinner size='xl' />}
-        {data && (
-          <>
-            <Notice
-              noticeType='요청 거부'
-              title='가이드라인을 잘 확인하고 수락해주세요!'
-              contents='시니어의 요청이 가이드라인에서 벗어난 요청일 경우 요청을 거부할 수 있습니다!'
-            />
-            <GuideLineList />
-            <Divider />
-            {accept ? (
-              <PostAcceptMenu
-                handleComplete={handleComplete}
-                handleCancle={handleCancle}
-                phoneNumber='010-1234-5678'
+        {isCallBackLoading ? (
+          <Spinner size='xl' />
+        ) : (
+          callbackData && (
+            <>
+              <Notice
+                noticeType='요청 거부'
+                title='가이드라인을 잘 확인하고 수락해주세요!'
+                contents='시니어의 요청이 가이드라인에서 벗어난 요청일 경우 요청을 거부할 수 있습니다!'
               />
-            ) : (
-              <PreAcceptMenu handleClick={handleRequestAccept} />
-            )}
-          </>
+              <GuideLineList />
+              <Divider />
+              {iscurrentReqLoading ? (
+                <Spinner size='xl' marginTop='30px' />
+              ) : (
+                <CallbackMenu callBackId={Number(callBackId)} accept={accept} />
+              )}
+            </>
+          )
         )}
       </Wrapper>
       <Outlet />

src/pages/sinitto/call-back/detail/api/hooks/index.ts

@@ -0,0 +1,4 @@
+export { useAcceptCallback } from './useAcceptCallback';
+export { useCancelCallback } from './useCancelCallback';
+export { useCompleteCallback } from './useCompleteCallback';
+export { useGetAccepted } from './useGetAccepted';

src/pages/sinitto/call-back/detail/api/hooks/useAcceptCallback.ts

@@ -0,0 +1,23 @@
+import { fetchInstance } from '@/shared/api/instance';
+import { BASE_URI } from '@/shared/constants';
+import { useMutation } from '@tanstack/react-query';
+
+const getacceptCallbackPath = (callbackId: number) =>
+  `${BASE_URI}/api/callbacks/accept/${callbackId}`;
+
+const acceptCallback = async (callbackId: number) => {
+  const response = await fetchInstance.put(getacceptCallbackPath(callbackId));
+  return response.data;
+};
+
+export const useAcceptCallback = () => {
+  return useMutation({
+    mutationFn: acceptCallback,
+    onSuccess: () => {
+      alert('콜백 요청이 수락되었습니다.');
+    },
+    onError: (error) => {
+      alert(`콜백 요청 수락 신청 중 오류가 발생했습니다: ${error.message}`);
+    },
+  });
+};

src/pages/sinitto/call-back/detail/api/hooks/useCancelCallback.ts

@@ -0,0 +1,23 @@
+import { fetchInstance } from '@/shared/api/instance';
+import { BASE_URI } from '@/shared/constants';
+import { useMutation } from '@tanstack/react-query';
+
+const getCancelCallbackPath = (callbackId: number) =>
+  `${BASE_URI}/api/callbacks/cancel/${callbackId}`;
+
+const CancelCallback = async (callbackId: number) => {
+  const response = await fetchInstance.put(getCancelCallbackPath(callbackId));
+  return response.data;
+};
+
+export const useCancelCallback = () => {
+  return useMutation({
+    mutationFn: CancelCallback,
+    onSuccess: () => {
+      alert('진행중인 콜백 서비스가 취소되었습니다.');
+    },
+    onError: (error) => {
+      alert(`콜백 서비스 취소 중 오류가 발생했습니다: ${error.message}`);
+    },
+  });
+};

src/pages/sinitto/call-back/detail/api/hooks/useCompleteCallback.ts

@@ -0,0 +1,23 @@
+import { fetchInstance } from '@/shared/api/instance';
+import { BASE_URI } from '@/shared/constants';
+import { useMutation } from '@tanstack/react-query';
+
+const getCompleteCallbackPath = (callbackId: number) =>
+  `${BASE_URI}/api/callbacks/complete/${callbackId}`;
+
+const CompleteCallback = async (callbackId: number) => {
+  const response = await fetchInstance.put(getCompleteCallbackPath(callbackId));
+  return response.data;
+};
+
+export const useCompleteCallback = () => {
+  return useMutation({
+    mutationFn: CompleteCallback,
+    onSuccess: () => {
+      alert('진행중인 콜백 서비스가 완료되었습니다.');
+    },
+    onError: (error) => {
+      alert(`콜백 서비스 완료 중 오류가 발생했습니다: ${error.message}`);
+    },
+  });
+};

src/pages/sinitto/call-back/detail/api/hooks/useGetAccepted.ts

@@ -0,0 +1,19 @@
+import { fetchInstance } from '@/shared/api/instance';
+import { BASE_URI } from '@/shared/constants';
+import type { CallbackResponse } from '@/shared/types';
+import { useQuery } from '@tanstack/react-query';
+
+const getAcceptedPath = () => `${BASE_URI}/api/callbacks/sinitto/accepted`;
+
+const getAccepted = async () => {
+  const response = await fetchInstance.get<CallbackResponse>(getAcceptedPath());
+  return response.data;
+};
+
+export const useGetAccepted = () => {
+  return useQuery({
+    queryKey: ['acceptedCallback'],
+    queryFn: getAccepted,
+    staleTime: 0,
+  });
+};

src/pages/sinitto/call-back/detail/components/menu/CallbackMenu.tsx

@@ -0,0 +1,60 @@
+import { useNavigate } from 'react-router-dom';
+
+import {
+  useAcceptCallback,
+  useCancelCallback,
+  useCompleteCallback,
+} from '../../api/hooks';
+import { PostAcceptMenu } from '../../components/menu/post-accept';
+import { PreAcceptMenu } from '../../components/menu/pre-accept';
+import { Spinner } from '@chakra-ui/react';
+
+type MenuProps = {
+  callBackId: number;
+  accept: boolean;
+};
+
+export const CallbackMenu = ({ callBackId, accept }: MenuProps) => {
+  const navigate = useNavigate();
+
+  const {
+    mutate: acceptCallback,
+    isPending: isAcceptLoading,
+    isSuccess: isAcceptSuccess,
+  } = useAcceptCallback();
+  if (isAcceptSuccess) {
+    window.location.reload();
+  }
+
+  const {
+    mutate: completeCallback,
+    isPending: isCompleteLoading,
+    isSuccess: isCompleteSuccess,
+  } = useCompleteCallback();
+  if (isCompleteSuccess) {
+    navigate('/call-back'); // TODO: 완료 이후 이동 페이지 지정 필요
+  }
+
+  const {
+    mutate: cancelCallback,
+    isPending: isCancelLoading,
+    isSuccess: isCancelSuccess,
+  } = useCancelCallback();
+  if (isCancelSuccess) {
+    navigate('/call-back'); // TODO: 취소 이후 이동 페이지 지정 필요
+  }
+
+  const isLoading = isAcceptLoading || isCancelLoading || isCompleteLoading;
+
+  return isLoading ? (
+    <Spinner size='xl' marginTop='30px' />
+  ) : accept ? (
+    <PostAcceptMenu
+      handleComplete={() => completeCallback(callBackId)}
+      handleCancle={() => cancelCallback(callBackId)}
+      phoneNumber='010-1234-5678' // TODO: api로 콜백 조회 시 response에 전화번호 추가 필요
+    />
+  ) : (
+    <PreAcceptMenu handleClick={() => acceptCallback(callBackId)} />
+  );
+};

src/pages/sinitto/call-back/detail/components/menu/index.ts

@@ -1,2 +1 @@
-export * from './post-accept';
-export * from './pre-accept';
+export { CallbackMenu } from './CallbackMenu';