[#351] 판매글 작성 개선

[Bumang-Cyber]

Issue Number

close

⛳️ Task

• [x] 화이팅하기

✍️ Note

Phase를 나눔

이번 개선에서 기존에 1페이지로 되어있던 판매글 작성이 잘게 쪼개져서 단계 별로 구성되게 되었습니다.

페이지를 나누기보단 한 페이지 내에 'phase'를 나누고, phase에 따라 컴포넌트를 갈아끼우면서 단계 별 진행을 나타냈습니다.

  const [phase, setPhase] = useState<PhaseType>("1stInput");
  // "1stInput" | "2ndInput" | "finalConfirm" 
  const [phaseHistory, setPhaseHistory] = useState<PhaseType[]>(["1stInput"]);
  // phase의 히스토리를 가지고 있는 배열입니다. '2ndPrice설정을 지나왔는지'를 파악하기 위해 만들었습니다.

  return (
    ...
    {accountSetting === "none" && phase === "finalConfirm" && (
    ....

2차 가격 phase를 거쳐왔는지 history객체로 파악

  // 새로운 phase로 갈 때 add하는 핸들러
  const handleAddPhaseHistory = (newPhase: PhaseType) => {
    setPhaseHistory([...phaseHistory, newPhase]);
    setPhase(newPhase);

    if (newPhase === "2ndInput") {
      // 2ndInput에 진입한 경우 2ndPrice를 체크합니다. 
      setIs2ndChecked(true);
    }
  };

  // 뒤로가기를 눌렀을 때 현재 phase를 pop하는 핸들러
  const handleSubPhaseHistory = () => {
    const newPhase = [...phaseHistory];
    const pop = newPhase.pop();
    setPhaseHistory(newPhase);
    setPhase(newPhase[newPhase.length - 1] || "1stInput");

    if (pop === "2ndInput") {
      // 만약 지금 이탈한 phase가 2ndInput인 경우 2ndPrice 체크 여부를 해제합니다.
      setIs2ndChecked(false);
    }
  };

phase별로 헤더의 '뒤로가기' 액션을 바꿈

2ndInput, finalConfirm일 때는 뒤로가기가 존재하지만, 1stInput일때는 뒤로가기가 없기 때문에 따로 headerConfig에 undo설정을 해주지 않았습니다.

  // 페이지 전환 시 적용할 효과
  useEffect(() => {
    ...

    if (accountSetting === "none" && phase === "2ndInput") {
      setHeaderConfig({
        title: selectedItem.hotelName,
        undo: () => {
          handleSubPhaseHistory(); // 히스토리 빼기 핸들러
        },
      });
    }

    if (accountSetting === "none" && phase === "finalConfirm") {
      setHeaderConfig({
        title: selectedItem.hotelName,
        undo: () => {
          handleSubPhaseHistory(); // 히스토리에 추가 핸들러
        },
      });
    }

    // eslint-disable-next-line
  }, [accountSetting, phase]);

📸 Screenshot

📎 Reference

[Bumang-Cyber]

더미 데이터로 설정된 상황인데 서버 정상화되면 실제 데이터로 테스트해보고 머지해보겠습니다.

[github-actions[bot]]

Visit the preview URL for this PR (updated for commit 46dd2b5):

https://percenthotel--pr361-feat-351-nzblxgv0.web.app

_{(expires Tue, 09 Jul 2024 13:58:02 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 5f3aee9d8d8535dbb552ad12361bc813c5a90573}