diff --git a/src/components/init/ButtonContainer.tsx b/src/components/init/ButtonContainer.tsx index dad1d380..f20547bb 100644 --- a/src/components/init/ButtonContainer.tsx +++ b/src/components/init/ButtonContainer.tsx @@ -10,6 +10,7 @@ import { ROUTES } from '@/constants/routes'; import { useRecoilState, useSetRecoilState } from 'recoil'; import { isUpdatedAccommodationState, + isUpdatedRoomState, roomPrevButtonState, userInputValueState, } from '@stores/init/atoms'; @@ -27,9 +28,11 @@ export const ButtonContainer = ({ const setIsClickPrev = useSetRecoilState(roomPrevButtonState); const handlePreviousClick = () => { - if (window.location.pathname === ROUTES.INIT_ACCOMMODATION_REGISTRATION) - navigate(-1); - else if (window.location.pathname === ROUTES.INIT_ROOM_REGISTRATION) { + if (window.location.pathname === ROUTES.INIT_ACCOMMODATION_REGISTRATION) { + const accommodationId = getCookie('accommodationId'); + if (accommodationId) navigate(`/${accommodationId}${ROUTES.MAIN}`); + else navigate(ROUTES.INIT); + } else if (window.location.pathname === ROUTES.INIT_ROOM_REGISTRATION) { setIsClickPrev(true); navigate(ROUTES.INIT_ACCOMMODATION_REGISTRATION); } @@ -41,6 +44,7 @@ export const ButtonContainer = ({ const setIsUpdatedAccommodation = useSetRecoilState( isUpdatedAccommodationState, ); + const setIsUpdatedRoom = useSetRecoilState(isUpdatedRoomState); const imageUrls: { url: string }[] = userInputValue[0].images.map( (image) => ({ url: image.url }), @@ -73,6 +77,7 @@ export const ButtonContainer = ({ onSuccess(data) { accommodationId = data.data.accommodationId; setIsUpdatedAccommodation(false); + setIsUpdatedRoom(false); const cookieAccommodationId = getCookie('accommodationId'); if (!cookieAccommodationId) setCookie('accommodationId', accommodationId); @@ -111,7 +116,7 @@ export const ButtonContainer = ({ if (error instanceof AxiosError) { message.error({ content: '요청에 실패했습니다. 잠시 후 다시 시도해주세요', - style: { marginTop: '210px' }, + style: { marginTop: '64px' }, }); } if ( @@ -124,7 +129,7 @@ export const ButtonContainer = ({ ) { message.error({ content: '요청을 실패했습니다. 관리자에게 문의해주세요', - style: { marginTop: '210px' }, + style: { marginTop: '64px' }, }); } if (error.response?.data.code === RESPONSE_CODE.NOT_FOUND_MEMBER) { diff --git a/src/components/init/CheckBoxContainer.tsx b/src/components/init/CheckBoxContainer.tsx index 5dc88bfe..5b35b859 100644 --- a/src/components/init/CheckBoxContainer.tsx +++ b/src/components/init/CheckBoxContainer.tsx @@ -42,6 +42,27 @@ export const CheckBoxContainer = ({ } }, [defaultValue]); + useEffect(() => { + return () => { + setSelectedInitRoomOptions({ + airCondition: false, + tv: false, + internet: false, + }); + setSelectedAccommodationOptions({ + cooking: false, + parking: false, + pickup: false, + barbecue: false, + fitness: false, + karaoke: false, + sauna: false, + sports: false, + seminar: false, + }); + }; + }, []); + const handleCheckboxChange = (event: CheckboxChangeEvent) => { const checkedOption = event.target.value; diff --git a/src/components/init/ImageUploadContainer.tsx b/src/components/init/ImageUploadContainer.tsx index 4fe24e8c..3f13f307 100644 --- a/src/components/init/ImageUploadContainer.tsx +++ b/src/components/init/ImageUploadContainer.tsx @@ -34,6 +34,12 @@ export const ImageUploadContainer = ({ } }, [images]); + useEffect(() => { + return () => { + setImageFile([]); + }; + }, []); + const [imageFile, setImageFile] = useRecoilState(imageFileState); const setRemovedImageFile = useSetRecoilState(deletedImageFileState); diff --git a/src/components/init/init-info-confirmation/RoomItem.tsx b/src/components/init/init-info-confirmation/RoomItem.tsx index e79ce685..cc4df346 100644 --- a/src/components/init/init-info-confirmation/RoomItem.tsx +++ b/src/components/init/init-info-confirmation/RoomItem.tsx @@ -38,7 +38,7 @@ export const RoomItem = () => { if (userInputValue[0].rooms.length === 1) { message.error({ content: '최소 1개의 객실이 등록되어야 합니다.', - style: { marginTop: '210px' }, + style: { marginTop: '64px' }, }); return; } @@ -60,7 +60,7 @@ export const RoomItem = () => { message.success({ content: '삭제되었습니다.', - style: { marginTop: '210px' }, + style: { marginTop: '64px' }, }); }; diff --git a/src/constants/init/index.ts b/src/constants/init/index.ts index 7156df45..f9f3e20a 100644 --- a/src/constants/init/index.ts +++ b/src/constants/init/index.ts @@ -1,4 +1,4 @@ -export const NAME_REGEX = /[^ㄱ-ㅎ가-힣A-Za-z0-9\s]/g; +export const NAME_REGEX = /[^ㄱ-ㅎㅏ-ㅣ가-힣A-Za-z0-9\s]/g; export const IMAGE_MAX_COUNT = 5; export const IMAGE_MAX_CAPACITY = 30; diff --git a/src/pages/init-accommodation-registration/index.tsx b/src/pages/init-accommodation-registration/index.tsx index 3d382b96..cce55699 100644 --- a/src/pages/init-accommodation-registration/index.tsx +++ b/src/pages/init-accommodation-registration/index.tsx @@ -137,13 +137,13 @@ export const InitAccommodationRegistration = () => { if (error instanceof AxiosError) { message.error({ content: '요청에 실패했습니다. 잠시 후 다시 시도해주세요', - style: { marginTop: '210px' }, + style: { marginTop: '64px' }, }); } if (error.response?.data.code === RESPONSE_CODE.IMAGE_SAVE_FAIL) { message.error({ content: '요청을 실패했습니다. 관리자에게 문의해주세요', - style: { marginTop: '210px' }, + style: { marginTop: '64px' }, }); } }, @@ -235,6 +235,7 @@ export const InitAccommodationRegistration = () => { useEffect(() => { window.scrollTo(0, 0); + if ( accommodationData.isAccommodationEdit || isClickedPrevButton || @@ -254,6 +255,13 @@ export const InitAccommodationRegistration = () => { type: userInputValue[0].type as defaultAccommodation['type'], }); } + if ( + !accommodationData.isAccommodationEdit && + updatedAccommodationInfo && + userInputValue[0].rooms.length !== 0 + ) { + navigate(ROUTES.INIT_INFO_CONFIRMATION); + } }, []); return ( diff --git a/src/pages/init-info-confirmation/index.tsx b/src/pages/init-info-confirmation/index.tsx index 029af335..0497b8aa 100644 --- a/src/pages/init-info-confirmation/index.tsx +++ b/src/pages/init-info-confirmation/index.tsx @@ -4,7 +4,9 @@ import { AccommodationInfo } from '@components/init/init-info-confirmation/Accom import { RoomInfo } from '@components/init/init-info-confirmation/RoomInfo'; import { getCookie } from '@hooks/sign-in/useSignIn'; import { + addRoomState, isUpdatedAccommodationState, + isUpdatedRoomState, userInputValueState, } from '@stores/init/atoms'; import { useEffect } from 'react'; @@ -18,10 +20,14 @@ export const InitInfoConfirmation = () => { const setUpdatedAccommodationInfo = useSetRecoilState( isUpdatedAccommodationState, ); + const setUpdatedRoomInfo = useSetRecoilState(isUpdatedRoomState); + const setIsAddRoomState = useSetRecoilState(addRoomState); useEffect(() => { window.scrollTo(0, 0); - setUpdatedAccommodationInfo(true); + setIsAddRoomState(false); + if (userInputValue[0].name !== '') setUpdatedAccommodationInfo(true); + if (userInputValue[0].rooms.length !== 0) setUpdatedRoomInfo(true); }, []); if (userInputValue[0].name === '') { diff --git a/src/pages/init-room-registration/index.tsx b/src/pages/init-room-registration/index.tsx index fb03a1fa..b2d241d0 100644 --- a/src/pages/init-room-registration/index.tsx +++ b/src/pages/init-room-registration/index.tsx @@ -18,6 +18,7 @@ import { checkedRoomOptions, imageFileState, isUpdatedAccommodationState, + isUpdatedRoomState, userInputValueState, } from '@stores/init/atoms'; import { capacityHasError, priceHasError } from '@stores/room/atoms'; @@ -67,6 +68,8 @@ export const InitRoomRegistration = () => { const [isAddRoom, setIsAddRoom] = useRecoilState(addRoomState); + const [isUpdatedRoom, setIsUpdatedRoom] = useRecoilState(isUpdatedRoomState); + useEffect(() => { window.scrollTo(0, 0); @@ -101,6 +104,14 @@ export const InitRoomRegistration = () => { images: userInputValue[0].rooms[index].images, options: userInputValue[0].rooms[index].options, }); + } else if ( + isUpdatedAccommodation && + isUpdatedRoom && + !isAddRoom && + userInputValue[0].editRoomIndex === -1 + ) { + navigate(ROUTES.INIT_INFO_CONFIRMATION); + setIsUpdatedRoom(false); } }, []); @@ -189,13 +200,13 @@ export const InitRoomRegistration = () => { if (error instanceof AxiosError) { message.error({ content: '요청에 실패했습니다. 잠시 후 다시 시도해주세요', - style: { marginTop: '210px' }, + style: { marginTop: '64px' }, }); } if (error.response?.data.code === RESPONSE_CODE.IMAGE_SAVE_FAIL) { message.error({ content: '요청을 실패했습니다. 관리자에게 문의해주세요', - style: { marginTop: '210px' }, + style: { marginTop: '64px' }, }); } }, @@ -221,7 +232,7 @@ export const InitRoomRegistration = () => { setSameRoomName(true); message.error({ content: '동일한 객실명의 상품이 이미 존재합니다.', - style: { marginTop: '210px' }, + style: { marginTop: '64px' }, }); window.scrollTo({ top: 0, behavior: 'smooth' }); return; diff --git a/src/stores/init/atoms.ts b/src/stores/init/atoms.ts index 59cd5e31..1340dc2a 100644 --- a/src/stores/init/atoms.ts +++ b/src/stores/init/atoms.ts @@ -85,6 +85,18 @@ export const isUpdatedAccommodationState = atom({ }); /** 객실 정보를 입력했는지 여부 */ +const { persistAtom: updateRoomPersist } = recoilPersist({ + key: 'isUpdatedRoomState', + storage: localStorage, +}); + +export const isUpdatedRoomState = atom({ + key: 'isUpdatedRoom', + default: false, + effects_UNSTABLE: [updateRoomPersist], +}); + +/** 객실 추가하기 버튼을 눌렀는지 여부 */ const { persistAtom: addRoomPersist } = recoilPersist({ key: 'addRoomState', storage: localStorage,