시니또용 콜백 페이지 api 및 기능 구현 (#88)

시니또용 콜백 페이지 api 및 기능 구현

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

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

src/pages/sinitto/call-back/detail/api/accept-call-back.api.ts

@@ -0,0 +1,9 @@
+import { fetchInstance } from '@/shared/api/instance';
+
+const getacceptCallbackPath = (callbackId: number) =>
+  `/api/callbacks/accept/${callbackId}`;
+
+export const acceptCallback = async (callbackId: number) => {
+  const response = await fetchInstance.put(getacceptCallbackPath(callbackId));
+  return response.data;
+};

src/pages/sinitto/call-back/detail/api/cancel-call-back.api.ts

@@ -0,0 +1,9 @@
+import { fetchInstance } from '@/shared/api/instance';
+
+const getCancelCallbackPath = (callbackId: number) =>
+  `/api/callbacks/cancel/${callbackId}`;
+
+export const CancelCallback = async (callbackId: number) => {
+  const response = await fetchInstance.put(getCancelCallbackPath(callbackId));
+  return response.data;
+};

src/pages/sinitto/call-back/detail/api/complete-call-back.api.ts

@@ -0,0 +1,9 @@
+import { fetchInstance } from '@/shared/api/instance';
+
+const getCompleteCallbackPath = (callbackId: number) =>
+  `/api/callbacks/complete/${callbackId}`;
+
+export const CompleteCallback = async (callbackId: number) => {
+  const response = await fetchInstance.put(getCompleteCallbackPath(callbackId));
+  return response.data;
+};

src/pages/sinitto/call-back/detail/api/get-accepted.api.ts

@@ -0,0 +1,9 @@
+import { fetchInstance } from '@/shared/api/instance';
+import type { CallbackResponse } from '@/shared/types';
+
+const getAcceptedPath = () => `/api/callbacks/sinitto/accepted`;
+
+export const getAccepted = async () => {
+  const response = await fetchInstance.get<CallbackResponse>(getAcceptedPath());
+  return response.data;
+};

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,14 @@
+import { acceptCallback } from '../accept-call-back.api';
+import { useMutation } from '@tanstack/react-query';
+
+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,14 @@
+import { CancelCallback } from '../cancel-call-back.api';
+import { useMutation } from '@tanstack/react-query';
+
+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,14 @@
+import { CompleteCallback } from '../complete-call-back.api';
+import { useMutation } from '@tanstack/react-query';
+
+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,10 @@
+import { getAccepted } from '../get-accepted.api';
+import { useQuery } from '@tanstack/react-query';
+
+export const useGetAccepted = () => {
+  return useQuery({
+    queryKey: ['acceptedCallback'],
+    queryFn: getAccepted,
+    staleTime: 0,
+  });
+};

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

@@ -0,0 +1,4 @@
+export { acceptCallback } from './accept-call-back.api';
+export { CancelCallback } from './cancel-call-back.api';
+export { CompleteCallback } from './complete-call-back.api';
+export { getAccepted } from './get-accepted.api';

src/pages/sinitto/call-back/detail/components/guide-line-list/GuideLineList.tsx

@@ -7,7 +7,7 @@ export const GuideLineList = () => {
     <Wrapper>
       {GUIDE_LINE_CATEGORIES.map((data) => (
         <GuideLineButton
-          key={data.id}
+          key={data.title}
           title={data.title}
           id={data.id}
           backgroundColor={data.backgroundColor}

src/pages/sinitto/call-back/detail/components/guide-line-list/guide-line-button.tsx

@@ -6,7 +6,7 @@ import styled from '@emotion/styled';
 
 type Props = {
   title: string;
-  id: string;
+  id: string | null;
   backgroundColor: string;
 };
 
@@ -15,7 +15,11 @@ export const GuideLineButton = ({ title, backgroundColor, id }: Props) => {
   const location = useLocation();
 
   const handleClick = () => {
-    navigate(`${location.pathname}/${id}`);
+    if (id == null) {
+      alert('개발 예정입니다.');
+    } else {
+      navigate(`${location.pathname}/${id}`);
+    }
   };
 
   return (

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';

src/pages/sinitto/call-back/detail/data/guide-line/guid-line-categories.ts

@@ -1,22 +1,22 @@
 export const GUIDE_LINE_CATEGORIES = [
   {
     title: '택시 호출하기',
-    id: 'taxi',
+    id: 'TAXI',
     backgroundColor: '#81b6ff',
   },
   {
-    title: '드라마 방영시간 알려주기',
-    id: 'drama',
+    title: '음식 배달 주문하기',
+    id: 'DELIVERY',
     backgroundColor: '#b28bff',
   },
   {
     title: '서류 제출 도와주기',
-    id: 'document',
+    id: null,
     backgroundColor: '#ffa7b5',
   },
   {
     title: '대중교통 이동 도와주기',
-    id: 'document',
+    id: null,
     backgroundColor: '#ff4d68',
   },
 ];