feat: 과제 보기 스타일링 및 하이라이팅

woowacourse · Aug 9, 2024 · 2a97e63 · 2a97e63
1 parent c6346a0
commit 2a97e63
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 5 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -5,6 +5,8 @@
   "dependencies": {
     "axios": "^0.21.1",
     "classnames": "^2.3.1",
+    "github-markdown-css": "^5.6.1",
+    "highlight.js": "^11.10.0",
     "react": "^18.2.0",
     "react-datepicker": "^4.2.1",
     "react-dom": "^18.2.0",

diff --git a/frontend/src/index.js b/frontend/src/index.js
@@ -5,10 +5,10 @@ import App from "./App";
 
 const root = ReactDOM.createRoot(document.getElementById("app"));
 
-if (process.env.NODE_ENV === "development") {
-  const { worker } = require("./mock/browser");
-  worker.start();
-}
+// if (process.env.NODE_ENV === "development") {
+//   const { worker } = require("./mock/browser");
+//   worker.start();
+// }
 
 root.render(
   <React.StrictMode>

diff --git a/frontend/src/pages/AssignmentViewer/AssignmentViewer.tsx b/frontend/src/pages/AssignmentViewer/AssignmentViewer.tsx
@@ -6,6 +6,9 @@ import styles from "./AssignmentViewer.module.css";
 import { PATH } from "../../constants/path";
 import { fetchMissionRequirements } from "../../api";
 import { useEffect, useState } from "react";
+import highlighter from "highlight.js";
+import "github-markdown-css/github-markdown-light.css";
+import "highlight.js/styles/github.css";
 
 const AssignmentViewer = () => {
   const navigate = useNavigate();
@@ -46,9 +49,13 @@ const AssignmentViewer = () => {
     fetchRequirement();
   }, []);
 
+  useEffect(() => {
+    highlighter.highlightAll();
+  }, [description]);
+
   return (
     <Container>
-      <div dangerouslySetInnerHTML={{ __html: description }} />
+      <div className="markdown-body" dangerouslySetInnerHTML={{ __html: description }} />
       <ul className={styles.buttons}>
         <li>
           <Button type="button" variant={BUTTON_VARIANT.OUTLINED} onClick={goBack}>

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -8422,6 +8422,11 @@ giget@^1.0.0:
     pathe "^1.1.0"
     tar "^6.1.13"
 
+github-markdown-css@^5.6.1:
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/github-markdown-css/-/github-markdown-css-5.6.1.tgz#8ca3d5c3d93d79ea429fddafea091347ab374f78"
+  integrity sha512-DItLFgHd+s7HQmk63YN4/TdvLeRqk1QP7pPKTTPrDTYoI5x7f/luJWSOZxesmuxBI2srHp8RDyoZd+9WF+WK8Q==
+
 github-slugger@^1.0.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/github-slugger/-/github-slugger-1.4.0.tgz#206eb96cdb22ee56fdc53a28d5a302338463444e"
@@ -8660,6 +8665,11 @@ headers-polyfill@^3.1.0:
   resolved "https://registry.yarnpkg.com/headers-polyfill/-/headers-polyfill-3.1.1.tgz#798e265f80edfc53fb8fd01e8963b356b12c2514"
   integrity sha512-ifvvIC+VDeLTEkJDwxECSI7k9rJF7sJavCh/UfhGsgJ+LXMbGILRf+NXhc4znuf+JA5X2/leQdOXk6Lq6Y2/wQ==
 
+highlight.js@^11.10.0:
+  version "11.10.0"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.10.0.tgz#6e3600dc4b33d6dc23d5bd94fbf72405f5892b92"
+  integrity sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==
+
 history@^5.2.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/history/-/history-5.3.0.tgz#1548abaa245ba47992f063a0783db91ef201c73b"