[FE] 리뷰 작성 페이지에 변경된 리뷰 작성 페이지의 API 반영 (#317)

* feat: 리뷰 작성 카드 폼에서 리뷰 작성을 위한 데이터 받아오는 api 훅, 목 핸들러 생성

- ReviewWritingCardFormPage 의 path 경로 변경
- 리뷰 작성 카드 폼에서 리뷰 작성을 위한 데이터 받아오는 api 훅, 목 핸들러 생성
- gettingDataToWritingReview 의 endpoint 변경

* feat: 리뷰 작성 카드 폼에 제출 모달, 오류 모달, 미리보기 모달 적용 및 AnswerListPrevieModal 수정

* refactor: 불필요한 파일 삭제 및 mockData 관련 경로 정리

* feat: 첫 번째 카드에서 이전 버튼 감추기

* refactor: 미리보기를 '제출 전 확인'으로 수정

- AnswerListPreviewModal -> AnswerListRecheckModal
- PreviewButton -> RecheckButton

* chore: api base url 변경에 따른 endpoint, handler 수정

* chore: 오타 수정

frontend/src/apis/endpoints.ts

@@ -1,26 +1,29 @@
+export const VERSION2 = 'v2';
 export const DETAILED_REVIEW_API_PARAMS = {
   resource: 'reviews',
   queryString: {
     memberId: 'memberId',
   },
 };
 
-export const DETAILED_REVIEW_API_URL = `${process.env.API_BASE_URL}/${DETAILED_REVIEW_API_PARAMS.resource}`;
+export const DETAILED_REVIEW_API_URL = `${process.env.API_BASE_URL}/${VERSION2}/${DETAILED_REVIEW_API_PARAMS.resource}`;
 
 export const REVIEW_WRITING_API_PARAMS = {
+  resource: 'reviews',
   queryString: {
+    write: 'write',
     reviewRequestCode: 'reviewRequestCode',
   },
 };
 
 const endPoint = {
-  postingReview: `${process.env.API_BASE_URL}/reviews`,
+  postingReview: `${process.env.API_BASE_URL}/${VERSION2}/reviews`,
   gettingDetailedReview: (reviewId: number, memberId: number) =>
     `${DETAILED_REVIEW_API_URL}/${reviewId}?${DETAILED_REVIEW_API_PARAMS.queryString.memberId}=${memberId}`,
   gettingDataToWriteReview: (reviewRequestCode: string) =>
-    `${process.env.API_BASE_URL}/reviews/write?${REVIEW_WRITING_API_PARAMS.queryString.reviewRequestCode}=${reviewRequestCode}`,
-  gettingReviewList: `${process.env.API_BASE_URL}/reviews`,
-  postingDataForURL: `${process.env.API_BASE_URL}/groups`,
+    `${process.env.API_BASE_URL}/${VERSION2}/${REVIEW_WRITING_API_PARAMS.resource}/${REVIEW_WRITING_API_PARAMS.queryString.write}?${REVIEW_WRITING_API_PARAMS.queryString.reviewRequestCode}=${reviewRequestCode}`,
+  gettingReviewList: `${process.env.API_BASE_URL}/${VERSION2}/reviews`,
+  postingDataForURL: `${process.env.API_BASE_URL}/${VERSION2}/groups`,
 };
 
 export default endPoint;

frontend/src/apis/review.ts

@@ -1,4 +1,4 @@
-import { DetailReviewData, ReviewData, ReviewList, WritingReviewInfoData } from '@/types';
+import { DetailReviewData, ReviewData, ReviewList, ReviewWritingFormResult, ReviewWritingFrom } from '@/types';
 
 import createApiErrorMessage from './apiErrorMessageCreator';
 import endPoint from './endpoints';
@@ -13,16 +13,16 @@ export const getDataToWriteReviewApi = async (reviewRequestCode: string) => {
   }
 
   const data = await response.json();
-  return data as WritingReviewInfoData;
+  return data as ReviewWritingFrom;
 };
 
-export const postReviewApi = async ({ reviewData }: { reviewData: ReviewData }) => {
+export const postReviewApi = async (formResult: ReviewWritingFormResult) => {
   const response = await fetch(endPoint.postingReview, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
     },
-    body: JSON.stringify(reviewData),
+    body: JSON.stringify(formResult),
   });
 
   if (!response.ok) {

frontend/src/components/AnswerListPreviewModal/index.tsx → frontend/src/components/AnswerListRecheckModal/index.tsx

@@ -1,24 +1,38 @@
 import { Fragment } from 'react';
 
+import { ReviewWritingAnswer, ReviewWritingCardSection } from '@/types';
+
 import CheckboxItem from '../common/CheckboxItem';
 import ContentModal from '../common/modals/ContentModal';
 
-import { Section } from './answerList';
 import QuestionCard from './components/QuestionCard';
 import ReviewWritingCard from './components/ReviewWritingCard';
 import * as S from './styles';
 
-interface AnswerListPreviewModalProps {
-  answerList: Section[];
+interface AnswerListRecheckModalProps {
+  questionSectionList: ReviewWritingCardSection[];
+  answerMap: Map<number, ReviewWritingAnswer>;
   closeModal: () => void;
 }
 
-const AnswerListPreviewModal = ({ answerList, closeModal }: AnswerListPreviewModalProps) => {
+const AnswerListRecheckModal = ({ questionSectionList, answerMap, closeModal }: AnswerListRecheckModalProps) => {
+  const isSelectedChoice = (questionId: number, optionId: number) => {
+    const answer = answerMap.get(questionId);
+    if (!answer) return false;
+
+    return !!answer.selectedOptionIds?.some((id) => id === optionId);
+  };
+
+  const findTextAnswer = (questionId: number) => {
+    const answer = answerMap.get(questionId);
+    return answer ? answer.text : '';
+  };
+
   return (
     <ContentModal handleClose={closeModal}>
       <S.AnswerListContainer>
         <S.CardLayout>
-          {answerList.map((section) => (
+          {questionSectionList.map((section) => (
             <S.ReviewWritingCardWrapper key={section.sectionId}>
               <ReviewWritingCard title={section.header}>
                 {section.questions.map((question) => (
@@ -32,15 +46,15 @@ const AnswerListPreviewModal = ({ answerList, closeModal }: AnswerListPreviewMod
                               key={`${question.questionId}_${index}`}
                               id={`${question.questionId}_${index}`}
                               name={`${question.questionId}_${index}`}
-                              isChecked={option.isChecked}
+                              isChecked={isSelectedChoice(question.questionId, option.optionId)}
                               isDisabled={true}
                               label={option.content}
                               $isReadonly={true}
                             />
                           ))}
                         </div>
                       )}
-                      <div>{question.questionType === 'TEXT' && <div>{question.answer ?? ''}</div>}</div>
+                      <div>{question.questionType === 'TEXT' && <div>{findTextAnswer(question.questionId)}</div>}</div>
                     </S.ContentContainer>
                   </Fragment>
                 ))}
@@ -53,4 +67,4 @@ const AnswerListPreviewModal = ({ answerList, closeModal }: AnswerListPreviewMod
   );
 };
 
-export default AnswerListPreviewModal;
+export default AnswerListRecheckModal;

frontend/src/components/index.tsx

@@ -1,3 +1,4 @@
 export * from './layouts';
 export * from './common';
 export * from './error';
+export { default as AnswerListRecheckModal } from './AnswerListRecheckModal';

frontend/src/hooks/review/index.ts

@@ -1,5 +1,3 @@
 export * from './writingCardForm';
-export { default as useGetDataToWrite } from './useGetDataToWrite';
 export { default as useGetDetailedReview } from './useGetDetailedReview';
-export { default as useMutateReview } from './useMutateReview';
 export { default as useGetReviewList } from './useGetReviewList';

frontend/src/hooks/review/writingCardForm/index.ts

@@ -4,3 +4,5 @@ export { default as useCurrentCardIndex } from './useCurrentCardIndex';
 export { default as useMultipleChoice } from './useMultipleChoice';
 export { default as useTextAnswer } from './useTextAnswer';
 export { default as useQuestionList } from './useQuestionList';
+export { default as useGetDataToWrite } from './useGetDataToWrite';
+export { default as useMutateReview } from './useMutateReview';

frontend/src/hooks/review/writingCardForm/useGetDataToWrite/index.ts

@@ -0,0 +1,26 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import { getDataToWriteReviewApi } from '@/apis/review';
+import { REVIEW_QUERY_KEYS } from '@/constants';
+import { ReviewWritingFrom } from '@/types';
+
+interface UseGetDataToWriteProps {
+  reviewRequestCode: string | undefined;
+}
+const useGetDataToWrite = ({ reviewRequestCode }: UseGetDataToWriteProps) => {
+  const fetchReviewFormData = async (reviewRequestCode: string | undefined) => {
+    if (!reviewRequestCode) throw new Error('reviewRequestCode가 undefined에요.');
+
+    const result = await getDataToWriteReviewApi(reviewRequestCode);
+    return result;
+  };
+
+  const result = useSuspenseQuery<ReviewWritingFrom>({
+    queryKey: [REVIEW_QUERY_KEYS.writingReviewInfo, reviewRequestCode],
+    queryFn: () => fetchReviewFormData(reviewRequestCode),
+  });
+
+  return result;
+};
+
+export default useGetDataToWrite;

frontend/src/hooks/review/useGetDataToWrite/test.tsx → frontend/src/hooks/review/writingCardForm/useGetDataToWrite/test.ts

@@ -1,19 +1,19 @@
 import { renderHook, waitFor } from '@testing-library/react';
 
+import { REVIEW_REQUEST_CODE } from '@/mocks/mockData';
 import QueryClientWrapper from '@/queryTestSetup/QueryClientWrapper';
 
-import useGetDataToWrite from '.';
+import useGetReviewFormData from '.';
 
 describe('리뷰 작성을 위한 데이터 요청 테스트', () => {
   test('성공적으로 데이터를 가져온다.', async () => {
-    const REVIEW_REQUEST_CODE = 'ABCD1234';
-
-    const { result } = renderHook(() => useGetDataToWrite({ reviewRequestCode: REVIEW_REQUEST_CODE }), {
+    const { result } = renderHook(() => useGetReviewFormData({ reviewRequestCode: REVIEW_REQUEST_CODE }), {
       wrapper: QueryClientWrapper,
     });
 
     await waitFor(() => {
       expect(result.current.isSuccess).toBe(true);
     });
+    expect(result.current.data).toBeDefined();
   });
 });

frontend/src/hooks/review/useMutateReview/index.ts → frontend/src/hooks/review/writingCardForm/useMutateReview/index.ts

@@ -2,27 +2,27 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { postReviewApi } from '@/apis/review';
 import { REVIEW_QUERY_KEYS } from '@/constants';
-import { ReviewData } from '@/types';
+import { ReviewWritingFormResult } from '@/types';
 
-interface PostReviewArgs {
-  reviewData: ReviewData;
+interface UseMutateReviewProps {
+  openErrorModal: (message: string) => void;
 }
 
-const useMutateReview = () => {
+const useMutateReview = ({ openErrorModal }: UseMutateReviewProps) => {
   const queryClient = useQueryClient();
 
   const reviewMutation = useMutation({
-    mutationFn: ({ reviewData }: PostReviewArgs) => postReviewApi({ reviewData }),
+    mutationFn: (formResult: ReviewWritingFormResult) => postReviewApi(formResult),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: [REVIEW_QUERY_KEYS.postReview] });
     },
     onError: () => {
-      console.error('리뷰 제출에 실패했어요.');
+      openErrorModal('리뷰 제출에 실패했어요');
     },
   });
 
-  const postReview = ({ reviewData }: PostReviewArgs) => {
-    reviewMutation.mutate({ reviewData });
+  const postReview = (formResult: ReviewWritingFormResult) => {
+    reviewMutation.mutate(formResult);
   };
 
   return { reviewMutation, postReview };