[FE] refactor,fix : 리뷰 작성 페이지 디자인 버그 수정 및 상태 관리 리팩토링

frontend/src/components/common/LongReviewItem/styles.ts

@@ -20,6 +20,7 @@ export const Textarea = styled.textarea<TextareaProps>`
   padding: 1.6rem;
 
   font-weight: ${({ theme }) => theme.fontWeight.medium};
+  overflow-wrap: break-word;
 
   border: 0.1rem solid ${({ $isError, theme }) => ($isError ? theme.colors.red : theme.colors.black)};
   border-radius: 0.8rem;

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

@@ -1,8 +1,11 @@
-export { default as useReviewerAnswer } from './useReviewerAnswer';
-export { default as useSlideWidthAndHeight } from './useSlideWidthAndHeight';
+export { default as useCheckNextStepAvailability } from './useCheckNextStepAvailability';
 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';
+export { default as useMultipleChoice } from './multiplceChoice/useMultipleChoice';
+export { default as useCardSectionList } from './useCardSectionList';
+export { default as useResetFormRecoil } from './useResetFormRecoil';
+export { default as useUpdateReviewerAnswer } from './useUpdateReviewerAnswer';
+export { default as useSlideWidthAndHeight } from './useSlideWidthAndHeight';
+export { default as useTextAnswer } from './useTextAnswer';
+export { default as useUpdateDefaultAnswers } from './useUpdateDefaultAnswers';

frontend/src/hooks/review/writingCardForm/multiplceChoice/useAboveSelectionLimit.ts

@@ -0,0 +1,42 @@
+import { useState } from 'react';
+
+import { ReviewWritingCardQuestion } from '@/types';
+
+interface UseAboveSelectionLimit {
+  question: ReviewWritingCardQuestion;
+  selectedOptionList: number[];
+}
+const useAboveSelectionLimit = ({ question, selectedOptionList }: UseAboveSelectionLimit) => {
+  const [isOpenLimitGuide, setIsOpenLimitGuide] = useState(false);
+
+  const isMaxCheckedNumber = () => {
+    if (!question.optionGroup) return false;
+    return selectedOptionList.length >= question.optionGroup.maxCount;
+  };
+
+  const isSelectedCheckbox = (optionId: number) => {
+    return selectedOptionList.includes(optionId);
+  };
+
+  /**
+   * 선택 가능한 문항 수를 넘어서 문항을 선택하려 하는지 여부
+   */
+  const isAboveSelectionLimit = (optionId: number) => !!(isMaxCheckedNumber() && !isSelectedCheckbox(optionId));
+
+  /**
+   * 최대 문항 수를 넘어서 선택하려는지, 그럴 경우에 대한 핸들링
+   * @param id : 객관식 문항의 optionId
+   */
+  const handleLimitGuideOpen = (isOpen: boolean) => {
+    setIsOpenLimitGuide(isOpen);
+  };
+
+  return {
+    isOpenLimitGuide,
+    isSelectedCheckbox,
+    isAboveSelectionLimit,
+    handleLimitGuideOpen,
+  };
+};
+
+export default useAboveSelectionLimit;

frontend/src/hooks/review/writingCardForm/multiplceChoice/useCancelAnsweredCategory.ts

@@ -0,0 +1,58 @@
+import { useRecoilValue } from 'recoil';
+
+import { answerMapAtom, cardSectionListSelector } from '@/recoil';
+import { ReviewWritingCardQuestion } from '@/types';
+
+interface UseCancelAnsweredCategoryProps {
+  question: ReviewWritingCardQuestion;
+}
+const useCancelAnsweredCategory = ({ question }: UseCancelAnsweredCategoryProps) => {
+  const cardSectionList = useRecoilValue(cardSectionListSelector);
+  const answerMap = useRecoilValue(answerMapAtom);
+  const isCategoryQuestion = () => {
+    return question.questionId === cardSectionList[0].questions[0].questionId;
+  };
+  // 이미 답변을 작성한 카테고리를 해제하는 경우
+  /**
+   * 카테고리 항목 선택일때,  optionId에 해당하는 카테고리 찾기
+   */
+  const getCategoryByOptionId = (categoryOptionId: number) => {
+    return cardSectionList.filter((section) => section.onSelectedOptionId === categoryOptionId)[0];
+  };
+
+  /**
+   * categoryOptionId로 찾은 카테고리에 답변이 달려있는 지 여부
+   * 답이 있기만 하다면 true
+   */
+  const isSelectedCategoryAnswer = (categoryOptionId: number) => {
+    if (!answerMap) return false;
+    // 선택한 객관식에 해당하는 카테고리의 질문들 가져오기
+    const targetCategoryQuestionList = getCategoryByOptionId(categoryOptionId);
+
+    if (!targetCategoryQuestionList) return false;
+    //카테고리에 유효한 답변이 있는 지 판단
+    const questionIdList = targetCategoryQuestionList.questions.map((question) => question.questionId);
+    const questionId = questionIdList.find((id) => answerMap.has(id));
+
+    if (!questionId) return;
+
+    const answer = answerMap.get(questionId);
+
+    return !!answer?.selectedOptionIds?.length || !!answer?.text?.length;
+  };
+
+  /**
+   * 해제하기 위해 카테고리 문항을 선택한 경우, 이미 이에 대해 답변을 했는 지 여부
+   * @param optionId : 문항의 optionId
+   */
+  const isAnsweredCategoryChanged = (optionId: number) => {
+    if (!isCategoryQuestion) return false;
+    return isSelectedCategoryAnswer(optionId);
+  };
+
+  return {
+    isAnsweredCategoryChanged,
+  };
+};
+
+export default useCancelAnsweredCategory;

frontend/src/hooks/review/writingCardForm/multiplceChoice/useMultipleChoice.ts

@@ -0,0 +1,57 @@
+import { useState } from 'react';
+
+import { ReviewWritingCardQuestion } from '@/types';
+
+import useAboveSelectionLimit from './useAboveSelectionLimit';
+import useCancelAnsweredCategory from './useCancelAnsweredCategory';
+import useUpdateMultipleChoiceAnswer from './useUpdateMultipleChoiceAnswer';
+
+interface UseMultipleChoiceProps {
+  question: ReviewWritingCardQuestion;
+  handleModalOpen: (isOpen: boolean) => void;
+}
+/**
+ * 하나의 객관식 질문에서 선택된 문항, 문항 선택 관리(최대를 넘는 문항 선택 시, 안내 문구 표시)등을 하는 훅
+ */
+const useMultipleChoice = ({ question, handleModalOpen }: UseMultipleChoiceProps) => {
+  const [unCheckTargetOptionId, setUnCheckTargetOptionId] = useState<number | null>(null);
+
+  const { isAnsweredCategoryChanged } = useCancelAnsweredCategory({ question });
+
+  const { selectedOptionList, updateAnswerState } = useUpdateMultipleChoiceAnswer({ question });
+
+  const { isOpenLimitGuide, isSelectedCheckbox, isAboveSelectionLimit, handleLimitGuideOpen } = useAboveSelectionLimit({
+    question,
+    selectedOptionList,
+  });
+
+  const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { id, checked } = event.currentTarget;
+    const optionId = Number(id);
+    if (isAboveSelectionLimit(optionId)) {
+      return handleLimitGuideOpen(true);
+    }
+    handleLimitGuideOpen(false);
+    // 답변이 달린 카테고리를 해제하려는 경우
+    const isUnCheckCategory = isAnsweredCategoryChanged(optionId);
+    setUnCheckTargetOptionId(isUnCheckCategory ? optionId : null);
+    handleModalOpen(!!isUnCheckCategory);
+
+    if (!isUnCheckCategory) {
+      updateAnswerState({ optionId, checked });
+    }
+  };
+
+  const unCheckTargetOption = () => {
+    if (unCheckTargetOptionId) {
+      updateAnswerState({ optionId: unCheckTargetOptionId, checked: false });
+    }
+  };
+  return {
+    isOpenLimitGuide,
+    handleCheckboxChange,
+    isSelectedCheckbox,
+    unCheckTargetOption,
+  };
+};
+export default useMultipleChoice;

frontend/src/hooks/review/writingCardForm/multiplceChoice/useUpdateMultipleChoiceAnswer.ts

@@ -0,0 +1,64 @@
+import { useState } from 'react';
+
+import { ReviewWritingAnswer, ReviewWritingCardQuestion } from '@/types';
+
+import useUpdateReviewerAnswer from '../useUpdateReviewerAnswer';
+
+interface UseUpdateMultipleChoiceAnswerProps {
+  question: ReviewWritingCardQuestion;
+}
+
+const useUpdateMultipleChoiceAnswer = ({ question }: UseUpdateMultipleChoiceAnswerProps) => {
+  const [selectedOptionList, setSelectedOptionList] = useState<number[]>([]);
+
+  const { updateAnswerMap, updateAnswerValidationMap } = useUpdateReviewerAnswer();
+
+  interface MakeNewSelectedOptionList {
+    optionId: number;
+    checked: boolean;
+  }
+  /**
+   * checkbox의 change 이벤트에 따라 새로운 selectedOptionList를 반환하는 함수
+   */
+  const makeNewSelectedOptionList = ({ optionId, checked }: MakeNewSelectedOptionList) => {
+    if (checked) {
+      return selectedOptionList.concat(optionId);
+    }
+
+    return selectedOptionList.filter((option) => option !== optionId);
+  };
+
+  const isValidatedChoice = (newSelectedOptionList: number[]) => {
+    if (!question.optionGroup) return false;
+
+    const { minCount, maxCount } = question.optionGroup;
+    const { length } = newSelectedOptionList;
+
+    return length >= minCount && length <= maxCount;
+  };
+
+  const updateAnswerState = ({ optionId, checked }: MakeNewSelectedOptionList) => {
+    const newSelectedOptionList = makeNewSelectedOptionList({ optionId, checked });
+    setSelectedOptionList(newSelectedOptionList);
+
+    // 유효한 선택(=객관식 문항의 최소,최대 개수를 지켰을 경우)인지에 따라 answer 변경
+    const isValidatedAnswer = isValidatedChoice(newSelectedOptionList);
+    const isNotRequiredEmptyAnswer = !question.required && newSelectedOptionList.length === 0;
+
+    const newAnswer: ReviewWritingAnswer = {
+      questionId: question.questionId,
+      selectedOptionIds: isValidatedAnswer ? newSelectedOptionList : [],
+      text: null,
+    };
+
+    updateAnswerMap(newAnswer);
+    updateAnswerValidationMap(newAnswer, isValidatedAnswer || isNotRequiredEmptyAnswer);
+  };
+
+  return {
+    selectedOptionList,
+    updateAnswerState,
+  };
+};
+
+export default useUpdateMultipleChoiceAnswer;

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

@@ -0,0 +1,29 @@
+import { useEffect } from 'react';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
+
+import { cardSectionListSelector, reviewWritingFormSectionListAtom } from '@/recoil';
+import { ReviewWritingCardSection } from '@/types';
+
+interface UseCardSectionListProps {
+  cardSectionListData: ReviewWritingCardSection[];
+}
+/**
+ * 서버에서 받아온 데이터를 바탕으로 리뷰 작성 폼에서 사용할 질문지(상태)를 변경하는 훅
+ * @param {ReviewWritingCardSection[]} cardSectionListData  서버에서 받아온 질문 데이터
+ * @returns
+ */
+const useCardSectionList = ({ cardSectionListData }: UseCardSectionListProps) => {
+  const setReviewWritingFormSectionList = useSetRecoilState(reviewWritingFormSectionListAtom);
+
+  const cardSectionList = useRecoilValue(cardSectionListSelector);
+
+  useEffect(() => {
+    setReviewWritingFormSectionList(cardSectionListData);
+  }, [cardSectionListData]);
+
+  return {
+    cardSectionList,
+  };
+};
+
+export default useCardSectionList;

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

@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react';
+import { useRecoilValue } from 'recoil';
+
+import { cardSectionListSelector, answerValidationMapAtom, answerMapAtom } from '@/recoil';
+
+interface UseCheckNextStepAvailability {
+  currentCardIndex: number;
+}
+const useCheckNextStepAvailability = ({ currentCardIndex }: UseCheckNextStepAvailability) => {
+  const cardSectionList = useRecoilValue(cardSectionListSelector);
+  const answerValidationMap = useRecoilValue(answerValidationMapAtom);
+  const answerMap = useRecoilValue(answerMapAtom);
+
+  const [isAbleNextStep, setIsAbleNextStep] = useState(false);
+
+  const isValidateAnswerList = () => {
+    if (!cardSectionList.length) return false;
+
+    return cardSectionList[currentCardIndex].questions.every((question) => {
+      const { questionId, required } = question;
+      const answerValidation = answerValidationMap?.get(questionId);
+
+      if (!required && answerValidation) return true;
+      return !!answerValidation;
+    });
+  };
+
+  useEffect(() => {
+    const answerListValidation = isValidateAnswerList();
+    setIsAbleNextStep(answerListValidation);
+  }, [answerMap, currentCardIndex]);
+
+  return {
+    isAbleNextStep,
+  };
+};
+
+export default useCheckNextStepAvailability;