[ Feature/quiz 19 ]

src/common/components/TagList/index.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function TagList() {
+  return <div></div>;
+}

src/quiz/components/AnswerContextButton/AnswerContextButton.test.tsx

@@ -2,8 +2,9 @@ import { ReactElement } from "react";
 
 import { describe, expect, it, vi } from "vitest";
 
+import { BUTTON_INFO } from "@quiz/constants/answerButtonInfo";
 import QuizContext from "@quiz/context/quizContext";
-import { QuizContextInfo } from "@quiz/types";
+import { QuizContextInfo } from "@quiz/types/quizContextInfo";
 
 import AnswerContextButton from ".";
 import { render, screen } from "@testing-library/react";
@@ -37,26 +38,45 @@ describe("퀴즈 푸는 하단 버튼, 정답 선택에 따른 테스트", () =>
       states: { answer: null, isSubmit: false },
       ...defaultActions,
     });
-    expect(screen.getByText("정답 제출하기")).toBeInTheDocument();
-    expect(screen.getByRole("button")).toHaveClass(
-      "bg-text-gray3 text-text-gray2",
-    );
+    if (BUTTON_INFO.PRE_ANSWER_SELECT.title)
+      expect(
+        screen.getByText(BUTTON_INFO.PRE_ANSWER_SELECT.title),
+      ).toBeInTheDocument();
+
+    if (BUTTON_INFO.PRE_ANSWER_SELECT.className)
+      expect(screen.getByRole("button")).toHaveClass(
+        BUTTON_INFO.PRE_ANSWER_SELECT.className,
+      );
   });
   it("정답 선택 후 상태", () => {
     renderWithContext({
       states: { answer: "정답!!", isSubmit: false },
       ...defaultActions,
     });
-    expect(screen.getByText("정답 제출하기")).toBeInTheDocument();
-    expect(screen.getByRole("button")).toHaveClass("bg-main");
+    if (BUTTON_INFO.POST_ANSWER_PRE_SUBMIT.title)
+      expect(
+        screen.getByText(BUTTON_INFO.POST_ANSWER_PRE_SUBMIT.title),
+      ).toBeInTheDocument();
+
+    if (BUTTON_INFO.POST_ANSWER_PRE_SUBMIT.className)
+      expect(screen.getByRole("button")).toHaveClass(
+        BUTTON_INFO.POST_ANSWER_PRE_SUBMIT.className,
+      );
   });
 
   it("정답 선택 후 상태", () => {
     renderWithContext({
       states: { answer: "정답!!", isSubmit: true },
       ...defaultActions,
     });
-    expect(screen.getByText("다음 문제 풀기")).toBeInTheDocument();
-    expect(screen.getByRole("button")).toHaveClass("bg-text-black");
+    if (BUTTON_INFO.POST_SUBMIT.title)
+      expect(
+        screen.getByText(BUTTON_INFO.POST_SUBMIT.title),
+      ).toBeInTheDocument();
+
+    if (BUTTON_INFO.POST_SUBMIT.className)
+      expect(screen.getByRole("button")).toHaveClass(
+        BUTTON_INFO.POST_SUBMIT.className,
+      );
   });
 });

src/quiz/components/AnswerContextButton/index.tsx

@@ -4,18 +4,21 @@ import React, { useContext } from "react";
 
 import { Button } from "@shared/components/ui/button";
 
+import { BUTTON_INFO } from "@quiz/constants/answerButtonInfo";
 import QuizContext from "@quiz/context/quizContext";
 
 export default function AnswerContextButton() {
   const {
     states: { answer, isSubmit },
   } = useContext(QuizContext);
 
-  const result = isSubmit ? "다음 문제 풀기" : "정답 제출하기";
+  const result = isSubmit
+    ? BUTTON_INFO.POST_SUBMIT.title
+    : BUTTON_INFO.PRE_ANSWER_SELECT.title;
   const style =
-    (!answer && !isSubmit && "bg-text-gray3 text-text-gray2") ||
-    (answer && !isSubmit && "bg-main") ||
-    "bg-text-black";
+    (!answer && !isSubmit && BUTTON_INFO.PRE_ANSWER_SELECT.className) ||
+    (answer && !isSubmit && BUTTON_INFO.POST_ANSWER_PRE_SUBMIT.className) ||
+    BUTTON_INFO.POST_SUBMIT.className;
 
   return <Button className={style}>{result}</Button>;
 }

src/quiz/context/quizContext/index.tsx

@@ -2,7 +2,7 @@
 
 import { createContext, useState } from "react";
 
-import { QuizContextInfo } from "@quiz/types";
+import { QuizContextInfo } from "@quiz/types/quizContextInfo";
 
 const QuizContext = createContext<QuizContextInfo>({
   states: { answer: "", isSubmit: false },