Merge develop → main: UI 메뉴 활성화 로직 개선 및 버그 수정

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

@@ -57,17 +57,21 @@ const MobileAdminNav = ({
       <div className="flex flex-col justify-between h-full">
         <ul className="flex flex-col gap-2">
           {menuItems.map(({ label, icon, activeIcon, path }) => {
-            const isActive = pathname === path;
+            //주문의 경우 클릭시 경로에 storeId가 붙기 때문에 추가 검증
             if (label === "주문") {
               path = `/admin/orders/${storeId}`;
             }
+            const isActive = pathname === path;
             return (
               <li
                 key={label}
                 className={`flex items-center gap-3 px-3 py-2 rounded-md text-title-18-semibold ${
                   isActive ? "bg-[#f5f5f5] text-black" : "text-black-50"
                 }`}
-                onClick={() => navigate(path)}
+                onClick={() => {
+                  navigate(path);
+                  onClose();
+                }}
               >
                 {isActive ? (
                   <img src={activeIcon} alt={label} className="w-5 h-5" />

apps/nowait-admin/src/global.css

@@ -262,3 +262,45 @@ input[type="password"]::-ms-reveal,
 input[type="password"]::-ms-clear {
   display: none;
 }
+
+input[type="range"] {
+  -webkit-appearance: none;
+  appearance: none;
+
+  width: 100%;
+  height: 6px;
+  border-radius: 4px;
+  outline: none;
+
+  /* 왼쪽 = #222 / 오른쪽 = 연회색 */
+  background: linear-gradient(to right, #222 var(--value, 0%), #e5e7eb 0%);
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+  background: transparent;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  background: #222;
+  border-radius: 50%;
+  cursor: pointer;
+  margin-top: -1px;
+}
+
+/* Firefox */
+/* input[type="range"]::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  background: #3b82f6;
+  border-radius: 50%;
+  cursor: pointer;
+}
+input[type="range"]::-moz-range-track {
+  background: #d1d5db;
+  height: 6px;
+  border-radius: 4px;
+} */

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

@@ -10,6 +10,7 @@ import PreviewModal from "./Modal/PreviewModal";
 import { useDeleteBannerImage } from "../../../hooks/booth/menu/useDeleteBannerImage";
 import { useRemoveEmoji } from "../../../hooks/useRemoveEmoji";
 import ImageCropModal from "./Modal/ImageCropModal";
+import { useWindowWidth } from "../../../hooks/useWindowWidth";
 
 const BoothSection = ({
   location,
@@ -69,6 +70,7 @@ const BoothSection = ({
   isMobile: boolean;
 }) => {
   const [showPreview, setShowPreview] = useState(false);
+  const width = useWindowWidth();
   const { mutate: deleteBannerImage } = useDeleteBannerImage();
   const { removeEmojiAll } = useRemoveEmoji();
   const [cropSpec, setCropSpec] = useState<{
@@ -406,7 +408,7 @@ const BoothSection = ({
         setNotice={setBoothNotice}
       />
 
-      {cropSpec && (
+      {cropSpec && width > 1279 && (
         <ImageCropModal
           file={cropSpec.file}
           aspect={cropSpec.aspect}
@@ -416,11 +418,7 @@ const BoothSection = ({
           quality={0.95}
           onDone={handleCropDone}
           onClose={() => setCropSpec(null)}
-          title={
-            cropSpec.target === "profile"
-              ? "프로필 이미지 1:1 자르기"
-              : "배너 이미지 375:246 자르기"
-          }
+          title={"이미지 편집하기"}
         />
       )}
     </>

apps/nowait-admin/src/pages/AdminBooth/components/Modal/ImageCropModal.tsx

@@ -67,10 +67,10 @@ export default function ImageCropModal({
 
   return (
     <div className="fixed inset-0 z-[1000] flex items-center justify-center bg-black/60">
-      <div className="w-full max-w-[520px] rounded-2xl bg-white p-4">
+      <div className="w-full max-w-[520px] rounded-2xl bg-white py-4 px-5">
         <div className="mb-3 text-16-semibold">{title}</div>
 
-        <div className="relative h-[360px] w-full overflow-hidden rounded-xl bg-black">
+        <div className="relative h-[360px] w-full overflow-hidden rounded-xl bg-black cropper-wrapper">
           <Cropper
             image={url}
             crop={crop}
@@ -95,7 +95,12 @@ export default function ImageCropModal({
             max={6}
             step={0.01}
             value={zoom}
-            onChange={(e) => setZoom(Number(e.target.value))}
+            onChange={(e) => {
+              const v = Number(e.target.value);
+              setZoom(v);
+              const percent = ((v - 1) / (6 - 1)) * 100;
+              e.target.style.setProperty("--value", `${percent}%`);
+            }}
           />
         </div>
 

apps/nowait-user/src/api/menu.ts

@@ -23,7 +23,7 @@ interface MenuServerResponse {
 export const getStoreMenus = async (publicCode: string) => {
   try {
     const res = await axios.get<AllMenuServerResponse>(
-      `${API_URI}/v1/menus/all-menus/stores/${publicCode}`
+      `${API_URI}/v1/stores/${publicCode}/menus`
     );
     if (res?.data.success) return res.data;
   } catch (error) {
@@ -36,6 +36,6 @@ export const getStoreMenu = async (
   publicCode: string,
   menuId: number
 ): Promise<MenuServerResponse> => {
-  const res = await axios.get(`${API_URI}/v1/menus/${publicCode}/${menuId}`);
+  const res = await axios.get(`${API_URI}/v1/stores/${publicCode}/menus/${menuId}`);
   return res.data;
 };

apps/nowait-user/src/api/order.ts

@@ -5,6 +5,7 @@ import type {
   OrderType,
   StorePaymentsResponse,
 } from "../types/order/order";
+
 const API_URI = import.meta.env.VITE_SERVER_URI;
 
 const api = axios.create({
@@ -20,7 +21,7 @@ export const createOrder = async (
   payload: OrderType
 ): Promise<CreateOrderServerResponse> => {
   const res = await api.post(
-    `/orders/create/${publicCode}/${tableId}`,
+    `v1/stores/${publicCode}/tables/${tableId}/orders`,
     payload
   );
   return res.data;
@@ -31,15 +32,15 @@ export const getOrderDetails = async (
   publicCode: string,
   tableId: number
 ): Promise<OrderDetailsServerResponse> => {
-  const res = await api.get(`/orders/items/${publicCode}/${tableId}`);
+  const res = await api.get(`v1/stores/${publicCode}/tables/${tableId}/orders`);
   return res.data;
 };
 
 //주점 QR, 계좌번호 조회
 export const getStorePayments = async (publicCode: string) => {
   try {
     const res = await axios.get<StorePaymentsResponse>(
-      `${API_URI}/v1/store-payments/${publicCode}`
+      `${API_URI}/v1/stores/${publicCode}/payments`
     );
     return res.data;
   } catch (error) {

apps/nowait-user/src/api/reservation.ts

@@ -14,7 +14,7 @@ interface ServerResponse {
 
 // 모든 주점 정보 가져오기
 export const getAllStores = async () => {
-  const response = await UserApi.get<ServerResponse>("/v1/stores/all-stores", {
+  const response = await UserApi.get<ServerResponse>("/v1/stores", {
     params: {
       page: 0,
       size: 50,
@@ -27,7 +27,7 @@ export const getAllStores = async () => {
 export const getInfiniteAllStores = async (
   pageParam: number
 ): Promise<{ storePageReadResponses: StoreType[]; hasNext: boolean }> => {
-  const response = await UserApi.get<ServerResponse>("/v1/stores/all-stores", {
+  const response = await UserApi.get<ServerResponse>("/v1/stores", {
     params: {
       page: pageParam,
       size: 5,
@@ -52,20 +52,20 @@ export const createReservation = async (
   payload: { partySize: number }
 ) => {
   const res = await UserApi.post(
-    `/reservations/create/redis/${storeId}`,
+    `v1/users/me/waitings/${storeId}`,
     payload
   );
   return res.data;
 };
 
 export const getMyReservations = async () => {
-  const res = await UserApi.get("/reservations/my/waitings");
+  const res = await UserApi.get("/v1/users/me/waitings");
   return res.data;
 };
 
 // 북마크 조회
 export const getBookmark = async (): Promise<BookmarkResponse> => {
-  const res = await UserApi.get("/bookmarks");
+  const res = await UserApi.get("/v1/users/me/bookmarks");
   return res.data;
 };
 
@@ -74,14 +74,14 @@ export const createBookmark = async (
   storeId: number | undefined,
   signal: AbortSignal
 ) => {
-  await UserApi.post(`/bookmarks/${storeId}`, null, { signal });
+  await UserApi.post(`/v1/users/me/bookmarks/${storeId}`, null, { signal });
 };
 
 // 북마크 삭제
 export const deleteBookmark = async (
   storeId: number | undefined,
   signal: AbortSignal
 ) => {
-  const res = await UserApi.delete(`/bookmarks/${storeId}`, { signal });
+  const res = await UserApi.delete(`/v1/users/me/bookmarks/${storeId}`, { signal });
   return res.data;
 };

apps/nowait-user/src/hooks/useInfiniteStores.ts

@@ -45,7 +45,7 @@ const fetchStores = async ({
   try {
     // UserApi 사용으로 헤더 설정 자동화 (인터셉터에서 최신 토큰 처리)
     const response = await UserApi.get<ServerResponse>(
-      "/v1/stores/all-stores",
+      "/v1/stores",
       {
         params: {
           page: pageParam,

apps/nowait-user/src/hooks/useMyWaitingList.ts

@@ -29,7 +29,7 @@ interface MyWaitingResponse {
 const fetchMyWaitingList = async (): Promise<MyWaitingStore[]> => {
   try {
     const response = await UserApi.get<MyWaitingResponse>(
-      "/reservations/my/waitings"
+      "/v1/users/me/waitings"
     );
 
     console.log("내 대기 목록 서버 응답:", response.data);

apps/nowait-user/src/hooks/useWaitingStores.ts

@@ -26,7 +26,7 @@ const fetchWaitingStores = async (
 ): Promise<WaitingStore[]> => {
   try {
     const response = await UserApi.get<WaitingStoresResponse>(
-      "/v1/stores/waiting-list",
+      "/v1/stores/waiting-count",
       {
         params: {
           order,