[FE] refactor: 리뷰 작성 페이지에 useModals 훅 적용

[chysis]

• resolves [FE] 모달 상태 관리 훅을 적용한다. #279

---

🚀 어떤 기능을 구현했나요 ?

• 이전에 추가만 해두었던 useModals 훅을 리뷰 작성 페이지에 적용했습니다. 이전 버전의 리뷰 작성 페이지에만 추가했고, 새로 바뀔 UI에는 아직 적용되지 않습니다.

🔥 어떻게 해결했나요 ?

• 한 페이지에서 여러 개의 모달을 띄워야 하는 경우, 여러 개의 상태를 관리해야 합니다. useModals는 모달의 Key를 사용해서 상태를 동적으로 관리할 수 있어요.
• 모달 Key값으로 전달할 수 있는 것을 'confirm' | 'alert' | 'error' 과 같이 제한하는 것이 좋을지 고민했었는데, 같은 종류의 모달이 여러 개 띄워지는 경우 등을 고려했을 때 key는 사용자가 알아서 관리하는 것이 낫겠다고 판단했어요.

📝 어떤 부분에 집중해서 리뷰해야 할까요?

📚 참고 자료, 할 말

코드 변경 사항에서 자세한 부분을 확인할 수 있습니다.

// 모달 key 지정
const MODAL_KEYS = {
  confirm: 'CONFIRM',
  error: 'ERROR',
};

const { isOpen, openModal, closeModal } = useModals();

return (
  // ...
  {isOpen(MODAL_KEYS.confirm) && (
    <ConfirmModal
      confirmButton={{ type: 'primary', text: '확인', handleClick: handleSubmitReview }}
      cancelButton={{ type: 'secondary', text: '취소', handleClick: () => closeModal(MODAL_KEYS.confirm) }}
      handleClose={() => closeModal(MODAL_KEYS.confirm)}
      isClosableOnBackground={true}
    >
      {SUBMIT_CONFIRM_MESSAGE}
    </ConfirmModal>
  )}

  {isOpen(MODAL_KEYS.error) && (
    <ErrorAlertModal
      errorText={errorMessage}
      closeButton={{ content: '닫기', type: 'primary', handleClick: () => closeModal(MODAL_KEYS.error) }}
      handleClose={() => closeModal(MODAL_KEYS.error)}
    />
  )}
  // ...
)

isOpen, openModal, closeModal 각각에 key를 전달해서 해당 key에 해당하는 모달 상태 및 동작 함수를 실행할 수 있어요.

[BadaHertz52]

고생했어!!!

[ImxYJL]

훅 분리하느라 수고 많았어요!

[soosoo22]

모달 리팩까지 하시다니 수고했어요!