feat: 메뉴 api 연결

src/App.tsx

@@ -18,8 +18,9 @@ import GuestCreatePage from "@/pages/main/guest/create/GuestCreatePage";
 import GuestPage from "@/pages/main/guest/GuestPage";
 import MainDevicePage from "@/pages/main/owner/devices/MainDevicePage";
 import MainInfoPage from "@/pages/main/owner/info/MainInfoPage";
-import MenuDetailPage from "@/pages/main/owner/menus/[menuId]/MenuDetailPage";
+import MenuDetailPage from "@/pages/main/owner/menus/[menuId]/[categoryId]/MenuDetailPage";
 import MainMenuCategoryPage from "@/pages/main/owner/menus/category/MainMenuCategoryPage";
+import MenuCreatePage from "@/pages/main/owner/menus/create/MenuCreatePage";
 import MainMenuPage from "@/pages/main/owner/menus/MainMenuPage";
 import MainSettingsPage from "@/pages/main/owner/settings/MainSettingsPage";
 import PrivateRouteGuard from "@/pages/main/PrivateRouteGuard";
@@ -57,7 +58,8 @@ const router = createBrowserRouter(
           <Route path="/devices" element={<MainDevicePage />} />
           <Route path="/menus" element={<MainMenuPage />} />
           <Route path="/menus/category" element={<MainMenuCategoryPage />} />
-          <Route path="/menus/:menuId" element={<MenuDetailPage />} />
+          <Route path="/menus/create" element={<MenuCreatePage />} />
+          <Route path="/menus/:menuId/:categoryId" element={<MenuDetailPage />} />
           <Route path="/settings" element={<MainSettingsPage />} />
         </Route>
         <Route path="/guest/application" element={<GuestApplicationPage />} />

src/api/categories/keys.ts

@@ -0,0 +1,6 @@
+const CATEGORY = "CATEGORY";
+
+export const CATEGORY_KEY = {
+  category: () => [CATEGORY],
+  categories: () => [CATEGORY, "list"],
+};

src/api/categories/mutations.ts

@@ -0,0 +1,31 @@
+import { mutationOptions } from '@tanstack/react-query';
+import { instance } from '@/api';
+import type { MoveRequest } from '@/types/api';
+import type { Category } from '@/types/domain/menu';
+
+export const categoryMutations = {
+  createCategory: () => mutationOptions({
+    mutationFn: async ({ storeId, data }: { storeId: string; data: Pick<Category, 'name'> }) => {
+      const response = await instance.post(`/stores/${storeId}/categories`, data);
+      return response.data;
+    },
+  }),
+  updateCategory: () => mutationOptions({
+    mutationFn: async ({storeId, categoryId, data}: {storeId: string; categoryId: string; data: Pick<Category, 'name'> }) => {
+      const response = await instance.put(`/stores/${storeId}/categories/${categoryId}`, data);
+      return response.data;
+    },
+  }),
+  deleteCategory: () => mutationOptions({
+    mutationFn: async ({storeId, categoryId}: {storeId: string; categoryId: string}) => {
+      const response = await instance.delete(`/stores/${storeId}/categories/${categoryId}`);
+      return response.data;
+    },
+  }),
+  moveCategories: () => mutationOptions({
+    mutationFn: async ({ storeId, sourceId, targetId, where }: { storeId: string; } & MoveRequest) => {
+      const response = await instance.post(`/stores/${storeId}/categories/${sourceId}/move/${targetId}`, { where });
+      return response.data;
+    },
+  }),
+};

src/api/categories/queries.ts

@@ -0,0 +1,17 @@
+import { queryOptions } from '@tanstack/react-query';
+import { instance } from '@/api';
+import { CATEGORY_KEY } from '@/api/categories/keys';
+import type { Category } from '@/types/domain/menu';
+
+export const categoryQueries = {
+  getCategories: ({ storeId }: { storeId: string }) =>
+    queryOptions<{ categories: Category[] }, Error, Category[]>({
+      queryKey: CATEGORY_KEY.category(),
+      queryFn: async () => {
+        const response = await instance.get(`/stores/${storeId}/categories`);
+        return response.data;
+      },
+      enabled: !!storeId,
+      select: data => data?.categories
+    }),
+};

src/api/menus/keys.ts

@@ -0,0 +1,7 @@
+const MENU = "MENU";
+
+export const MENUS_KEY = {
+  menu: [MENU],
+  menus: (categoryId: string) => [MENU, categoryId],
+  menuDetail: (menuId: string) => [MENU, "detail", menuId],
+};

src/api/menus/mutations.ts

@@ -0,0 +1,61 @@
+import { mutationOptions } from '@tanstack/react-query';
+import { instance } from '@/api';
+import type { MoveRequest, PropsWithStoreId } from '@/types/api';
+import type { MenuDetail, MenuOptionGroup } from '@/types/domain/menu';
+
+type MenuDetailPayload = Omit<MenuDetail, 'menuId' | 'image' | 'menuOptionGroups'> & {menuOptionGroups: Omit<MenuOptionGroup, 'menuOptionGroupId'>[]};
+
+export const menuMutations = {
+  createMenu: () => mutationOptions({
+    mutationFn: async ({ storeId, categoryId, data }: PropsWithStoreId<{ categoryId: string; data: { file: File, request: MenuDetailPayload; } }>) => {
+      const formData = new FormData();
+      formData.append("file", data.file);
+      formData.append("request", JSON.stringify(data.request));
+
+      const response = await instance.post(`/stores/${storeId}/categories/${categoryId}/menus`, formData, {
+        headers: {
+          "Content-Type": "multipart/form-data",
+        },
+      });
+      return response.data;
+    },
+  }),
+  updateMenu: () => mutationOptions({
+    mutationFn: async ({ storeId, menuId, data }: PropsWithStoreId<{ menuId: string; data: MenuDetailPayload; }>) => {
+      const response = await instance.put(`/stores/${storeId}/menus/${menuId}`, data);
+      return response.data;
+    },
+  }),
+  updateMenuWithImage: () => mutationOptions({
+    mutationFn: async ({ storeId, menuId, data }: PropsWithStoreId<{ menuId: string; data: {file: File, request: MenuDetailPayload; } }>) => {
+      const formData = new FormData();
+      formData.append("file", data.file);
+      formData.append("request", JSON.stringify(data.request));
+
+      const response = await instance.put(`/stores/${storeId}/menus/${menuId}/with-image`, data, {
+        headers: {
+          "Content-Type": "multipart/form-data",
+        },
+      });
+      return response.data;
+    },
+  }),
+  deleteMenu: () => mutationOptions({
+    mutationFn: async ({ storeId, menuId, categoryId }: PropsWithStoreId<{ menuId: string; categoryId: string }>) => {
+      const response = await instance.delete(`/stores/${storeId}/categories/${categoryId}/menus/${menuId}`);
+      return response.data;
+    },
+  }),
+  multiDeleteMenus: () => mutationOptions({
+    mutationFn: async ({ storeId, data }: PropsWithStoreId<{ data: { menuIds: string[]} }>) => {
+      const response = await instance.delete(`/stores/${storeId}/menus/delete`, { data });
+      return response.data;
+    },
+  }),
+  moveMenus: () => mutationOptions({
+    mutationFn: async ({ storeId, sourceId, targetId, where }: PropsWithStoreId<MoveRequest>) => {
+      const response = await instance.post(`/stores/${storeId}/menus/${sourceId}/move/${targetId}`, { where });
+      return response.data;
+    },
+  }),
+};

src/api/menus/queries.ts

@@ -0,0 +1,36 @@
+import { queryOptions } from "@tanstack/react-query";
+import { instance } from "@/api";
+import { MENUS_KEY } from "@/api/menus/keys";
+import type { Menu, MenuDetail } from "@/types/domain/menu";
+
+export const menuQueries = {
+  getMenus: ({ storeId, categoryId }: { storeId: string; categoryId: string }) =>
+    queryOptions<{ menus: Menu[] }, Error, Menu[]>({
+      queryKey: MENUS_KEY.menus(categoryId),
+      queryFn: async () => {
+        const response = await instance.get(`/stores/${storeId}/categories/${categoryId}/menus`);
+        return response.data;
+      },
+      enabled: !!storeId && !!categoryId && categoryId !== "all",
+      select: (data) => data?.menus,
+    }),
+  getMenuDetail: ({
+    storeId,
+    menuId,
+    categoryId,
+  }: {
+    storeId: string;
+    menuId: string;
+    categoryId: string;
+  }) =>
+    queryOptions<MenuDetail>({
+      queryKey: MENUS_KEY.menuDetail(menuId),
+      queryFn: async () => {
+        const response = await instance.get(
+          `/stores/${storeId}/categories/${categoryId}/menus/${menuId}`
+        );
+        return response.data;
+      },
+      enabled: !!storeId && !!menuId && !!categoryId,
+    }),
+};