refactor: QuizAnswerModal 내 AnswerCodeBlock 컴포넌트 분리

[boostcampwm2023#221]
flydog98 · Dec 14, 2023 · 193c0bc · 193c0bc
1 parent 60494fa
commit 193c0bc
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 25 deletions.
diff --git a/packages/frontend/src/components/quiz/AnswerCodeBlock/AnswerCodeBlock.css.ts b/packages/frontend/src/components/quiz/AnswerCodeBlock/AnswerCodeBlock.css.ts
@@ -0,0 +1,21 @@
+import { globalStyle, style } from "@vanilla-extract/css";
+
+import color from "../../../design-system/tokens/color";
+import typography from "../../../design-system/tokens/typography";
+
+export const answerContainer = style([
+  typography.$semantic.body2Regular,
+  {
+    backgroundColor: color.$semantic.bgAlt,
+    borderRadius: 8,
+    width: "100%",
+    padding: "23px 25px",
+    marginBottom: 19,
+    whiteSpace: "break-spaces",
+    color: color.$scale.grey700,
+  },
+]);
+
+globalStyle(`${answerContainer} code`, {
+  color: color.$scale.coral500,
+});
diff --git a/packages/frontend/src/components/quiz/AnswerCodeBlock/AnswerCodeBlock.tsx b/packages/frontend/src/components/quiz/AnswerCodeBlock/AnswerCodeBlock.tsx
@@ -0,0 +1,18 @@
+import { toCodeTag } from "../../../utils/mapper";
+
+import { answerContainer } from "./AnswerCodeBlock.css";
+
+interface AnswerCodeBlockProps {
+  answer: string[];
+}
+
+export function AnswerCodeBlock({ answer }: AnswerCodeBlockProps) {
+  return (
+    <p
+      className={answerContainer}
+      dangerouslySetInnerHTML={{
+        __html: toCodeTag(answer.join("\n")),
+      }}
+    />
+  );
+}
diff --git a/packages/frontend/src/components/quiz/AnswerCodeBlock/index.ts b/packages/frontend/src/components/quiz/AnswerCodeBlock/index.ts
@@ -0,0 +1 @@
+export { AnswerCodeBlock } from "./AnswerCodeBlock";
diff --git a/packages/frontend/src/components/quiz/QuizAnswerModal/QuizAnswerModal.css.ts b/packages/frontend/src/components/quiz/QuizAnswerModal/QuizAnswerModal.css.ts
@@ -1,4 +1,4 @@
-import { globalStyle, style } from "@vanilla-extract/css";
+import { style } from "@vanilla-extract/css";
 
 import color from "../../../design-system/tokens/color";
 import typography from "../../../design-system/tokens/typography";
@@ -7,20 +7,3 @@ export const h3 = style([
   typography.$semantic.h3,
   { color: color.$scale.grey700, marginBottom: 20 },
 ]);
-
-export const answerContainer = style([
-  typography.$semantic.body2Regular,
-  {
-    backgroundColor: color.$semantic.bgAlt,
-    borderRadius: 8,
-    width: "100%",
-    padding: "23px 25px",
-    marginBottom: 19,
-    whiteSpace: "break-spaces",
-    color: color.$scale.grey700,
-  },
-]);
-
-globalStyle(`${answerContainer} code`, {
-  color: color.$scale.coral500,
-});
diff --git a/packages/frontend/src/components/quiz/QuizAnswerModal/QuizAnswerModal.tsx b/packages/frontend/src/components/quiz/QuizAnswerModal/QuizAnswerModal.tsx
@@ -1,5 +1,5 @@
 import { Info, Modal } from "../../../design-system/components/common";
-import { toCodeTag } from "../../../utils/mapper";
+import { AnswerCodeBlock } from "../AnswerCodeBlock";
 
 import * as styles from "./QuizAnswerModal.css";
 
@@ -15,12 +15,7 @@ export default function QuizAnswerModal({
   return (
     <Modal onClose={closeModal}>
       <h3 className={styles.h3}>모범 답안</h3>
-      <p
-        className={styles.answerContainer}
-        dangerouslySetInnerHTML={{
-          __html: toCodeTag(answer.join("\n")),
-        }}
-      />
+      <AnswerCodeBlock answer={answer} />
       <Info>
         본 답안은 모범 답안으로 제공되었으며, 상황에 따라 다양한 해결책이 있을
         수 있습니다.

diff --git a/packages/frontend/src/components/quiz/index.ts b/packages/frontend/src/components/quiz/index.ts
@@ -3,3 +3,4 @@ export { default as QuizLocation } from "./QuizLocation";
 export { default as CommandAccordion } from "./CommandAccordion";
 export { SolvedModal, useSolvedModal } from "./SolvedModal";
 export { default as QuizAnswerModal } from "./QuizAnswerModal";
+export { AnswerCodeBlock } from "./AnswerCodeBlock";