refactor : modify model type customhook to class

src/problem/components/AnswerChoiceButton/index.tsx

@@ -11,7 +11,7 @@ import { cn } from "@shared/utils/cn";
 
 import { ANSWER_CHOICHE_BUTTON_INFO } from "@problem/constants/problemInfo";
 import ProblemContext from "@problem/context/problemContext";
-import useAnswerChoiceModel from "@problem/models/useAnswerChoiceModel";
+import { AnswerChoiceModel } from "@problem/models/AnswerChoiceModel";
 import { QUERY_KEY } from "@problem/remotes/api";
 import {
   AnswerCheckInfo,
@@ -47,24 +47,20 @@ export default function AnswerChoiceButton({
       };
     },
   });
-  const {
-    getAnswerChoiceButtonClassName,
-    isChoiceFillCircle,
-    isProblemAnswerInfo,
-    getChoiceFillColor,
-  } = useAnswerChoiceModel({
+
+  const answerChoiceModel = new AnswerChoiceModel({
     problemAnswerInfo: problemAnswersInfo[0],
     choiceNumber: choiceAnswer,
     renderNumber: number,
   });
 
   const onClickAnswerChoice = () => {
-    if (!isProblemAnswerInfo()) updateChoiceAnswer(number);
+    if (!answerChoiceModel.isProblemAnswerInfo) updateChoiceAnswer(number);
   };
 
   useEffect(
     function setButtonClassName() {
-      const buttonInfo = getAnswerChoiceButtonClassName();
+      const buttonInfo = answerChoiceModel.answerChoiceButtonClassName;
       setClassName(buttonInfo?.className);
     },
     [choiceAnswer, number, problemAnswersInfo],
@@ -83,8 +79,8 @@ export default function AnswerChoiceButton({
       </span>
 
       <ChoiceFillCircleSvg
-        isChoice={isChoiceFillCircle()}
-        fill={getChoiceFillColor()}
+        isChoice={answerChoiceModel.isChoiceFillCircle}
+        fill={answerChoiceModel.getChoiceFillColor}
       />
     </Button>
   );

src/problem/components/AnswerSubmitButton/index.tsx

@@ -10,7 +10,7 @@ import { deleteCookie } from "cookies-next";
 
 import { useProblemIdsViewModel } from "@common/models/useProblemIdsViewModel";
 import QuizContext from "@problem/context/problemContext";
-import useAnswerSubmitModel from "@problem/models/useAnswerSubmitModel";
+import { AnswerSubmitModel } from "@problem/models/AnswerSubmitModel";
 import { QUERY_KEY } from "@problem/remotes/api";
 import { postProblemAnswerMutationOptions } from "@problem/remotes/postProblemAnswerOption";
 import { AnswerCheckInfo } from "@problem/types/problemInfo";
@@ -37,15 +37,19 @@ export default function AnswerSubmitButton() {
     select: (mutation) => mutation.state.data as AnswerCheckInfo,
   });
 
-  const { getAnswerSubmitButtonInfo, getAnswerButtonState } =
-    useAnswerSubmitModel({
+  const answerSubmitModel = new AnswerSubmitModel({
+    isChoiceAnswer: Boolean(choiceAnswer),
+    isPostAnswerSuccess: Boolean(problemAnswerInfo[0]),
+    isExistNextProblem: isExistNextProblem(),
+  });
+
+  const onPostProblemAnswer = () => {
+    const answerSubmitModel = new AnswerSubmitModel({
       isChoiceAnswer: Boolean(choiceAnswer),
       isPostAnswerSuccess: Boolean(problemAnswerInfo[0]),
       isExistNextProblem: isExistNextProblem(),
     });
-
-  const onPostProblemAnswer = () => {
-    const BUTTON_STATE = getAnswerButtonState();
+    const BUTTON_STATE = answerSubmitModel.answerButtonState;
 
     switch (BUTTON_STATE) {
       case "PRE_ANSWER_SELECT":
@@ -67,9 +71,10 @@ export default function AnswerSubmitButton() {
         break;
     }
   };
+  const buttonInfo = answerSubmitModel.answerSubmitButtonClassName;
 
-  const result = getAnswerSubmitButtonInfo()?.title;
-  const style = getAnswerSubmitButtonInfo()?.className;
+  const result = buttonInfo?.title;
+  const style = buttonInfo?.className;
 
   return (
     <Button

src/problem/models/AnswerChoiceModel.ts

@@ -0,0 +1,85 @@
+import { ANSWER_CHOICHE_BUTTON_INFO } from "@problem/constants/problemInfo";
+import { ProblemAnswerMuationState } from "@problem/types/problemInfo";
+
+export class AnswerChoiceModel {
+  constructor({
+    problemAnswerInfo,
+    choiceNumber,
+    renderNumber,
+  }: {
+    problemAnswerInfo: ProblemAnswerMuationState | undefined;
+    choiceNumber: string | null;
+    renderNumber: string;
+  }) {
+    this.problemAnswerInfo = problemAnswerInfo;
+    this.choiceNumber = choiceNumber;
+    this.renderNumber = renderNumber;
+
+    this.answerChoiceButtonType();
+  }
+
+  private answerChoiceButtonType() {
+    const isSubmitAnswer = Boolean(this.problemAnswerInfo?.data);
+    const answerResultInfo = this.problemAnswerInfo?.data;
+    const postChoiceAnswer = this.problemAnswerInfo?.variables;
+
+    this.INIT_CHOICE_ANSWER =
+      !isSubmitAnswer && this.choiceNumber !== this.renderNumber;
+    this.CURRENT_CHOICE_ANSWER =
+      !isSubmitAnswer && this.choiceNumber === this.renderNumber;
+
+    this.CHOICE_ANSWER_CORRECT =
+      isSubmitAnswer && answerResultInfo?.data.answer === this.renderNumber;
+    this.CHOICE_ANSWER_FAIL =
+      isSubmitAnswer &&
+      answerResultInfo?.data.isSolved === false &&
+      this.renderNumber === postChoiceAnswer?.sub;
+  }
+  get answerChoiceButtonClassName() {
+    if (this.INIT_CHOICE_ANSWER)
+      return ANSWER_CHOICHE_BUTTON_INFO.INIT_CHOICE_ANSWER;
+
+    if (this.CURRENT_CHOICE_ANSWER)
+      return ANSWER_CHOICHE_BUTTON_INFO.CURRENT_CHOICE_ANSWER;
+
+    if (this.CHOICE_ANSWER_CORRECT)
+      return ANSWER_CHOICHE_BUTTON_INFO.CHOICE_ANSWER_CORRECT;
+
+    if (this.CHOICE_ANSWER_FAIL)
+      return ANSWER_CHOICHE_BUTTON_INFO.CHOICE_ANSWER_FAIL;
+
+    return ANSWER_CHOICHE_BUTTON_INFO.INIT_CHOICE_ANSWER;
+  }
+
+  get isChoiceFillCircle() {
+    if (this.INIT_CHOICE_ANSWER) return false;
+    if (
+      !this.CURRENT_CHOICE_ANSWER &&
+      !this.CHOICE_ANSWER_CORRECT &&
+      !this.CHOICE_ANSWER_FAIL
+    )
+      return false;
+    return true;
+  }
+
+  get getChoiceFillColor() {
+    if (this.INIT_CHOICE_ANSWER) return "#A5A5A5";
+    if (this.CURRENT_CHOICE_ANSWER) return "white";
+    if (this.CHOICE_ANSWER_CORRECT) return "#0166B3";
+    if (this.CHOICE_ANSWER_FAIL) return "#B00020";
+    return "#A5A5A5";
+  }
+
+  get isProblemAnswerInfo() {
+    return Boolean(this.problemAnswerInfo);
+  }
+
+  private problemAnswerInfo: ProblemAnswerMuationState | undefined;
+  private choiceNumber: string | null;
+  private renderNumber: string;
+
+  private INIT_CHOICE_ANSWER: boolean = false;
+  private CURRENT_CHOICE_ANSWER: boolean = false;
+  private CHOICE_ANSWER_CORRECT: boolean = false;
+  private CHOICE_ANSWER_FAIL: boolean = false;
+}

src/problem/models/AnswerSubmitModel.ts

@@ -0,0 +1,56 @@
+import { BUTTON_INFO, BUTTON_STATE } from "@problem/constants/answerButtonInfo";
+
+export class AnswerSubmitModel {
+  constructor({
+    isPostAnswerSuccess,
+    isChoiceAnswer,
+    isExistNextProblem,
+  }: {
+    isPostAnswerSuccess: boolean;
+    isExistNextProblem: boolean;
+    isChoiceAnswer: boolean;
+  }) {
+    this.isPostAnswerSuccess = isPostAnswerSuccess;
+    this.isChoiceAnswer = isChoiceAnswer;
+    this.isExistNextProblem = isExistNextProblem;
+
+    this.answerSubmitType();
+  }
+
+  private answerSubmitType() {
+    this.LAST_PROBLEM_LINK_TO_MAIN =
+      this.isPostAnswerSuccess && !this.isExistNextProblem;
+    this.POST_ANSWER_SUBMIT =
+      this.isPostAnswerSuccess && this.isExistNextProblem;
+    this.BEFORE_CHOICHE_ANSWER =
+      !this.isChoiceAnswer && !this.isPostAnswerSuccess;
+    this.POST_ANSWER_PRE_SUBMIT =
+      this.isChoiceAnswer && !this.isPostAnswerSuccess;
+  }
+  get answerSubmitButtonClassName() {
+    if (this.BEFORE_CHOICHE_ANSWER) return BUTTON_INFO.PRE_ANSWER_SELECT;
+
+    if (this.POST_ANSWER_SUBMIT) return BUTTON_INFO.POST_SUBMIT;
+
+    if (this.POST_ANSWER_PRE_SUBMIT) return BUTTON_INFO.POST_ANSWER_PRE_SUBMIT;
+
+    if (this.LAST_PROBLEM_LINK_TO_MAIN) return BUTTON_INFO.LINK_TO_MAIN;
+  }
+
+  get answerButtonState() {
+    if (this.POST_ANSWER_PRE_SUBMIT) return BUTTON_STATE[0];
+
+    if (this.POST_ANSWER_SUBMIT) return BUTTON_STATE[2];
+
+    if (this.LAST_PROBLEM_LINK_TO_MAIN) return BUTTON_STATE[3];
+  }
+
+  private isPostAnswerSuccess: boolean = false;
+  private isExistNextProblem: boolean = false;
+  private isChoiceAnswer: boolean = false;
+
+  private LAST_PROBLEM_LINK_TO_MAIN: boolean = false;
+  private POST_ANSWER_SUBMIT: boolean = false;
+  private BEFORE_CHOICHE_ANSWER: boolean = false;
+  private POST_ANSWER_PRE_SUBMIT: boolean = false;
+}