Refactor: 숙소 등록 플로우 리팩토링 (#229)

Upjuyanolja · Jan 27, 2024 · b787459 · b787459
1 parent 47a6902
commit b787459
Show file tree

Hide file tree

Showing 9 changed files with 83 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,