[Feat] 회의실 예약 api 연동

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/constants/meetingRoomsType.ts

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