#19 ひとまづ表示のみ

frontend/package.json

@@ -21,6 +21,7 @@
     "marked": "^15.0.12",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-markdown": "^10.1.0",
     "react-markdown-editor-lite": "^1.3.4",
     "react-router-dom": "^6.30.0",
     "tailwind-merge": "^3.3.0"

frontend/src/App.tsx

@@ -7,7 +7,7 @@ import TagSidebar from './components/TagSidebar'
 import PostPage from './pages/PostPage'
 import PostNewPage from './pages/PostNewPage'
 import PostDetailPage from './pages/PostDetailPage'
-import WikiEditPage from './pages/WikiEditPage'
+import WikiShowPage from './pages/WikiShowPage'
 import { API_BASE_URL } from './config'
 import axios from 'axios'
 import { Toaster } from '@/components/ui/toaster'
@@ -81,7 +81,7 @@ const App = () => {
                   <Route path="/posts/new" element={<PostNewPage />} />
                   <Route path="/posts/:id" element={<PostDetailPage posts={posts} setPosts={setPosts} />} />
                   <Route path="/tags/:tag" element={<TagPage />} />
-                  <Route path="/wiki/:name" element={<WikiEditPage />} />
+                  <Route path="/wiki/:name" element={<WikiShowPage />} />
                 </Routes>
               </main>
             </div>

frontend/src/components/WikiEditor/index.tsx

@@ -0,0 +1,19 @@
+import MdEditor from 'react-markdown-editor-lite'
+import 'react-markdown-editor-lite/lib/index.css'
+import { marked } from 'marked'
+
+type Props = { value:     string
+               onChange:  (text: string) => void
+               onSave:    () => void }
+
+
+const WikiEditor = ({ value, onChange, onSave }) => (
+    <div className="wiki-editor">
+      <MdEditor value={value}
+                style={{ height: '500px' }}
+                renderHTML={text => marked (text)} />
+      <button onClick={onSave}>保存</button>
+    </div>)
+
+
+export default WikiEditor

frontend/src/pages/WikiEditPage.tsx

@@ -1,40 +0,0 @@
-import { useParams } from 'react-router-dom'
-import { useEffect, useState } from 'react'
-import axios from 'axios'
-
-
-const WikiEditPage = () => {
-  const { name } = useParams<{ name: string }> ()
-
-  const [html, setHtml] = useState('')
-  const [loading, setLoading] = useState(true)
-
-  useEffect(() => {
-    const link = document.createElement('link')
-    link.rel = 'stylesheet'
-    link.href = '/wiki/custom.css'  // Gollum の静的 CSS にアクセスできるようにしとく
-    document.head.appendChild(link)
-    return () => {
-      document.head.removeChild(link)
-    }
-  }, [])
-
-  useEffect(() => {
-    setLoading(true)
-    axios
-      .get(`/api/wiki/edit/${encodeURIComponent(name)}`, {
-        headers: { 'X-Transfer-Code': localStorage.getItem('user_code') || '' }
-      })
-      .then((res) => setHtml(res.data))
-      .finally(() => setLoading(false))
-  }, [name])
-
-  return loading ? (
-    <p>読み込み中...</p>
-  ) : (
-    <div dangerouslySetInnerHTML={{ __html: html }} />
-  )
-}
-
-
-export default WikiEditPage

frontend/src/pages/WikiPage.tsx

@@ -0,0 +1,22 @@
+import axios from 'axios'
+import { useState, useEffect } from 'react'
+import WikiEditor from '@/components/WikiEditor'
+import { API_BASE_URL } from '../config'
+
+
+const WikiPage = () => {
+  const [text, setText] = useState ('')
+
+  useEffect (() => {
+    void (axios.get (`${ API_BASE_URL }/wiki/load`, { params: { page: 'xxx' } })
+          .then (res => setText (res.data.markdown)))
+  }, [])
+
+  const save = () => {
+    void (axios.post ('/api/wiki/save', { page:     'xxx',
+                                          markdown: text })
+          .catch (err => console.error ('保存失敗', err)))
+  }
+
+  return <WikiEditor value={text} onChange={setText} onSave={save} />
+}

frontend/src/pages/WikiShowPage.tsx

@@ -0,0 +1,26 @@
+import { useParams } from 'react-router-dom'
+import ReactMarkdown from 'react-markdown'
+import { useEffect, useState } from 'react'
+import axios from 'axios'
+import { API_BASE_URL } from '@/config'
+
+
+const WikiShowPage = () => {
+  const { name } = useParams ()
+
+  const [markdown, setMarkdown] = useState ('')
+
+  useEffect (() => {
+    void (axios.get (`${ API_BASE_URL }/wiki/${ encodeURIComponent (name) }`)
+          .then (res => setMarkdown (res.data))
+          .catch (() => setMarkdown ('# ページが存在しません')))
+  }, [name])
+
+  return (
+      <div className="prose mx-auto p-4">
+        <ReactMarkdown>{markdown}</ReactMarkdown>
+      </div>)
+}
+
+
+export default WikiShowPage