refactor: 체크리스트 답변 관리 로직을 useChecklistAnswer 로 리팩토링

woowacourse-teams · Jul 26, 2024 · 5d69cf6 · 5d69cf6
1 parent 4c56f90
commit 5d69cf6
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 36 deletions.
diff --git a/frontend/src/components/ChecklistList/CompareBanner.tsx b/frontend/src/components/ChecklistList/CompareBanner.tsx
@@ -37,7 +37,7 @@ const S = {
 
     &:hover,
     &:active {
-      background-color: ${({ theme }) => theme.palette.yellow500};
+      background-color: ${({ theme }) => theme.palette.yellow300};
     }
   `,
   Box: styled.div`

diff --git a/frontend/src/components/NewChecklist/ChecklistCategory.tsx b/frontend/src/components/NewChecklist/ChecklistCategory.tsx
@@ -33,7 +33,7 @@ const ChecklistCategory = (props: ChecklistType) => {
         isPreview ? (
           <>
             <ChecklistAnswer key={question.questionId} QandA={question} />
-            {index !== category.questions.length - 1 && <Divider />}
+            {index !== category.questions.length - 1 && <Divider key={question.questionId} />}
           </>
         ) : (
           <>
@@ -44,7 +44,7 @@ const ChecklistCategory = (props: ChecklistType) => {
               deleteAnswer={props.deleteAnswer}
               questionSelectedAnswer={props.questionSelectedAnswer}
             />
-            {index !== category.questions.length - 1 && <Divider />}
+            {index !== category.questions.length - 1 && <Divider key={question.questionId} />}
           </>
         ),
       )}

diff --git a/frontend/src/components/NewChecklist/ChecklistQuestion/ChecklistQuestion.tsx b/frontend/src/components/NewChecklist/ChecklistQuestion/ChecklistQuestion.tsx
@@ -19,14 +19,10 @@ const emotionPhrase: Record<Emotion, string> = {
 };
 
 const ChecklistQuestion = ({ question, addAnswer, deleteAnswer, questionSelectedAnswer }: Props) => {
-  // const [answer, setAnswer] = useState<null | number>(null);
-
   const handleClick = (newAnswer: number) => {
     if (questionSelectedAnswer(question.questionId) === newAnswer) {
-      // setAnswer(null);
       deleteAnswer(question.questionId);
     } else {
-      // setAnswer(newAnswer);
       addAnswer({ questionId: question.questionId, newAnswer });
     }
   };

diff --git a/frontend/src/hooks/useChecklistAnswer.ts b/frontend/src/hooks/useChecklistAnswer.ts
@@ -0,0 +1,39 @@
+import { useCallback, useState } from 'react';
+
+import { addAnswerProps } from '@/pages/ChecklistPreviewPage';
+import { ChecklistFormAnswer } from '@/types/checklist';
+
+const useChecklistAnswer = () => {
+  const [checklistAnswers, setChecklistAnswers] = useState<ChecklistFormAnswer[]>([]);
+
+  const questionSelectedAnswer = (targetId: number) => {
+    const targetQuestion = checklistAnswers.filter(e => e.questionId === targetId);
+    if (!targetQuestion[0]) return;
+    return targetQuestion[0]?.answer;
+  };
+
+  const addAnswer = useCallback(
+    ({ questionId, newAnswer }: addAnswerProps) => {
+      const target = [...checklistAnswers].find(answer => answer.questionId === questionId);
+      if (target) {
+        const newAnswers = [...checklistAnswers].map(answer =>
+          answer.questionId === questionId ? { questionId, answer: newAnswer } : answer,
+        );
+        setChecklistAnswers(newAnswers);
+        return;
+      }
+      setChecklistAnswers(prev => [...prev, { questionId, answer: newAnswer }]);
+    },
+    [checklistAnswers],
+  );
+
+  const deleteAnswer = (questionId: number) => {
+    setChecklistAnswers(prevAnswers => {
+      return prevAnswers.filter(answer => answer.questionId !== questionId);
+    });
+  };
+
+  return { addAnswer, deleteAnswer, questionSelectedAnswer };
+};
+
+export default useChecklistAnswer;
diff --git a/frontend/src/pages/NewChecklistPage/NewChecklistPage.tsx b/frontend/src/pages/NewChecklistPage/NewChecklistPage.tsx
@@ -5,6 +5,7 @@ import { postChecklist } from '@/apis/checklist';
 import Button from '@/components/common/Button/Button';
 import Header from '@/components/common/Header/Header';
 import Tabs, { Menu } from '@/components/common/Tabs/Tabs';
+import useChecklistAnswer from '@/hooks/useChecklistAnswer';
 import useInputs from '@/hooks/useInput';
 import NewChecklistInfoTemplate from '@/pages/NewChecklistPage/NewChecklistInfoTemplate';
 import NewChecklistTemplate from '@/pages/NewChecklistPage/NewChecklistTemplate';
@@ -53,6 +54,8 @@ const NewChecklistPage = () => {
   /*체크리스트 답변*/
   const [checklistAnswers, setChecklistAnswers] = useState<ChecklistFormAnswer[]>([]);
 
+  const { addAnswer, deleteAnswer, questionSelectedAnswer } = useChecklistAnswer();
+
   //TODO: 프롭스 드릴링 등 나중에 리팩토링 필요 가능성
   const onSubmitChecklist = () => {
     const emotionAnswers: ChecklistFormAfterAnswer[] = checklistAnswers.map(question => {
@@ -72,12 +75,6 @@ const NewChecklistPage = () => {
     fetchNewChecklist();
   };
 
-  const questionSelectedAnswer = (targetId: number) => {
-    const targetQuestion = checklistAnswers.filter(e => e.questionId === targetId);
-    if (!targetQuestion[0]) return;
-    return targetQuestion[0]?.answer;
-  };
-
   return (
     <S.Container>
       <Header
@@ -97,6 +94,8 @@ const NewChecklistPage = () => {
         <NewChecklistTemplate
           answers={checklistAnswers}
           setAnswers={setChecklistAnswers}
+          addAnswer={addAnswer}
+          deleteAnswer={deleteAnswer}
           questionSelectedAnswer={questionSelectedAnswer}
         />
       )}

diff --git a/frontend/src/pages/NewChecklistPage/NewChecklistTemplate.tsx b/frontend/src/pages/NewChecklistPage/NewChecklistTemplate.tsx
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { getChecklistQuestions } from '@/apis/checklist';
 import Accordion from '@/components/common/Accordion/Accordion';
@@ -12,12 +12,16 @@ export interface addAnswerProps {
 }
 
 interface Props {
+  addAnswer: ({ questionId, newAnswer }: addAnswerProps) => void;
+  deleteAnswer: (questionId: number) => void;
   answers: ChecklistFormAnswer[];
   setAnswers: React.Dispatch<React.SetStateAction<ChecklistFormAnswer[]>>;
   questionSelectedAnswer: (questionId: number) => number | undefined;
 }
 
-const NewChecklistTemplate = ({ answers, setAnswers, questionSelectedAnswer }: Props) => {
+const NewChecklistTemplate = (props: Props) => {
+  const { questionSelectedAnswer, addAnswer, deleteAnswer } = props;
+
   const [checklistQuestions, setChecklistQuestions] = useState<ChecklistCategoryQuestions[]>([]);
 
   useEffect(() => {
@@ -28,27 +32,6 @@ const NewChecklistTemplate = ({ answers, setAnswers, questionSelectedAnswer }: P
     fetchChecklist();
   }, []);
 
-  const addAnswer = useCallback(
-    ({ questionId, newAnswer }: addAnswerProps) => {
-      const target = [...answers].find(answer => answer.questionId === questionId);
-      if (target) {
-        const newAnswers = [...answers].map(answer =>
-          answer.questionId === questionId ? { questionId, answer: newAnswer } : answer,
-        );
-        setAnswers(newAnswers);
-        return;
-      }
-      setAnswers(prev => [...prev, { questionId, answer: newAnswer }]);
-    },
-    [answers],
-  );
-
-  const deleteAnswer = (questionId: number) => {
-    setAnswers(prevAnswers => {
-      return prevAnswers.filter(answer => answer.questionId !== questionId);
-    });
-  };
-
   return (
     <S.ContentBox>
       <Accordion>