#13 完了

frontend/src/components/TagSearch.tsx

@@ -1,13 +1,16 @@
 import React, { useEffect, useState } from 'react'
 import axios from 'axios'
-import { Link, useNavigate } from 'react-router-dom'
+import { Link, useNavigate, useLocation } from 'react-router-dom'
 import { API_BASE_URL } from '../config'
 
 
 const TagSearch: React.FC = () => {
   const navigate = useNavigate ()
+  const location = useLocation ()
+  const query = new URLSearchParams (location.search)
+  const tagsQuery = query.get ('tags') ?? ''
 
-  const [search, setSearch] = useState ('')
+  const [search, setSearch] = useState (tagsQuery)
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter' && search.length > 0)

frontend/src/components/TagSidebar.tsx

@@ -4,15 +4,33 @@ import { Link } from 'react-router-dom'
 import { API_BASE_URL } from '../config'
 import TagSearch from './TagSearch'
 
+type Tag = { id:    number
+             name:  string }
+type TagByCategory = { [key: string]: Tag[] }
+type OriginalTag = { id: number
+                     name: string
+                     category: string }
+
+const tagNameMap: { [key: string]: string } = {
+    general:    '一般',
+    deerjikist: 'ニジラー',
+    nico:       'ニコニコタグ' }
 
 const TagSidebar: React.FC = () => {
-  const [tags, setTags] = useState<Array<{ id: number, name: string, category: string }>>([])
+  const [tags, setTags] = useState<TagByCategory> ({ })
 
   useEffect(() => {
     const fetchTags = async () => {
       try {
         const response = await axios.get (`${API_BASE_URL}/tags`)
-        setTags(response.data)
+        const tagsTmp: TagByCategory = { }
+        for (const tag of response.data)
+          {
+            if (!(tag.category in tagsTmp))
+              tagsTmp[tag.category] = []
+            tagsTmp[tag.category].push ({ id: tag.id, name: tag.name })
+          }
+        setTags (tagsTmp)
       } catch (error) {
         console.error('Failed to fetch tags:', error)
       }
@@ -24,8 +42,11 @@ const TagSidebar: React.FC = () => {
   return (
       <div className="w-64 bg-gray-100 p-4 border-r border-gray-200 h-full">
         <TagSearch />
+        {['general', 'deerjikist', 'nico'].map (cat => (cat in tags) ? (
+            <>
+              <h2>{tagNameMap[cat]}</h2>
               <ul>
-        {tags.map (tag => (
+                {tags[cat].map (tag => (
                     <li key={tag.id} className="mb-2">
                       <Link
                         to={`/posts?${ (new URLSearchParams ({ tags: tag.name })).toString () }`}
@@ -36,6 +57,8 @@ const TagSidebar: React.FC = () => {
                     </li>
                     ))}
               </ul>
+            </>
+            ) : <></>)}
       </div>
       )
 }

frontend/src/pages/PostPage.tsx

@@ -12,7 +12,10 @@ const PostPage = () => {
   // const anyFlg = query.get ('match') === 'any'
   const anyFlg = false
   const tags = tagsQuery.split (' ').filter (e => e !== '')
+  if (tags.length)
     document.title = `${ tags.join (anyFlg ? ' or ' : ' and ') } | ${ SITE_TITLE }`
+  else
+    document.title = `${ SITE_TITLE }　〜 ぼざクリも、ぼざろ外も、外伝もあるんだよ`
 
   useEffect(() => {
     const fetchPosts = async () => {