[Feat] 회의실 관리 페이지 (#162)

* FE-Refactor: 예약정보 호출 시 아이템정보 populate 명령어 수정

* FE-Feat: dropdown, modal 컴포넌트로 분리

* FE-Feat: 회의실 하위 아이템 컴포넌트 UI 구현

* FE-Feat: 아이템 생성 버튼 , 아코디언 펼치기용 caret 버튼 추가

* FE-Feat: 회의실 추가 아이템 등록 드로워 추가

* FE-Feat: 회의실 추가 폼 제작

* FE-Feat: 사이드패널 listItem 뎁스로 이동, 추가/수정 시 동일한 폼 재사용할 수 있도록 버튼 click시 동작 수정

* FE-Feat: 사이드패널, 모달 안내 텍스트 조건부 렌더링 추가

* FE-Feat: 아이템 등록/수정 폼 react-hook-form 적용

* FE-Feat: 아이템 정보 입력 폼 submit 함수 및 핸들러 추가

* FE-Refactor: 리스트 아이템 펼치기 애니메이션 개선

* FE-Feat: 카테고리 별 아이템 데이터 페칭 부분 작성

* FE-Feat: room 아이템 생성 api함수 작성

* FE-Feat: 카테고리 추가 side panel 기본 ui

* FE-Feat: submit 핸들러 버튼 추가

* FE-Feat: form input 기본값 설정 useEffect 추가

* FE-Feat: 사이드패널 버튼 하단으로 위치 수정

* FE-Refactor: zustand 적용, 불필요한 상태, 사이드이펙트 제거, sidePanel 한개로 관리

* FE-Refactor: item 등록/수정 form 초기화 로직 추가

* FE-Refactor: Room 수정/추가 form 오류 해결 밑 zustand활용 초기값 설정

* FE-Refactor: 함수명 중복, 함수명 수정

* FE-Refactor: categories, rooms 데이터 로딩부분에 react-query 적용

* FE-Refactor: editItemForm의 post요청 mutate로 데이터 업데이트 구현

* FE-Feat: 회의실 삭제 구현

* FE-Feat: 카테고리 수정/삭제 구현

* FE-Refactor: form 초기화 안되던 부분 reset, useEffect로 수정

* FE-Refactor: 불필요한 컴포넌트 삭제

* FE-Refactor: 변경된 toast 트리거 적용

* FE-Refactor: 회의실 관리자 페이지 헤더 컴포넌트명 변경

* FE-Refactor: 사이드패널 조건부 렌더링 최적화

* FE-Refactor: 카테고리 수정 팝오버 prop naming 수정

* FE-Refactor: 카테고리 추가 폼 에러처리 개선

* FE-Refactor: 회의실 카테고리 목록 쿼리 에러 얼리리턴, 로딩상태 및 예외처리 개선

* FE-Refactor: 카테고리별 회의실 필터링 중복로직 삭제

* FE-Refactor: 회의실 수정 사이드바 동작 개선, 불필요 동작 삭제 및 내부 데이터만 변경되도록 변경

* FE-Fix: patchCategory 함수 반환 타입 수정,  API와 불일치 해소

* FE-Refactor: EditItemForm과 Store의 api 요청 핸들러 함수 에러 처리 방식 개선, response의 에러메세지 활용하도록 변경

* FE-Refactor: MeetingsStore의 handleDeleteItem핸들러에도 로딩상테 추가

* FE-Refactor: 카테고리 수정 input 값 상태 초기화 수정, 카테고리명 수정 시 깜빡임 개선

* FE-Refactor: 카테고리명 수정 input 빈값 또는 공백 입력하는 경우 예외처처리

* FE-Refactor: AddCategoryForm 에러처리 서버에서 받는 에러메세지로 수정

* FE-Refactor: AddCategoryForm 불필요한 비동기처리 삭제, 쿼리 키 상수화

* FE-Refactor: 카테고리 추가 mutation 구조분해 할당으로 함수명 addCategory로  수정

* FE-Refactor: 에러 메세지 String으로 변환

* FE-Refactor: 카테고리 수정, 삭제 mutation 함수명 구조분해할당으로 작성

* FE-Refactor: CategoryListItem의 카테고리 수정/삭제 뮤테이션 함수 불필요한 비동기처리 삭제

* FE-Refactor: EditItemForm 불필요한 에러 Throw 삭제

* FE-Refactor: 카테고리 선택 핸들러로 분리

* FE-Refactor: Form 컴포넌트에 불필요한 name 속성 삭제

* FE-Refactor: 엔드포인트 상수값에 누락된 파라미터 추가

* FE-Refactor: 불필요한 비동기 삭제, mutation 함수명 구조분해 할당으로 작성

* FE-Fix: items, meetings 폴더 admin/rooms로 경로 수정

Author: AdamSeungheonShin

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 />
+    </>
   );
 }