feat: 테이블에 따른 개별 색상 추가

Author: oriNuguri25

apps/nowait-admin/src/pages/AdminOrders/OrderCard.tsx

@@ -2,6 +2,7 @@ import ArrowRight from "../../assets/arrow_back.svg?react";
 import { useState } from "react";
 import { PaymentCheckModal, CookedModal } from "./OrderPageModal";
 import type { MenuNamesAndQuantities } from "../../types/order";
+import { getTableBackgroundColor } from "../../utils/tableColors";
 
 interface PaymentCardProps {
   orderId: number;
@@ -40,7 +41,10 @@ const PaymentCard = ({
         onClick={onClick}
       >
         <div className="flex flex-row items-center">
-          <div className="flex rounded-full bg-navy-50 w-9 h-9 items-center justify-center text-title-18-semibold text-white-100">
+          <div
+            className="flex rounded-full w-9 h-9 items-center justify-center text-title-18-semibold text-white-100"
+            style={{ backgroundColor: getTableBackgroundColor(tableNumber) }}
+          >
             {tableNumber}
           </div>
 
@@ -135,7 +139,10 @@ const PaymentDetail = ({
           </div>
 
           <div className="flex flex-row mt-6 gap-2.5">
-            <div className="flex rounded-full bg-navy-50 w-9 h-9 items-center justify-center text-title-18-semibold text-white-100">
+            <div
+              className="flex rounded-full w-9 h-9 items-center justify-center text-title-18-semibold text-white-100"
+              style={{ backgroundColor: getTableBackgroundColor(tableNumber) }}
+            >
               {tableNumber}
             </div>
             <div className="flex text-title-18-semibold text-black-90 items-center">
@@ -238,7 +245,10 @@ const CookCard = ({ tableNumber, menuNamesAndQuantities }: CookCardProps) => {
       }`}
     >
       <div className="flex flex-row gap-2.5">
-        <div className="flex bg-[#6C707A] w-9 h-9 items-center justify-center rounded-full text-title-18-semibold text-white-100">
+        <div
+          className="flex w-9 h-9 items-center justify-center rounded-full text-title-18-semibold text-white-100"
+          style={{ backgroundColor: getTableBackgroundColor(tableNumber) }}
+        >
           {tableNumber}
         </div>
         <div className="flex flex-col gap-3.5 text-16-semibold text-black-80">

apps/nowait-admin/src/pages/AdminOrders/OrderPageModal.tsx

@@ -1,4 +1,5 @@
 import { useUpdateOrderStatus } from "../../hooks/useUpdateOrderStatus";
+import { getTableBackgroundColor } from "../../utils/tableColors";
 
 // Payment Check Modal
 interface PaymentCheckModalProps {
@@ -54,7 +55,10 @@ const PaymentCheckModal = ({
       </div>
 
       <div className="flex flex-row mt-7.5 bg-black-15 rounded-[14px] px-3.5 py-3.5 w-70 gap-2.5">
-        <div className="flex rounded-full bg-navy-50 w-9 h-9 items-center justify-center text-title-18-semibold text-white-100">
+        <div
+          className="flex rounded-full w-9 h-9 items-center justify-center text-title-18-semibold text-white-100"
+          style={{ backgroundColor: getTableBackgroundColor(tableNumber) }}
+        >
           {tableNumber}
         </div>
         <div className="flex flex-col">

apps/nowait-admin/src/utils/tableColors.ts

@@ -0,0 +1,42 @@
+// 테이블 번호별 색상 정의 (1번-30번)
+const tableColors = [
+  "#576376",
+  "#CEB4F0",
+  "#A5B8D6",
+  "#84A6AD",
+  "#788FB6",
+  "#99a3b4",
+  "#6C707A",
+  "#898BBC",
+  "#95C8BC",
+  "#B4B4B4",
+  "#3C485C",
+  "#A27FCF",
+  "#849CC3",
+  "#5F8992",
+  "#5472A3",
+  "#6B7C99",
+  "#4B4F59",
+  "#6B6D9B",
+  "#6FA99B",
+  "#929292",
+  "#3C485C",
+  "#875FBB",
+  "#6484B7",
+  "#4C6E75",
+  "#3F5A86",
+  "#52637F",
+  "#3E4045",
+  "#4C4E75",
+  "#507F74",
+  "#767676",
+];
+
+export const getTableBackgroundColor = (tableNumber: number): string => {
+  // 1-30번 범위 체크
+  if (tableNumber < 1 || tableNumber > 30) {
+    return "#6C707A"; // 범위 외 색상
+  }
+
+  return tableColors[tableNumber - 1];
+};