[FE] refactor: 리뷰 작성 페이지에 form 태그 도입 및 submit 버튼 변경 (#374)

* chore: 깃허브 로고 주석 처리

* fix: Checkbox 의 onChange 오류 수정

- 오류 : handleChange로 props명이 변경되면서 구조분해할당으로 input에 onChange 이벤트가 들어가지 않게 됨
- 오류 수정; onChange에 handleChange를 직접 넣어주는 방식으로 수정

* chore: 서술형 질문에 글자 수 안내 문구 삭제, 선택 문항에 '(선택)' 문구 추

* refactor: multipleGuidline을 useMultipleChoice로 이동

* refactor: useMutateReview의 onSuccess에서 리뷰 생성 후 기능 실행하도록 수정

- mutate 성공 시, 실행할 executeAfterMutateSuccess를 useMutateReview의 props로 추가
- 리뷰 제출 성공 시, 모달 닫고 페이지 이동하는 코드를 onSuccess 에서 실행하도록 수정

* refactor: useMutateReview의 onSuccess에서 리뷰 생성 후 기능 실행하도록 수정

- mutate 성공 시, 실행할 executeAfterMutateSuccess를 useMutateReview의 props로 추가
- 리뷰 제출 성공 시, 모달 닫고 페이지 이동하는 코드를 onSuccess 에서 실행하도록 수정

* fix: Checkbox props명 오류 수정

- isDisabled -> disabled

* refactor : 리뷰 작성 질문들을 recoil로 관리하도록 리팩토링

- 컴포넌트간 props drilling을 줄이기 위해 recoil 상태관리를 사용
- 카테고리 선택 결과에 따라 리뷰 작성 질문지(questionList)가 동적으로 변할 수 있도록 atom, selector를 사용

* refactor: answerMap, answerValidationMap을 atom으로 변경

* refactor: useReviewAnswer를  3개의 훅으로 분리

<hook>
- 분리되어 생성된 훅 :useUpdateReviewerAnswer, useUpdateDefaultAnswers, useCheckStepAvailability

<components>
- QnABox: props 변경 및 useUpdateReviewerAnswer 사용
-  RevieWritingCard : props 변경 및 useCheckNextStepAvailability 사용

* feat: 리뷰 작성 폼 관련 recoil 상태 초기화하는 훅 생성 및 적용

* fix: 리뷰 작성 페이지 목 데이터에서 optionId  중복 수정

* chore: 코드 설명에 대한 주석 추가

* refactor: useUpdateDefaultAnswers 에서 객관식/서술형 기본값 상수 처리

* fix: 서술형에서 길에 한문장으로 작성 시 맥에서 가로 스크롤이 생기는 오류 수정

* fix :  ReviewWritingFrom의 formId 타입 변경 (string-> number)

* chore: REVIEW_WRITING_FORM_CARD_DATA 변경

* refactor: 훅 , selector 네이밍 변경

- questionList -> cardSectionList

* refactor: useMultipleChoice 리팩토링

- useAboveSelectionLimit , useUpdateMultipleChoiceAnswer로 분리

* feat :기존에 답변한 카테고리를 카테고리 질문에서 해제할 때에 대한 대응 추가

-  useCancelAnsweredCategory 추가
- 카테고리 질문에서 이미 답변을 작성한 카테고리 선택을 해제하는 지 판단
- 해제하려는 경우, answerMap, answerValidationMap의 상태 변경을 하지 않고 모달을 띄워줌
- 모달에서 확인 버튼 클릭하면, 해제되고 취소되면 기존의 선택이 유지

* refactor: ReviewWritingCardForm하위 컴포넌트 파일들을  components 폴더로 이동

* feat: QnABox에 답변한 카테고리 해제 시, 관련 기능 적용

- 리뷰 작성 페이지의 다른 모달들과 같은 컴포넌트에 위치하면 좋겠으나,
확인 버튼 클릭 시 사용자가 해제하려했던 카테고리 선택이 해제되어야해서 컴포넌트 구조상 QnABox에 관련 모달이 있어야한다고 판단함

* refactor: QnABox에서 MultipleChoiceQuestion 분리

* fix: 개수 제한 가이드 라인 표시 이전에 선택 오류 수정

개수 제한 가이드 라인 표시 이전에 최대 개수를 넘는 선택 시, 체크박스 선택되는 오류 수정

* chore: 필요없는 코드 삭제

* fix: 답변이 없는 카테고리 선택 취소 시, 모달 띄워지는 오류 수정

* fix: handleModalOpen 파라미터 오류 수정

* fix: 답변이 없는 카테고리 선택 취소 시 답변 기본값에 의한 오류 수정

- 답변의 기본값이 빈문자열 이나 빈 배열이여서 답변을 하지 않았음에도 모달이 띄워지는 오류가 있었음

* refactor: useTextAnswer에서 useUpdateReviewerAnswer사용

* design: 프로젝트 이름, 리뷰이의 이름이 길어지는 경우를 대비한 디자인 수정

* feat: 작성 내용 확인 버튼에 비활성화 기능 추가

- 모든 답변이 제출 가능한 상태여야 리뷰 작성 확인 버튼도 비활성화 됨
- 버튼의 text를 작성 내용 확인 버튼으로 수정

* fix: Checkbox 의 onChange 오류 수정

- 오류 : handleChange로 props명이 변경되면서 구조분해할당으로 input에 onChange 이벤트가 들어가지 않게 됨
- 오류 수정; onChange에 handleChange를 직접 넣어주는 방식으로 수정

* chore: 서술형 질문에 글자 수 안내 문구 삭제, 선택 문항에 '(선택)' 문구 추

* fix: Checkbox 의 onChange 오류 수정

- 오류 : handleChange로 props명이 변경되면서 구조분해할당으로 input에 onChange 이벤트가 들어가지 않게 됨
- 오류 수정; onChange에 handleChange를 직접 넣어주는 방식으로 수정

* fix: 서술형에서 길에 한문장으로 작성 시 맥에서 가로 스크롤이 생기는 오류 수정

* design: 프로젝트 이름, 리뷰이의 이름이 길어지는 경우를 대비한 디자인 수정

* chore: Checkbox 변경으로 인한 코드 수정

* refactor: form 태그 ,submit 변경 및 ConfirmModal의 props 변경

* refactor: ConfirmModal의 type 의 기본값 삭제

frontend/src/components/common/modals/ConfirmModal/index.tsx

@@ -9,7 +9,8 @@ import ModalPortal from '../ModalPortal';
 import * as S from './styles';
 
 interface ConfirmModalButton {
-  type: ButtonStyleType;
+  styleType: ButtonStyleType;
+  type?: 'button' | 'submit' | 'reset';
   text: string;
   handleClick: (e: React.MouseEvent) => void;
 }
@@ -36,8 +37,8 @@ const ConfirmModal: React.FC<React.PropsWithChildren<ConfirmModalProps>> = ({
         <S.ConfirmModalContainer>
           <S.Contents>{children}</S.Contents>
           <S.ButtonContainer>
-            {buttonList.map(({ type, text, handleClick }) => (
-              <Button key={text} styleType={type} onClick={handleClick}>
+            {buttonList.map(({ styleType, type, text, handleClick }) => (
+              <Button key={text} styleType={styleType} type={type} onClick={handleClick}>
                 {text}
               </Button>
             ))}

frontend/src/pages/ReviewWritingCardFromPage/components/CardForm/index.tsx

@@ -58,11 +58,13 @@ const CardForm = () => {
   };
   const { postReview } = useMutateReview({ executeAfterMutateSuccess });
 
-  const handleSubmitButtonClick = () => {
+  const handleConfirmModalOpenButtonClick = () => {
     openModal(MODAL_KEYS.confirm);
   };
 
-  const submitAnswer = async () => {
+  const submitAnswer = async (event: React.MouseEvent) => {
+    event.preventDefault();
+
     if (!answerMap || !reviewRequestCode) return;
 
     const result: ReviewWritingFormResult = {
@@ -105,16 +107,16 @@ const CardForm = () => {
                 isLastCard={cardSectionList.length - INDEX_OFFSET === currentCardIndex}
                 handleCurrentCardIndex={handleCurrentCardIndex}
                 handleRecheckButtonClick={handleRecheckButtonClick}
-                handleSubmitButtonClick={handleSubmitButtonClick}
+                handleConfirmModalOpenButtonClick={handleConfirmModalOpenButtonClick}
               />
             </S.Slide>
           ))}
         </S.SliderContainer>
       </S.CardForm>
       {isOpen(MODAL_KEYS.confirm) && (
         <ConfirmModal
-          confirmButton={{ type: 'primary', text: '제출', handleClick: submitAnswer }}
-          cancelButton={{ type: 'secondary', text: '취소', handleClick: () => closeModal(MODAL_KEYS.confirm) }}
+          confirmButton={{ styleType: 'primary', type: 'submit', text: '제출', handleClick: submitAnswer }}
+          cancelButton={{ styleType: 'secondary', text: '취소', handleClick: () => closeModal(MODAL_KEYS.confirm) }}
           handleClose={() => closeModal(MODAL_KEYS.confirm)}
           isClosableOnBackground={true}
         >

frontend/src/pages/ReviewWritingCardFromPage/components/CardForm/styles.ts

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-export const CardForm = styled.div`
+export const CardForm = styled.form`
   position: relative;
   overflow: hidden;
   width: ${({ theme }) => theme.formWidth};

frontend/src/pages/ReviewWritingCardFromPage/components/CardSliderController/index.tsx

@@ -41,14 +41,19 @@ const NextButton = ({ isAbleNextStep, handleCurrentCardIndex }: NextButtonProps)
   );
 };
 
-interface SubmitButtonProps {
+interface ConfirmModalOpenButtonProps {
   isAbleNextStep: boolean;
-  handleSubmitButtonClick: () => void;
+  handleConfirmModalOpenButtonClick: () => void;
 }
-const SubmitButton = ({ isAbleNextStep, handleSubmitButtonClick }: SubmitButtonProps) => {
-  const styledType: ButtonStyleType = isAbleNextStep ? 'primary' : 'disabled';
+const ConfirmModalOpenButton = ({ isAbleNextStep, handleConfirmModalOpenButtonClick }: ConfirmModalOpenButtonProps) => {
+  const styleType: ButtonStyleType = isAbleNextStep ? 'primary' : 'disabled';
   return (
-    <Button disabled={!isAbleNextStep} styleType={styledType} type={'submit'} onClick={handleSubmitButtonClick}>
+    <Button
+      disabled={!isAbleNextStep}
+      styleType={styleType}
+      type={'button'}
+      onClick={handleConfirmModalOpenButtonClick}
+    >
       제출
     </Button>
   );
@@ -67,15 +72,19 @@ const RecheckButton = ({ isAbleNextStep, handleRecheckButtonClick }: RecheckButt
   );
 };
 
-export interface CardSliderControllerProps extends PrevButtonProps, NextButtonProps, SubmitButtonProps, RecheckButton {}
+export interface CardSliderControllerProps
+  extends PrevButtonProps,
+    NextButtonProps,
+    ConfirmModalOpenButtonProps,
+    RecheckButton {}
 
 const CardSliderController = () => {
   return <></>;
 };
 
 CardSliderController.PrevButton = PrevButton;
 CardSliderController.NextButton = NextButton;
-CardSliderController.SubmitButton = SubmitButton;
+CardSliderController.ConfirmModalOpenButton = ConfirmModalOpenButton;
 CardSliderController.RecheckButton = RecheckButton;
 
 export default CardSliderController;

frontend/src/pages/ReviewWritingCardFromPage/components/ReviewWritingCard/index.tsx

@@ -19,7 +19,7 @@ const ReviewWritingCard = ({
   cardSection,
   handleCurrentCardIndex,
   handleRecheckButtonClick,
-  handleSubmitButtonClick,
+  handleConfirmModalOpenButtonClick,
 }: ReviewWritingCardProps) => {
   const { isAbleNextStep } = useCheckNextStepAvailability({ currentCardIndex });
   return (
@@ -43,9 +43,9 @@ const ReviewWritingCard = ({
                 isAbleNextStep={isAbleNextStep}
                 handleRecheckButtonClick={handleRecheckButtonClick}
               />
-              <CardSliderController.SubmitButton
+              <CardSliderController.ConfirmModalOpenButton
                 isAbleNextStep={isAbleNextStep}
-                handleSubmitButtonClick={handleSubmitButtonClick}
+                handleConfirmModalOpenButtonClick={handleConfirmModalOpenButtonClick}
               />
             </>
           ) : (