fix: 웨이팅 카드 시간 표시 ui 수정

apps/nowait-admin/src/components/closeButton.tsx

@@ -5,7 +5,10 @@ interface CloseButtonProps {
 
 const CloseButton = ({ onClick }: CloseButtonProps) => {
   return (
-    <button onClick={onClick}>
+    <button
+      onClick={onClick}
+      className="flex items-center justify-center h-6 w-6"
+    >
       <img
         src={closeIcon}
         width="11px"

apps/nowait-admin/src/hooks/Reservation/useGetCompletedList.tsx

@@ -0,0 +1,37 @@
+import { useQuery } from "@tanstack/react-query";
+import AdminApi from "../../utils/AdminApi";
+
+export interface Reservation {
+  id: number;
+  storeId: number;
+  userName: string;
+  requestedAt: string;
+  status: "WAITING" | "CALLING" | "CONFIRMED" | "CANCELLED";
+  partySize: number;
+}
+
+interface ReservationResponse {
+  waitingCount: number;
+  confirmedCount: number;
+  cancelledCount: number;
+  callingCount: number;
+  reservationList: Reservation[];
+}
+
+const fetchReservations = async (
+  storeId: number
+): Promise<ReservationResponse> => {
+  const res = await AdminApi.get(`/reservations/admin/${storeId}/completed`);
+  return res.data;
+};
+
+export const useGetCompletedList = (storeId: number | null) => {
+  return useQuery({
+    queryKey: ["completed", storeId],
+    queryFn: () => {
+      if (storeId === null) throw new Error("storeId is null");
+      return fetchReservations(storeId);
+    },
+    enabled: storeId !== null, // storeId 없으면 실행 안 함
+  });
+};

apps/nowait-admin/src/hooks/useGetReservationList.tsx → apps/nowait-admin/src/hooks/Reservation/useGetReservationList.tsx

@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
-import AdminApi from "../utils/AdminApi";
+import AdminApi from "../../utils/AdminApi";
 
 export interface Reservation {
   id: number;
@@ -18,16 +18,13 @@ interface ReservationResponse {
   reservationList: Reservation[];
 }
 
-interface ApiResponse {
-  success: boolean;
-  response: ReservationResponse;
-}
-
 const fetchReservations = async (
   storeId: number
 ): Promise<ReservationResponse> => {
-  const res = await AdminApi.get<ApiResponse>(`/reservations/admin/${storeId}`);
-  return res.data.response;
+  const res = await AdminApi.get(
+    `/reservations/admin/${storeId}/waiting/users`
+  );
+  return res.data;
 };
 
 export const useGetReservationList = (storeId: number | null) => {

apps/nowait-admin/src/hooks/useUpdateReservationStatus.tsx → apps/nowait-admin/src/hooks/Reservation/useUpdateReservationStatus.tsx

@@ -1,5 +1,5 @@
 import { useMutation } from "@tanstack/react-query";
-import AdminApi from "../utils/AdminApi";
+import AdminApi from "../../utils/AdminApi";
 
 export const useUpdateReservationStatus = () => {
   return useMutation({

apps/nowait-admin/src/pages/AdminHome/AdminHome.tsx

@@ -2,12 +2,13 @@ import { useEffect, useMemo, useState } from "react";
 import RoundTabButton from "./components/RoundTabButton";
 import refreshIcon from "../../assets/refresh.svg";
 import { WaitingCard } from "./components/WaitingCard";
-import { useGetReservationList } from "../../hooks/useGetReservationList";
+import { useGetReservationList } from "../../hooks/Reservation/useGetReservationList";
 import on from "../../assets/on.svg";
 import off from "../../assets/off.svg";
-import { useUpdateReservationStatus } from "../../hooks/useUpdateReservationStatus";
+import { useUpdateReservationStatus } from "../../hooks/Reservation/useUpdateReservationStatus";
 import ConfirmRemoveModal from "../../components/ConfirmRemoveModal";
 import ToggleSwitch from "./components/ToggleSwitch";
+import { useGetCompletedList } from "../../hooks/Reservation/useGetCompletedList";
 type WaitingStatus = "WAITING" | "CALLING" | "CONFIRMED" | "CANCELLED";
 
 interface Reservation {
@@ -31,7 +32,10 @@ const AdminHome = () => {
   const storeId = 1; //현재는 임시로 mockdata씀
   const [isOn, setIsOn] = useState(true);
   const [reservations, setReservations] = useState<Reservation[]>([]);
-  const { data, isLoading, isError } = useGetReservationList(storeId);
+  const { data: waitingList } = useGetReservationList(storeId); //calling, wating
+  const { data: completedList } = useGetCompletedList(storeId); //canceled, conformed
+
+  console.log(waitingList);
 
   const toggle = () => setIsOn((prev) => !prev);
   //대기 중 카드 개수
@@ -142,33 +146,33 @@ const AdminHome = () => {
     });
   };
   useEffect(() => {
-    if (!data?.reservationList) return;
+    if (!Array.isArray(waitingList) || !Array.isArray(completedList)) return;
 
     const now = Date.now();
 
-    setReservations(
-      data.reservationList.map((res, idx) => {
-        const requested = new Date(res.requestedAt);
-        return {
-          id: res.id,
-          requestedAt: res.requestedAt, //서버 데이터 문자열 그대로 사용("2025-06-24T12:33:26")
-          time: requested.toLocaleTimeString("ko-KR", {
-            hour: "2-digit",
-            minute: "2-digit",
-            hour12: true,
-          }),
-          waitMinutes: Math.floor((now - requested.getTime()) / 60000),
-          peopleCount: res.partySize,
-          name: res.userName,
-          phone: "010-****-****",
-          status: res.status,
-          calledAt:
-            res.status === "CALLING" ? requested.toISOString() : undefined,
-        };
-      })
-    );
-  }, [data]);
+    const normalize = (res: any): Reservation => {
+      const requested = new Date(res.createdAt ?? "");
+      const called = new Date(res.calledAt ?? "");
+      return {
+        id: Number(res.id),
+        requestedAt: res.createdAt,
+        time: requested.toLocaleTimeString("ko-KR", {
+          hour: "2-digit",
+          minute: "2-digit",
+          hour12: true,
+        }),
+        waitMinutes: Math.floor((now - requested.getTime()) / 60000),
+        peopleCount: res.partySize,
+        name: res.userName,
+        phone: "010-****-****",
+        status: res.status,
+        calledAt: res.status === "CALLING" ? called.toISOString() : undefined,
+      };
+    };
 
+    const merged = [...waitingList, ...completedList].map(normalize);
+    setReservations(merged);
+  }, [waitingList, completedList]);
   return (
     <div
       className={`w-full md:w-[752px] max-w-[804px] flex flex-col items-center mx-auto space-y-6`}

apps/nowait-admin/src/pages/AdminHome/components/WaitingCard.tsx

@@ -80,9 +80,10 @@ export function WaitingCard({
         <p className="text-title-20-bold text-black-80">
           #{number < 10 ? `0${number}` : number}번
         </p>
-        <div className="flex items-center gap-2 text-13-medium text-black-50">
+        <div className="flex items-center text-13-medium text-black-50">
           <span>{time}</span>
-          <span>· {waitMinutes}분 대기 중</span>
+          <span className="px-[2px]">·</span>
+          <span>{waitMinutes}분 대기 중</span>
           {<CloseButton onClick={onDelete} />}
         </div>
       </div>

apps/nowait-admin/src/utils/AdminApi.tsx

@@ -11,7 +11,7 @@ const AdminApi = axios.create({
 
 AdminApi.interceptors.request.use(
   (config) => {
-    const token = localStorage.getItem("accessToken");
+    const token = localStorage.getItem("adminToken");
     console.log(token, "토큰 알려줘");
     if (token) {
       config.headers.Authorization = `Bearer ${token}`;