[Feat] 회의실 관리 페이지

apps/api/src/controllers/reservationControllers.ts

@@ -73,10 +73,7 @@ export const getUserReservations = async (
   })
     .populate("user", "name email")
     .populate("attendees", "name email")
-    .populate({
-      path: "item",
-      select: "name itemType",
-    })
+    .populate("item", "name itemType")
     .sort({ itemType: 1, startAt: 1 });
 
   if (userReservations.length === 0) {

apps/web/api/items.ts

@@ -52,7 +52,7 @@ export const createItem = async (params: CreateItemParams): Promise<TBaseItem> =
   const { data } = await axiosRequester<TBaseItem>({
     options: {
       method: "POST",
-      url: API_ENDPOINTS.ITEMS.CREATE_ITEM,
+      url: API_ENDPOINTS.ITEMS.CREATE_ITEM(itemType),
       data: {
         itemType,
         ...itemData,

apps/web/api/meetings.ts

@@ -0,0 +1,105 @@
+import { API_ENDPOINTS } from "@repo/constants";
+import { type IRoom, type ICategory, type TItemType, type IEquipment } from "@repo/types";
+import { axiosRequester } from "@/lib/axios";
+
+export const getAllCategories = async (): Promise<ICategory[]> => {
+  const { data } = await axiosRequester<ICategory[]>({
+    options: {
+      method: "GET",
+      url: API_ENDPOINTS.CATEGORIES.GET_ALL,
+    },
+  });
+  return data;
+};
+
+export const getAllRooms = async (): Promise<IRoom[]> => {
+  const { data } = await axiosRequester<IRoom[]>({
+    options: {
+      method: "GET",
+      url: API_ENDPOINTS.ITEMS.GET_ALL("room"),
+    },
+  });
+  return data;
+};
+
+export const postNewRoom = async (itemType: TItemType, body: Record<string, string>): Promise<IRoom | IEquipment> => {
+  const { data } = await axiosRequester<IRoom | IEquipment>({
+    options: {
+      method: "POST",
+      url: API_ENDPOINTS.ITEMS.CREATE_ITEM(itemType),
+      headers: {
+        "Content-Type": "application/json",
+      },
+      data: body,
+    },
+  });
+
+  return data;
+};
+
+export const patchRoom = async (itemId: string, body: Record<string, string>): Promise<IRoom | IEquipment> => {
+  const { data } = await axiosRequester<IRoom | IEquipment>({
+    options: {
+      method: "PATCH",
+      url: API_ENDPOINTS.ITEMS.UPDATE_ITEM(itemId),
+      headers: {
+        "Content-Type": "application/json",
+      },
+      data: body,
+    },
+  });
+
+  return data;
+};
+
+export const deleteRoom = async (itemId: string): Promise<string> => {
+  const { data } = await axiosRequester<string>({
+    options: {
+      method: "DELETE",
+      url: API_ENDPOINTS.ITEMS.DELETE_ITEM(itemId),
+    },
+  });
+
+  return data;
+};
+
+export const postNewCategory = async (body: Record<string, string>): Promise<ICategory> => {
+  const { data } = await axiosRequester<ICategory>({
+    options: {
+      method: "POST",
+      url: API_ENDPOINTS.CATEGORIES.CREATE_CATEGORY,
+      headers: {
+        "Content-Type": "application/json",
+      },
+      data: body,
+    },
+  });
+
+  return data;
+};
+
+export const patchCategory = async (categoryId: string, body: Record<string, string>): Promise<ICategory> => {
+  const { data } = await axiosRequester<ICategory>({
+    options: {
+      method: "PATCH",
+      url: API_ENDPOINTS.CATEGORIES.UPDATE_CATEGORY(categoryId),
+      headers: {
+        "Content-Type": "application/json",
+      },
+      data: body,
+    },
+  });
+
+  return data;
+};
+
+export const deleteCategory = async (categoryId: string): Promise<string> => {
+  const { data } = await axiosRequester<string>({
+    options: {
+      method: "DELETE",
+      url: API_ENDPOINTS.CATEGORIES.DELETE_CATEGORY(categoryId),
+    },
+  });
+
+  return data;
+};

apps/web/app/(admin)/rooms/_components/AddCategoryForm.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { Button, Input } from "@ui/index";
+import { useForm } from "react-hook-form";
+import { AxiosError } from "axios";
+import { postNewCategory } from "@/api/meetings";
+import { notify } from "@/app/store/useToastStore";
+import { QUERY_KEYS } from "@/lib/queryKey";
+
+export default function AddCategoryForm(): JSX.Element {
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors, isSubmitting },
+  } = useForm({
+    defaultValues: {
+      name: "",
+    },
+  });
+  const queryClient = useQueryClient();
+
+  const { mutate: addCategory } = useMutation({
+    mutationFn: async (payload: Record<string, string>) => {
+      return await postNewCategory(payload);
+    },
+    onSuccess: () => {
+      notify("success", "카테고리가 추가되었습니다!");
+      void queryClient.invalidateQueries({ queryKey: QUERY_KEYS.CATEGORIES });
+      reset();
+    },
+    onError: (error) => {
+      if (error instanceof AxiosError && error.response) {
+        notify("error", String(error.response.data.message));
+      } else {
+        notify("error", "알 수 없는 오류가 발생했습니다. 다시 시도해주세요.");
+      }
+    },
+  });
+
+  const handleSubmitForm = handleSubmit((data) => {
+    const payload = {
+      ...data,
+      itemType: "room",
+    };
+
+    addCategory(payload);
+  });
+
+  return (
+    <form onSubmit={handleSubmitForm} className="flex h-full flex-col justify-between">
+      <div>
+        <h1 className="my-24">카테고리 추가</h1>
+        <Input
+          placeholder="카테고리명"
+          {...register("name", { required: true })}
+          error={errors.name}
+          disabled={isSubmitting}
+        />
+      </div>
+      <Button variant="Action" type="submit" disabled={isSubmitting} isPending={isSubmitting}>
+        카테고리 추가
+      </Button>
+    </form>
+  );
+}

apps/web/app/(admin)/rooms/_components/AddItemButton.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { PlusIcon } from "@ui/public";
+
+interface AddItemButtonProps {
+  onClick: () => void;
+}
+
+export default function AddItemButton({ onClick }: AddItemButtonProps): JSX.Element {
+  return (
+    <button
+      className="hover:bg-custom-black/5 flex size-32 cursor-pointer justify-center rounded-full transition-colors duration-300 ease-in-out"
+      type="button"
+      onClick={onClick}
+    >
+      <PlusIcon width={20} fill="true" />
+    </button>
+  );
+}

apps/web/app/(admin)/rooms/_components/CategoryEditDropdown.tsx

@@ -0,0 +1,33 @@
+import { Modal } from "@ui/index";
+import Dropdown from "@ui/src/components/common/Dropdown";
+
+interface CategoryEditDropdownProps {
+  isEditing?: boolean;
+  onClickEdit: () => void;
+}
+
+export default function CategoryEditDropdown({ isEditing, onClickEdit }: CategoryEditDropdownProps): JSX.Element {
+  return (
+    <Dropdown
+      selectedValue={isEditing}
+      onSelect={(value: string | boolean) => {
+        if (value === "수정") {
+          onClickEdit();
+        }
+      }}
+      size="sm"
+    >
+      <Dropdown.Toggle iconType="kebab" />
+      <Dropdown.Wrapper className="-left-30 top-56">
+        <Dropdown.Item hoverStyle="purple" value="수정">
+          수정
+        </Dropdown.Item>
+        <Modal.Trigger>
+          <Dropdown.Item hoverStyle="purple" value="삭제">
+            삭제
+          </Dropdown.Item>
+        </Modal.Trigger>
+      </Dropdown.Wrapper>
+    </Dropdown>
+  );
+}

apps/web/app/(admin)/rooms/_components/CategoryList.tsx

@@ -1,9 +1,65 @@
+"use client";
+
+import { useEffect } from "react";
+import { useQuery } from "@tanstack/react-query";
+import EmptyState from "@ui/src/components/common/EmptyState";
+import { getAllCategories, getAllRooms } from "@/api/meetings";
+import LoadingBar from "@/components/common/Skeleton/LoadingBar";
+import { notify } from "@/app/store/useToastStore";
+import useMeetingsStore from "../_store/useMeetingsStore";
+import SidePanel from "./SidePanel";
 import CategoryListItem from "./CategoryListItem";
 
 export default function CategoryList(): JSX.Element {
+  const { categories, setCategories, rooms, setRooms } = useMeetingsStore();
+
+  const {
+    data: fetchedCategories,
+    isLoading: isCategoriesLoading,
+    error: categoriesError,
+  } = useQuery({
+    queryKey: ["categories"],
+    queryFn: getAllCategories,
+  });
+  const {
+    data: fetchedRooms,
+    isLoading: isRoomsLoading,
+    error: roomsError,
+  } = useQuery({ queryKey: ["rooms"], queryFn: getAllRooms });
+
+  useEffect(() => {
+    if (fetchedCategories) {
+      const roomCategories = fetchedCategories.filter((category) => category.itemType === "room");
+      setCategories(roomCategories);
+    }
+  }, [fetchedCategories, setCategories]);
+
+  useEffect(() => {
+    if (fetchedRooms) {
+      setRooms(fetchedRooms);
+    }
+  }, [fetchedRooms, setRooms]);
+
+  if (categoriesError ?? roomsError) {
+    notify("error", "데이터를 불러오는데 실패했습니다.");
+    return <div>데이터를 불러오는데 실패했습니다.</div>;
+  }
+
+  const categoriesWithRooms = categories.map((category) => ({
+    ...category,
+    rooms: rooms.filter((room) => room.category._id === category._id),
+  }));
+
   return (
-    <div>
-      <CategoryListItem />
-    </div>
+    <>
+      {isCategoriesLoading || (isRoomsLoading && <LoadingBar classNames="w-full h-72" />)}
+      {!isCategoriesLoading && categories.length === 0 && (
+        <EmptyState message={{ title: "", description: "등록된 카테고리가 없습니다." }} />
+      )}
+      {categoriesWithRooms.map((category) => {
+        return <CategoryListItem key={category._id} category={category} rooms={category.rooms} />;
+      })}
+      <SidePanel />
+    </>
   );
 }