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

* chore: 코드가 중복되는 각 모달 훅 제거 * refactor: 리뷰 작성 페이지에 useModals 적용
woowacourse-teams · Aug 12, 2024 · 64140e0 · 64140e0
1 parent f0f0155
commit 64140e0
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 79 deletions.
diff --git a/frontend/src/hooks/useAlertModal.ts b/frontend/src/hooks/useAlertModal.ts
diff --git a/frontend/src/hooks/useConfirmModal.ts b/frontend/src/hooks/useConfirmModal.ts
diff --git a/frontend/src/hooks/useErrorModal.ts b/frontend/src/hooks/useErrorModal.ts
diff --git a/frontend/src/hooks/useReviewForm.ts b/frontend/src/hooks/useReviewForm.ts
@@ -5,14 +5,14 @@ import { Keyword, Question, ReviewContent, WritingReviewInfoData } from '@/types
 
 interface UseReviewFormProps {
   dataToWrite: WritingReviewInfoData;
-  openErrorModal: (errorMessage: string) => void;
 }
 
-const useReviewForm = ({ dataToWrite, openErrorModal }: UseReviewFormProps) => {
+const useReviewForm = ({ dataToWrite }: UseReviewFormProps) => {
   const [answers, setAnswers] = useState<ReviewContent[]>(
     dataToWrite.questions.map((question: Question) => ({ questionId: question.id, answer: '' })) || [],
   );
   const [selectedKeywords, setSelectedKeywords] = useState<number[]>([]);
+  const [errorMessage, setErrorMessage] = useState('');
 
   const isValidAnswersLength = !answers.some((id) => id.answer.length < REVIEW.answerMinLength);
   const isValidKeywordSelection =
@@ -27,8 +27,7 @@ const useReviewForm = ({ dataToWrite, openErrorModal }: UseReviewFormProps) => {
 
   const handleKeywordButtonClick = (keyword: Keyword) => {
     if (selectedKeywords.length === REVIEW.keywordMaxCount && !selectedKeywords.includes(keyword.id)) {
-      openErrorModal('키워드는 최대 5개까지 선택할 수 있어요.');
-      return;
+      setErrorMessage('키워드는 최대 5개까지 선택할 수 있어요.');
     }
 
     setSelectedKeywords((prev) =>
@@ -38,6 +37,7 @@ const useReviewForm = ({ dataToWrite, openErrorModal }: UseReviewFormProps) => {
 
   return {
     answers,
+    errorMessage,
     selectedKeywords,
     isValidForm,
     handleAnswerChange,

diff --git a/frontend/src/pages/ReviewWriting/components/ReviewWritingContents/index.tsx b/frontend/src/pages/ReviewWriting/components/ReviewWritingContents/index.tsx
@@ -7,8 +7,7 @@ import Button from '@/components/common/Button';
 import LongReviewItem from '@/components/common/LongReviewItem';
 import useGetDataToWrite from '@/hooks/review/useGetDataToWrite';
 import useMutateReview from '@/hooks/review/useMutateReview';
-import useConfirmModal from '@/hooks/useConfirmModal';
-import useErrorModal from '@/hooks/useErrorModal';
+import useModals from '@/hooks/useModals';
 import useReviewForm from '@/hooks/useReviewForm';
 import useReviewRequestCode from '@/hooks/useReviewRequestCode';
 import { ReviewData } from '@/types';
@@ -22,23 +21,27 @@ import * as S from './styles';
 const SUBMIT_CONFIRM_MESSAGE = `리뷰를 제출할까요?
 제출한 뒤에는 수정할 수 없어요.`;
 
+const MODAL_KEYS = {
+  confirm: 'CONFIRM',
+  error: 'ERROR',
+};
+
 const ReviewWritingContents = () => {
   const navigate = useNavigate();
 
   const { reviewRequestCode } = useReviewRequestCode();
-  const { isConfirmModalOpen, openConfirmModal, closeConfirmModal } = useConfirmModal();
-  const { isErrorModalOpen, errorMessage, openErrorModal, closeErrorModal } = useErrorModal();
+  const { isOpen, openModal, closeModal } = useModals();
   const { postReview } = useMutateReview();
   const { dataToWrite } = useGetDataToWrite({ reviewRequestCode });
 
-  const { answers, selectedKeywords, isValidForm, handleAnswerChange, handleKeywordButtonClick } = useReviewForm({
-    dataToWrite,
-    openErrorModal,
-  });
+  const { answers, errorMessage, selectedKeywords, isValidForm, handleAnswerChange, handleKeywordButtonClick } =
+    useReviewForm({
+      dataToWrite,
+    });
 
   const handleClickSubmitButton = async (event: React.FormEvent) => {
     event.preventDefault();
-    openConfirmModal();
+    openModal(MODAL_KEYS.confirm);
   };
 
   const handleSubmitReview = async () => {
@@ -50,11 +53,11 @@ const ReviewWritingContents = () => {
 
     try {
       postReview({ reviewData });
-      closeConfirmModal();
+      closeModal(MODAL_KEYS.confirm);
       navigate('/user/review-writing-complete', { replace: true });
     } catch (error) {
-      closeConfirmModal();
-      openErrorModal('리뷰를 제출할 수 없어요.');
+      closeModal(MODAL_KEYS.confirm);
+      openModal(MODAL_KEYS.error);
     }
   };
 
@@ -128,21 +131,21 @@ const ReviewWritingContents = () => {
           </Button>
         </S.ButtonContainer>
       </S.ReviewFormMain>
-      {isConfirmModalOpen && (
+      {isOpen(MODAL_KEYS.confirm) && (
         <ConfirmModal
           confirmButton={{ type: 'primary', text: '확인', handleClick: handleSubmitReview }}
-          cancelButton={{ type: 'secondary', text: '취소', handleClick: closeConfirmModal }}
-          handleClose={closeConfirmModal}
+          cancelButton={{ type: 'secondary', text: '취소', handleClick: () => closeModal(MODAL_KEYS.confirm) }}
+          handleClose={() => closeModal(MODAL_KEYS.confirm)}
           isClosableOnBackground={true}
         >
           {SUBMIT_CONFIRM_MESSAGE}
         </ConfirmModal>
       )}
-      {isErrorModalOpen && (
+      {isOpen(MODAL_KEYS.error) && (
         <ErrorAlertModal
           errorText={errorMessage}
-          closeButton={{ content: '닫기', type: 'primary', handleClick: closeErrorModal }}
-          handleClose={closeErrorModal}
+          closeButton={{ content: '닫기', type: 'primary', handleClick: () => closeModal(MODAL_KEYS.error) }}
+          handleClose={() => closeModal(MODAL_KEYS.error)}
         />
       )}
     </S.ReviewWritingContents>