[Feat/#108] 사장님 예약/주문 API 연동

apps/owner/src/app/(tabs)/order/_components/modal/RejectOrderModal.tsx

@@ -16,12 +16,20 @@ export default function RejectOrderModal({
 }: RejectOrderModalProps) {
   const [reason, setReason] = useState("");
 
+  const trimmedReason = reason.trim();
+  const isValidReason = trimmedReason.length >= 10;
+
   useEffect(() => {
     if (!open) {
       setReason("");
     }
   }, [open]);
 
+  const handleConfirm = () => {
+    if (!isValidReason) return;
+    onConfirm(trimmedReason);
+  };
+
   return (
     <Modal
       open={open}
@@ -47,7 +55,8 @@ export default function RejectOrderModal({
             variant="primary"
             fullWidth={false}
             className="px-[2.2rem]"
-            onClick={() => onConfirm(reason)}
+            onClick={handleConfirm}
+            disabled={!isValidReason}
           >
             거절하기
           </Button>
@@ -58,7 +67,7 @@ export default function RejectOrderModal({
         <input
           value={reason}
           onChange={(e) => setReason(e.target.value)}
-          placeholder="거절 사유를 입력해주세요."
+          placeholder="거절 사유를 입력해주세요. (10자 이상)"
           className="
             w-full rounded-[8px] border border-primary
             px-[1rem] py-[0.6rem]
@@ -67,6 +76,12 @@ export default function RejectOrderModal({
             outline-none
           "
         />
+
+        {!isValidReason && reason.length > 0 && (
+          <p className="caption-m mt-[0.6rem] text-secondary">
+            거절 사유는 10자 이상 입력해주세요.
+          </p>
+        )}
       </div>
     </Modal>
   );

apps/owner/src/app/(tabs)/order/_types/order.ts

@@ -1,6 +1,10 @@
 export type OrderTabKey = "reservation" | "order";
 
-export type ReservationStatus = "pending" | "completed" | "cancelled";
+export type ReservationStatus =
+  | "pending"
+  | "completed"
+  | "cancelled"
+  | "refunded";
 
 export interface ReservationItem {
   id: number;
@@ -10,6 +14,7 @@ export interface ReservationItem {
   quantity: string;
   status: ReservationStatus;
   processedAt?: string;
+  rejectReason?: string;
 }
 
 export interface AcceptModalState {

apps/owner/src/app/(tabs)/order/_utils/orderStatus.ts

@@ -2,26 +2,30 @@ import type { ReservationStatus } from "../_types/order";
 
 export const getStatusLabel = (status: ReservationStatus) => {
   switch (status) {
-  case "pending":
-    return "확인 대기중";
-  case "completed":
-    return "거래완료";
-  case "cancelled":
-    return "거래취소";
-  default:
-    return "";
+    case "pending":
+      return "확인 대기중";
+    case "completed":
+      return "거래완료";
+    case "cancelled":
+      return "거래취소";
+    case "refunded":
+      return "환불";
+    default:
+      return "";
   }
 };
 
 export const getStatusClassName = (status: ReservationStatus) => {
   switch (status) {
-  case "pending":
-    return "body1-m text-secondary";
-  case "completed":
-    return "body1-m text-primary";
-  case "cancelled":
-    return "body1-m text-gray-500";
-  default:
-    return "";
+    case "pending":
+      return "body1-m text-secondary";
+    case "completed":
+      return "body1-m text-primary";
+    case "cancelled":
+      return "body1-m text-gray-500";
+    case "refunded":
+      return "body1-m text-secondary";
+    default:
+      return "";
   }
 };

apps/owner/src/app/(tabs)/order/page.tsx

@@ -5,20 +5,51 @@ import { Header, TopTabBar } from "@compasser/design-system";
 import OrderList from "./_components/OrderList";
 import AcceptOrderModal from "./_components/modal/AcceptOrderModal";
 import RejectOrderModal from "./_components/modal/RejectOrderModal";
-import { INITIAL_RESERVATIONS } from "./_constants/mockOrders";
-import { formatProcessedAt } from "./_utils/formatProcessAt";
 import type {
   AcceptModalState,
   OrderTabKey,
   RejectModalState,
   ReservationItem,
 } from "./_types/order";
+import { usePendingReservationsQuery } from "@/shared/queries/query/owner/usePendingReservationsQuery";
+import { useProcessedReservationsQuery } from "@/shared/queries/query/owner/useProcessedReservationsQuery";
+import { useApproveReservationMutation } from "@/shared/queries/mutation/owner/useApproveReservationMutation";
+import { useRejectReservationMutation } from "@/shared/queries/mutation/owner/useRejectReservationMutation";
+import type { ReservationDTO } from "@compasser/api";
+
+const formatPrice = (price: number) => `${price.toLocaleString()}원`;
+
+const mapReservationStatus = (
+  status: ReservationDTO["status"],
+): ReservationItem["status"] => {
+  switch (status) {
+    case "REQUESTED":
+      return "pending";
+    case "APPROVED":
+      return "completed";
+    case "REJECTED":
+      return "cancelled";
+    case "CANCELED":
+      return "refunded";
+    default:
+      return "pending";
+  }
+};
+
+const mapReservationToItem = (
+  reservation: ReservationDTO,
+): ReservationItem => ({
+  id: reservation.reservationId,
+  customerName: reservation.customerName,
+  orderDetail: reservation.randomBoxName,
+  price: formatPrice(reservation.totalPrice),
+  quantity: `${reservation.requestedQuantity}개`,
+  status: mapReservationStatus(reservation.status),
+  rejectReason: reservation.rejectReason,
+});
 
 export default function OrderStatusPage() {
   const [activeTab, setActiveTab] = useState<OrderTabKey>("reservation");
-  const [orders, setOrders] = useState<ReservationItem[]>(INITIAL_RESERVATIONS);
-  const isOrderTabKey = (key: string): key is OrderTabKey =>
-   key === "reservation" || key === "order";
 
   const [acceptModal, setAcceptModal] = useState<AcceptModalState>({
     isOpen: false,
@@ -30,18 +61,44 @@ export default function OrderStatusPage() {
     orderId: null,
   });
 
+  const {
+    data: pendingReservationData,
+    isLoading: isPendingLoading,
+    isError: isPendingError,
+  } = usePendingReservationsQuery();
+
+  const {
+    data: processedReservationData,
+    isLoading: isProcessedLoading,
+    isError: isProcessedError,
+  } = useProcessedReservationsQuery();
+
+  const approveMutation = useApproveReservationMutation();
+  const rejectMutation = useRejectReservationMutation();
+
+  const isOrderTabKey = (key: string): key is OrderTabKey =>
+    key === "reservation" || key === "order";
+
   const reservationOrders = useMemo(
-    () => orders.filter((order) => order.status === "pending"),
-    [orders]
+    () =>
+      pendingReservationData?.reservations.map(mapReservationToItem) ?? [],
+    [pendingReservationData],
   );
 
-  const completedOrders = useMemo(
-    () => orders.filter((order) => order.status !== "pending"),
-    [orders]
+  const processedOrders = useMemo(
+    () =>
+      processedReservationData?.reservations.map(mapReservationToItem) ?? [],
+    [processedReservationData],
   );
 
   const currentOrders =
-    activeTab === "reservation" ? reservationOrders : completedOrders;
+    activeTab === "reservation" ? reservationOrders : processedOrders;
+
+  const isLoading =
+    activeTab === "reservation" ? isPendingLoading : isProcessedLoading;
+
+  const isError =
+    activeTab === "reservation" ? isPendingError : isProcessedError;
 
   const openAcceptModal = (orderId: number) => {
     setAcceptModal({
@@ -74,41 +131,31 @@ export default function OrderStatusPage() {
   const handleAcceptOrder = () => {
     if (acceptModal.orderId === null) return;
 
-    const now = formatProcessedAt(new Date());
-
-    setOrders((prev) =>
-      prev.map((order) =>
-        order.id === acceptModal.orderId
-          ? {
-            ...order,
-            status: "completed",
-            processedAt: now,
-          }
-          : order
-      )
+    approveMutation.mutate(
+      {
+        reservationId: acceptModal.orderId,
+      },
+      {
+        onSuccess: closeAcceptModal,
+      },
     );
-
-    closeAcceptModal();
   };
 
-  const handleRejectOrder = (_reason: string) => {
+  const handleRejectOrder = (reason: string) => {
     if (rejectModal.orderId === null) return;
 
-    const now = formatProcessedAt(new Date());
-
-    setOrders((prev) =>
-      prev.map((order) =>
-        order.id === rejectModal.orderId
-          ? {
-            ...order,
-            status: "cancelled",
-            processedAt: now,
-          }
-          : order
-      )
+    rejectMutation.mutate(
+      {
+        reservationId: rejectModal.orderId,
+        body: {
+          status: "REQUESTED",
+          rejectReason: reason,
+        },
+      },
+      {
+        onSuccess: closeRejectModal,
+      },
     );
-
-    closeRejectModal();
   };
 
   return (
@@ -128,12 +175,24 @@ export default function OrderStatusPage() {
         />
 
         <section className="flex-1 overflow-y-auto px-[1.6rem] pt-[2.8rem] pb-[10rem]">
-          <OrderList
-            activeTab={activeTab}
-            orders={currentOrders}
-            onAccept={openAcceptModal}
-            onReject={openRejectModal}
-          />
+          {isLoading ? (
+            <div className="flex h-full items-center justify-center">
+              <p className="body1-m text-gray-600">불러오는 중이에요.</p>
+            </div>
+          ) : isError ? (
+            <div className="flex h-full items-center justify-center">
+              <p className="body1-m text-gray-600">
+                주문 내역을 불러오지 못했어요.
+              </p>
+            </div>
+          ) : (
+            <OrderList
+              activeTab={activeTab}
+              orders={currentOrders}
+              onAccept={openAcceptModal}
+              onReject={openRejectModal}
+            />
+          )}
         </section>
       </main>
 

apps/owner/src/shared/queries/mutation/owner/useApproveReservationMutation.ts

@@ -0,0 +1,8 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { ownerModule } from "@/shared/api/api";
+
+export const useApproveReservationMutation = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation(ownerModule.mutations.approveReservation(queryClient));
+};

apps/owner/src/shared/queries/mutation/owner/useRejectReservationMutation.ts

@@ -0,0 +1,8 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { ownerModule } from "@/shared/api/api";
+
+export const useRejectReservationMutation = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation(ownerModule.mutations.rejectReservation(queryClient));
+};

apps/owner/src/shared/queries/query/owner/usePendingReservationsQuery.ts

@@ -0,0 +1,6 @@
+import { useQuery } from "@tanstack/react-query";
+import { ownerModule } from "@/shared/api/api";
+
+export const usePendingReservationsQuery = () => {
+  return useQuery(ownerModule.queries.pendingReservations());
+};

apps/owner/src/shared/queries/query/owner/useProcessedReservationsQuery.ts

@@ -0,0 +1,6 @@
+import { useQuery } from "@tanstack/react-query";
+import { ownerModule } from "@/shared/api/api";
+
+export const useProcessedReservationsQuery = () => {
+  return useQuery(ownerModule.queries.processedReservations());
+};

packages/api/src/domains/owner.ts

@@ -6,14 +6,14 @@ import type {
   BusinessLicenseVerifyReqDTO,
   OwnerUpgradeRespDTO,
   ReservationListResponse,
-  ReservationReqDTO,
+  ReservationRejectReqDTO,
   ReservationResponse,
   SettlementPreviewDTO,
 } from "../models/owner";
 
 export interface ReservationDecisionParams {
   reservationId: number;
-  body?: ReservationReqDTO;
+  body?: ReservationRejectReqDTO;
 }
 
 export const createOwnerModule = (api: CompasserApi) => {