Feat: 등록 확인 페이지 비즈니스 코드 작성

Upjuyanolja · Jan 22, 2024 · 6577b9e · 6577b9e
1 parent 6bd9230
commit 6577b9e
Show file tree

Hide file tree

Showing 17 changed files with 411 additions and 109 deletions.
diff --git a/src/components/init/ButtonContainer.tsx b/src/components/init/ButtonContainer.tsx
@@ -8,18 +8,23 @@ import {
 import { TextBox } from '@components/text-box';
 import { useState } from 'react';
 import { ROUTES } from '@/constants/routes';
+import { useSetRecoilState } from 'recoil';
+import { roomPrevButtonState } from '@stores/init/atoms';
 
 export const ButtonContainer = ({
   buttonStyle,
   isValid,
 }: ButtonContainerProps) => {
   const navigate = useNavigate();
+  const setIsClickPrev = useSetRecoilState(roomPrevButtonState);
 
   const handlePreviousClick = () => {
     if (window.location.pathname === ROUTES.INIT_ACCOMMODATION_REGISTRATION)
-      navigate(ROUTES.INIT);
-    else if (window.location.pathname === ROUTES.INIT_ROOM_REGISTRATION)
+      navigate(-1);
+    else if (window.location.pathname === ROUTES.INIT_ROOM_REGISTRATION) {
+      setIsClickPrev(true);
       navigate(ROUTES.INIT_ACCOMMODATION_REGISTRATION);
+    }
   };
 
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -67,10 +72,6 @@ export const ButtonContainer = ({
     });
   };
 
-  /*
-  StyledButton에 disabled를 임의로 true로 변경했습니다
-  추후 {!isValid} 로 바꿔주세요!
-   */
   return (
     <StyledWrapper $buttonStyle={buttonStyle}>
       {buttonStyle === 'navigate' && (
@@ -109,6 +110,16 @@ export const ButtonContainer = ({
           수정하기
         </StyledButton>
       )}
+      {buttonStyle === 'addRoom' && (
+        <StyledButton
+          type="primary"
+          size="large"
+          disabled={!isValid}
+          htmlType="submit"
+        >
+          추가하기
+        </StyledButton>
+      )}
       <Modal
         open={isModalOpen}
         onOk={handleModalOk}

diff --git a/src/components/init/CheckBoxContainer.tsx b/src/components/init/CheckBoxContainer.tsx
@@ -9,8 +9,12 @@ import {
   checkedAccommodationOptions,
   checkedRoomOptions,
 } from '@stores/init/atoms';
-import { Options, RoomOptions } from './init-accommodation-registration/type';
+import {
+  AccommodationOptions,
+  RoomOptions,
+} from './init-accommodation-registration/type';
 import { useEffect } from 'react';
+import { ROUTES } from '@/constants/routes';
 
 export const CheckBoxContainer = ({
   options,
@@ -25,9 +29,19 @@ export const CheckBoxContainer = ({
 
   useEffect(() => {
     if (defaultValue) {
-      setSelectedInitRoomOptions(defaultValue);
+      if (
+        window.location.pathname === ROUTES.INIT_ROOM_REGISTRATION ||
+        window.location.pathname === ROUTES.ROOM_UPDATE
+      ) {
+        setSelectedInitRoomOptions(defaultValue as RoomOptions);
+      } else if (
+        window.location.pathname === ROUTES.INIT_ACCOMMODATION_REGISTRATION
+      ) {
+        setSelectedAccommodationOptions(defaultValue as AccommodationOptions);
+      }
     }
   }, [defaultValue]);
+
   const handleCheckboxChange = (event: CheckboxChangeEvent) => {
     const checkedOption = event.target.value;
 
@@ -61,7 +75,9 @@ export const CheckBoxContainer = ({
               onChange={handleCheckboxChange}
               checked={
                 header === '숙소'
-                  ? selectedAccommodationOptions[english as keyof Options]
+                  ? selectedAccommodationOptions[
+                      english as keyof AccommodationOptions
+                    ]
                   : selectedInitRoomOptions[english as keyof RoomOptions]
               }
             >

diff --git a/src/components/init/ImageUploadContainer.tsx b/src/components/init/ImageUploadContainer.tsx
@@ -180,7 +180,6 @@ const StyledImageContainer = styled.div<StyledImageContainerProps>`
       width: 100%;
       height: 100%;
       object-fit: cover;
-      cursor: pointer;
 
       &:hover {
         opacity: 80%;

diff --git a/src/components/init/init-accommodation-registration/AccommodationCategory.tsx b/src/components/init/init-accommodation-registration/AccommodationCategory.tsx
@@ -14,11 +14,19 @@ import { FaCheck } from 'react-icons/fa';
 import { colors } from '@/constants/colors';
 import { RadioButtonCustomContainer } from './RadioButtonCustomContainer';
 import { Form, Radio } from 'antd';
-import { FormInstance } from 'antd/es/form/Form';
-
-export const AccommodationCategory = ({ form }: { form: FormInstance }) => {
+import { userInputValueState } from '@stores/init/atoms';
+import { useRecoilValue } from 'recoil';
+import { AccommodationCategoryProps } from '../type';
+
+export const AccommodationCategory = ({
+  form,
+  defaultValue,
+  isClickedPrevButton,
+  updatedAccommodationInfo,
+}: AccommodationCategoryProps) => {
   const [clickedCategory, setClickedCategory] =
     useState<AccommodationCategoryType>(null);
+  const userInputValue = useRecoilValue(userInputValueState);
 
   const handleButtonClick = (category: AccommodationCategoryType) => {
     if (clickedCategory !== category) {
@@ -43,6 +51,37 @@ export const AccommodationCategory = ({ form }: { form: FormInstance }) => {
     form.setFieldValue('accommodation-category', clickedCategory);
   }, [clickedCategory, form]);
 
+  useEffect(() => {
+    const checkedType = userInputValue[0].type;
+    if (
+      userInputValue[0].isAccommodationEdit ||
+      isClickedPrevButton ||
+      updatedAccommodationInfo
+    ) {
+      switch (checkedType) {
+        case 'HOTEL':
+        case 'RESORT':
+        case 'TOURIST_HOTEL':
+        case 'CONDO':
+        case 'RESIDENCE':
+          setClickedCategory('HOTEL/RESORT');
+          break;
+        case 'MOTEL':
+          setClickedCategory('MOTEL');
+          break;
+        case 'PENSION_POOL_VILLA':
+          setClickedCategory('PENSION_POOL_VILLA');
+          break;
+        case 'GUEST_HOUSE':
+        case 'HANOK':
+          setClickedCategory('GUEST_HOUSE');
+          break;
+        default:
+          setClickedCategory(null);
+      }
+    }
+  }, []);
+
   return (
     <StyledInputWrapper>
       <TextBox typography="h4" fontWeight={700} style={{ marginBottom: '8px' }}>
@@ -138,6 +177,9 @@ export const AccommodationCategory = ({ form }: { form: FormInstance }) => {
           options={hotelResortDetailCategoryMapping}
           label="상세 유형을 선택해 주세요."
           icon={<FaCheck size={15} color={colors.primary} />}
+          defaultValue={defaultValue}
+          isClickedPrevButton={isClickedPrevButton}
+          updatedAccommodationInfo={updatedAccommodationInfo}
         />
       )}
       {clickedCategory === 'GUEST_HOUSE' && (
@@ -146,6 +188,9 @@ export const AccommodationCategory = ({ form }: { form: FormInstance }) => {
           options={guestHouseDetailCategoryMapping}
           label="상세 유형을 선택해 주세요."
           icon={<FaCheck size={15} color={colors.primary} />}
+          defaultValue={defaultValue}
+          isClickedPrevButton={isClickedPrevButton}
+          updatedAccommodationInfo={updatedAccommodationInfo}
         />
       )}
     </StyledInputWrapper>

diff --git a/src/components/init/init-accommodation-registration/RadioButtonCustomContainer.tsx b/src/components/init/init-accommodation-registration/RadioButtonCustomContainer.tsx
@@ -10,6 +10,9 @@ export const RadioButtonCustomContainer = ({
   options,
   icon,
   form,
+  defaultValue,
+  isClickedPrevButton,
+  updatedAccommodationInfo,
 }: AccommodationDetailCategoryProps) => {
   const [value, setValue] = useState('');
 
@@ -22,6 +25,12 @@ export const RadioButtonCustomContainer = ({
     '호텔' in options
       ? form.setFieldValue('accommodation-hotel-category', '')
       : form.setFieldValue('accommodation-guest-category', '');
+
+    if (defaultValue || isClickedPrevButton || updatedAccommodationInfo) {
+      '호텔' in options
+        ? form.setFieldValue('accommodation-hotel-category', defaultValue)
+        : form.setFieldValue('accommodation-guest-category', defaultValue);
+    }
   }, []);
 
   return (

diff --git a/src/components/init/init-accommodation-registration/type.ts b/src/components/init/init-accommodation-registration/type.ts
@@ -14,6 +14,19 @@ export type AccommodationDetailCategoryProps = {
   label: string;
   icon?: ReactElement<IconBaseProps>;
   form: FormInstance;
+  defaultValue:
+    | 'HOTEL'
+    | 'RESORT'
+    | 'TOURIST_HOTEL'
+    | 'CONDO'
+    | 'RESIDENCE'
+    | 'MOTEL'
+    | 'PENSION_POOL_VILLA'
+    | 'GUEST_HOUSE'
+    | 'HANOK'
+    | undefined;
+  isClickedPrevButton: boolean;
+  updatedAccommodationInfo: boolean;
 };
 
 export type AddressFormat = {
@@ -29,7 +42,7 @@ export type Image = {
   url: string;
 };
 
-export type Options = {
+export type AccommodationOptions = {
   cooking: boolean;
   parking: boolean;
   pickup: boolean;
@@ -64,6 +77,23 @@ export type defaultRoom = {
   images: Image[] | undefined;
   options: RoomOptions | undefined;
 };
+
+export type defaultAccommodation = {
+  images: Image[] | undefined;
+  options: AccommodationOptions | undefined;
+  type:
+    | 'HOTEL'
+    | 'RESORT'
+    | 'TOURIST_HOTEL'
+    | 'CONDO'
+    | 'RESIDENCE'
+    | 'MOTEL'
+    | 'PENSION_POOL_VILLA'
+    | 'GUEST_HOUSE'
+    | 'HANOK'
+    | undefined;
+};
+
 export type onFinishValues = {
   'room-name': string;
   price: string;
@@ -82,7 +112,8 @@ export type UserInputValue = {
   description: string;
   type: string;
   images: Image[];
-  options: Options;
+  options: AccommodationOptions;
   rooms: Room[];
   editRoomIndex?: number | undefined;
+  isAccommodationEdit?: boolean;
 };
diff --git a/src/components/init/init-info-confirmation/AccommodationInfo.tsx b/src/components/init/init-info-confirmation/AccommodationInfo.tsx
@@ -5,12 +5,9 @@ import styled from 'styled-components';
 import { EditOutlined } from '@ant-design/icons';
 import { CustomButton } from './CustomButton';
 import { ImageCarousel } from './ImageCarousel';
-import { Options } from '../init-accommodation-registration/type';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
-import {
-  accommodationEditState,
-  userInputValueState,
-} from '@stores/init/atoms';
+import { AccommodationOptions } from '../init-accommodation-registration/type';
+import { useRecoilState } from 'recoil';
+import { userInputValueState } from '@stores/init/atoms';
 import { useNavigate } from 'react-router-dom';
 import { ROUTES } from '@/constants/routes';
 
@@ -39,17 +36,19 @@ export const AccommodationInfo = () => {
     seminar: '세미나실',
   };
 
-  const userInputValue = useRecoilValue(userInputValueState);
+  const [userInputValue, setUserInputValue] =
+    useRecoilState(userInputValueState);
   const accommodationData = userInputValue[0];
-  const setIsEdit = useSetRecoilState(accommodationEditState);
   const navigate = useNavigate();
 
   const getAccommodationOptionsKorean = (accommodationData: {
-    options: Options;
+    options: AccommodationOptions;
   }): string[] => {
     const selectedOptions = Object.keys(accommodationData.options)
       .filter(
-        (option) => accommodationData.options[option as keyof Options] === true,
+        (option) =>
+          accommodationData.options[option as keyof AccommodationOptions] ===
+          true,
       )
       .map(
         (selectedOption) =>
@@ -61,8 +60,8 @@ export const AccommodationInfo = () => {
     return selectedOptions;
   };
 
-  const handleEditButton = () => {
-    setIsEdit(true);
+  const handleAccommodationEdit = () => {
+    setUserInputValue([{ ...userInputValue[0], isAccommodationEdit: true }]);
     navigate(ROUTES.INIT_ACCOMMODATION_REGISTRATION);
   };
 
@@ -82,7 +81,7 @@ export const AccommodationInfo = () => {
               <CustomButton
                 text="수정"
                 icon={<EditOutlined />}
-                onClick={handleEditButton}
+                onClick={handleAccommodationEdit}
               />
             </StyledTextHeadWrapper>
             <List itemLayout="vertical">

diff --git a/src/components/init/init-info-confirmation/RoomInfo.tsx b/src/components/init/init-info-confirmation/RoomInfo.tsx
@@ -4,19 +4,25 @@ import styled from 'styled-components';
 import { RoomItem } from './RoomItem';
 import { useNavigate } from 'react-router-dom';
 import { ROUTES } from '@/constants/routes';
+import { useSetRecoilState } from 'recoil';
+import { addRoomState } from '@stores/init/atoms';
 
 export const RoomInfo = () => {
   const navigate = useNavigate();
+  const setIsAddRoom = useSetRecoilState(addRoomState);
+
+  const handleAddButton = () => {
+    setIsAddRoom(true);
+    navigate(ROUTES.INIT_ROOM_REGISTRATION);
+  };
+
   return (
     <StyledWrapper>
       <StyledHeadContainer>
         <TextBox typography="h4" fontWeight={700}>
           객실 정보
         </TextBox>
-        <StyledButton
-          type="primary"
-          onClick={() => navigate(ROUTES.INIT_ROOM_REGISTRATION)}
-        >
+        <StyledButton type="primary" onClick={handleAddButton}>
           + 객실추가
         </StyledButton>
       </StyledHeadContainer>

diff --git a/src/components/init/init-info-confirmation/RoomItem.tsx b/src/components/init/init-info-confirmation/RoomItem.tsx
@@ -15,6 +15,7 @@ import {
 } from '@stores/init/atoms';
 import { useNavigate } from 'react-router-dom';
 import { useEffect } from 'react';
+import { ROUTES } from '@/constants/routes';
 
 export const RoomItem = () => {
   const [userInputValue, setUserInputValue] =
@@ -78,7 +79,7 @@ export const RoomItem = () => {
 
   const roomEdit = (index: number) => {
     setUserInputValue([{ ...userInputValue[0], editRoomIndex: index }]);
-    navigate('/init/room-registration');
+    navigate(ROUTES.INIT_ROOM_REGISTRATION);
   };
 
   return (