refactor: AnswerCodeBlock > 공용 컴포넌트로 이동

[#221]
boostcampwm2023 · Dec 7, 2023 · 0fddb8d · 0fddb8d
1 parent 5f7bfa8
commit 0fddb8d
Show file tree

Hide file tree

Showing 9 changed files with 46 additions and 32 deletions.
diff --git a/packages/frontend/src/components/quiz/AnswerCodeBlock/AnswerCodeBlock.tsx b/packages/frontend/src/components/quiz/AnswerCodeBlock/AnswerCodeBlock.tsx
diff --git a/packages/frontend/src/components/quiz/AnswerCodeBlock/index.ts b/packages/frontend/src/components/quiz/AnswerCodeBlock/index.ts
diff --git a/packages/frontend/src/components/quiz/QuizAnswerModal/QuizAnswerModal.tsx b/packages/frontend/src/components/quiz/QuizAnswerModal/QuizAnswerModal.tsx
@@ -1,5 +1,9 @@
-import { Info, Modal } from "../../../design-system/components/common";
-import { AnswerCodeBlock } from "../AnswerCodeBlock";
+import {
+  CodeBlock,
+  Info,
+  Modal,
+} from "../../../design-system/components/common";
+import typography from "../../../design-system/tokens/typography";
 
 import * as styles from "./QuizAnswerModal.css";
 
@@ -15,7 +19,7 @@ export default function QuizAnswerModal({
   return (
     <Modal onClose={closeModal}>
       <h3 className={styles.h3}>모범 답안</h3>
-      <AnswerCodeBlock answer={answer} />
+      <CodeBlock code={answer} className={typography.$semantic.body2Regular} />
       <Info>
         본 답안은 모범 답안으로 제공되었으며, 상황에 따라 다양한 해결책이 있을
         수 있습니다.

diff --git a/packages/frontend/src/components/quiz/index.ts b/packages/frontend/src/components/quiz/index.ts
@@ -3,4 +3,3 @@ 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";
diff --git a/...iz/AnswerCodeBlock/AnswerCodeBlock.css.ts → ...ponents/common/CodeBlock/CodeBlock.css.ts b/...iz/AnswerCodeBlock/AnswerCodeBlock.css.ts → ...ponents/common/CodeBlock/CodeBlock.css.ts
@@ -1,13 +1,12 @@
 import { globalStyle, style } from "@vanilla-extract/css";
 
-import color from "../../../design-system/tokens/color";
-import typography from "../../../design-system/tokens/typography";
+import color from "../../../tokens/color";
+import { borderRadius } from "../../../tokens/utils.css";
 
-export const answerContainer = style([
-  typography.$semantic.body2Regular,
+export const container = style([
+  borderRadius,
   {
     backgroundColor: color.$semantic.bgAlt,
-    borderRadius: 8,
     width: "100%",
     padding: "23px 25px",
     marginBottom: 19,
@@ -16,6 +15,6 @@ export const answerContainer = style([
   },
 ]);
 
-globalStyle(`${answerContainer} code`, {
+globalStyle(`${container} code`, {
   color: color.$scale.coral500,
 });
diff --git a/packages/frontend/src/design-system/components/common/CodeBlock/CodeBlock.tsx b/packages/frontend/src/design-system/components/common/CodeBlock/CodeBlock.tsx
@@ -0,0 +1,21 @@
+import { container } from "./CodeBlock.css";
+
+interface CodeBlockProps {
+  code: string[];
+  className?: string;
+}
+
+export function CodeBlock({ code, className = "" }: CodeBlockProps) {
+  return (
+    <p
+      className={[className, container].join(" ").trim()}
+      dangerouslySetInnerHTML={{
+        __html: toCodeTag(code.join("\n")),
+      }}
+    />
+  );
+}
+
+function toCodeTag(code: string) {
+  return code.replaceAll(/`(.*?)`/g, "<code>$1</code>");
+}
diff --git a/packages/frontend/src/design-system/components/common/CodeBlock/index.ts b/packages/frontend/src/design-system/components/common/CodeBlock/index.ts
@@ -0,0 +1 @@
+export { CodeBlock } from "./CodeBlock";
diff --git a/packages/frontend/src/design-system/components/common/index.ts b/packages/frontend/src/design-system/components/common/index.ts
@@ -7,3 +7,4 @@ export { toast, ToastContainer } from "./Toast";
 export { Accordion, useAccordion } from "./Accordion";
 export { default as Footer } from "./Footer";
 export { default as Info } from "./Info";
+export { CodeBlock } from "./CodeBlock";
diff --git a/packages/frontend/src/pages/share/[slug].page.tsx b/packages/frontend/src/pages/share/[slug].page.tsx
@@ -3,9 +3,14 @@ import { useRouter } from "next/router";
 import { useCallback, useEffect, useState } from "react";
 
 import { GetSharedAnswerResponse, quizAPI } from "../../apis/quiz";
-import { AnswerCodeBlock, QuizContent } from "../../components/quiz";
+import { QuizContent } from "../../components/quiz";
 import { BROWSWER_PATH } from "../../constants/path";
-import { Button, toast } from "../../design-system/components/common";
+import {
+  Button,
+  CodeBlock,
+  toast,
+} from "../../design-system/components/common";
+import typography from "../../design-system/tokens/typography";
 import { isString } from "../../utils/typeGuard";
 
 import * as styles from "./slug.css";
@@ -77,7 +82,10 @@ export default function AnswerSharePage() {
       <section className={styles.answerContainer}>
         <h2 className={styles.h2}>공유된 답안</h2>
         <hr className={styles.hr} />
-        <AnswerCodeBlock answer={answer} />
+        <CodeBlock
+          code={answer}
+          className={typography.$semantic.body2Regular}
+        />
       </section>
     </main>
   );