From 1b1392be4dbfc68d5a685e22386639ed0ec140e6 Mon Sep 17 00:00:00 2001
From: miteruzo <miteruzo@naver.com>
Date: Sat, 24 May 2025 05:46:24 +0900
Subject: [PATCH] =?UTF-8?q?#13=20=E5=AE=8C=E4=BA=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/TagSearch.tsx  |  7 ++-
 frontend/src/components/TagSidebar.tsx | 59 ++++++++++++++++++--------
 frontend/src/pages/PostPage.tsx        |  5 ++-
 3 files changed, 50 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/TagSearch.tsx b/frontend/src/components/TagSearch.tsx
index e7d38a6..ac7b723 100644
--- a/frontend/src/components/TagSearch.tsx
+++ b/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)
diff --git a/frontend/src/components/TagSidebar.tsx b/frontend/src/components/TagSidebar.tsx
index 8c23f0a..8a10518 100644
--- a/frontend/src/components/TagSidebar.tsx
+++ b/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)
       }
@@ -22,22 +40,27 @@ const TagSidebar: React.FC = () => {
   }, [])
 
   return (
-    <div className="w-64 bg-gray-100 p-4 border-r border-gray-200 h-full">
-      <TagSearch />
-      <ul>
-        {tags.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>
-    </div>
-  )
+      <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[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>
+            </>
+            ) : <></>)}
+      </div>
+      )
 }
 
 export default TagSidebar
diff --git a/frontend/src/pages/PostPage.tsx b/frontend/src/pages/PostPage.tsx
index 7a4dcbf..be95f6d 100644
--- a/frontend/src/pages/PostPage.tsx
+++ b/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 !== '')
-  document.title = `${ tags.join (anyFlg ? ' or ' : ' and ') } | ${ SITE_TITLE }`
+  if (tags.length)
+    document.title = `${ tags.join (anyFlg ? ' or ' : ' and ') } | ${ SITE_TITLE }`
+  else
+    document.title = `${ SITE_TITLE }　〜 ぼざクリも、ぼざろ外も、外伝もあるんだよ`
 
   useEffect(() => {
     const fetchPosts = async () => {