#30 #31 完了

2025-06-13 01:36:53 +09:00
parent 3363fcd2ae
commit 32ed235807
11 changed files with 327 additions and 259 deletions
@@ -3,6 +3,7 @@ import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-d
 import TagPage from '@/pages/TagPage'
 import TopNav from '@/components/TopNav'
 import TagSidebar from '@/components/TagSidebar'
+import TagDetailSidebar from '@/components/TagDetailSidebar'
 import PostPage from '@/pages/PostPage'
 import PostNewPage from '@/pages/PostNewPage'
 import PostDetailPage from '@/pages/PostDetailPage'
@@ -16,15 +17,13 @@ import { camelizeKeys } from 'humps'
 import type { Post, Tag, User } from '@/types'


-const App = () => {
-  const [posts, setPosts] = useState<Post[]> ([])
+export default () => {
  const [user, setUser] = useState<User | null> (null)

  useEffect (() => {
    const createUser = () => (
        axios.post (`${ API_BASE_URL }/users`)
        .then (res => {
-
          if (res.data.code)
            {
              localStorage.setItem ('user_code', res.data.code)
@@ -56,28 +55,18 @@ const App = () => {
            <TopNav user={user} setUser={setUser} />
            <div className="flex flex-1">
              <Routes>
-                <Route path="/posts/new" />
-                <Route path="/posts" element={<TagSidebar posts={posts} setPosts={setPosts} />} />
-                <Route path="/posts/:id" element={<TagSidebar posts={posts} setPosts={setPosts} />} />
+                <Route path="/" element={<Navigate to="/posts" replace />} />
+                <Route path="/posts" element={<PostPage />} />
+                <Route path="/posts/new" element={<PostNewPage />} />
+                <Route path="/posts/:id" element={<PostDetailPage />} />
+                <Route path="/tags/:tag" element={<TagPage />} />
+                <Route path="/wiki/:name" element={<WikiDetailPage />} />
+                <Route path="/wiki/new" element={<WikiNewPage />} />
+                {/* <Route path="/wiki/:id/edit" element={<WikiEditPage />} /> */}
              </Routes>
-              <main className="flex-1 overflow-y-auto p-4">
-                <Routes>
-                  <Route path="/" element={<Navigate to="/posts" replace />} />
-                  <Route path="/posts" element={<PostPage posts={posts} setPosts={setPosts} />} />
-                  <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={<WikiDetailPage />} />
-                  <Route path="/wiki/new" element={<WikiNewPage />} />
-                  {/* <Route path="/wiki/:id/edit" element={<WikiEditPage />} /> */}
-                </Routes>
-              </main>
            </div>
          </div>
        </Router>
        <Toaster />
      </>)
 }
-
-
-export default App
@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from 'react'
+import axios from 'axios'
+import { Link, useParams } from 'react-router-dom'
+import { API_BASE_URL } from '@/config'
+import TagSearch from './TagSearch'
+import SidebarComponent from './layout/SidebarComponent'
+
+import type { Post, Tag } from '@/types'
+
+type TagByCategory = { [key: string]: Tag[] }
+
+type Props = { post: Post | null }
+
+
+export default ({ post }: Props) => {
+  const [tags, setTags] = useState<TagByCategory> ({ })
+
+  const categoryNames: { [key: string]: string } = {
+      general:    '一般',
+      deerjikist: 'ニジラー',
+      nico:       'ニコニコタグ' }
+
+  useEffect (() => {
+    if (!(post))
+      return
+
+    const fetchTags = async () => {
+      const tagsTmp: TagByCategory = { }
+      for (const tag of post.tags)
+        {
+          if (!(tag.category in tagsTmp))
+            tagsTmp[tag.category] = []
+          tagsTmp[tag.category].push (tag)
+        }
+      for (const cat of Object.keys (tagsTmp))
+        tagsTmp[cat].sort ((tagA, tagB) => tagA.name < tagB.name ? -1 : 1)
+      setTags (tagsTmp)
+    }
+
+    fetchTags ()
+  }, [post])
+
+  return (
+      <SidebarComponent>
+        <TagSearch />
+        {['general', 'deerjikist', 'nico'].map (cat => cat in tags && (
+            <>
+              <h2>{categoryNames[cat]}</h2>
+              <ul>
+                {tags[cat].map (tag => (
+                    <li key={tag.id} className="mb-2">
+                      <Link to={`/posts?${ (new URLSearchParams ({ tags: tag.name })).toString () }`}
+                            className="text-blue-600 hover:underline">
+                        {tag.name}
+                      </Link>
+                    </li>))}
+              </ul>
+            </>))}
+      </SidebarComponent>)
+}
@@ -1,15 +1,15 @@
 import React, { useEffect, useState } from 'react'
 import axios from 'axios'
 import { Link, useParams } from 'react-router-dom'
-import { API_BASE_URL } from '../config'
+import { API_BASE_URL } from '@/config'
 import TagSearch from './TagSearch'
+import SidebarComponent from './layout/SidebarComponent'

 import type { Post, Tag } from '@/types'

 type TagByCategory = { [key: string]: Tag[] }

-type Props = { posts:     Post[]
-               setPosts:  (posts: Post[]) => void }
+type Props = { posts: Post[] }


 const tagNameMap: { [key: string]: string } = {
@@ -17,46 +17,35 @@ const tagNameMap: { [key: string]: string } = {
    deerjikist: 'ニジラー',
    nico:       'ニコニコタグ' }

-const TagSidebar: React.FC = (props: Props) => {
-  const { posts, setPosts } = props

+export default ({ posts }: Props) => {
  const [tags, setTags] = useState<TagByCategory> ({ })
-  const [tagsCounts, setTagsCounts] = useState<{ [key: id]: number }> ({ })
+  const [tagsCounts, setTagsCounts] = useState<{ [key: number]: number }> ({ })

  useEffect (() => {
-    const fetchTags = async () => {
-      try
+    const tagsTmp: TagByCategory = { }
+    const tagsCountsTmp: { [key: number]: number } = { }
+    for (const post of posts)
      {
-        let tagsTmp: TagByCategory = { }
-        let tagsCountsTmp: { [key: id]: number } = { }
-        for (const post of posts)
+        for (const tag of post.tags)
          {
-            for (const tag of post.tags)
-              {
-                if (!(tag.category in tagsTmp))
-                  tagsTmp[tag.category] = []
-                tagsTmp[tag.category].push (tag)
-                if (!(tag.id in tagsCountsTmp))
-                  tagsCountsTmp[tag.id] = 0
-                ++tagsCountsTmp[tag.id]
-              }
+            if (!(tag.category in tagsTmp))
+              tagsTmp[tag.category] = []
+            if (!(tagsTmp[tag.category].map (t => t.id).includes (tag.id)))
+              tagsTmp[tag.category].push (tag)
+            if (!(tag.id in tagsCountsTmp))
+              tagsCountsTmp[tag.id] = 0
+            ++tagsCountsTmp[tag.id]
          }
-        for (const cat of Object.keys (tagsTmp))
-          tagsTmp[cat].sort ((tagA, tagB) => tagA.name < tagB.name ? -1 : 1)
-        setTags (tagsTmp)
-        setTagsCounts (tagsCountsTmp)
      }
-      catch (error)
-      {
-        console.error ('Failed to fetch tags:', error)
-      }
-    }
-
-    fetchTags ()
+    for (const cat of Object.keys (tagsTmp))
+      tagsTmp[cat].sort ((tagA, tagB) => tagA.name < tagB.name ? -1 : 1)
+    setTags (tagsTmp)
+    setTagsCounts (tagsCountsTmp)
  }, [posts])

  return (
-      <div className="w-64 bg-gray-100 p-4 border-r border-gray-200 h-full">
+      <SidebarComponent>
        <TagSearch />
        {['general', 'deerjikist', 'nico'].map (cat => cat in tags && <>
            <h2>{tagNameMap[cat]}</h2>
@@ -67,11 +56,9 @@ const TagSidebar: React.FC = (props: Props) => {
                          className="text-blue-600 hover:underline">
                      {tag.name}
                    </Link>
-                    {posts.length > 1 && <span className="ml-1">{tagsCounts[tag.id]}</span>}
+                    <span className="ml-1">{tagsCounts[tag.id]}</span>
                  </li>))}
            </ul>
            </>)}
-      </div>)
+      </SidebarComponent>)
 }
-
-export default TagSidebar
@@ -0,0 +1,9 @@
+import React from 'react'
+
+type Props = { children: React.ReactNode }
+
+
+export default ({ children }: Props) => (
+    <main className="flex-1 overflow-y-auto p-4">
+      {children}
+    </main>)
@@ -0,0 +1,9 @@
+import React from 'react'
+
+type Props = { children: React.ReactNode }
+
+
+export default ({ children }: Props) => (
+    <div className="w-64 bg-gray-100 p-4 border-r border-gray-200 h-full">
+      {children}
+    </div>)
@@ -1,32 +1,33 @@
 import React, { useEffect, useState } from 'react'
 import { Link, useLocation, useParams } from 'react-router-dom'
 import axios from 'axios'
-import { API_BASE_URL, SITE_TITLE } from '../config'
-import NicoViewer from '../components/NicoViewer'
+import { API_BASE_URL, SITE_TITLE } from '@/config'
+import NicoViewer from '@/components/NicoViewer'
 import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
 import { cn } from '@/lib/utils'
+import MainArea from '@/components/layout/MainArea'
+import TagDetailSidebar from '@/components/TagDetailSidebar'

 import type { Post, Tag } from '@/types'

-type Props = { posts:     Post[]
-               setPosts:  (posts: Post[]) => void }

-
-const PostDetailPage = ({ posts, setPosts }: Props) => {
+const PostDetailPage = () => {
  const { id } = useParams ()

+  const [post, setPost] = useState<Post | null> (null)
+
  const location = useLocation ()

  const changeViewedFlg = () => {
-    if (posts[0]?.viewed)
+    if (post?.viewed)
      {
        void (axios.delete (
                  `${ API_BASE_URL }/posts/${ id }/viewed`,
                  { headers: { 'X-Transfer-Code': localStorage.getItem ('user_code') || '' } })
-              .then (res => setPosts (([post]) => {
+              .then (res => setPost (post => {
                post.viewed = false
-                return [post]
+                return post
              }))
              .catch (err => toast ({ title:        '失敗……',
                                      description:  '通信に失敗しました……' })))
@@ -37,9 +38,9 @@ const PostDetailPage = ({ posts, setPosts }: Props) => {
                  `${ API_BASE_URL }/posts/${ id }/viewed`,
                  { },
                  { headers: { 'X-Transfer-Code': localStorage.getItem ('user_code') || '' } })
-              .then (res => setPosts (([post]) => {
+              .then (res => setPost (post => {
                post.viewed = true
-                return [post]
+                return post
              }))
              .catch (err => toast ({ title:        '失敗……',
                                      description:  '通信に失敗しました……' })))
@@ -51,40 +52,51 @@ const PostDetailPage = ({ posts, setPosts }: Props) => {
      return
    void (axios.get (`${ API_BASE_URL }/posts/${ id }`, { headers: {
              'X-Transfer-Code': localStorage.getItem ('user_code') || '' } })
-          .then (res => setPosts ([res.data]))
+          .then (res => setPost (res.data))
          .catch (err => console.error ('うんち!', err)))
  }, [id])

-  if (!(posts.length))
-    return <div>Loading...</div>
+  if (!(post))
+    return (
+        <>
+          <TagDetailSidebar post={null} />
+          <MainArea>Loading...</MainArea>
+        </>)

-  const post = posts[0]
+  if (post)
+    document.title = `${ post.title || post.url } | ${ SITE_TITLE }`

-  document.title = `${ post.title || post.url } | ${ SITE_TITLE }`
-
-  const url = new URL (post.url)
+  const url = post ? new URL (post.url) : undefined

  return (
-      <div className="p-4">
-        {(() => {
-          if (url.hostname.split ('.').slice (-2).join ('.') === 'nicovideo.jp')
-            {
-              return (
-                  <NicoViewer
-                    id={url.pathname.match (
-                          /(?<=\/watch\/)[a-zA-Z0-9]+?(?=\/|$)/)[0]}
-                    width="640"
-                    height="360" />)
-            }
-          else
-            return <img src={post.thumbnail} alt={post.url} className="mb-4 w-full" />
-        }) ()}
-        <Button onClick={changeViewedFlg}
-                className={cn ('text-white',
-                               posts[0]?.viewed ? 'bg-blue-600 hover:bg-blue-700' : 'bg-gray-500 hover:bg-gray-600')}>
-          {posts[0]?.viewed ? '閲覧済' : '未閲覧'}
-        </Button>
-      </div>)
+      <>
+        <TagDetailSidebar post={post} />
+        <MainArea>
+          {post
+           ? (
+              <div className="p-4">
+                {(() => {
+                  if (url.hostname.split ('.').slice (-2).join ('.') === 'nicovideo.jp')
+                    {
+                      return (
+                          <NicoViewer
+                            id={url.pathname.match (
+                                  /(?<=\/watch\/)[a-zA-Z0-9]+?(?=\/|$)/)[0]}
+                            width="640"
+                            height="360" />)
+                    }
+                  else
+                    return <img src={post.thumbnail} alt={post.url} className="mb-4 w-full" />
+                }) ()}
+                <Button onClick={changeViewedFlg}
+                        className={cn ('text-white',
+                                       post.viewed ? 'bg-blue-600 hover:bg-blue-700' : 'bg-gray-500 hover:bg-gray-600')}>
+                  {post.viewed ? '閲覧済' : '未閲覧'}
+                </Button>
+              </div>)
+           : 'Loading...'}
+        </MainArea>
+      </>)
 }


@@ -6,6 +6,7 @@ import NicoViewer from '../components/NicoViewer'
 import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
 import { cn } from '@/lib/utils'
+import MainArea from '@/components/layout/MainArea'

 import type { Post, Tag } from '@/types'

@@ -14,7 +15,7 @@ type Props = { posts:     Post[]
               setPosts:  (posts: Post[]) => void }


-const PostNewPage = () => {
+export default () => {
  const location = useLocation ()
  const navigate = useNavigate ()

@@ -112,99 +113,98 @@ const PostNewPage = () => {
  }

  return (
-      <div className="max-w-xl mx-auto p-4 space-y-4">
-        <h1 className="text-2xl font-bold mb-2">広場に投稿を追加する</h1>
+      <MainArea>
+        <div className="max-w-xl mx-auto p-4 space-y-4">
+          <h1 className="text-2xl font-bold mb-2">広場に投稿を追加する</h1>

-        {/* URL */}
-        <div>
-          <label className="block font-semibold mb-1">URL</label>
-          <input type="text"
-                 placeholder="例：https://www.nicovideo.jp/watch/..."
-                 value={url}
-                 onChange={e => setURL (e.target.value)}
-                 className="w-full border p-2 rounded"
-                 onBlur={handleURLBlur} />
-        </div>
-
-        {/* タイトル */}
-        <div>
-          <div className="flex gap-2 mb-1">
-            <label className="flex-1 block font-semibold">タイトル</label>
-            <label className="flex items-center block gap-1">
-              <input type="checkbox"
-                     checked={titleAutoFlg}
-                     onChange={e => setTitleAutoFlg (e.target.checked)} />
-              自動
-            </label>
+          {/* URL */}
+          <div>
+            <label className="block font-semibold mb-1">URL</label>
+            <input type="text"
+                   placeholder="例：https://www.nicovideo.jp/watch/..."
+                   value={url}
+                   onChange={e => setURL (e.target.value)}
+                   className="w-full border p-2 rounded"
+                   onBlur={handleURLBlur} />
          </div>
-          <input type="text"
-                 className="w-full border rounded p-2"
-                 value={title}
-                 placeholder={titleLoading ? 'Loading...' : ''}
-                 onChange={e => setTitle (e.target.value)}
-                 disabled={titleAutoFlg} />
-        </div>

-        {/* サムネール */}
-        <div>
-          <div className="flex gap-2 mb-1">
-            <label className="block font-semibold flex-1">サムネール</label>
-            <label className="flex items-center gap-1">
-              <input type="checkbox"
-                     checked={thumbnailAutoFlg}
-                     onChange={e => setThumbnailAutoFlg (e.target.checked)} />
-              自動
-            </label>
+          {/* タイトル */}
+          <div>
+            <div className="flex gap-2 mb-1">
+              <label className="flex-1 block font-semibold">タイトル</label>
+              <label className="flex items-center block gap-1">
+                <input type="checkbox"
+                       checked={titleAutoFlg}
+                       onChange={e => setTitleAutoFlg (e.target.checked)} />
+                自動
+              </label>
+            </div>
+            <input type="text"
+                   className="w-full border rounded p-2"
+                   value={title}
+                   placeholder={titleLoading ? 'Loading...' : ''}
+                   onChange={e => setTitle (e.target.value)}
+                   disabled={titleAutoFlg} />
          </div>
-          {thumbnailAutoFlg
-           ? (thumbnailLoading
-              ? <p className="text-gray-500 text-sm">Loading...</p>
-              : !(thumbnailPreview) && (
-                  <p className="text-gray-500 text-sm">
-                    URL から自動取得されます。
-                  </p>))
-           : (
-              <input type="file"
-                     accept="image/*"
-                     onChange={e => {
-                       const file = e.target.files?.[0]
-                       if (file)
-                         {
-                           setThumbnailFile (file)
-                           setThumbnailPreview (URL.createObjectURL (file))
-                         }
-                     }} />)}
-          {thumbnailPreview && (
-              <img src={thumbnailPreview}
-                   alt="preview"
-                   className="mt-2 max-h-48 rounded border" />)}
-        </div>

-        {/* タグ */}
-        <div>
-          <label className="block font-semibold">タグ</label>
-          <select multiple
-                  value={tagIds.map (String)}
-                  onChange={e => {
-                    const values = Array.from (e.target.selectedOptions).map (o => Number (o.value))
-                    setTagIds (values)
-                  }}
-                  className="w-full p-2 border rounded h-32">
-            {tags.map ((tag: Tag) => (
-                <option key={tag.id} value={tag.id}>
-                  {tag.name}
-                </option>))}
-          </select>
-        </div>
+          {/* サムネール */}
+          <div>
+            <div className="flex gap-2 mb-1">
+              <label className="block font-semibold flex-1">サムネール</label>
+              <label className="flex items-center gap-1">
+                <input type="checkbox"
+                       checked={thumbnailAutoFlg}
+                       onChange={e => setThumbnailAutoFlg (e.target.checked)} />
+                自動
+              </label>
+            </div>
+            {thumbnailAutoFlg
+             ? (thumbnailLoading
+                ? <p className="text-gray-500 text-sm">Loading...</p>
+                : !(thumbnailPreview) && (
+                    <p className="text-gray-500 text-sm">
+                      URL から自動取得されます。
+                    </p>))
+             : (
+                <input type="file"
+                       accept="image/*"
+                       onChange={e => {
+                         const file = e.target.files?.[0]
+                         if (file)
+                           {
+                             setThumbnailFile (file)
+                             setThumbnailPreview (URL.createObjectURL (file))
+                           }
+                       }} />)}
+            {thumbnailPreview && (
+                <img src={thumbnailPreview}
+                     alt="preview"
+                     className="mt-2 max-h-48 rounded border" />)}
+          </div>

-        {/* 送信 */}
-        <button onClick={handleSubmit}
-                className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400"
-                disabled={titleLoading || thumbnailLoading}>
-          追加
-        </button>
-      </div>)
+          {/* タグ */}
+          <div>
+            <label className="block font-semibold">タグ</label>
+            <select multiple
+                    value={tagIds.map (String)}
+                    onChange={e => {
+                      const values = Array.from (e.target.selectedOptions).map (o => Number (o.value))
+                      setTagIds (values)
+                    }}
+                    className="w-full p-2 border rounded h-32">
+              {tags.map ((tag: Tag) => (
+                  <option key={tag.id} value={tag.id}>
+                    {tag.name}
+                  </option>))}
+            </select>
+          </div>
+
+          {/* 送信 */}
+          <button onClick={handleSubmit}
+                  className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400"
+                  disabled={titleLoading || thumbnailLoading}>
+            追加
+          </button>
+        </div>
+      </MainArea>)
 }
-
-
-export default PostNewPage
@@ -2,15 +2,14 @@ import React, { useEffect, useState } from 'react'
 import { Link, useLocation } from 'react-router-dom'
 import axios from 'axios'
 import { API_BASE_URL, SITE_TITLE } from '@/config'
+import TagSidebar from '@/components/TagSidebar'
+import MainArea from '@/components/layout/MainArea'

 import type { Post, Tag } from '@/types'

-type Props = { posts:     Post[]
-               setPosts:  (posts: Post[]) => void }

-
-const PostPage = (props: Props) => {
-  const { posts, setPosts } = props
+export default () => {
+  const [posts, setPosts] = useState<Post[]> ([])

  const location = useLocation ()
  const query = new URLSearchParams (location.search)
@@ -42,17 +41,19 @@ const PostPage = (props: Props) => {
  }, [location.search])

  return (
-      <div className="flex flex-wrap gap-4 p-4">
-        {posts.map (post => (
-          <Link to={`/posts/${ post.id }`}
-                key={post.id}
-                className="w-40 h-40 overflow-hidden rounded-lg shadow-md hover:shadow-lg">
-            <img src={post.thumbnail ?? post.thumbnail_base}
-                 className="object-none w-full h-full" />
-          </Link>
-        ))}
-      </div>)
+      <>
+        <TagSidebar posts={posts} />
+        <MainArea>
+          <div className="flex flex-wrap gap-4 p-4">
+            {posts.map (post => (
+              <Link to={`/posts/${ post.id }`}
+                    key={post.id}
+                    className="w-40 h-40 overflow-hidden rounded-lg shadow-md hover:shadow-lg">
+                <img src={post.thumbnail ?? post.thumbnail_base}
+                     className="object-none w-full h-full" />
+              </Link>
+            ))}
+          </div>
+        </MainArea>
+      </>)
 }
-
-
-export default PostPage
@@ -2,8 +2,10 @@ import React, { useEffect, useState } from 'react'
 import axios from 'axios'
 import { useParams } from 'react-router-dom'
 import { API_BASE_URL } from '../config'
+import MainArea from '@/components/layout/MainArea'

-const TagPage = () => {
+
+export default () => {
  const { id } = useParams()
  const [posts, setPosts] = useState([])
  const [tagName, setTagName] = useState('')
@@ -32,18 +34,17 @@ const TagPage = () => {
  }, [id])

  return (
-    <div className="container mx-auto p-4">
-      <h1 className="text-2xl font-bold mb-4">タグ: {tagName}</h1>
-      <div className="grid grid-cols-4 gap-4">
-        {posts.map ((post, index) => (
-          <div key={index} className="border rounded p-2">
-            <img src={post.image_url} alt={post.title} className="w-full h-48 object-cover mb-2" />
-            <h2 className="text-lg font-semibold">{post.title}</h2>
+      <MainArea>
+        <div className="container mx-auto p-4">
+          <h1 className="text-2xl font-bold mb-4">タグ: {tagName}</h1>
+          <div className="grid grid-cols-4 gap-4">
+            {posts.map ((post, index) => (
+              <div key={index} className="border rounded p-2">
+                <img src={post.image_url} alt={post.title} className="w-full h-48 object-cover mb-2" />
+                <h2 className="text-lg font-semibold">{post.title}</h2>
+              </div>
+            ))}
          </div>
-        ))}
-      </div>
-    </div>
-  )
+        </div>
+      </MainArea>)
 }
-
-export default TagPage
@@ -3,9 +3,10 @@ import { Link, useParams, useNavigate } from 'react-router-dom'
 import ReactMarkdown from 'react-markdown'
 import axios from 'axios'
 import { API_BASE_URL } from '@/config'
+import MainArea from '@/components/layout/MainArea'


-const WikiDetailPage = () => {
+export default () => {
  const { name } = useParams ()

  const navigate = useNavigate ()
@@ -26,15 +27,14 @@ const WikiDetailPage = () => {
  }, [name])

  return (
-      <div className="prose mx-auto p-4">
-        <ReactMarkdown components={{ a: (
-            ({ href, children }) => (href?.startsWith ('/')
-                                     ? <Link to={href!}>{children}</Link>
-                                     : <a href={href} target="_blank" rel="noopener noreferrer">{children}</a>)) }}>
-          {markdown || `このページは存在しません。[新規作成してください](/wiki/new?title=${ name })。`}
-        </ReactMarkdown>
-      </div>)
+      <MainArea>
+        <div className="prose mx-auto p-4">
+          <ReactMarkdown components={{ a: (
+              ({ href, children }) => (href?.startsWith ('/')
+                                       ? <Link to={href!}>{children}</Link>
+                                       : <a href={href} target="_blank" rel="noopener noreferrer">{children}</a>)) }}>
+            {markdown || `このページは存在しません。[新規作成してください](/wiki/new?title=${ name })。`}
+          </ReactMarkdown>
+        </div>
+      </MainArea>)
 }
-
-
-export default WikiDetailPage
@@ -9,13 +9,14 @@ import { cn } from '@/lib/utils'
 import MarkdownIt from 'markdown-it'
 import MdEditor from 'react-markdown-editor-lite'
 import 'react-markdown-editor-lite/lib/index.css'
+import MainArea from '@/components/layout/MainArea'

 import type { Tag } from '@/types'

 const mdParser = new MarkdownIt


-const WikiNewPage = () => {
+export default () => {
  const location = useLocation ()
  const navigate = useNavigate ()

@@ -46,35 +47,34 @@ const WikiNewPage = () => {
  }, [])

  return (
-      <div className="max-w-xl mx-auto p-4 space-y-4">
-        <h1 className="text-2xl font-bold mb-2">新規 Wiki ページ</h1>
+      <MainArea>
+        <div className="max-w-xl mx-auto p-4 space-y-4">
+          <h1 className="text-2xl font-bold mb-2">新規 Wiki ページ</h1>

-        {/* タイトル */}
-        {/* TODO: タグ補完 */}
-        <div>
-          <label className="block font-semibold mb-1">タイトル</label>
-          <input type="text"
-                 value={title}
-                 onChange={e => setTitle (e.target.value)}
-                 className="w-full border p-2 rounded" />
+          {/* タイトル */}
+          {/* TODO: タグ補完 */}
+          <div>
+            <label className="block font-semibold mb-1">タイトル</label>
+            <input type="text"
+                   value={title}
+                   onChange={e => setTitle (e.target.value)}
+                   className="w-full border p-2 rounded" />
+          </div>
+
+          {/* 本文 */}
+          <div>
+            <label className="block font-semibold mb-1">本文</label>
+            <MdEditor value={body}
+                      style={{ height: '500px' }}
+                      renderHTML={text => mdParser.render (text)}
+                      onChange={({ text }) => setBody (text)} />
+          </div>
+
+          {/* 送信 */}
+          <button onClick={handleSubmit}
+                  className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400">
+            追加
+          </button>
        </div>
-
-        {/* 本文 */}
-        <div>
-          <label className="block font-semibold mb-1">本文</label>
-          <MdEditor value={body}
-                    style={{ height: '500px' }}
-                    renderHTML={text => mdParser.render (text)}
-                    onChange={({ text }) => setBody (text)} />
-        </div>
-
-        {/* 送信 */}
-        <button onClick={handleSubmit}
-                className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400">
-          追加
-        </button>
-      </div>)
+      </MainArea>)
 }
-
-
-export default WikiNewPage