예약 관련 수정, ReservationDetail 추가

apis/index.ts

@@ -57,7 +57,14 @@ export const deleteRequestWithCookie: typeof deleteRequest = async (url, init) =
 
 const checkError = (response: Response) => {
   if (!response.ok) {
-    throw new Error(`네트워크 에러
-status: ${response.status}`);
+    throw new NetworkError(response.status);
   }
 };
+
+export class NetworkError extends Error {
+  statusCode: number;
+  constructor(statusCode: number) {
+    super(`네트워크 에러\nstatus: ${statusCode}`);
+    this.statusCode = statusCode;
+  }
+}

apis/reservation.ts

@@ -13,12 +13,20 @@ export const postReservation = async (body: ReservationPostBody) => {
   });
 };
 
-export const getWeeklyReservation = (params: {
+export const getWeeklyReservation = async (params: {
   roomId: number;
   year: number;
   month: number;
   day: number;
-}) => getRequestWithCookie(`${reservationPath}/week`, params) as Promise<ReservationPreview[]>;
+}) => {
+  const jsessionId = cookies().get('JSESSIONID');
+  return (await getRequest(`${reservationPath}/week`, params, {
+    credentials: 'include',
+    headers: {
+      Cookie: `JSESSIONID=${jsessionId?.value}`,
+    },
+  })) as ReservationPreview[];
+};
 
 export const getReservation = async (id: number) =>
   getRequestWithCookie(`${reservationPath}/${id}`) as Promise<Reservation[]>;
@@ -27,7 +35,7 @@ export const deleteSingleReservation = async (id: number) => {
   await deleteRequest(`${reservationPath}/${id}`);
 };
 
-export const deleteAllRecurringReservation = async (id: number) => {
+export const deleteAllRecurringReservation = async (id: string) => {
   await deleteRequest(`${reservationPath}/recurring/${id}`);
 };
 

app/[locale]/layout.tsx

@@ -49,7 +49,7 @@ export default async function RootLayout({
         <ContextProviders>
           <NextIntlClientProvider locale={params.locale} messages={messages}>
             <Navbar />
-            <div className="flex flex-col flex-1 font-noto font-noto-demi">
+            <div className="flex flex-col flex-1 font-noto-demi">
               <Header />
               <div className="min-w-fit flex flex-col flex-1 mt-[9.25rem] overflow-auto">
                 <main className="flex-1">{children}</main>

components/layout/header/Header.tsx

@@ -39,8 +39,6 @@ function HeaderRight() {
 
   const langButtonText = isEnglish ? '한국어' : 'english';
 
-  console.log(user);
-
   return (
     <div className="flex flex-col gap-4 items-end flex-grow">
       <div className="font-yoon text-xs font-normal flex gap-3">

components/reservations/calendar/CalendarColumn.tsx

@@ -78,6 +78,8 @@ const CalendarCell = ({ reservation }: { reservation: ReservationPreview }) => {
     endTime.getHours(),
   )}:${padZero(endTime.getMinutes())}`;
 
+  console.log(reservation.id);
+
   return (
     <ReservationDetailModalButton
       className={`absolute bg-[rgba(64,64,64,0.3)]  left-0 right-0 flex flex-col items-center border border-neutral-400`}

components/reservations/calendar/CalendarContent.tsx

@@ -54,7 +54,6 @@ const getNextSevenDays = (date: Date) => {
 };
 
 const isSameDay = (date1: Date, date2: Date) => {
-  console.log(date1, date2);
   return (
     date1.getFullYear() === date2.getFullYear() &&
     date1.getMonth() === date2.getMonth() &&

components/reservations/modals/AddReservationModal.tsx

@@ -3,6 +3,8 @@
 import Link from 'next-intl/link';
 import { FormEventHandler, ReactNode, useReducer, useState } from 'react';
 
+import { NetworkError } from '@/apis';
+
 import { postReservation } from '@/apis/reservation';
 
 import Dropdown from '@/components/common/Dropdown';
@@ -20,21 +22,31 @@ export default function AddReservationModal({ roomId }: { roomId: number }) {
   const [privacyChecked, togglePrivacyChecked] = useReducer((x) => !x, false);
   const [body, setBody] = useState<ReservationPostBody>(getDefaultBodyValue(roomId));
 
-  const canSubmit =
-    privacyChecked && body.title !== '' && body.contactEmail !== '' && body.professor !== '';
-
   const handleSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
     e.preventDefault();
+
+    const canSubmit =
+      privacyChecked && body.title !== '' && body.contactEmail !== '' && body.professor !== '';
+
     if (!canSubmit) {
       infoToast('모든 필수 정보를 입력해주세요');
       return;
     }
     try {
       await postReservation(body);
-      closeModal();
+      window.location.reload();
     } catch (e) {
-      if (e instanceof Error) errorToast(e.message);
-      else errorToast('알 수 없는 에러');
+      if (e instanceof NetworkError) {
+        if (e.statusCode === 409) {
+          errorToast('해당 위치에 예약이 존재합니다.');
+        } else {
+          errorToast(e.message);
+        }
+      } else if (e instanceof Error) {
+        errorToast(e.message);
+      } else {
+        errorToast('알 수 없는 에러');
+      }
     }
   };
 
@@ -103,7 +115,7 @@ export default function AddReservationModal({ roomId }: { roomId: number }) {
               contents={Array(14)
                 .fill(0)
                 .map((_, i) => i + 1 + '회')}
-              selectedIndex={body.recurringWeeks}
+              selectedIndex={body.recurringWeeks - 1}
               onClick={(x) => buildBodyValueSetter('recurringWeeks')(x + 1)}
             />
           </InputWithLabel>

components/reservations/modals/ReservationDetailModal.tsx

@@ -1,6 +1,9 @@
 'use client';
 
 import { ButtonHTMLAttributes, DetailedHTMLProps, useState } from 'react';
+import useSWR from 'swr';
+
+import { getRequestWithCookie } from '@/apis';
 
 import { deleteAllRecurringReservation, deleteSingleReservation } from '@/apis/reservation';
 
@@ -13,9 +16,15 @@ import { Reservation } from '@/types/reservation';
 import ModalFrame from '../../modal/ModalFrame';
 import BasicButton from '../BasicButton';
 
-export default function ReservationDetailModal({ reservation }: { reservation: Reservation }) {
+export default function ReservationDetailModal({ reservationId }: { reservationId: number }) {
+  const { data: reservation } = useSWR<Reservation>(
+    `/reservation/${reservationId}`,
+    getRequestWithCookie,
+  );
   const { closeModal } = useModal();
 
+  if (reservation === undefined) return <></>;
+
   const dateStr = new Date(reservation.startTime).toLocaleString('ko-kr', {
     year: '2-digit',
     month: '2-digit',
@@ -47,7 +56,7 @@ export default function ReservationDetailModal({ reservation }: { reservation: R
             <p>이메일: {reservation.contactEmail}</p>
             <p>핸드폰: {reservation.contactPhone}</p>
           </div>
-          <DeleteButtons reservationId={reservation.id} />
+          <DeleteButtons reservationId={reservation.id} recurrenceId={reservation.recurrenceId} />
         </div>
         <span
           className="absolute top-3 right-3 material-symbols-outlined text-base cursor-pointer"
@@ -60,15 +69,21 @@ export default function ReservationDetailModal({ reservation }: { reservation: R
   );
 }
 
-const DeleteButtons = ({ reservationId }: { reservationId: number }) => {
+const DeleteButtons = ({
+  reservationId,
+  recurrenceId,
+}: {
+  reservationId: number;
+  recurrenceId: number;
+}) => {
   const [submitting, setSubmitting] = useState(false);
   const { closeModal } = useModal();
 
   const handleDeleteAll = async () => {
     if (submitting) return;
     setSubmitting(true);
     try {
-      await deleteAllRecurringReservation(reservationId);
+      await deleteAllRecurringReservation(recurrenceId);
       closeModal();
     } catch {
       errorToast('문제가 발생했습니다');
@@ -111,7 +126,7 @@ export const ReservationDetailModalButton = ({
   return (
     <button
       {...props}
-      onClick={() => openModal(<ReservationDetailModal reservation={reservation} />)}
+      onClick={() => openModal(<ReservationDetailModal reservationId={reservationId} />)}
     />
   );
 };