diff --git a/packages/frontend/src/components/quiz/AnswerCodeBlock/AnswerCodeBlock.tsx b/packages/frontend/src/components/quiz/AnswerCodeBlock/AnswerCodeBlock.tsx
deleted file mode 100644
index ba36fb9f..00000000
--- a/packages/frontend/src/components/quiz/AnswerCodeBlock/AnswerCodeBlock.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-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
deleted file mode 100644
index 0c6a1a26..00000000
--- a/packages/frontend/src/components/quiz/AnswerCodeBlock/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { AnswerCodeBlock } from "./AnswerCodeBlock";
diff --git a/packages/frontend/src/components/quiz/QuizAnswerModal/QuizAnswerModal.tsx b/packages/frontend/src/components/quiz/QuizAnswerModal/QuizAnswerModal.tsx
index 483486d6..e571838b 100644
--- 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
index 09c91602..1b378256 100644
--- 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/packages/frontend/src/components/quiz/AnswerCodeBlock/AnswerCodeBlock.css.ts b/packages/frontend/src/design-system/components/common/CodeBlock/CodeBlock.css.ts
similarity index 56%
rename from packages/frontend/src/components/quiz/AnswerCodeBlock/AnswerCodeBlock.css.ts
rename to packages/frontend/src/design-system/components/common/CodeBlock/CodeBlock.css.ts
index aaabdcba..f6f296c6 100644
--- a/packages/frontend/src/components/quiz/AnswerCodeBlock/AnswerCodeBlock.css.ts
+++ b/packages/frontend/src/design-system/components/common/CodeBlock/CodeBlock.css.ts
@@ -1,10 +1,8 @@
 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";
 
-export const answerContainer = style([
-  typography.$semantic.body2Regular,
+export const container = style([
   {
     backgroundColor: color.$semantic.bgAlt,
     borderRadius: 8,
@@ -16,6 +14,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
new file mode 100644
index 00000000..4a7c6d74
--- /dev/null
+++ 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
new file mode 100644
index 00000000..8633f07d
--- /dev/null
+++ 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
index 1cdf17d3..9115e61d 100644
--- 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
index 7da489ce..8d8f9f49 100644
--- 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>
   );