refactor: AnswerStatusMode

src/problem/components/BackToArticle/index.tsx

@@ -18,6 +18,7 @@ import {
 } from "@problem/types/problemInfo";
 import { Button } from "@shared/components/ui/button";
 import ArticleDropDownWrapper from "../ArticleDropDownWrapper";
+import { AnswerStatusModel } from "@problem/models/AnswerStatusModel";
 
 interface BackToArticleProps extends HTMLAttributes<HTMLDivElement> {}
 
@@ -41,18 +42,18 @@ export default function BackToArticle({ className }: BackToArticleProps) {
     },
   });
 
-  const problemAnswerInfo = problemAnswersInfo[0];
+  const answerStatus = new AnswerStatusModel({
+    problemAnswerInfo: problemAnswersInfo[0],
+  });
 
-  const backToArticleWords = problemAnswerInfo
-    ? BACK_TO_ARTICLE_WORDS.AFTER
-    : BACK_TO_ARTICLE_WORDS.BEFORE;
+  const backToArticleWords = answerStatus.problemSolvedStatus
 
   return (
     <div
       className={cn(
         "flex flex-row space-x-[3px] relative",
         className,
-        !problemAnswerInfo && "mt-[91px]",
+        !answerStatus.isProblemAnswerInfo && "mt-[91px]",
       )}
     >
       <ArticleDropDownWrapper

src/problem/models/AnswerStatusModel.ts

@@ -0,0 +1,24 @@
+import { BACK_TO_ARTICLE_WORDS } from "@problem/constants/backToArticle";
+import { ProblemAnswerMuationState } from "@problem/types/problemInfo";
+
+export class AnswerStatusModel {
+  constructor({
+    problemAnswerInfo,
+  }: {
+    problemAnswerInfo: ProblemAnswerMuationState | undefined;
+  }) {
+    this.problemAnswerInfo = problemAnswerInfo;
+  }
+
+  get problemSolvedStatus() {
+    return this.problemAnswerInfo
+      ? BACK_TO_ARTICLE_WORDS.AFTER
+      : BACK_TO_ARTICLE_WORDS.BEFORE;
+  }
+
+  get isProblemAnswerInfo() {
+    return Boolean(this.problemAnswerInfo);
+  }
+
+  private problemAnswerInfo: ProblemAnswerMuationState | undefined;
+}