fix: ui 수정

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

@@ -1,18 +1,21 @@
 import { useMutation } from "@tanstack/react-query";
 import AdminApi from "../../utils/AdminApi";
 
+interface UpdateReservationParams {
+  storeId: number;
+  userId: number;
+  status: "WAITING" | "CALLING" | "CONFIRMED" | "CANCELLED" | "NO_SHOW";
+}
+
 export const useUpdateReservationStatus = () => {
   return useMutation({
     mutationFn: async ({
-      reservationId,
+      storeId,
+      userId,
       status,
-    }: {
-      reservationId: number;
-      status: "WAITING" | "CALLING" | "CONFIRMED" | "CANCELLED" | "NO_SHOW";
-    }) => {
+    }: UpdateReservationParams) => {
       const res = await AdminApi.patch(
-        `/reservations/admin/updates/${reservationId}`,
-        { status }
+        `/reservations/admin/update/${storeId}/${userId}/${status}`
       );
       return res.data;
     },

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

@@ -57,7 +57,7 @@ const boothData: BoothRanking[] = [
 const AdminAnalytics = () => {
   // const { data, isLoading, isError } = useGetTopSales();
   return (
-    <div className="w-full">
+    <div className="w-full flex flex-col items-center justify-center ">
       <HeaderStatus />
       <BoothSalesRankingCard date="2025.07.18 금" data={boothData} />
     </div>

apps/nowait-admin/src/pages/AdminAnalytics/components/BoothSalesRankingCard .tsx

@@ -20,7 +20,7 @@ const BoothSalesRankingCard: React.FC<BoothSalesRankingCardProps> = ({
   data,
 }) => {
   return (
-    <div className="bg-white max-h-[364px] rounded-[12px] p-6 shadow-sm w-full h-full mt-[10px]">
+    <div className="bg-white max-h-[364px] rounded-[12px] p-6 shadow-sm w-[754px] max-h-[50%] mt-[10px]">
       <div className="flex justify-between mb-4">
         <div className="flex flex-col">
           <h2 className="text-title-18-bold text-navy-80">부스별 판매순위</h2>
@@ -43,21 +43,24 @@ const BoothSalesRankingCard: React.FC<BoothSalesRankingCardProps> = ({
                   : ""
               }`}
             >
-              <div className="flex items-center w-[710px]">
+              <div className="flex items-center w-1/2">
                 <span className="text-[14px] font-semibold text-gray-600 w-[30px] h-[23px]">
                   {item.rank}
                 </span>
                 <div className="w-6 h-6 rounded-full bg-[#5A6ACF] mr-[10px]" />
-                <div className="flex flex-col text-sm">
-                  <span className="font-medium text-black">{item.name}</span>
+                <div className="flex items-center text-sm gap-2">
+                  <span className="text-16-semibold text-black">
+                    {item.name}
+                  </span>
                   <span className="text-[12px] text-gray-400">
                     {item.department}
                   </span>
                 </div>
               </div>
 
-              <div className="flex items-center gap-3">
-                <span className="text-[14px] font-medium text-black">
+              <div className="flex items-center justify-between w-1/2 gap-3">
+                <div></div>
+                <span className="flex text-[14px] font-medium text-black">
                   {item.salesCount}건
                 </span>
 

apps/nowait-admin/src/pages/AdminAnalytics/components/HeaderStatus.tsx

@@ -4,7 +4,7 @@ import TotalSalesCard from "./TotalSalesCard";
 
 const HeaderStatus = () => {
   return (
-    <div className="grid grid-cols-1 lg:grid-cols-2 gap-[10px] max-h-[352px]">
+    <div className="grid grid-cols-1 lg:grid-cols-2 gap-[10px] w-[754px] max-h-[50%]">
       <div className="flex flex-col gap-[10px]">
         {/* 오늘 매출 */}
         <SalesCard

apps/nowait-admin/src/pages/AdminAnalytics/components/SalesCard.tsx

@@ -35,19 +35,24 @@ const SalesCard: React.FC<SalesCardProps> = ({ today, previous }) => {
         </span>
         {/* 이전,다음 이동 버튼 */}
         <span className="flex">
+          {/* 이전 버튼: 오늘 매출일 때만 활성화 */}
           <img
-            src={isHoverBack ? activeBackIcon : backIcon}
-            className="h-5 w-5 cursor-pointer"
-            onMouseEnter={() => setIsHoverBack(true)}
-            onMouseLeave={() => setIsHoverBack(false)}
-            onClick={() => setShowToday(false)}
+            src={
+              showToday ? activeBackIcon : backIcon // 비활성 이미지로 고정
+            }
+            className={`h-5 w-5 cursor-pointer`}
+            onMouseEnter={() => showToday && setIsHoverBack(true)}
+            onMouseLeave={() => showToday && setIsHoverBack(false)}
+            onClick={() => showToday && setShowToday(false)}
           />
+
+          {/* 다음 버튼: 이전 매출일 때만 활성화 */}
           <img
-            src={isHoverForward ? activeForwardIcon : forwardIcon}
-            className="h-5 w-5 cursor-pointer"
-            onMouseEnter={() => setIsHoverForward(true)}
-            onMouseLeave={() => setIsHoverForward(false)}
-            onClick={() => setShowToday(true)}
+            src={!showToday ? activeForwardIcon : forwardIcon}
+            className={`h-5 w-5 cursor-pointer `}
+            onMouseEnter={() => !showToday && setIsHoverForward(true)}
+            onMouseLeave={() => !showToday && setIsHoverForward(false)}
+            onClick={() => !showToday && setShowToday(true)}
           />
         </span>
       </div>
@@ -66,10 +71,12 @@ const SalesCard: React.FC<SalesCardProps> = ({ today, previous }) => {
             </>
           )}
         </div>
-        <p className="text-13-regular text-black-80">
-          어제보다 {today.diffAmount.toLocaleString()}원{" "}
-          {today.diffAmount >= 0 ? "더 벌었어요!" : "덜 벌었어요!"}
-        </p>
+        {showToday && (
+          <p className="text-13-regular text-black-80">
+            어제보다 {today.diffAmount.toLocaleString()}원{" "}
+            {today.diffAmount >= 0 ? "더 벌었어요!" : "덜 벌었어요!"}
+          </p>
+        )}
       </div>
     </div>
   );

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

@@ -315,7 +315,7 @@ const MenuSection = () => {
 const BoothForm = () => {
   const width = useWindowWidth();
   const isTablet = width >= 768 && width <= 1024;
-  const [activeTab, setActiveTab] = useState<"booth" | "menu">("booth");
+  const [activeTab, setActiveTab] = useState<"booth" | "menu">("menu");
   const [boothName, setBoothName] = useState("");
   const [boothIntro, setBoothIntro] = useState("");
   const [isFocused, setIsFocused] = useState(false);

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

@@ -13,6 +13,7 @@ type WaitingStatus = "WAITING" | "CALLING" | "CONFIRMED" | "CANCELLED";
 
 interface Reservation {
   id: number;
+  userId: number;
   time: string;
   requestedAt: string;
   waitMinutes: number;
@@ -36,7 +37,7 @@ const AdminHome = () => {
   const { data: completedList } = useGetCompletedList(storeId); //canceled, conformed
 
   console.log(waitingList);
-
+  console.log(completedList);
   const toggle = () => setIsOn((prev) => !prev);
   //대기 중 카드 개수
   const waitingCount = reservations.filter(
@@ -84,15 +85,14 @@ const AdminHome = () => {
   }, [reservations, activeTab]);
 
   // 호출 버튼 클릭 이벤트
-  const handleCall = (id: number) => {
-    // 상태 변화 api 호출 --> 성공시 --> reservation status 변경(호출 시간 calledAt추가해야 됨)
+  const handleCall = (userId: number) => {
     updateStatus(
-      { reservationId: id, status: "CALLING" },
+      { storeId, userId, status: "CALLING" },
       {
         onSuccess: () => {
           setReservations((prev) =>
             prev.map((res) =>
-              res.id === id
+              res.id === userId
                 ? {
                     ...res,
                     status: "CALLING",
@@ -109,29 +109,29 @@ const AdminHome = () => {
     );
   };
 
-  const handleEnter = (id: number) => {
+  const handleEnter = (userId: number) => {
     updateStatus(
-      { reservationId: id, status: "CONFIRMED" },
+      { storeId, userId, status: "CONFIRMED" },
       {
         onSuccess: () => {
           setReservations((prev) =>
             prev.map((res) =>
-              res.id === id ? { ...res, status: "CONFIRMED" } : res
+              res.id === userId ? { ...res, status: "CONFIRMED" } : res
             )
           );
         },
       }
     );
   };
 
-  const handleClose = (id: number) => {
+  const handleClose = (userId: number) => {
     updateStatus(
-      { reservationId: id, status: "CANCELLED" },
+      { storeId, userId, status: "CANCELLED" },
       {
         onSuccess: () => {
           setReservations((prev) =>
             prev.map((res) =>
-              res.id === id ? { ...res, status: "CANCELLED" } : res
+              res.id === userId ? { ...res, status: "CANCELLED" } : res
             )
           );
         },
@@ -152,9 +152,11 @@ const AdminHome = () => {
 
     const normalize = (res: any): Reservation => {
       const requested = new Date(res.createdAt ?? "");
-      const called = new Date(res.calledAt ?? "");
+      const calledAtValid = res.calledAt && !isNaN(Date.parse(res.calledAt));
+      const called = calledAtValid ? new Date(res.calledAt) : undefined;
       return {
         id: Number(res.id),
+        userId: Number(res.userId),
         requestedAt: res.createdAt,
         time: requested.toLocaleTimeString("ko-KR", {
           hour: "2-digit",
@@ -166,7 +168,8 @@ const AdminHome = () => {
         name: res.userName,
         phone: "010-****-****",
         status: res.status,
-        calledAt: res.status === "CALLING" ? called.toISOString() : undefined,
+        calledAt:
+          res.status === "CALLING" && called ? called.toISOString() : undefined,
       };
     };
 
@@ -253,10 +256,10 @@ const AdminHome = () => {
               phone="010-1234-1234"
               status={res.status}
               calledAt={res.calledAt}
-              isNoShow={noShowIds.includes(res.id)}
-              onCall={() => handleCall(res.id)}
-              onEnter={() => handleEnter(res.id)}
-              onClose={() => handleClose(res.id)}
+              isNoShow={noShowIds.includes(res.userId)}
+              onCall={() => handleCall(res.userId)}
+              onEnter={() => handleEnter(res.userId)}
+              onClose={() => handleClose(res.userId)}
               onDelete={() => setShowModal(true)}
               onNoShow={() => handleNoShow(res.id)}
             />

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

@@ -23,7 +23,7 @@ interface WaitingCardProps {
   onDelete: () => void;
 }
 const truncateName = (name: string, maxLength: number = 3) => {
-  return name.length > maxLength ? name.slice(0, maxLength) + "..." : name;
+  return name?.length > maxLength ? name.slice(0, maxLength) + "..." : name;
 };
 
 export function WaitingCard({
@@ -137,13 +137,13 @@ export function WaitingCard({
             <>
               <button
                 onClick={onClose}
-                className="w-[60%] bg-black-30 text-black-80 rounded-[8px] flex justify-center items-center py-2"
+                className="w-[60%] bg-black-30 text-black-80 text-15-semibold rounded-[8px] flex justify-center items-center py-2"
               >
                 미입장
               </button>
               <button
                 onClick={onEnter}
-                className="w-[35%] bg-[#E8F3FF] text-[#2C7CF6] py-2 rounded-[8px] flex justify-center items-center gap-1"
+                className="w-[35%] bg-[#E8F3FF] text-[#2C7CF6] text-15-semibold py-2 rounded-[8px] flex justify-center items-center gap-1"
               >
                 <img src={openDoorIcon} /> 입장
               </button>
@@ -155,21 +155,21 @@ export function WaitingCard({
               </div>
               <button
                 onClick={onEnter}
-                className="w-[35%] bg-[#E8F3FF] text-[#2C7CF6] py-2 rounded-[8px] flex justify-center items-center gap-1"
+                className="w-[35%] bg-[#E8F3FF] text-[#2C7CF6] text-15-semibold py-2 rounded-[8px] flex justify-center items-center gap-1"
               >
                 입장
               </button>
             </>
           ))}
 
         {status === "CANCELLED" && (
-          <div className="w-full bg-black-5 text-black-40 rounded-[8px] flex justify-center items-center py-2">
+          <div className="w-full bg-black-5 text-black-40 text-15-semibold rounded-[8px] flex justify-center items-center py-2">
             취소된 입장
           </div>
         )}
 
         {status === "CONFIRMED" && (
-          <div className="w-full bg-black-5 text-black-40 rounded-[8px] flex justify-center items-center py-2">
+          <div className="w-full bg-black-5 text-black-40 text-15-semibold rounded-[8px] flex justify-center items-center py-2">
             완료된 입장
           </div>
         )}