Feat: 객실 관리하기 로직 구현 및 수정하기 API (#181)

Co-authored-by: 89882 <[email protected]>

package.json

@@ -22,6 +22,7 @@
     "react-dom": "^18.2.0",
     "react-icons": "^4.12.0",
     "react-responsive": "^9.0.2",
+    "react-infinite-scroll-component": "^6.1.0",
     "react-router-dom": "^6.21.1",
     "react-scripts": "5.0.1",
     "recoil": "^0.7.7",

src/App.tsx

@@ -96,7 +96,7 @@ function App() {
           </Route>
           <Route element={<RoomLayout />}>
             <Route
-              path={`/:accommodationId${ROUTES.ROOM_UPDATE}`}
+              path={`/:accommodationId/:roomId${ROUTES.ROOM_UPDATE}`}
               element={<RoomUpdate />}
             />
           </Route>

src/api/index.tsx

@@ -56,17 +56,6 @@ instance.interceptors.request.use(
 instance.interceptors.response.use(
   (response) => response,
   (error) => {
-    if (
-      error.response?.status === HTTP_STATUS_CODE.UNAUTHORIZED &&
-      window.location.pathname !== ROUTES.SIGNIN &&
-      window.location.pathname !== ROUTES.SIGNIN_AGREEMENT &&
-      window.location.pathname !== ROUTES.SIGNUP &&
-      window.location.pathname !== ROUTES.SIGNUP_SUCCESS
-    ) {
-      handleUnauthorized();
-    } else if (error.response?.status === HTTP_STATUS_CODE.NOTFOUND) {
-      console.log('여기 404에러 핸들링 필요해요~');
-    }
     return Promise.reject(error);
   },
 );

src/api/room/index.ts

@@ -4,7 +4,9 @@ import {
   RoomListResponseData,
   RoomData,
   RoomPostResponseData,
-  AccommodationData,
+  RoomDeleteResponseData,
+  RoomUpdateData,
+  RoomUpdateResponseData,
 } from './type';
 
 export const ROOM_API = {
@@ -15,10 +17,16 @@ export const ROOM_API = {
         data,
       },
     ),
-  getRoomList: (accommodationId: string) =>
-    instance.get<Response<RoomListResponseData>>(
-      `/api/rooms/list/${accommodationId}?pageSize={pageSize}&pageNum={pageNum}`,
+  getRoomList: (accommodationId: string, pageSize: number, pageNum: number) =>
+    instance.get<RoomListResponseData>(
+      `/api/rooms/list/${accommodationId}?pageSize=${pageSize}&pageNum=${pageNum}`,
     ),
-  //   editRoom: (params: RoomEditParams) =>
-  //     instance.patch<Response<null>>('/api/rooms/{roomId}', params),
+  deleteRoom: (roomId: number) =>
+    instance.delete<Response<RoomDeleteResponseData>>(`/api/rooms/${roomId}`),
+  getRoomDetail: (roomId: string) =>
+    instance.get<RoomDeleteResponseData>(`/api/rooms/${roomId}`),
+  updateRoom: (data: RoomUpdateData, roomId: string) =>
+    instance.put<Response<RoomUpdateResponseData>>(`/api/rooms/${roomId}`, {
+      data,
+    }),
 };

src/api/room/type.ts

@@ -14,7 +14,7 @@ export type RoomListResponseData = {
   totalPages: number;
   totalElements: number;
   isLast: boolean;
-  rooms: RoomData[];
+  rooms: RoomCardData[];
 };
 
 export type Options = {
@@ -27,6 +27,32 @@ export type Image = {
   url: string;
 };
 
+export type ImageUrls = {
+  urls: string[];
+};
+
+export type Coupons = {
+  id: number;
+  name: string;
+  price: number;
+};
+
+export type RoomCardData = {
+  id: number;
+  name: string;
+  price: number | null;
+  discountPrice: number | null;
+  defaultCapacity: number | null;
+  maxCapacity: number | null;
+  checkInTime: string;
+  checkOutTime: string;
+  amount: number | null;
+  images: Image[];
+  option: Options;
+  coupons: Coupons[];
+  status: string;
+};
+
 export type RoomData = {
   name: string;
   price: number | null;
@@ -53,6 +79,44 @@ export type RoomPostResponseData = {
   options: Options;
 };
 
-export type AccommodationData = {
-  accommodationId: number;
+export type RoomDeleteResponseData = {
+  id: number;
+  name: string;
+  price: number;
+  defaultCapacity: number | null;
+  maxCapacity: number | null;
+  checkInTime: string;
+  checkOutTime: string;
+  soldOut: boolean;
+  amount: number;
+  images: Image[];
+  option: Options;
+};
+
+export type RoomUpdateData = {
+  name: string;
+  price: number | null;
+  defaultCapacity: number | null;
+  maxCapacity: number | null;
+  checkInTime: string;
+  checkOutTime: string;
+  status: string;
+  amount: number | null;
+  addImages: Image[];
+  removeImages: Image[];
+  options: Options;
+};
+
+export type RoomUpdateResponseData = {
+  id: number;
+  name: string;
+  price: number | null;
+  defaultCapacity: number | null;
+  maxCapacity: number | null;
+  checkInTime: string;
+  checkOutTime: string;
+  status: string;
+  amount: number | null;
+  images: Image[];
+  options: Options;
 };

src/assets/data/roomData.json

@@ -8,10 +8,10 @@
   "amount": 5,
   "images": [
     {
-      "url": "https://images/pension_room2_2.webp"
+      "url": "http://tong.visitkorea.or.kr/cms/resource/77/2876777_image2_1.jpg"
     },
     {
-      "url": "https://images/pension_room2_1.webp"
+      "url": "http://tong.visitkorea.or.kr/cms/resource/77/2876777_image2_1.jpg"
     }
   ],
   "option": {

src/assets/data/roomDeleteData.json

@@ -0,0 +1,27 @@
+{
+  "message": "성공적으로 객실을 삭제했습니다.",
+  "data": {
+    "id": 289,
+    "name": "봄",
+    "price": 100000,
+    "defaultCapacity": 2,
+    "maxCapacity": 6,
+    "checkInTime": "15:00",
+    "checkOutTime": "12:00",
+    "soldOut": false,
+    "count": 5,
+    "images": [
+      {
+        "url": "https://images/pension_room2_2.webp"
+      },
+      {
+        "url": "https://images/pension_room2_1.webp"
+      }
+    ],
+    "options": {
+      "airCondition": true,
+      "tv": true,
+      "internet": true
+    }
+  }
+}

src/assets/data/roomDetailData.json

@@ -0,0 +1,29 @@
+{
+  "message": "성공적으로 객실을 조회했습니다.",
+  "data": {
+    "id": 1,
+    "name": "봄",
+    "price": 100000,
+    "defaultCapacity": 2,
+    "maxCapacity": 6,
+    "checkInTime": "15:00",
+    "checkOutTime": "12:00",
+    "soldOut": false,
+    "count": 5,
+    "images": [
+      {
+        "roomImageId": 1,
+        "url": "http://tong.visitkorea.or.kr/cms/resource/77/2876777_image2_1.jpg"
+      },
+      {
+        "roomImageId": 2,
+        "url": "http://tong.visitkorea.or.kr/cms/resource/77/2876777_image2_1.jpg"
+      }
+    ],
+    "options": {
+      "airCondition": true,
+      "tv": true,
+      "internet": true
+    }
+  }
+}