From 989226b080d3381d3c1354e0bf5163b9e3691f5d Mon Sep 17 00:00:00 2001
From: minseokiim <alstj991226@naver.com>
Date: Tue, 12 Sep 2023 14:45:51 +0900
Subject: [PATCH] feat : Add markdown

---
 package-lock.json     | 18 ++++++++++++
 package.json          |  2 ++
 src/pages/Wiki.tsx    | 67 +++++++++++++++++++++++++++++++++++++++----
 src/routes/router.tsx |  2 +-
 4 files changed, 83 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ef4908af..01066f29 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,8 @@
       "name": "toy1_team13",
       "version": "0.0.0",
       "dependencies": {
+        "@types/marked": "^5.0.1",
+        "marked": "^9.0.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-icons": "^4.11.0",
@@ -2778,6 +2780,11 @@
       "integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==",
       "dev": true
     },
+    "node_modules/@types/marked": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@types/marked/-/marked-5.0.1.tgz",
+      "integrity": "sha512-Y3pAUzHKh605fN6fvASsz5FDSWbZcs/65Q6xYRmnIP9ZIYz27T4IOmXfH9gWJV1dpi7f1e7z7nBGUTx/a0ptpA=="
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@@ -4198,6 +4205,17 @@
         "semver": "bin/semver"
       }
     },
+    "node_modules/marked": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-9.0.0.tgz",
+      "integrity": "sha512-37yoTpjU+TSXb9OBYY5n78z/CqXh76KiQj9xsKxEdztzU9fRLmbWO5YqKxgCVGKlNdexppnbKTkwB3RipVri8w==",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 16"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
diff --git a/package.json b/package.json
index d14c8950..ba4419d5 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@types/marked": "^5.0.1",
+    "marked": "^9.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.11.0",
diff --git a/src/pages/Wiki.tsx b/src/pages/Wiki.tsx
index ddd6fdaf..7cfe5da1 100644
--- a/src/pages/Wiki.tsx
+++ b/src/pages/Wiki.tsx
@@ -1,7 +1,64 @@
-import React from 'react';
+import { useState } from 'react';
+import { marked } from 'marked';
 
-const Wiki = () => {
-  return <div>Wiki</div>;
-};
+interface Note {
+  id: number;
+  content: string;
+}
 
-export default Wiki;
+export function Wiki() {
+  const [markdown, setMarkdown] = useState<string>('');
+  const [notes, setNotes] = useState<Note[]>([]);
+  const [editingId, setEditingId] = useState<number | null>(null);
+
+  const addNote = () => {
+    setNotes([...notes, { id: Date.now(), content: markdown }]);
+    setMarkdown('');
+  };
+
+  const editNote = (id: number) => {
+    const note = notes.find((note) => note.id === id);
+    if (note) {
+      setMarkdown(note.content);
+      setEditingId(id);
+    }
+  };
+
+  const updateNote = () => {
+    setNotes(notes.map((note) => (note.id === editingId ? { ...note, content: markdown } : note)));
+    setMarkdown('');
+    setEditingId(null);
+  };
+
+  const deleteNote = (id: number) => {
+    setNotes(notes.filter((note) => note.id !== id));
+  };
+
+  return (
+    <div>
+      <div>
+        <textarea
+          value={markdown}
+          onChange={(e) => setMarkdown(e.target.value)}
+          placeholder="내용을 입력하세요"
+        />
+
+        {editingId ? (
+          <button onClick={updateNote}>수정 완료</button>
+        ) : (
+          <button onClick={addNote}>추가</button>
+        )}
+      </div>
+
+      <div>
+        {notes.map((note) => (
+          <div key={note.id}>
+            <div className="preview" dangerouslySetInnerHTML={{ __html: marked(note.content) }} />
+            <button onClick={() => editNote(note.id)}>수정</button>
+            <button onClick={() => deleteNote(note.id)}>삭제</button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/routes/router.tsx b/src/routes/router.tsx
index 5070c09f..9b123101 100644
--- a/src/routes/router.tsx
+++ b/src/routes/router.tsx
@@ -1,8 +1,8 @@
 import { createBrowserRouter } from 'react-router-dom';
 import App from '../App';
 import Home from '../pages/Home';
-import Wiki from '../pages/Wiki';
 import Gallery from '../pages/Gallery';
+import { Wiki } from '../pages/Wiki';
 
 export const router = createBrowserRouter([
   {