woowacourse-teams · ImxYJL · Nov 14, 2024 · Nov 23, 2024 · Nov 23, 2024 · Nov 23, 2024
@@ -56,6 +56,17 @@ module.exports = {
         },
       },
     ],
+    '@typescript-eslint/naming-convention': [
+      'error',
+      {
+        selector: 'interface',
+        format: ['PascalCase'],
+      },
+      {
+        selector: 'typeAlias',
+        format: ['PascalCase'],
+      },
+    ],
   },
   settings: {
     'import/resolver': {

@@ -1,4 +1,4 @@
-import { useEffect, useLayoutEffect, useState } from 'react';
+import { useLayoutEffect, useState } from 'react';
 
 import { HIGHLIGHT_EVENT_NAME, LOCAL_STORAGE_KEY } from '@/constants';
 import { trackEventInAmplitude } from '@/utils';

@@ -1,3 +1,10 @@
+export const STORED_DATA_NAME = {
+  selectedCategories :'selectedCategories',
+  answerValidations: 'answerValidations',
+  answers: 'answers',
+  visitedCardIdList: 'visitedCardIdList'
+} as const;
+
 export const LOCAL_STORAGE_KEY = {
   isHighlightEditable: 'isHighlightEditable',
   isHighlightError: 'isHighlightError',

@@ -1,11 +1,13 @@
 import { useState } from 'react';
 
-interface Modals {
-  [key: string]: boolean;
+export type Modals = Record<string, boolean>;
+
+interface UseModalsProps {
+  initialStates?: Modals;
 }
 
-const useModals = () => {
-  const [modals, setModals] = useState<Modals>({});
+const useModals = ({ initialStates }: UseModalsProps = {}) => {
+  const [modals, setModals] = useState<Modals>(initialStates ?? {});
 
   const openModal = (key: string) => {
     setModals((prev) => ({
@@ -21,7 +23,7 @@ const useModals = () => {
     }));
   };
 
-  const isOpen = (key: string) => modals[key];
+  const isOpen = (key: string) => !!modals[key];
 
   return { isOpen, openModal, closeModal };
 };

@@ -3,4 +3,5 @@ export const CARD_FORM_MODAL_KEY = {
   navigateConfirm: 'NAVIGATE_CONFIRM',
   recheck: 'RECHECK',
   submitError: 'SUBMIT_ERROR',
+  restoreConfirm: 'RESTORE_CONFIRM',
 };
@@ -1,21 +1,19 @@
 import { useEffect } from 'react';
-import { useSetRecoilState } from 'recoil';
 
 import { useSearchParamAndQuery } from '@/hooks';
-import { CARD_FORM_MODAL_KEY } from '@/pages/ReviewWritingPage/constants';
 import {
   useCurrentCardIndex,
   useResetFormRecoil,
   useUpdateDefaultAnswers,
-  useNavigateBlocker,
   useLoadAndPrepareReview,
+  useSaveReviewToLocalStorage,
+  useRestoreFromLocalStorage,
 } from '@/pages/ReviewWritingPage/form/hooks';
 import { CardFormModalContainer } from '@/pages/ReviewWritingPage/modals/components';
 import useCardFormModal from '@/pages/ReviewWritingPage/modals/hooks/useCardFormModal';
 import MobileProgressBar from '@/pages/ReviewWritingPage/progressBar/components/MobileProgressBar';
 import ProgressBar from '@/pages/ReviewWritingPage/progressBar/components/ProgressBar';
 import { CardSlider } from '@/pages/ReviewWritingPage/slider/components';
-import { reviewRequestCodeAtom } from '@/recoil';
 import { calculateParticle } from '@/utils';
 
 import * as S from './styles';
@@ -25,39 +23,24 @@ const CardForm = () => {
     paramKey: 'reviewRequestCode',
   });
 
-  const setReviewRequestCode = useSetRecoilState(reviewRequestCodeAtom);
-
+  const { resetFormRecoil } = useResetFormRecoil();
   const { currentCardIndex, handleCurrentCardIndex } = useCurrentCardIndex();
 
-  // 리뷰에 필요한 질문지,프로젝트 정보 가져오기
+  // 로컬 스토리지에 저장된 값을 기반으로 모달의 isOpen 여부 설정
+  const { restoreData, initialModalsState } = useRestoreFromLocalStorage();
+  const { handleOpenModal, closeModal, isOpen } = useCardFormModal({ initialStates: initialModalsState });
+
+  // 프로젝트 정보 및 질문지를 서버에서 가져옴
   const { revieweeName, projectName } = useLoadAndPrepareReview({ reviewRequestCode });
-  // 답변
+
   // 생성된 질문지를 바탕으로 답변 기본값 및 답변의 유효성 기본값 설정
   useUpdateDefaultAnswers();
 
-  // 모달
-  const { handleOpenModal, closeModal, isOpen } = useCardFormModal();
-
-  const handleNavigateConfirmButtonClick = () => {
-    closeModal(CARD_FORM_MODAL_KEY.navigateConfirm);
-
-    if (blocker.proceed) blocker.proceed();
-  };
-
-  // 작성 중인 답변이 있는 경우 페이지 이동을 막는 기능
-  const { blocker } = useNavigateBlocker({
-    openNavigateConfirmModal: () => handleOpenModal('navigateConfirm'),
-  });
-
-  const { resetFormRecoil } = useResetFormRecoil();
-
-  useEffect(() => {
-    if (reviewRequestCode) setReviewRequestCode(reviewRequestCode);
-  }, [reviewRequestCode]);
+  useSaveReviewToLocalStorage();
 
   useEffect(() => {
     return () => {
-      // 페이지 나갈때 관련 recoil 상태 초기화
+      // 페이지 나갈 때 관련 recoil 상태 초기화
       resetFormRecoil();
     };
   }, []);
@@ -67,6 +50,8 @@ const CardForm = () => {
     particles: { withFinalConsonant: '을', withoutFinalConsonant: '를' },
   })} 리뷰해주세요!`;
 
+  const handleRestoreAnswers = () => restoreData();
+
   return (
     <S.CardFormContainer>
       <S.CardForm>
@@ -91,11 +76,7 @@ const CardForm = () => {
           handleOpenModal={handleOpenModal}
         />
       </S.CardForm>
-      <CardFormModalContainer
-        isOpen={isOpen}
-        closeModal={closeModal}
-        handleNavigateConfirmButtonClick={handleNavigateConfirmButtonClick}
-      />
+      <CardFormModalContainer isOpen={isOpen} closeModal={closeModal} handleRestoreButtonClick={handleRestoreAnswers} />
     </S.CardFormContainer>
   );
 };

@@ -3,3 +3,6 @@ export { default as useTextAnswer } from './useTextAnswer';
 export { default as useUpdateDefaultAnswers } from './useUpdateDefaultAnswers';
 export { default as useUpdateReviewerAnswer } from './useUpdateReviewerAnswer';
 export { default as useSubmitAnswers } from './useSubmitAnswers';
+export { default as useDeleteReviewInLocalStorage } from './useDeleteReviewInLocalStorage';
+export { default as useSaveReviewToLocalStorage } from './useSaveReviewToLocalStorage';
+export { default as useRestoreFromLocalStorage } from './useRestoreReviewFromLocalStorage';
@@ -1,4 +1,8 @@
-import { ReviewWritingCardQuestion } from '@/types';
+import { useEffect } from 'react';
+import { useRecoilValue } from 'recoil';
+
+import { answerMapAtom } from '@/recoil';
+import { ReviewWritingAnswer, ReviewWritingCardQuestion } from '@/types';
 
 import useAboveSelectionLimit from './useAboveSelectionLimit';
 import useCheckTailQuestionAnswer from './useCheckTailQuestionAnswer';
@@ -16,7 +20,9 @@ interface UseMultipleChoiceProps {
 const useMultipleChoice = ({ question, handleModalOpen }: UseMultipleChoiceProps) => {
   const { isAnsweredTailQuestion } = useCheckTailQuestionAnswer({ question });
 
-  const { selectedOptionList, isSelectedCheckbox, updateSelectedOptionList } = useOptionSelection();
+  const { selectedOptionList, isSelectedCheckbox, updateSelectedOptionList, initSelectedOptionList } =
+    useOptionSelection();
+  const answerMap = useRecoilValue(answerMapAtom);
 
   const { updateAnswerState } = useUpdateMultipleChoiceAnswer({ question });
 
@@ -34,6 +40,30 @@ const useMultipleChoice = ({ question, handleModalOpen }: UseMultipleChoiceProps
     },
   );
 
+  interface FindSelectedOptionIdsParams {
+    answerMap: Map<number, ReviewWritingAnswer> | null;
+    questionId: number;
+  }
+
+  // 로컬 스토리지에 저장했던 답변으로부터, questionId를 통해 해당 질문의 selectedOptionIds를 찾는 함수
+  const findSelectedOptionIds = ({ answerMap, questionId }: FindSelectedOptionIdsParams) => {
+    if (!answerMap) return null;
+
+    const selectedItem = answerMap.get(questionId);
+    return selectedItem ? selectedItem.selectedOptionIds : null;
+  };
+
+  // 저장된 객관식 답변이 있다면 복원
+  useEffect(() => {
+    if (!answerMap || answerMap.size === 0) return;
+    if (selectedOptionList.length > 0) return;
+
+    const questionId = question.questionId;
+    const selectedOptionIds = findSelectedOptionIds({ answerMap, questionId });
+
+    if (selectedOptionIds) initSelectedOptionList([...selectedOptionIds]);
+  }, [answerMap, question]);
+
   const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const { id, checked } = event.currentTarget;
     const optionId = Number(id);
@@ -88,4 +118,5 @@ const useMultipleChoice = ({ question, handleModalOpen }: UseMultipleChoiceProps
     unCheckCategoryOptionId,
   };
 };
+
 export default useMultipleChoice;
@@ -15,6 +15,10 @@ const useOptionSelection = () => {
     checked: boolean;
   }
 
+  const initSelectedOptionList = (newSelectedOptionList: number[]) => {
+    setSelectedOptionList(newSelectedOptionList);
+  };
+
   /**
    * checkbox의 change 이벤트에 따라 새로운 selectedOptionList를 반환하는 함수
    */
@@ -37,6 +41,7 @@ const useOptionSelection = () => {
     selectedOptionList,
     isSelectedCheckbox,
     updateSelectedOptionList,
+    initSelectedOptionList,
   };
 };
 

@@ -0,0 +1,25 @@
+import { STORED_DATA_NAME } from '@/constants';
+import { useSearchParamAndQuery } from '@/hooks';
+
+const useDeleteReviewInLocalStorage = () => {
+  const { param: reviewRequestCode } = useSearchParamAndQuery({
+    paramKey: 'reviewRequestCode',
+  });
+
+  const deleteReviewDataInLocalStorage = (key: keyof typeof STORED_DATA_NAME) => {
+    localStorage.removeItem(`${STORED_DATA_NAME[key]}_${reviewRequestCode}`);
+  };
+
+  const deleteAllReviewDataInLocalStorage = () => {
+    Object.values(STORED_DATA_NAME).forEach((key) => {
+      localStorage.removeItem(`${STORED_DATA_NAME[key]}_${reviewRequestCode}`);
+    });
+  };
+
+  return {
+    deleteReviewDataInLocalStorage,
+    deleteAllReviewDataInLocalStorage,
+  };
+};
+
+export default useDeleteReviewInLocalStorage;
@@ -0,0 +1,44 @@
+import { useCallback } from 'react';
+import { useSetRecoilState } from 'recoil';
+
+import { STORED_DATA_NAME } from '@/constants';
+import { useSearchParamAndQuery } from '@/hooks';
+import { CARD_FORM_MODAL_KEY } from '@/pages/ReviewWritingPage/constants';
+import { selectedCategoryAtom, answerMapAtom, answerValidationMapAtom } from '@/recoil';
+
+const useRestoreFromLocalStorage = () => {
+  const setSelectedCategory = useSetRecoilState(selectedCategoryAtom);
+  const setAnswerMap = useSetRecoilState(answerMapAtom);
+  const setAnswerValidation = useSetRecoilState(answerValidationMapAtom);
+
+  const { param: reviewRequestCode } = useSearchParamAndQuery({
+    paramKey: 'reviewRequestCode',
+  });
+
+  const initialModalsState = {
+    [CARD_FORM_MODAL_KEY.restoreConfirm]:
+      !!localStorage.getItem(`${STORED_DATA_NAME.selectedCategories}_${reviewRequestCode}`) ||
+      !!localStorage.getItem(`${STORED_DATA_NAME.answers}_${reviewRequestCode}`) ||
+      !!localStorage.getItem(`${STORED_DATA_NAME.answerValidations}_${reviewRequestCode}`),
+  };
+
+  const restoreData = useCallback(() => {
+    const storedSelectedCategories = localStorage.getItem(
+      `${STORED_DATA_NAME.selectedCategories}_${reviewRequestCode}`,
+    );
+    const storedAnswerValidations = localStorage.getItem(`${STORED_DATA_NAME.answerValidations}_${reviewRequestCode}`);
+    const storedAnswers = localStorage.getItem(`${STORED_DATA_NAME.answers}_${reviewRequestCode}`);
+
+    const selectedCategories = storedSelectedCategories ? JSON.parse(storedSelectedCategories) : null;
+    const answerValidations = storedAnswerValidations ? new Map(JSON.parse(storedAnswerValidations)) : new Map();
+    const answers = storedAnswers ? JSON.parse(storedAnswers) : null;
+
+    setSelectedCategory(selectedCategories);
+    setAnswerValidation(answerValidations);
+    setAnswerMap(new Map(answers));
+  }, [reviewRequestCode, setSelectedCategory, setAnswerMap, setAnswerValidation]);
+
+  return { restoreData, initialModalsState };
+};
+
+export default useRestoreFromLocalStorage;
@@ -0,0 +1,70 @@
+import { useCallback, useEffect } from 'react';
+import { useRecoilValue } from 'recoil';
+
+import { STORED_DATA_NAME } from '@/constants';
+import { useSearchParamAndQuery } from '@/hooks';
+import { answerMapAtom, answerValidationMapAtom, selectedCategoryAtom } from '@/recoil';
+
+/**
+ * 리뷰와 관련된 데이터들을 실시간으로 로컬 스토리지에 저장하는 훅
+ */
+const useSaveReviewToLocalStorage = () => {
+  const selectedCategory = useRecoilValue(selectedCategoryAtom);
+  const answerMap = useRecoilValue(answerMapAtom);
+  const answerValidation = useRecoilValue(answerValidationMapAtom);
+
+  const { param: reviewRequestCode } = useSearchParamAndQuery({
+    paramKey: 'reviewRequestCode',
+  });
+
+  const getCurrentSelectedCategory = useCallback(() => {
+    if (!selectedCategory || selectedCategory.length === 0) return null;
+
+    return selectedCategory;
+  }, [selectedCategory]);
+
+  const getCurrentAnswerValidation = useCallback(() => {
+    if (!answerValidation || answerValidation.size === 0) return null;
+
+    const plainObjectAnswers = Array.from(answerValidation.entries());
+    return plainObjectAnswers.length > 0 ? plainObjectAnswers : null;
+  }, [answerValidation]);
+
+  const getCurrentAnswers = useCallback(() => {
+    if (!answerMap || answerMap.size === 0) return null;
+
+    const plainObjectAnswers = Array.from(answerMap.entries());
+    return plainObjectAnswers.length > 0 ? plainObjectAnswers : null;
+  }, [answerMap]);
+
+  const saveToLocalStorage = useCallback(() => {
+    const selectedCategories = getCurrentSelectedCategory();
+    const answers = getCurrentAnswers();
+    const answerValidations = getCurrentAnswerValidation();
+
+    if (selectedCategories) {
+      localStorage.setItem(
+        `${STORED_DATA_NAME.selectedCategories}_${reviewRequestCode}`,
+        JSON.stringify(selectedCategories),
+      );
+    }
+
+    if (answerValidations) {
+      localStorage.setItem(
+        `${STORED_DATA_NAME.answerValidations}_${reviewRequestCode}`,
+        JSON.stringify(answerValidations),
+      );
+    }
+
+    if (answers) {
+      localStorage.setItem(`${STORED_DATA_NAME.answers}_${reviewRequestCode}`, JSON.stringify(answers));
+    }
+  }, [getCurrentSelectedCategory, getCurrentAnswers, getCurrentAnswerValidation, reviewRequestCode]);
+
+  // 로컬 스토리지 동기화
+  useEffect(() => {
+    saveToLocalStorage();
+  }, [saveToLocalStorage]);
+};
+
+export default useSaveReviewToLocalStorage;