From 43a55dbfcfa687cd0065cfe657059a3ff5a4d279 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=BF=E3=81=A6=E3=82=8B=E3=81=9E?= <miteruzo@naver.com>
Date: Sun, 14 Dec 2025 16:51:57 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20#176=20=E3=81=AE=E3=83=90=E3=82=B0?=
 =?UTF-8?q?=E5=AF=BE=E5=BF=9C=EF=BC=88#179=EF=BC=89=20(#180)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#179 完了

Co-authored-by: miteruzo <miteruzo@naver.com>
Reviewed-on: https://git.miteruzo.com/miteruzo/btrc-hub/pulls/180
---
 frontend/src/components/TagSidebar.tsx | 71 +++++++++++++++-----------
 1 file changed, 40 insertions(+), 31 deletions(-)

diff --git a/frontend/src/components/TagSidebar.tsx b/frontend/src/components/TagSidebar.tsx
index 735490d..b8f5f07 100644
--- a/frontend/src/components/TagSidebar.tsx
+++ b/frontend/src/components/TagSidebar.tsx
@@ -58,15 +58,52 @@ export default (({ posts }: Props) => {
     setTags (tagsTmp)
   }, [posts])
 
+  const TagBlock = (
+      <>
+	<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>)}
+      </>)
+
   return (
       <SidebarComponent>
 	<TagSearch/>
 
+	<div className="hidden md:block mt-4">
+	  {TagBlock}
+	</div>
+
 	<AnimatePresence initial={false}>
 	  {tagsVsbl && (
 	      <motion.div
 		  key="sptags"
-		  className="md:block mt-4"
+		  className="md:hidden mt-4"
 		  variants={{ hidden:   { clipPath: 'inset(0 0 100% 0)',
 					  height:   0 },
 			      visible:  { clipPath: 'inset(0 0 0% 0)',
@@ -75,35 +112,7 @@ export default (({ posts }: Props) => {
 		  animate="visible"
 		  exit="hidden"
 		  transition={{ duration: .2, ease: 'easeOut' }}>
-		<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>)}
+		{TagBlock}
 	      </motion.div>)}
 	</AnimatePresence>
 
@@ -113,7 +122,7 @@ export default (({ posts }: Props) => {
 		      dark:text-gray-300 dark:hover:text-gray-100"
 	   onClick={ev => {
 	     ev.preventDefault ()
-	     setTagsVsbl (!(tagsVsbl))
+	     setTagsVsbl (v => !(v))
 	   }}>
 	  {tagsVsbl ? '▲▲▲ タグ一覧を閉じる ▲▲▲' : '▼▼▼ タグ一覧を表示 ▼▼▼'}
 	</a>