From b7874595e514897a07fcc95367a898f40c70bed9 Mon Sep 17 00:00:00 2001 From: HyunJin <102955516+xxxjinn@users.noreply.github.com> Date: Sun, 28 Jan 2024 05:44:49 +0900 Subject: [PATCH] =?UTF-8?q?Refactor:=20=EC=88=99=EC=86=8C=20=EB=93=B1?= =?UTF-8?q?=EB=A1=9D=20=ED=94=8C=EB=A1=9C=EC=9A=B0=20=EB=A6=AC=ED=8C=A9?= =?UTF-8?q?=ED=86=A0=EB=A7=81=20(#229)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/init/ButtonContainer.tsx | 15 ++++++++----- src/components/init/CheckBoxContainer.tsx | 21 +++++++++++++++++++ src/components/init/ImageUploadContainer.tsx | 6 ++++++ .../init/init-info-confirmation/RoomItem.tsx | 4 ++-- src/constants/init/index.ts | 2 +- .../init-accommodation-registration/index.tsx | 12 +++++++++-- src/pages/init-info-confirmation/index.tsx | 8 ++++++- src/pages/init-room-registration/index.tsx | 17 ++++++++++++--- src/stores/init/atoms.ts | 12 +++++++++++ 9 files changed, 83 insertions(+), 14 deletions(-) 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,