From 9b7262e60820a8e44b801766813737886e35b6b7 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 18 Oct 2024 04:26:03 +0900 Subject: [PATCH] =?UTF-8?q?Feat:=20=EC=8B=9C=EB=8B=88=EB=98=90=20=EC=BD=9C?= =?UTF-8?q?=EB=B0=B1=20=EC=88=98=EB=9D=BD/=EC=B7=A8=EC=86=8C/=EC=99=84?= =?UTF-8?q?=EB=A3=8C=20api=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../call-back/detail/CallBackDetailPage.tsx | 76 +++++++++---------- .../call-back/detail/api/hooks/index.ts | 4 + .../detail/api/hooks/useAcceptCallback.ts | 23 ++++++ .../detail/api/hooks/useCancelCallback.ts | 23 ++++++ .../detail/api/hooks/useCompleteCallback.ts | 23 ++++++ .../detail/api/hooks/useGetAccepted.ts | 19 +++++ .../detail/components/menu/CallbackMenu.tsx | 60 +++++++++++++++ .../call-back/detail/components/menu/index.ts | 3 +- 8 files changed, 190 insertions(+), 41 deletions(-) create mode 100644 src/pages/sinitto/call-back/detail/api/hooks/index.ts create mode 100644 src/pages/sinitto/call-back/detail/api/hooks/useAcceptCallback.ts create mode 100644 src/pages/sinitto/call-back/detail/api/hooks/useCancelCallback.ts create mode 100644 src/pages/sinitto/call-back/detail/api/hooks/useCompleteCallback.ts create mode 100644 src/pages/sinitto/call-back/detail/api/hooks/useGetAccepted.ts create mode 100644 src/pages/sinitto/call-back/detail/components/menu/CallbackMenu.tsx diff --git a/src/pages/sinitto/call-back/detail/CallBackDetailPage.tsx b/src/pages/sinitto/call-back/detail/CallBackDetailPage.tsx index 9f44f125..b8ce12a2 100644 --- a/src/pages/sinitto/call-back/detail/CallBackDetailPage.tsx +++ b/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(); - 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 ( <> - {isLoading && } - {data && ( - <> - - - - {accept ? ( - + ) : ( + callbackData && ( + <> + - ) : ( - - )} - + + + {iscurrentReqLoading ? ( + + ) : ( + + )} + + ) )} diff --git a/src/pages/sinitto/call-back/detail/api/hooks/index.ts b/src/pages/sinitto/call-back/detail/api/hooks/index.ts new file mode 100644 index 00000000..a6ce3d05 --- /dev/null +++ b/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'; diff --git a/src/pages/sinitto/call-back/detail/api/hooks/useAcceptCallback.ts b/src/pages/sinitto/call-back/detail/api/hooks/useAcceptCallback.ts new file mode 100644 index 00000000..05b8458a --- /dev/null +++ b/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}`); + }, + }); +}; diff --git a/src/pages/sinitto/call-back/detail/api/hooks/useCancelCallback.ts b/src/pages/sinitto/call-back/detail/api/hooks/useCancelCallback.ts new file mode 100644 index 00000000..8570118a --- /dev/null +++ b/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}`); + }, + }); +}; diff --git a/src/pages/sinitto/call-back/detail/api/hooks/useCompleteCallback.ts b/src/pages/sinitto/call-back/detail/api/hooks/useCompleteCallback.ts new file mode 100644 index 00000000..36ddf333 --- /dev/null +++ b/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}`); + }, + }); +}; diff --git a/src/pages/sinitto/call-back/detail/api/hooks/useGetAccepted.ts b/src/pages/sinitto/call-back/detail/api/hooks/useGetAccepted.ts new file mode 100644 index 00000000..f17ef35e --- /dev/null +++ b/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(getAcceptedPath()); + return response.data; +}; + +export const useGetAccepted = () => { + return useQuery({ + queryKey: ['acceptedCallback'], + queryFn: getAccepted, + staleTime: 0, + }); +}; diff --git a/src/pages/sinitto/call-back/detail/components/menu/CallbackMenu.tsx b/src/pages/sinitto/call-back/detail/components/menu/CallbackMenu.tsx new file mode 100644 index 00000000..6d91951d --- /dev/null +++ b/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 ? ( + + ) : accept ? ( + completeCallback(callBackId)} + handleCancle={() => cancelCallback(callBackId)} + phoneNumber='010-1234-5678' // TODO: api로 콜백 조회 시 response에 전화번호 추가 필요 + /> + ) : ( + acceptCallback(callBackId)} /> + ); +}; diff --git a/src/pages/sinitto/call-back/detail/components/menu/index.ts b/src/pages/sinitto/call-back/detail/components/menu/index.ts index d3f62dfd..84f6c869 100644 --- a/src/pages/sinitto/call-back/detail/components/menu/index.ts +++ b/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';