refactor: 예약 완료시 모달 창 끄기

BCSDLab · Apr 8, 2024 · c9d481e · c9d481e
1 parent 1a158d1
commit c9d481e
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 18 deletions.
diff --git a/src/api/reservations/index.ts b/src/api/reservations/index.ts
@@ -1,9 +1,9 @@
 import { accessClient } from 'api';
-import { GetReservationsResponse, Reservations, PostReservationRequest } from 'model/reservations';
+import { GetReservationsResponse, Reservations } from 'model/reservations';
 
 export const getReservations = () => accessClient.get<GetReservationsResponse[]>('/reservations');
 
-export const postReservations = (data: PostReservationRequest) => accessClient.post('/reservations', data);
+export const postReservations = (data: Reservations) => accessClient.post('/reservations', data);
 
 export const deleteReservations = (id: number) => accessClient.delete(`/reservations/${id}`);
 

diff --git a/src/model/reservations.ts b/src/model/reservations.ts
@@ -4,18 +4,18 @@ export interface Reservations {
   detailedReason: string;
   startDateTime: string;
   endDateTime: string;
-  memberName: string;
 }
 
 export interface GetReservationsResponse extends Reservations {
   id: number;
   memberName: string;
 }
 
-export interface PostReservationRequest {
+export interface Reservation {
   memberCount: number;
   reason: string;
   detailedReason: string;
   startDateTime: string;
   endDateTime: string;
+  memberName: string;
 }
diff --git a/src/page/Reservation/view/Month.tsx b/src/page/Reservation/view/Month.tsx
@@ -3,7 +3,7 @@ import {
 } from '@mui/material';
 import { ArrowBackIosNewOutlined, ArrowForwardIosOutlined } from '@mui/icons-material';
 import { useGetReservations } from 'query/reservations';
-import { Reservations } from 'model/reservations';
+import { Reservation } from 'model/reservations';
 import { useEffect, useState } from 'react';
 import * as S from './style';
 // eslint-disable-next-line import/no-cycle
@@ -19,7 +19,7 @@ type Calendar = {
 type Calendars = Calendar[];
 
 export type CalendarContent = {
-  data: Reservations[],
+  data: Reservation[],
   date: number | null,
   today: string | null,
   currentMonth: number,

diff --git a/src/page/Reservation/view/Month/DetailInfomation.tsx b/src/page/Reservation/view/Month/DetailInfomation.tsx
@@ -8,6 +8,7 @@ interface DetailInfomationProps extends Reservations {
   id?: number;
   // eslint-disable-next-line
   passed?: boolean;
+  memberName: string;
 }
 
 export default function DetailInfomation({

diff --git a/src/page/Reservation/view/Month/MonthModal.tsx b/src/page/Reservation/view/Month/MonthModal.tsx
@@ -44,7 +44,7 @@ export default function MonthModal({
 }: ModalContent) {
   const currentDate = new Date().getDate();
   const nowMonth = new Date().getMonth();
-  const { mutate: reservation } = useCreateReservations();
+  const { mutate: reservation, isError } = useCreateReservations();
   const [reserve, setReserve] = useState(initialState);
   const { alignment, handleChange } = useToggleButtonGroup();
   const canReserve = () => {
@@ -194,13 +194,20 @@ export default function MonthModal({
                 </div>
                 <Button
                   variant="outlined"
-                  onClick={() => today && reserve.memberCount >= 1 && reservation({
-                    memberCount: reserve.memberCount,
-                    reason: reserve.reason,
-                    detailedReason: reserve.detailedReason,
-                    startDateTime: `${today.slice(0, 4)}-${today.slice(5, 7)}-${today.slice(8, 10)} ${reserve.startHour}:${reserve.startMinute}`,
-                    endDateTime: `${today.slice(0, 4)}-${today.slice(5, 7)}-${today.slice(8, 10)} ${reserve.endHour}:${reserve.endMinute}`,
-                  })}
+                  onClick={() => {
+                    if (today
+                      && reserve.memberCount >= 1
+                    ) {
+                      reservation({
+                        memberCount: reserve.memberCount,
+                        reason: reserve.reason,
+                        detailedReason: reserve.detailedReason,
+                        startDateTime: `${today.slice(0, 4)}-${today.slice(5, 7)}-${today.slice(8, 10)} ${reserve.startHour}:${reserve.startMinute}`,
+                        endDateTime: `${today.slice(0, 4)}-${today.slice(5, 7)}-${today.slice(8, 10)} ${reserve.endHour}:${reserve.endMinute}`,
+                      });
+                      if (!isError) handleClose();
+                    }
+                  }}
                 >
                   예약
                 </Button>

diff --git a/src/query/reservations.ts b/src/query/reservations.ts
@@ -3,7 +3,7 @@ import {
   deleteReservations, getReservations, postReservations, putReservations, myReservation,
 } from 'api/reservations';
 import { AxiosError } from 'axios';
-import { PostReservationRequest, Reservations } from 'model/reservations';
+import { Reservations } from 'model/reservations';
 import { useSnackBar } from 'ts/useSnackBar';
 
 interface PutReservations {
@@ -23,9 +23,9 @@ export const useCreateReservations = () => {
   const openSnackBar = useSnackBar();
   const queryClient = useQueryClient();
 
-  const { mutate, isSuccess } = useMutation({
+  const { mutate, isSuccess, isError } = useMutation({
     mutationKey: ['postReservations'],
-    mutationFn: (data: PostReservationRequest) => postReservations(data),
+    mutationFn: (data: Reservations) => postReservations(data),
     onSuccess: () => {
       openSnackBar({ type: 'success', message: '예약이 완료되었습니다.' });
       queryClient.invalidateQueries({ queryKey: ['reservations'] });
@@ -37,7 +37,7 @@ export const useCreateReservations = () => {
       }
     },
   });
-  return { mutate, isSuccess };
+  return { mutate, isSuccess, isError };
 };
 
 export const useDeleteReservations = () => {