publish

src/api/useGetOrderStatus.ts

@@ -3,7 +3,11 @@ import { useQuery } from '@tanstack/react-query'
 import { OrderStatus } from './useGetOrdersDetail'
 
 const useGetOrderStatus = (orderId?: string) => {
-  const { data: status, isSuccess } = useQuery({
+  const {
+    data: status,
+    isSuccess,
+    refetch,
+  } = useQuery({
     queryKey: ['orderStatus', orderId],
     queryFn: async () => {
       return await api.get<{ status: OrderStatus }>(`orders/${orderId}/status`)
@@ -14,7 +18,7 @@ const useGetOrderStatus = (orderId?: string) => {
     },
   })
 
-  return { status, isSuccess }
+  return { status, isSuccess, refetch }
 }
 
 export default useGetOrderStatus

src/api/usePatchOrderCancel.ts

@@ -1,13 +1,14 @@
 import { api } from '@/lib/api'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 
-const usePatchOrderCancel = () => {
+const usePatchOrderCancel = (refetchOrderStatus: () => void) => {
   const queryClient = useQueryClient()
 
   return useMutation({
     mutationFn: (orderId: string) => api.patch(`orders/${orderId}/cancel`, {}),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['ordersDetail'] })
+      refetchOrderStatus()
     },
   })
 }

src/app/orders/detail/[id]/_components/OrderList.tsx

@@ -1,5 +1,4 @@
 import { OrdersDetail } from '@/api/useGetOrdersDetail'
-import usePatchOrderCancel from '@/api/usePatchOrderCancel'
 import Chip from '@/components/Chip'
 import Confirm from '@/components/Confirm'
 import Separator from '@/components/Separator'
@@ -8,10 +7,10 @@ import { v4 as uuidv4 } from 'uuid'
 
 interface OrderListProps {
   ordersData: OrdersDetail
+  patchOrderCancel: (orderId: string) => void
 }
 
-const OrderList = ({ ordersData }: OrderListProps) => {
-  const { mutate: patchOrderCancel } = usePatchOrderCancel()
+const OrderList = ({ ordersData, patchOrderCancel }: OrderListProps) => {
   const { showModal } = modalStore()
 
   const handleOrderCancel = () => {
@@ -20,7 +19,9 @@ const OrderList = ({ ordersData }: OrderListProps) => {
         <Confirm
           title="주문 취소"
           message="주문을 취소하시겠습니까?"
-          onConfirmClick={() => patchOrderCancel(ordersData.orderId)}
+          onConfirmClick={() => {
+            patchOrderCancel(ordersData.orderId)
+          }}
         />
       ),
     })

src/app/orders/detail/[id]/page.tsx

@@ -2,6 +2,7 @@
 
 import useGetOrdersDetail from '@/api/useGetOrdersDetail'
 import useGetOrderStatus from '@/api/useGetOrderStatus'
+import usePatchOrderCancel from '@/api/usePatchOrderCancel'
 import OrderList from '@/app/orders/detail/[id]/_components/OrderList'
 import FullpageLoader from '@/components/FullpageLoader'
 import Separator from '@/components/Separator'
@@ -17,7 +18,8 @@ const OrderDetailPage = () => {
     return path.split('/').pop()
   }, [path])
   const { ordersDetail, resetGetOrdersDetail } = useGetOrdersDetail(orderId)
-  const { status } = useGetOrderStatus(orderId)
+  const { status, refetch: refetchOrderStatus } = useGetOrderStatus(orderId)
+  const { mutate: patchOrderCancel } = usePatchOrderCancel(refetchOrderStatus)
 
   useEffect(() => {
     if (!status) return
@@ -36,7 +38,11 @@ const OrderDetailPage = () => {
         {status && <OrderStatus orderStatus={status.status} />}
         <Separator ignoreMobileSafe className="h-[8px]" />
       </div>
-      <div className="pb-5">{ordersDetail && <OrderList ordersData={ordersDetail} />}</div>
+      <div className="pb-5">
+        {ordersDetail && (
+          <OrderList ordersData={ordersDetail} patchOrderCancel={patchOrderCancel} />
+        )}
+      </div>
     </div>
   )
 }