From 2e2a45d0a39f68627579edf027991a42ad201920 Mon Sep 17 00:00:00 2001
From: miteruzo <miteruzo@naver.com>
Date: Thu, 24 Jul 2025 04:07:51 +0900
Subject: [PATCH] =?UTF-8?q?#23=20=E3=82=BF=E3=82=B0=E4=B8=80=E8=A6=A7?=
 =?UTF-8?q?=E3=81=AE=E3=82=B9=E3=83=9E=E3=83=9B=E3=81=A7=E3=81=AE=E8=A1=A8?=
 =?UTF-8?q?=E7=A4=BA=E4=BD=8D=E7=BD=AE=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/ErrorScreen.tsx   |  2 +-
 frontend/src/components/TagSearch.tsx     |  2 +-
 frontend/src/components/TagSidebar.tsx    | 72 +++++++++++++----------
 frontend/src/pages/posts/PostListPage.tsx |  9 +--
 4 files changed, 47 insertions(+), 38 deletions(-)

diff --git a/frontend/src/components/ErrorScreen.tsx b/frontend/src/components/ErrorScreen.tsx
index 03ae2e0..651a81b 100644
--- a/frontend/src/components/ErrorScreen.tsx
+++ b/frontend/src/components/ErrorScreen.tsx
@@ -42,7 +42,7 @@ export default ({ status }: Props) => {
 	  <meta name="robots" content="noindex" />
 	  <title>{title} | {SITE_TITLE}</title>
 	</Helmet>
-	<div className="text-2xl sm:text-4xl md:text-6xl font-bold text-transparent
+	<div className="text-6xl font-bold text-transparent
 			bg-[linear-gradient(90deg,#ff0000,#ff8800,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000)]
 			bg-clip-text bg-[length:200%_100%] animate-rainbow-scroll drop-shadow-[0_0_6px_black]
 			space-y-2 sm:space-y-4 md:space-y-6 text-center flex flex-col justify-center items-center"
diff --git a/frontend/src/components/TagSearch.tsx b/frontend/src/components/TagSearch.tsx
index 31f100e..a266fe2 100644
--- a/frontend/src/components/TagSearch.tsx
+++ b/frontend/src/components/TagSearch.tsx
@@ -85,7 +85,7 @@ const TagSearch: React.FC = () => {
   }, [location.search])
 
   return (
-      <div className="relative w-full mb-4">
+      <div className="relative w-full">
         <input type="text"
                placeholder="タグ検索..."
                value={search}
diff --git a/frontend/src/components/TagSidebar.tsx b/frontend/src/components/TagSidebar.tsx
index 372fb33..f03208a 100644
--- a/frontend/src/components/TagSidebar.tsx
+++ b/frontend/src/components/TagSidebar.tsx
@@ -8,10 +8,11 @@ import SectionTitle from '@/components/common/SectionTitle'
 import SidebarComponent from '@/components/layout/SidebarComponent'
 import { API_BASE_URL } from '@/config'
 import { CATEGORIES } from '@/consts'
+import { cn } from '@/lib/utils'
 
 import type { Post, Tag } from '@/types'
 
-type TagByCategory = { [key: string]: Tag[] }
+type TagByCategory = Record<string, Tag[]>
 
 type Props = { posts: Post[] }
 
@@ -19,6 +20,7 @@ type Props = { posts: Post[] }
 export default ({ posts }: Props) => {
   const navigate = useNavigate ()
 
+  const [tagsVsbl, setTagsVsbl] = useState (false)
   const [tags, setTags] = useState<TagByCategory> ({ })
 
   const location = useLocation ()
@@ -57,34 +59,44 @@ export default ({ posts }: Props) => {
   return (
       <SidebarComponent>
 	<TagSearch />
-	<SectionTitle>タグ</SectionTitle>
-	<ul>
-	  {CATEGORIES.flatMap (cat => cat in tags ? (
-	      tags[cat].map (tag => (
-		  <li key={tag.id} className="mb-1">
-		    <TagLink tag={tag} />
-		  </li>))) : [])}
-	</ul>
-	<SectionTitle>関聯</SectionTitle>
-	{posts.length > 0 && (
-	    <a href="#"
-	       onClick={ev => {
-		 ev.preventDefault ()
-		 void ((async () => {
-		   try
-		   {
-		     const { data } = await axios.get (`${ API_BASE_URL }/posts/random`,
-			 { params: { tags:  tagsQuery.split (' ').filter (e => e !== '').join (','),
-				     match: (anyFlg ? 'any' : 'all') } })
-		     navigate (`/posts/${ (data as Post).id }`)
-		   }
-		   catch
-		   {
-		     ;
-		   }
-		 }) ())
-	       }}>
-	      ランダム
-	    </a>)}
+	<div className={cn (!(tagsVsbl) && 'hidden', 'md:block mt-4')}>
+	  <SectionTitle>タグ</SectionTitle>
+	  <ul>
+	    {CATEGORIES.flatMap (cat => cat in tags ? (
+		tags[cat].map (tag => (
+		    <li key={tag.id} className="mb-1">
+		      <TagLink tag={tag} />
+		    </li>))) : [])}
+	  </ul>
+	  <SectionTitle>関聯</SectionTitle>
+	  {posts.length > 0 && (
+	      <a href="#"
+		 onClick={ev => {
+		   ev.preventDefault ()
+		   void ((async () => {
+		     try
+		     {
+		       const { data } = await axios.get (`${ API_BASE_URL }/posts/random`,
+			   { params: { tags:  tagsQuery.split (' ').filter (e => e !== '').join (','),
+				       match: (anyFlg ? 'any' : 'all') } })
+		       navigate (`/posts/${ (data as Post).id }`)
+		     }
+		     catch
+		     {
+		       ;
+		     }
+		   }) ())
+		 }}>
+		ランダム
+	      </a>)}
+	</div>
+	<a href="#"
+	   className="md:hidden block my-2 text-center text-sm text-gray-500"
+	   onClick={ev => {
+	     ev.preventDefault ()
+	     setTagsVsbl (!(tagsVsbl))
+	   }}>
+	  {tagsVsbl ? '▲▲▲ タグ一覧を閉じる ▲▲▲' : '▼▼▼ タグ一覧を表示 ▼▼▼'}
+	</a>
       </SidebarComponent>)
 }
diff --git a/frontend/src/pages/posts/PostListPage.tsx b/frontend/src/pages/posts/PostListPage.tsx
index 6d40409..34dcd81 100644
--- a/frontend/src/pages/posts/PostListPage.tsx
+++ b/frontend/src/pages/posts/PostListPage.tsx
@@ -85,9 +85,9 @@ export default () => {
 	     : `${ SITE_TITLE }　〜 ぼざろクリーチャーシリーズ綜合リンク集サイト`}
 	  </title>
 	</Helmet>
-	<div className="hidden md:block">
-	  <TagSidebar posts={posts.slice (0, 20)} />
-	</div>
+
+	<TagSidebar posts={posts.slice (0, 20)} />
+
 	<MainArea>
 	  <TabGroup>
 	    <Tab name="広場">
@@ -120,8 +120,5 @@ export default () => {
 		</Tab>)}
 	  </TabGroup>
 	</MainArea>
-	<div className="md:hidden">
-	  <TagSidebar posts={posts.slice (0, 20)} />
-	</div>
       </div>)
 }