[BUILD FAIL] [Fix/#311] 뒤로가기 로직 수정

[simeunseo]

🌀 해당 이슈 번호

• close [Fix] 뒤로가기 로직 점검 및 수정 #311

🔹 어떤 것을 변경했나요?

• 뒤로가기시 root로 던지는 기존 로직 제거
• query string을 추가하여 브라우저 자체 뒤로가기 대응 (회의 생성 funnel, 시간 입력 funnel 두 부분에 모두 적용)
• 방장이 뒤로가기하여 시간을 재입력할시 에러 alert띄우고 방장 페이지로 랜딩

🔹 어떻게 구현했나요?

브라우저 뒤로가기

브라우저 자체 뒤로가기를 대응하기 위한 로직은 다음과 같습니다.

  useEffect(
    () => {
      const goBackFunnel = () => {
        setStep((prev) => {
          if (prev === 0) {
            navigate('/');
            return prev;
          } else {
            return prev - 1;
          }
        });
      };

      window.addEventListener('popstate', goBackFunnel);

      return () => {
        window.removeEventListener('popstate', goBackFunnel);
      };
    },
    [setStep, navigate],
  );

  const setStepRouter = () => {
    navigate(`${location.pathname}?step=${funnelStep[step + 1]}`);
    setStep((prev) => prev + 1);
  };

1. popstate이벤트 리스너에 goBackFunnel을 등록한다.
2. goBackFunnel에서는 step state를 하나 줄여주는 동작을 한다. 이때, 현재 step이 0일 경우 첫 페이지로 가야하기 때문에 navigate('/')을 실행한다.
3. setStepRouter는 funnel 내 다음 버튼에 등록되는 onClick으로서, 다음 step에 해당하는 query string으로 url을 변경한다.

🔹 PR 포인트를 알려주세요!

뒤로가기 로직을 점검하면서, 뒤로가기로인해 발생할 수 있는 문제애 대응하기 위해서 살펴보다가
'방장이 뒤로가기하여 시간을 재입력할시'에 대응하는 로직이 없는 걸 발견했습니다.
그래서 이런 경우에, 서버에서 보내주는 오류 메시지를 alert한 뒤에 방장 페이지로 랜딩시키는 로직을 추가했습니다.
그런데 서버에서 보내주는 오류 메시지가 좀 이상해서 원용이한테 고쳐달라고 요청했습니다 관련 스레드

지금은 이렇게 서버에서 보내주는 메시지를 유저한테 보여주는걸로 임시 조치를 한 상태지만
오류 메시지를 어떻게 어떤 라이팅으로 보여줄지에 대한 내용도 한번 논의가 필요합니다.

🔹 스크린샷을 남겨주세요!

회의 생성 funnel

2024-08-18.12.14.06.mov

시간 입력 funnel (방장)

2024-08-18.12.14.38.mov

시간 입력 funnel (참여자)

2024-08-18.12.15.06.mov

이 외 다른 페이지에서도 뒤로가기 로직이 잘 동작합니다.

[ljh0608]

고생 많으셨습니다. 중복 코드 개선에 대한 코멘트는 추후 수정하셔도 되니 판단하에 머지해주시면 감사하겠습니다~

[ljh0608]

p3) 이로직이 funnel 에서 뒤로가기에서 작동하는 함수랑 유사해서 goBackFunnel 함수와 set함수를 props로 받는 custom hook을 만들어서 재사용해도 좋을 것 같습니다�!

[simeunseo]

맞습니닷 저도 재사용을 시도해보았는데... 첫 페이지에서 뒤로가기했을때 돌아가야하는 지점이나, 방 생성 funnel에서는 step을 1씩 줄여가야하는데 시간 입력 funnel에서는 step state가 문자열로 정의되어있고 두가지 단계밖에 없기 떄문에 이동하는 로직이 좀 달라져서 재사용에 용이하지 않다고 느꼈고,
그 외에 진짜 공통되는 부분만 분리하려면 eventListener뿐인데, 이것만 분리하는 것이 유의미한가?라는 생각이 들었던 것 같습니다. 또한 뒤로가기 커스텀을 위해서는 이 useEffect코드뿐만이 아니라 다음 페이지로 넘어가는 부분에 onClick으로 추가적인 로직을 넣어주어야해서요,, 뒤로가기 커스텀을 위한 custom hook으로 이 부분만을 분리하기에는 애매하다고 느꼈습니다.
그래서 추후 다시 고민해보도록 하겠습니다!!

[ljh0608]

확인했습니다! 이부분 회의 때 한 번 더 얘기해보면 좋을 것 같아요~
머지해주셔도 좋을것 같습니다!

[github-actions]

빌드에 실패했습니다.