diff --git a/src/components/init/ButtonContainer.tsx b/src/components/init/ButtonContainer.tsx index 64afe558..34bd13d7 100644 --- 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 ( {buttonStyle === 'navigate' && ( @@ -109,6 +110,16 @@ export const ButtonContainer = ({ 수정하기 )} + {buttonStyle === 'addRoom' && ( + + 추가하기 + + )} { 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 index 6c1b7e05..5b40cffa 100644 --- a/src/components/init/ImageUploadContainer.tsx +++ b/src/components/init/ImageUploadContainer.tsx @@ -180,7 +180,6 @@ const StyledImageContainer = styled.div` 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 index 5fdbdad2..b361e4e8 100644 --- 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(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 ( @@ -138,6 +177,9 @@ export const AccommodationCategory = ({ form }: { form: FormInstance }) => { options={hotelResortDetailCategoryMapping} label="상세 유형을 선택해 주세요." icon={} + defaultValue={defaultValue} + isClickedPrevButton={isClickedPrevButton} + updatedAccommodationInfo={updatedAccommodationInfo} /> )} {clickedCategory === 'GUEST_HOUSE' && ( @@ -146,6 +188,9 @@ export const AccommodationCategory = ({ form }: { form: FormInstance }) => { options={guestHouseDetailCategoryMapping} label="상세 유형을 선택해 주세요." icon={} + defaultValue={defaultValue} + isClickedPrevButton={isClickedPrevButton} + updatedAccommodationInfo={updatedAccommodationInfo} /> )} diff --git a/src/components/init/init-accommodation-registration/RadioButtonCustomContainer.tsx b/src/components/init/init-accommodation-registration/RadioButtonCustomContainer.tsx index bbff0cc8..eb8da99a 100644 --- 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 index fe7ad66f..1c99be93 100644 --- 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; 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 index 55d618a3..c463ddfc 100644 --- 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 = () => { } - onClick={handleEditButton} + onClick={handleAccommodationEdit} /> diff --git a/src/components/init/init-info-confirmation/RoomInfo.tsx b/src/components/init/init-info-confirmation/RoomInfo.tsx index a13da6f4..66a91391 100644 --- 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 ( 객실 정보 - navigate(ROUTES.INIT_ROOM_REGISTRATION)} - > + + 객실추가 diff --git a/src/components/init/init-info-confirmation/RoomItem.tsx b/src/components/init/init-info-confirmation/RoomItem.tsx index 77ecae78..21b826df 100644 --- 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 ( diff --git a/src/components/init/type.ts b/src/components/init/type.ts index 589c8f3a..c52f39d4 100644 --- a/src/components/init/type.ts +++ b/src/components/init/type.ts @@ -1,20 +1,40 @@ import { FormInstance } from 'antd'; -import { RoomOptions } from './init-accommodation-registration/type'; +import { + AccommodationOptions, + RoomOptions, +} from './init-accommodation-registration/type'; import { ImageFile } from '@stores/init/type'; export type ButtonContainerProps = { - buttonStyle: 'navigate' | 'request' | 'edit'; + buttonStyle: 'navigate' | 'request' | 'edit' | 'addRoom'; isValid?: boolean; }; export type ButtonContainerStyledWrapperProps = { - $buttonStyle: 'navigate' | 'request' | 'edit'; + $buttonStyle: 'navigate' | 'request' | 'edit' | 'addRoom'; }; export type CheckBoxContainerProps = { options: { [key: string]: string }; header: string; - defaultValue?: RoomOptions; + defaultValue?: RoomOptions | AccommodationOptions; +}; + +export type AccommodationCategoryProps = { + form: FormInstance; + defaultValue: + | 'HOTEL' + | 'RESORT' + | 'TOURIST_HOTEL' + | 'CONDO' + | 'RESIDENCE' + | 'MOTEL' + | 'PENSION_POOL_VILLA' + | 'GUEST_HOUSE' + | 'HANOK' + | undefined; + isClickedPrevButton: boolean; + updatedAccommodationInfo: boolean; }; export type ImageUploadFileItem = { diff --git a/src/components/layout/init-layout/InitLayout.tsx b/src/components/layout/init-layout/InitLayout.tsx index 533728a2..3f711b7b 100644 --- a/src/components/layout/init-layout/InitLayout.tsx +++ b/src/components/layout/init-layout/InitLayout.tsx @@ -5,6 +5,8 @@ import { Layout } from 'antd'; import { Outlet, useLocation } from 'react-router-dom'; import { styled } from 'styled-components'; import { RouteConfigProps } from './type'; +import couponLogo from '@assets/image/logo.png'; +import { LeftOutlined } from '@ant-design/icons'; export const InitLayout = () => { const location = useLocation(); @@ -31,9 +33,29 @@ export const InitLayout = () => { const { pageName = '숙소 등록하기', pageDesc = '숙소 정보를 알려주세요.' } = routeConfig[currentRoute as keyof typeof routeConfig] || {}; + const kindOfIcon = () => { + if ( + window.location.pathname === ROUTES.INIT || + window.location.pathname === ROUTES.INIT_INFO_CONFIRMATION + ) { + return ; + } else { + return ; + } + }; + return ( - Header + + + + {kindOfIcon()} + + 빨리잡아! 쿠폰센터 + + + + @@ -67,6 +89,29 @@ const StyledHeader = styled(Layout.Header)` top: 0; z-index: 10; width: 100%; + + background-color: ${colors.black100}; + box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1); + + padding: 16px 0; +`; + +const StyledHeaderContent = styled.div` + background-color: ${colors.black100}; + + width: 1024px; + + margin: 0 auto; +`; + +const StyledHeaderTextWrapper = styled.div` + margin-left: 24px; + + display: flex; + gap: 8px; + align-items: center; + + cursor: pointer; `; const StyledHeadContentCotainer = styled.div` @@ -109,3 +154,13 @@ const StyledMainContent = styled(Layout.Content)` padding: 32px 48px; `; + +const StyledImage = styled.img` + width: 26px; + height: 15px; +`; + +const StyledPrevButton = styled(LeftOutlined)` + color: ${colors.primary}; + font-size: '24px'; +`; diff --git a/src/components/room/price-container/index.tsx b/src/components/room/price-container/index.tsx index b7cd810f..77d2eabd 100644 --- a/src/components/room/price-container/index.tsx +++ b/src/components/room/price-container/index.tsx @@ -1,35 +1,33 @@ import { styled } from 'styled-components'; import { Input, Form } from 'antd'; import { FormErrorMessage } from '@components/init/FormErrorMessage'; -import { - PriceContainerProps, - PriceHandleInputChangeProps, - ValidateInputProps, -} from './type'; +import { PriceContainerProps, PriceHandleInputChangeProps } from './type'; import { MAX_PRICE, MIN_PRICE } from '@/constants/room/room-registration'; import { TextBox } from '@components/text-box'; import { useRecoilState } from 'recoil'; import { priceHasError } from '@stores/room/atoms'; +import { useEffect, useState } from 'react'; export const PriceContainer = ({ header, form }: PriceContainerProps) => { const [outOfRangeError, setOutOfRangeError] = useRecoilState(priceHasError); + const [numericValue, setNumericValue] = useState(null); - const validateInput = ({ value }: ValidateInputProps) => { - if (value < MIN_PRICE || value > MAX_PRICE) { + useEffect(() => { + setOutOfRangeError(null); + form.setFieldValue('price', numericValue?.toLocaleString()); + + if (!numericValue) return; + if (numericValue < MIN_PRICE || numericValue > MAX_PRICE) { setOutOfRangeError('10,000~1,000,000까지만 입력 가능합니다.'); - } else { - setOutOfRangeError(null); } - }; + }, [numericValue]); const handleInputChange = ({ event }: PriceHandleInputChangeProps) => { const stringValue = event.target.value; const cleanedStringValue = stringValue.replace(/[^0-9]/g, ''); if (cleanedStringValue.length !== 0) { - const numericValue = Number(cleanedStringValue); - validateInput({ value: numericValue }); - form.setFieldValue('price', numericValue.toLocaleString()); + setNumericValue(Number(cleanedStringValue)); } else { form.setFieldValue('price', ''); } diff --git a/src/components/room/price-container/type.ts b/src/components/room/price-container/type.ts index 007a6e32..80fa68f6 100644 --- a/src/components/room/price-container/type.ts +++ b/src/components/room/price-container/type.ts @@ -9,7 +9,3 @@ export type PriceContainerProps = { export type PriceHandleInputChangeProps = { event: ChangeEvent; }; - -export type ValidateInputProps = { - value: number; -}; diff --git a/src/index.css b/src/index.css index 3ff885ee..ec087523 100644 --- a/src/index.css +++ b/src/index.css @@ -40,9 +40,9 @@ width: 100%; .ant-btn-default { - border: 1px solid #0349e6; + border: 1px solid #0351ff; - color: #0349e6; + color: #0351ff; font-size: 20px; font-weight: 700; @@ -50,7 +50,7 @@ } .ant-btn-primary { - background-color: #0349e6; + background-color: #0351ff; height: 46px; @@ -59,7 +59,7 @@ } .ant-btn-primary:hover { - background-color: #0241cc; + background-color: #0349e6; transition: 0.4s; } } diff --git a/src/pages/init-accommodation-registration/index.tsx b/src/pages/init-accommodation-registration/index.tsx index 00f72462..fc110b88 100644 --- a/src/pages/init-accommodation-registration/index.tsx +++ b/src/pages/init-accommodation-registration/index.tsx @@ -10,18 +10,23 @@ import { ImageUploadContainer } from '@components/init/ImageUploadContainer'; import { NameContainer } from '@components/init/NameContainer'; import { useEffect, useState } from 'react'; import { - accommodationEditState, checkedAccommodationOptions, imageFileState, isUpdatedAccommodationState, + roomPrevButtonState, userInputValueState, } from '@stores/init/atoms'; -import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'; +import { useRecoilState } from 'recoil'; import { ROUTES } from '@/constants/routes'; import { useNavigate } from 'react-router-dom'; import { useImageFile } from '@queries/init'; import { AxiosError } from 'axios'; import { Image } from '@api/room/type'; +import { + UserInputValue, + defaultAccommodation, +} from '@components/init/init-accommodation-registration/type'; +import { AccommodationCategoryProps } from '@components/init/type'; export const InitAccommodationRegistration = () => { const navigate = useNavigate(); @@ -37,12 +42,18 @@ export const InitAccommodationRegistration = () => { checkedAccommodationOptions, ); - const isEdit = useRecoilValue(accommodationEditState); - const [imageFiles, setImageFiles] = useRecoilState(imageFileState); - const setUpdatedAccommodationInfo = useSetRecoilState( - isUpdatedAccommodationState, - ); + const [updatedAccommodationInfo, setUpdatedAccommodationInfo] = + useRecoilState(isUpdatedAccommodationState); + + const [defaultValue, setDefaultValue] = useState({ + images: undefined, + options: undefined, + type: undefined, + }); + + const [isClickedPrevButton, setClickedPrevButton] = + useRecoilState(roomPrevButtonState); const accommodationOptions = { cooking: '객실취사', @@ -86,18 +97,6 @@ export const InitAccommodationRegistration = () => { }; return [updatedUserInputValue]; }); - setSelectedOptions({ - cooking: false, - parking: false, - pickup: false, - barbecue: false, - fitness: false, - karaoke: false, - sauna: false, - sports: false, - seminar: false, - }); - setImageFiles([]); }, onError(error) { if (error instanceof AxiosError) { @@ -112,14 +111,67 @@ export const InitAccommodationRegistration = () => { const onFinish = () => { const formData = new FormData(); - imageFiles.forEach((image) => { - if (image.file !== null) formData.append('image1', image.file); - }); + let shouldExecuteImageFile = false; + + for (let index = 0; index < imageFiles.length; index++) { + const image = imageFiles[index]; + if (image.file !== null) { + formData.append('image1', image.file); + shouldExecuteImageFile = true; + } + } + + if (shouldExecuteImageFile) { + imageFile(formData); + } else { + setUserInputValue(() => { + let type; + switch (form.getFieldValue('accommodation-category')) { + case 'HOTEL/RESORT': + type = form.getFieldValue('accommodation-hotel-category'); + break; + case 'GUEST_HOUSE': + type = form.getFieldValue('accommodation-guest-category'); + break; + default: + type = form.getFieldValue('accommodation-category'); + } + + const updatedUserInputValue: UserInputValue = { + type, + name: form.getFieldValue('accommodation-name'), + address: form.getFieldValue('accommodation-address'), + detailAddress: form.getFieldValue('accommodation-detailAddress'), + zipCode: form.getFieldValue('accommodation-postCode'), + description: form.getFieldValue('accommodation-desc'), + options: selectedOptions, + images: userInputValue[0].images, + rooms: userInputValue[0].rooms, + }; + return [updatedUserInputValue]; + }); + } - imageFile(formData); setUpdatedAccommodationInfo(true); + setSelectedOptions({ + cooking: false, + parking: false, + pickup: false, + barbecue: false, + fitness: false, + karaoke: false, + sauna: false, + sports: false, + seminar: false, + }); + setImageFiles([]); + setClickedPrevButton(false); - navigate(ROUTES.INIT_ROOM_REGISTRATION); + if (userInputValue[0].isAccommodationEdit) { + navigate(ROUTES.INIT_INFO_CONFIRMATION); + } else { + navigate(ROUTES.INIT_ROOM_REGISTRATION); + } }; const areFormFieldsValid = () => { @@ -158,17 +210,26 @@ export const InitAccommodationRegistration = () => { setIsValid(areFormFieldsValid()); }; - /** isEdit일 때 input에 value set해주기 */ useEffect(() => { - if (!isEdit) return; - form.setFieldValue('accommodation-name', accommodationData.name); - form.setFieldValue('accommodation-postCode', accommodationData.zipCode); - form.setFieldValue('accommodation-address', accommodationData.address); - form.setFieldValue( - 'accommodation-detailAddress', - accommodationData.detailAddress, - ); - form.setFieldValue('accommodation-desc', accommodationData.description); + if ( + accommodationData.isAccommodationEdit || + isClickedPrevButton || + updatedAccommodationInfo + ) { + form.setFieldValue('accommodation-name', accommodationData.name); + form.setFieldValue('accommodation-postCode', accommodationData.zipCode); + form.setFieldValue('accommodation-address', accommodationData.address); + form.setFieldValue( + 'accommodation-detailAddress', + accommodationData.detailAddress, + ); + form.setFieldValue('accommodation-desc', accommodationData.description); + setDefaultValue({ + images: userInputValue[0].images, + options: userInputValue[0].options, + type: userInputValue[0].type as defaultAccommodation['type'], + }); + } }, []); return ( @@ -178,18 +239,34 @@ export const InitAccommodationRegistration = () => { form={form} onFieldsChange={handleFormValuesChange} > - + - - + + diff --git a/src/pages/init-room-registration/index.tsx b/src/pages/init-room-registration/index.tsx index 51489752..508a4c88 100644 --- a/src/pages/init-room-registration/index.tsx +++ b/src/pages/init-room-registration/index.tsx @@ -14,6 +14,7 @@ import { PriceContainer } from '@components/room/price-container'; import { TimeContainer } from '@components/room/time-container'; import { useImageFile } from '@queries/init'; import { + addRoomState, checkedRoomOptions, imageFileState, isUpdatedAccommodationState, @@ -64,6 +65,8 @@ export const InitRoomRegistration = () => { const isUpdatedAccommodation = useRecoilValue(isUpdatedAccommodationState); + const [isAddRoom, setIsAddRoom] = useRecoilState(addRoomState); + useEffect(() => { if ( userInputValue[0].editRoomIndex !== undefined && @@ -102,7 +105,7 @@ export const InitRoomRegistration = () => { const getPrevImageFiles = () => { const prevImageFile: Image[] = []; for (let i = 0; i < imageFiles.length; i++) { - prevImageFile.push({ url: imageFiles[i].url }); + if (imageFiles[i].url) prevImageFile.push({ url: imageFiles[i].url }); } return prevImageFile; }; @@ -216,7 +219,9 @@ export const InitRoomRegistration = () => { checkOutTime: checkOutTime, count: count, options: selectedOptions, - images: userInputValue[0].images, + images: + userInputValue[0].rooms[userInputValue[0].editRoomIndex as number] + .images, }; const updatedRooms = [...prevUserInputValue.rooms]; @@ -243,6 +248,7 @@ export const InitRoomRegistration = () => { setSelectedOptions({ airCondition: false, tv: false, internet: false }); setImageFiles([]); setSameRoomName(false); + setIsAddRoom(false); navigate(ROUTES.INIT_INFO_CONFIRMATION); }; @@ -266,7 +272,7 @@ export const InitRoomRegistration = () => { useEffect(() => { setIsValid(areFormFieldsValid()); - }, [imageFiles, priceHasError, capacityError]); + }, [imageFiles, priceError, capacityError]); const handleFormValuesChange = () => { setIsValid(areFormFieldsValid()); @@ -297,7 +303,12 @@ export const InitRoomRegistration = () => { /> diff --git a/src/stores/init/atoms.ts b/src/stores/init/atoms.ts index 70f45e64..2b61110a 100644 --- a/src/stores/init/atoms.ts +++ b/src/stores/init/atoms.ts @@ -1,5 +1,6 @@ import { - Options, + AccommodationOptions, + RoomOptions, UserInputValue, } from '@components/init/init-accommodation-registration/type'; import { atom } from 'recoil'; @@ -35,12 +36,13 @@ export const userInputValueState = atom({ }, rooms: [], editRoomIndex: -1, + isAccommodationEdit: false, }, ], effects_UNSTABLE: [persistAtom], }); -export const checkedRoomOptions = atom({ +export const checkedRoomOptions = atom({ key: 'checkedAccommodationOptions', default: { airCondition: false, @@ -49,7 +51,7 @@ export const checkedRoomOptions = atom({ }, }); -export const checkedAccommodationOptions = atom({ +export const checkedAccommodationOptions = atom({ key: 'checkedRoomOptions', default: { cooking: false, @@ -64,17 +66,43 @@ export const checkedAccommodationOptions = atom({ }, }); -export const accommodationEditState = atom({ - key: 'accommodationEditState', - default: false, -}); - export const imageFileState = atom({ key: 'imageFileState', default: [], }); +/** 숙소 정보를 입력했는지 여부 */ +const { persistAtom: updateAccommodationPersist } = recoilPersist({ + key: 'isUpdatedAccommodationState', + storage: localStorage, +}); + export const isUpdatedAccommodationState = atom({ key: 'isUpdatedAccommodation', default: false, + effects_UNSTABLE: [updateAccommodationPersist], +}); + +/** 객실 정보를 입력했는지 여부 */ +const { persistAtom: addRoomPersist } = recoilPersist({ + key: 'addRoomState', + storage: localStorage, +}); + +export const addRoomState = atom({ + key: 'addRoomState', + default: false, + effects_UNSTABLE: [addRoomPersist], +}); + +/** 객실 페이지에서 이전 버튼을 눌렀을 때 */ +const { persistAtom: clickPrevButtonInRoomRegistration } = recoilPersist({ + key: 'clickPrevButtonInRoomRegistration', + storage: localStorage, +}); + +export const roomPrevButtonState = atom({ + key: 'roomPrevButtonState', + default: false, + effects_UNSTABLE: [clickPrevButtonInRoomRegistration], });