feature/#25/프로젝트 디테일 페이지 제작 및 마크다운 뷰어 추가

백틱(`) 논의 필요

src/components/newpost/MDEditor/mdeditor.tsx → src/components/Newpost/MDEditor/MdeditorWriter.tsx

@@ -8,7 +8,7 @@ import * as Style from "./styles";
 
 const MDEditor = dynamic(() => import("@uiw/react-md-editor"), { ssr: false });
 
-function MdEditor() {
+function MDEditorWriter() {
   const [value, setValue] = useState<string>("**프로젝트 소개를 입력하세요**");
   const [loading, setLoading] = useState<boolean>(false);
   const [isActive, setIsActive] = useState<boolean>(false);
@@ -45,7 +45,7 @@ function MdEditor() {
                 (prev) =>
                   prev.substring(0, cursorPosition) +
                   `\n![image](https://www.kookmin.ac.kr/content/05sub/style0005/images/sub/ui_5_col_image_3.jpg)\n` +
-                  prev.substring(cursorPosition)
+                  prev.substring(cursorPosition),
               );
             }
             setLoading(false);
@@ -77,7 +77,7 @@ function MdEditor() {
             (prev) =>
               prev.substring(0, cursorPosition) +
               `\n![image](https://www.kookmin.ac.kr/content/05sub/style0005/images/sub/ui_5_col_image_2.jpg)\n` +
-              prev.substring(cursorPosition)
+              prev.substring(cursorPosition),
           );
         }
         setLoading(false);
@@ -154,4 +154,4 @@ function MdEditor() {
   );
 }
 
-export default MdEditor;
+export default MDEditorWriter;

src/components/Newpost/Newpost.tsx

@@ -1,6 +1,6 @@
 import * as Style from "./styles";
 import SelectStackType from "../SelectStackType/SelectStackType";
-import NewpostEditor from "./MDEditor/mdeditor";
+import NewpostEditor from "./MDEditor/MdeditorWriter";
 import { useEffect, useRef, useState } from "react";
 import NewpostImages from "./ImageUpload/ImageUpload";
 import { useSelectStacks } from "@/stores/selectStackType/selectStacksStore";

src/components/Project/MDEditor/MdeditorViewer.tsx

@@ -0,0 +1,24 @@
+import "@uiw/react-md-editor/markdown-editor.css";
+import "@uiw/react-markdown-preview/markdown.css";
+import styles from "./styles.module.css";
+import dynamic from "next/dynamic";
+import { testReadme } from "./TestReadme";
+
+const MDEditor = dynamic(() => import("@uiw/react-md-editor"), { ssr: false });
+
+function MDEditorViewer() {
+  return (
+    <div>
+      <MDEditor
+        className={styles.editor}
+        preview={"preview"}
+        hideToolbar={true}
+        visiableDragbar={false}
+        tabSize={2}
+        value={testReadme}
+      />
+    </div>
+  );
+}
+
+export default MDEditorViewer;

src/components/Project/MDEditor/styles.module.css

@@ -0,0 +1,15 @@
+/* 컨테이너 스타일 */
+.editor {
+  min-height: 800px; /* 전체 에디터 높이 지정 */
+}
+
+/* MDEditor 내부 스타일 */
+.editor :global(.w-md-editor-content) {
+  min-height: 800px; /* 내용 영역 높이 설정 */
+  font-size: 16px; /* 글꼴 크기 설정 */
+}
+
+.editor :global(.w-md-editor-text-input) {
+  height: 100%; /* 입력 영역을 꽉 채우도록 설정 */
+  font-size: 16px; /* 글꼴 크기 설정 */
+}

src/components/Project/Project.tsx

@@ -0,0 +1,18 @@
+import { useRouter } from "next/router";
+import MDEditorViewer from "./MDEditor/MdeditorViewer";
+
+export default function ProjectComponents() {
+  const router = useRouter();
+  const { id } = router.query;
+
+  return (
+    <div>
+      <h1> 프로젝트 제목: {id} </h1>
+      <h1> 사진 사진 사진 사진</h1>
+      <h1> 링크 링크 링크 </h1>
+      <h1> Markdown Viewer </h1>
+
+      <MDEditorViewer />
+    </div>
+  );
+}

src/pages/project/[id]/index.tsx

@@ -0,0 +1,5 @@
+import ProjectComponents from "@/components/Project/Project";
+
+export default function Project() {
+  return <ProjectComponents />;
+}

src/styles/mdeditor.css

@@ -35,11 +35,11 @@
 }
 
 .w-md-editor-text {
-  font-size: 21px !important;
-  line-height: 26px !important;
+  font-size: 16px !important;
+  line-height: 20px !important;
 }
 .wmde-markdown {
-  font-size: 20px !important;
+  font-size: 16px !important;
 }
 .w-md-editor-fullscreen {
   height: 100vh !important;