[FE] 이벤트 계좌번호 수정을 url로 진입할 경우 에러 발생하는 문제 해결

[jinhokim98]

issue

• close [FE] 이벤트 계좌번호 수정을 url로 진입할 경우 에러 발생하는 문제 해결 #865

구현 사항

EditAccount에서 event 정보를 api로 불러오지 않고 navigate state로 전달 받도록 수정

Event api가 SuspenseQuery로 구현되어있어 이를 외부에서 Suspense로 감싸줘야 하지만 router에서 EditAccount는 이벤트 로더 바깥에 있어서 감싸있지 않기 때문에 발생한 에러였습니다. 그래서 EditAccountPage에서 event를 api로 요청하지 않고 계좌번호 정보를 navigate state로 받도록 수정했습니다.

const location = useLocation();
const locationState = location.state as BankAccount | null;

주소 창에 admin/edit-account로 입력한 것은 의도하지 않은 방법으로 들어왔다고 생각하기 때문에 다시 admin 페이지로 돌리는 기능도 넣었어요

  useEffect(() => {
    if (locationState === null) {
      navigate(`${getEventBaseUrl(location.pathname)}/admin`);
    } else {
      setBankName(locationState.bankName);
      setAccountNumber(locationState.accountNumber);
    }
  }, [locationState]);

🫡 참고사항

[github-actions]

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-fmzpsgzzxl.chromatic.com/