[Feat] 회의실 예약 api 연동 (#158)

* Feat: reservation api 경로 변경 및 API ENDPOINTS 적용

* Chore: reservation api rename(복수)

* Feat: items api 구현

* Feat: meeting main에서 회의실, 해당 날짜 예약 현황 useQuery 작성

* Feat: ScheduleTable api 연동

* Feat: ScheduleTableDesktop api 연동

* Feat: ScheduleTableMobile api 연동

* Feat: ScheduleRow api 연동 및 time api에 맞게 수정

* Feat: Tooltip props children으로 변경

* Feat: ScheduleItem type 수정(api에 맞게)

* Feat: DesktopReservationSheet interface 수정(api에 맞게)

* Feat: MobileReservationSheet interface 수정(api에 맞게)

* Feat: ReservationForm interface 수정 (api에 맞게)

* Chore: 날짜 문자열 처리를 위한 date-fns install

* Feat: parseISO 적용

* Feat: 현재 userId와 schedule의 userId 비교하여 표현(css 및 사이드바)

* Feat: 예약되어 있는 회의 클릭 시 내용 표시

* Chore: query data, loading 이름 변경

* Fix: lint error(import 순서)

* Feat: scheduletype 수정 및 room _id props로 전달

* Feat: ReservationForm rooms query로 데이터 연결

* Feat: getAllUser API 함수 구현

* Feat: getAllUser query로 데이터 연동

* Feat: 전체 사용자 Dropdown 선택 가능 기능 구현

* Fix: Dropdown storybook state type error

* Feat: MultiSelectDropdown wrapper className props 추가

* Style: Profile className 추가(전역으로 h-auto 설정되는 문제 해결을 위해)

* Feat: response에 맞게 데이터 조정 및 불필요한 코드 삭제

* Feat: createReservationMutation 구현 및 Form을 통해 예약되는 기능 구현

* Chore: createReservation interface 및 data 수정

* Remove: Modal notify remove(mutation에 존재하므로 삭제)

* Fix: 09:00 이후의 시간대만 표시되는 문제 해결(parseISO에서 Date 사용)

* Feat: 시작 시간에서 30분 뒤의 종료시간 자동 설정, error 처리

* Feat: ReservationForm 제출 데이터 state type 설정

* Feat: 예약 시 이미 예약된 스케줄을 침범하는 경우 error 표시

* Feat: ScheduleItem 대신 Slot에서 예약된 스케줄도 표시하도록 변경

* Feat: 예약 내용을 수정할updateReservation 함수 생성

* Feat: 예약된 스케줄을 클릭할 경우 버튼을 수정하기로 표시

* Fix: reservationId 전달되지 않던 error 수정

* Feat: deleteReservation 구현

* Feat: ReservationModal title, content 받을 수 있게 수정

* Feat: ReservationSheetContent 컴포넌트 생성으로 인한 로직 분리

* Feat: invalidateQueries를 통한 데이터 최신화(생성, 수정, 삭제 시)

* Feat: ReservationForm 삭제하기 버튼 및 기능 구현

* Test: 예약 시간들 text로 확인해보기(임시)

* Fix: type  및 자동 수정

* Feat: useRoomsData hooks 구현

* Feat: useMeetingsData hook 구현

* Feat: meetingroomstype 상수화 및 formatDate 유틸함수 생성

* Refactor: MeetingRoomSchedule 리팩토링

* Remove: query hook delete

* Feat: getRoomSchedules 생성 및 컴포넌트 적용

* Feat: RoomName children 수정

* Feat: CurrentTimeLabel 컴포넌트 리팩토링

* Feat: useSlotReservations hook 구현

* Feat: timeToMinutes util 함수 생성

* Refactor: ScheduleRow 컴포넌트 리팩토링

* Refactor: ReservationSheetContent 리팩토링

* Feat: reservationForm 내부 컴포넌트 리팩토링

* Feat: Form Type, constants, 유틸 함수 생성

* Refactor: Form, sheet 리팩토링

* Fix: 시간 파싱 에러로 인한 getRoomSchedule 삭제

* Fix: eslint error 해결

* Chore: pnpm install

* Fix: build error 해결(import)

* Feat: TimeText skeleton 제작

* Feat: RoomName skeleton 제작

* Feat: Slot Skeleton 제작 및 디자인에 맞게 구현

* Feat: skeleton 적용

* Fix: eslint error

* Fix: Mobile Date 수정

* Style: TimeIndicator 수정

---------

Co-authored-by: 김보경 <rlaqhrud6263@naver.com>

Author: dudwns0213

apps/web/api/items.ts

@@ -1,7 +1,31 @@
 import { API_ENDPOINTS } from "@repo/constants";
-import { type ISeat } from "@repo/types";
+import {
+  type TBaseItem,
+  type TItemType,
+  type IRoom,
+  type ISeat,
+  type IEquipment,
+  type MessageResponse,
+} from "@repo/types";
 import { axiosRequester } from "@/lib/axios";
 
+// 특정 타입의 아이템 조회
+interface GetAllItemsParams {
+  itemType: TItemType;
+}
+
+export const getAllItems = async (params: GetAllItemsParams): Promise<TBaseItem[]> => {
+  const { itemType } = params;
+  const { data } = await axiosRequester<TBaseItem[]>({
+    options: {
+      method: "GET",
+      url: API_ENDPOINTS.ITEMS.GET_ALL(itemType),
+    },
+  });
+
+  return data;
+};
+
 /**
  * 모든 좌석 데이터를 가져옵니다.
  * @returns 모든 좌석 데이터를 포함하는 Promise.
@@ -17,6 +41,59 @@ export const getAllSeats = async (): Promise<ISeat[]> => {
   return data;
 };
 
+// 아이템 생성
+interface CreateItemParams {
+  itemType: TItemType;
+  itemData: Partial<IRoom | ISeat | IEquipment>;
+}
+
+export const createItem = async (params: CreateItemParams): Promise<TBaseItem> => {
+  const { itemType, itemData } = params;
+  const { data } = await axiosRequester<TBaseItem>({
+    options: {
+      method: "POST",
+      url: API_ENDPOINTS.ITEMS.CREATE_ITEM,
+      data: {
+        itemType,
+        ...itemData,
+      },
+    },
+  });
+
+  return data;
+};
+
+// 아이템 업데이트
+interface UpdateItemParams {
+  itemId: string;
+  itemData: Partial<IRoom | ISeat | IEquipment>;
+}
+
+export const updateItem = async (params: UpdateItemParams): Promise<TBaseItem> => {
+  const { itemId, itemData } = params;
+  const { data } = await axiosRequester<TBaseItem>({
+    options: {
+      method: "PATCH",
+      url: API_ENDPOINTS.ITEMS.UPDATE_ITEM(itemId),
+      data: itemData,
+    },
+  });
+
+  return data;
+};
+
+// 아이템 삭제
+export const deleteItem = async (itemId: string): Promise<MessageResponse> => {
+  const { data } = await axiosRequester<MessageResponse>({
+    options: {
+      method: "DELETE",
+      url: API_ENDPOINTS.ITEMS.DELETE_ITEM(itemId),
+    },
+  });
+
+  return data;
+};
+
 /**
  * 특정 아이템 데이터를 수정합니다.
  * @returns 수정 결과 메시지를 포함하는 Promise.
@@ -29,5 +106,6 @@ export const patchItem = async (itemId: string, formData: FormData): Promise<str
       data: formData,
     },
   });
+
   return data;
 };

apps/web/api/reservations.ts

@@ -0,0 +1,117 @@
+import { API_ENDPOINTS } from "@repo/constants";
+import { type IReservation, type TReservationStatus } from "@repo/types/src/reservationType";
+import { axiosRequester } from "@/lib/axios";
+
+// 특정 유저의 오늘 날짜 예약 전체 조회
+interface GetUserReservationsParams {
+  userId: string;
+}
+
+export const getUserReservations = async (params: GetUserReservationsParams): Promise<IReservation[]> => {
+  const { userId } = params;
+  const { data } = await axiosRequester<IReservation[]>({
+    options: {
+      method: "GET",
+      url: API_ENDPOINTS.RESERVATION.GET_USER_RESERVATIONS(userId),
+    },
+  });
+
+  return data;
+};
+
+// 아이템 타입 및 날짜에 대한 예약 조회
+interface GetReservationsByTypeAndDateParams {
+  itemType: "room" | "seat" | "equipment";
+  date: string;
+  status?: TReservationStatus;
+}
+
+export const getReservationsByTypeAndDate = async (
+  params: GetReservationsByTypeAndDateParams,
+): Promise<IReservation[]> => {
+  const { itemType, date, status } = params;
+  const { data } = await axiosRequester<IReservation[]>({
+    options: {
+      method: "GET",
+      url: API_ENDPOINTS.RESERVATION.GET_RESERVATIONS_BY_TYPE_AND_DATE(itemType, date),
+      params: {
+        status,
+      },
+    },
+  });
+
+  return data;
+};
+
+// 예약 생성
+export interface CreateReservationParams {
+  itemId: string;
+  savedReservation: IReservation;
+}
+
+export interface CreateReservationRequest {
+  userId: string;
+  itemType: "room";
+  startAt: string;
+  endAt: string;
+  status: "reserved";
+  notes: string;
+  attendees: string[];
+}
+
+export interface CreateReservationResponse {
+  message: string;
+  savedReservation: IReservation;
+}
+
+export const createReservation = async (
+  itemId: string,
+  reservationData: CreateReservationRequest,
+): Promise<IReservation> => {
+  const { data } = await axiosRequester<CreateReservationResponse>({
+    options: {
+      method: "POST",
+      url: API_ENDPOINTS.RESERVATION.CREATE_RESERVATION(itemId),
+      data: reservationData,
+    },
+  });
+
+  return data.savedReservation;
+};
+
+export interface UpdateReservationRequest {
+  startAt?: string;
+  endAt?: string;
+  status?: TReservationStatus;
+  notes?: string;
+  attendees?: string[];
+}
+
+export interface UpdateReservationResponse {
+  message: string;
+  updatedReservation: IReservation;
+}
+
+export const updateReservation = async (
+  reservationId: string,
+  reservationData: UpdateReservationRequest,
+): Promise<IReservation> => {
+  const { data } = await axiosRequester<UpdateReservationResponse>({
+    options: {
+      method: "PATCH",
+      url: API_ENDPOINTS.RESERVATION.UPDATE_RESERVATION(reservationId),
+      data: reservationData,
+    },
+  });
+
+  return data.updatedReservation;
+};
+
+export const deleteReservation = async (reservationId: string): Promise<void> => {
+  await axiosRequester({
+    options: {
+      method: "DELETE",
+      url: API_ENDPOINTS.RESERVATION.DELETE_RESERVATION(reservationId),
+    },
+  });
+};

apps/web/app/_hooks/useCurrentTimePosition.ts

@@ -0,0 +1,54 @@
+import { useEffect, useState } from "react";
+
+interface UseCurrentTimePositionProps {
+  slotWidth: number;
+  startHour: number;
+  endHour: number;
+}
+
+interface UseCurrentTimePositionReturn {
+  currentPosition: number | null;
+  currentTime: string;
+}
+
+export function useCurrentTimePosition({
+  slotWidth,
+  startHour,
+  endHour,
+}: UseCurrentTimePositionProps): UseCurrentTimePositionReturn {
+  const [currentPosition, setCurrentPosition] = useState<number | null>(null);
+  const [currentTime, setCurrentTime] = useState<string>("");
+
+  useEffect(() => {
+    const updatePosition = (): void => {
+      const now = new Date();
+      const currentMinutes = now.getHours() * 60 + now.getMinutes();
+      const totalMinutes = (endHour - startHour) * 60;
+
+      if (currentMinutes < startHour * 60 || currentMinutes >= endHour * 60) {
+        setCurrentPosition(null);
+        setCurrentTime("");
+        return;
+      }
+
+      const relativeMinutes = currentMinutes - startHour * 60;
+      const scheduleWidth = slotWidth * (endHour - startHour) * 2; // Assuming 30-minute slots
+      const position = (relativeMinutes / totalMinutes) * scheduleWidth;
+
+      setCurrentPosition(position);
+
+      const hours = String(now.getHours()).padStart(2, "0");
+      const minutes = String(now.getMinutes()).padStart(2, "0");
+      setCurrentTime(`${hours}:${minutes}`);
+    };
+
+    updatePosition();
+    const interval = setInterval(updatePosition, 60000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [slotWidth, startHour, endHour]);
+
+  return { currentPosition, currentTime };
+}

apps/web/app/_hooks/useSlotReservations.ts

@@ -0,0 +1,40 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+import { useMemo } from "react";
+import { type IReservation } from "@repo/types";
+import { timeToMinutes } from "../utils/timeToMinutes";
+
+/**
+ * 예약 데이터를 슬롯 인덱스에 매핑하는 커스텀 훅
+ * @param schedules 예약 데이터 배열
+ * @param startHour 시작 시간
+ * @param endHour 종료 시간
+ * @param minutesPerSlot 슬롯당 분 단위
+ * @returns 슬롯별 예약 상태 배열
+ */
+export const useSlotReservations = (
+  schedules: IReservation[],
+  startHour: number,
+  endHour: number,
+  minutesPerSlot: number,
+): (IReservation | null)[] => {
+  return useMemo(() => {
+    const totalSlots = (endHour - startHour) * 2; // 30분 단위
+    const slotReservations: (IReservation | null)[] = Array(totalSlots).fill(null);
+
+    schedules.forEach((schedule) => {
+      const startMinutes = timeToMinutes(schedule.startAt) - startHour * 60;
+      const endMinutes = timeToMinutes(schedule.endAt) - startHour * 60;
+
+      const startIndex = Math.floor(startMinutes / minutesPerSlot);
+      const endIndex = Math.ceil(endMinutes / minutesPerSlot);
+
+      for (let i = startIndex; i < endIndex; i++) {
+        if (i >= 0 && i < totalSlots) {
+          slotReservations[i] = schedule;
+        }
+      }
+    });
+
+    return slotReservations;
+  }, [schedules, startHour, endHour, minutesPerSlot]);
+};

apps/web/app/api/reservation.ts

@@ -0,0 +1 @@
+export const MEETING_ROOMS_TYPE = "room";