Style: 객실 수정하기 페이지 퍼블리싱/관리하기 API 연결 (#168)

Co-authored-by: 89882 <[email protected]>
Upjuyanolja · Jan 19, 2024 · 9fb01a4 · 9fb01a4
1 parent 3397847
commit 9fb01a4
Show file tree

Hide file tree

Showing 17 changed files with 550 additions and 89 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -19,7 +19,7 @@ import { CouponRegistration } from './pages/coupon-registration';
 import { Main } from './pages/main';
 import Room from './pages/room-management';
 import RoomRegistration from './pages/room-registration';
-import { RoomUpdate } from './pages/room-update';
+import RoomUpdate from './pages/room-update';
 import { RootLayout } from './layout';
 import './App.less';
 import { RoomLayout } from '@components/room/room-layout';
@@ -90,10 +90,12 @@ function App() {
               element={<RoomRegistration />}
             />
           </Route>
-          <Route
-            path={`/:accommodationId${ROUTES.ROOM_UPDATE}`}
-            element={<RoomUpdate />}
-          />
+          <Route element={<RoomLayout />}>
+            <Route
+              path={`/:accommodationId${ROUTES.ROOM_UPDATE}`}
+              element={<RoomUpdate />}
+            />
+          </Route>
           <Route path={ROUTES.USER_GUIDE} element={<UserGuide />} />
         </Route>
       </Routes>

diff --git a/src/api/room/index.ts b/src/api/room/index.ts
@@ -1,12 +1,11 @@
 import { Response } from '@/types/api';
 import { instance } from '..';
 import {
-  RoomListData,
+  RoomListResponseData,
   RoomData,
   RoomPostResponseData,
   AccommodationData,
 } from './type';
-import { useParams } from 'react-router-dom';
 
 export const ROOM_API = {
   addRoom: (data: RoomData, accommodationId: string) =>
@@ -16,10 +15,10 @@ export const ROOM_API = {
         data,
       },
     ),
-  //   getRoom: (params: RoomAddParams) =>
-  //     instance.get<Response<null>>('/api/rooms/list/{accommodationId}?pageSize={pageSize}&pageNum={pageNum}', {
-  //       data: params,
-  //     }),
+  getRoomList: (accommodationId: string) =>
+    instance.get<Response<RoomListResponseData>>(
+      `/api/rooms/list/${accommodationId}?pageSize={pageSize}&pageNum={pageNum}`,
+    ),
   //   editRoom: (params: RoomEditParams) =>
   //     instance.patch<Response<null>>('/api/rooms/{roomId}', params),
 };
diff --git a/src/api/room/type.ts b/src/api/room/type.ts
@@ -1,4 +1,19 @@
-export type RoomListData = {
+export type onFinishValues = {
+  'room-name': string;
+  price: string;
+  defaultCapacity: number;
+  maxCapacity: number;
+  checkInTime: moment.Moment;
+  checkOutTime: moment.Moment;
+  count: number;
+};
+
+export type RoomListResponseData = {
+  pageNum: number;
+  pageSize: number;
+  totalPages: number;
+  totalElements: number;
+  isLast: boolean;
   rooms: RoomData[];
 };
 

diff --git a/src/assets/data/roomListData.json b/src/assets/data/roomListData.json
@@ -0,0 +1,121 @@
+{
+  "message": "성공적으로 객실 목록을 조회 했습니다.",
+  "data": {
+    "pageNum": 1,
+    "pageSize": 5,
+    "totalPages": 2,
+    "totalElements": 8,
+    "isLast": false,
+    "rooms": [
+      {
+        "id": 286,
+        "name": "봄",
+        "basePrice": 100000,
+        "discountPrice": 80000,
+        "defaultCapacity": 2,
+        "maxCapacity": 6,
+        "checkInTime": "15:00",
+        "checkOutTime": "12:00",
+        "status": "SELLING",
+        "count": 5,
+        "images": [
+          {
+            "url": "pension_room2_2.webp"
+          },
+          {
+            "url": "pension_room2_1.webp"
+          }
+        ],
+        "coupons": [
+          {
+            "id": 56,
+            "name": "10% 할인",
+            "price": 90000
+          },
+          {
+            "id": 57,
+            "name": "2000원 할인",
+            "price": 80000
+          }
+        ],
+        "options": {
+          "airCondition": true,
+          "tv": true,
+          "internet": true
+        }
+      },
+      {
+        "id": 286,
+        "name": "봄",
+        "basePrice": 100000,
+        "discountPrice": 80000,
+        "defaultCapacity": 2,
+        "maxCapacity": 6,
+        "checkInTime": "15:00",
+        "checkOutTime": "12:00",
+        "count": 5,
+        "images": [
+          {
+            "fileName": "pension_room2_2.webp"
+          },
+          {
+            "fileName": "pension_room2_1.webp"
+          }
+        ],
+        "coupons": [
+          {
+            "id": 56,
+            "name": "10% 할인",
+            "price": 90000
+          },
+          {
+            "id": 57,
+            "name": "2000원 할인",
+            "price": 80000
+          }
+        ],
+        "options": {
+          "airCondition": true,
+          "tv": true,
+          "internet": true
+        }
+      },
+      {
+        "id": 286,
+        "name": "봄",
+        "basePrice": 100000,
+        "discountPrice": 80000,
+        "defaultCapacity": 2,
+        "maxCapacity": 6,
+        "checkInTime": "15:00",
+        "checkOutTime": "12:00",
+        "count": 5,
+        "images": [
+          {
+            "fileName": "pension_room2_2.webp"
+          },
+          {
+            "fileName": "pension_room2_1.webp"
+          }
+        ],
+        "coupons": [
+          {
+            "id": 56,
+            "name": "10% 할인",
+            "price": 90000
+          },
+          {
+            "id": 57,
+            "name": "2000원 할인",
+            "price": 80000
+          }
+        ],
+        "options": {
+          "airCondition": true,
+          "tv": true,
+          "internet": true
+        }
+      }
+    ]
+  }
+}
diff --git a/src/components/init/ButtonContainer.tsx b/src/components/init/ButtonContainer.tsx
@@ -14,6 +14,7 @@ export const ButtonContainer = ({
   isValid,
 }: ButtonContainerProps) => {
   const navigate = useNavigate();
+
   const handlePreviousClick = () => {
     if (window.location.pathname === ROUTES.INIT_ACCOMMODATION_REGISTRATION)
       navigate(ROUTES.INIT);

diff --git a/src/components/room/room-buttons/index.tsx b/src/components/room/room-buttons/index.tsx
@@ -17,39 +17,26 @@ export const ButtonContainer = ({
 
   return (
     <StyledWrapper $buttonStyle={buttonStyle}>
-      {buttonStyle === 'register' && (
+      {
         <>
           <StyledButton type="primary" ghost onClick={handlePreviousClick}>
             이전
           </StyledButton>
-          <StyledButton
-            type="primary"
-            disabled={!isValid}
-            data-testid="room-next-button"
-            htmlType="submit"
-          >
-            {buttonStyle === 'register' ? '등록 요청' : '수정 요청'}
+          <StyledButton type="primary" disabled={!isValid} htmlType="submit">
+            {buttonStyle === 'register' ? '등록 요청' : '수정 완료'}
           </StyledButton>
         </>
-      )}
+      }
     </StyledWrapper>
   );
 };
 
 export const StyledWrapper = styled.div<ButtonContainerStyledWrapperProps>`
   width: 100%;
 
-  display: ${(props) =>
-    props.$buttonStyle === 'register' || props.$buttonStyle === 'edit'
-      ? 'grid'
-      : 'block'};
-  grid-template-columns: ${(props) =>
-    props.$buttonStyle === 'register'
-      ? '1fr 2.5fr'
-      : props.$buttonStyle === 'edit'
-        ? 'auto'
-        : 'none'};
-  gap: ${(props) => (props.$buttonStyle === 'register' ? '10px' : '0')};
+  display: grid;
+  grid-template-columns: 1fr 2.5fr;
+  gap: 10px;
 `;
 
 export const StyledButton = styled(Button)`

diff --git a/src/components/room/room-buttons/type.ts b/src/components/room/room-buttons/type.ts
@@ -1,8 +1,8 @@
 export type ButtonContainerProps = {
-  buttonStyle: 'register' | 'edit';
+  buttonStyle: 'register' | 'update';
   isValid: boolean;
 };
 
 export type ButtonContainerStyledWrapperProps = {
-  $buttonStyle: 'register' | 'edit';
+  $buttonStyle: 'register' | 'update';
 };
diff --git a/src/components/room/room-layout/index.tsx b/src/components/room/room-layout/index.tsx
@@ -20,12 +20,16 @@ export const RoomLayout = () => {
     },
   };
 
-  const currentRoute = Object.keys(routeConfig).find(
-    (route) => location.pathname === route,
+  const currentRouteKey = Object.keys(routeConfig).find((routeKey) =>
+    location.pathname.includes(routeKey),
   );
 
-  const { pageTitle = '객실 추가 등록' } =
-    routeConfig[currentRoute as keyof typeof routeConfig] || {};
+  const currentRouteConfig =
+    routeConfig[currentRouteKey as keyof typeof routeConfig];
+
+  const pageTitle = currentRouteConfig
+    ? currentRouteConfig.pageTitle
+    : '객실 추가 등록';
 
   return (
     <StyledFullContainer

diff --git a/src/components/room/status-container/index.tsx b/src/components/room/status-container/index.tsx
@@ -0,0 +1,74 @@
+import { Switch, Form } from 'antd';
+import { useState } from 'react';
+import { styled } from 'styled-components';
+import { TextBox } from '@components/text-box';
+
+export const StatusContainer = () => {
+  const [isOnSale, setIsOnSale] = useState(true);
+
+  const handleInputChange = (isOnSale: boolean) => {
+    setIsOnSale(!isOnSale);
+    return;
+  };
+
+  return (
+    <StyledInputWrapper>
+      <StyledDesc>
+        <TextBox typography="h4" fontWeight={700}>
+          객실 상태
+        </TextBox>
+      </StyledDesc>
+      <StyledRow>
+        <Form.Item name="status">
+          <StyledSwitch
+            defaultChecked={isOnSale}
+            onChange={handleInputChange}
+          />
+        </Form.Item>
+        <StyledTextBoxWrapper>
+          <TextBox typography="body1" color="black900" fontWeight="normal">
+            {!isOnSale ? '판매 중' : '판매 중지'}
+          </TextBox>
+        </StyledTextBoxWrapper>
+      </StyledRow>
+    </StyledInputWrapper>
+  );
+};
+
+const StyledInputWrapper = styled.div`
+  margin-bottom: 35px;
+
+  .ant-form-item-control {
+    width: 100%;
+  }
+
+  .ant-input {
+    font-size: 16px;
+  }
+`;
+
+const StyledTextBoxWrapper = styled.div`
+  margin-bottom: 24px;
+  margin-right: 12px;
+
+  &:last-child {
+    margin-right: 0;
+  }
+`;
+
+const StyledRow = styled.div`
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const StyledDesc = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+`;
+
+const StyledSwitch = styled(Switch)`
+  margin-right: 7px;
+`;
diff --git a/src/hooks/room/useAddRoom.ts b/src/hooks/room/useAddRoom.ts
diff --git a/src/layout.tsx b/src/layout.tsx
@@ -7,16 +7,20 @@ import { colors } from '@/constants/colors';
 export const RootLayout = () => {
   const location = useLocation();
   const currentRoute = location.pathname;
+  const isRoomRegistrationRoute = currentRoute.includes(
+    ROUTES.ROOM_REGISTRATION,
+  );
+  const isRoomUpdateRoute = currentRoute.includes(ROUTES.ROOM_UPDATE);
+
+  const shouldApplyGrayBackground =
+    isRoomRegistrationRoute || isRoomUpdateRoute;
 
   return (
     <Layout>
       <Layout.Header style={{ height: '56px' }}>Header</Layout.Header>
       <Layout
         style={{
-          backgroundColor:
-            currentRoute === ROUTES.ROOM_REGISTRATION
-              ? colors.midGray
-              : 'white',
+          backgroundColor: shouldApplyGrayBackground ? colors.midGray : 'white',
         }}
       >
         <Layout.Sider width="256" theme={'light'}>