From e2eca8adfe55c388ce72934b8007aa10b7214f1b Mon Sep 17 00:00:00 2001
From: miteruzo <miteruzo@naver.com>
Date: Sun, 15 Feb 2026 03:05:18 +0900
Subject: [PATCH 1/3] =?UTF-8?q?#103=20=E3=82=BF=E3=82=B0=E8=A3=9C=E5=AE=8C?=
 =?UTF-8?q?=E3=81=8B=E3=82=89=E3=83=8B=E3=82=B3=E3=82=BF=E3=82=B0=E9=99=A4?=
 =?UTF-8?q?=E5=A4=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/PostFormTagsArea.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/PostFormTagsArea.tsx b/frontend/src/components/PostFormTagsArea.tsx
index b5fac1a..a047b15 100644
--- a/frontend/src/components/PostFormTagsArea.tsx
+++ b/frontend/src/components/PostFormTagsArea.tsx
@@ -25,8 +25,8 @@ const getTokenAt = (value: string, pos: number) => {
 }
 
 
-const replaceToken = (value: string, start: number, end: number, text: string) => (
-    `${ value.slice (0, start) }${ text }${ value.slice (end) }`)
+const replaceToken = (value: string, start: number, end: number, text: string) =>
+    `${ value.slice (0, start) }${ text }${ value.slice (end) }`
 
 
 type Props = {
@@ -57,7 +57,7 @@ export default (({ tags, setTags }: Props) => {
   const recompute = async (pos: number, v: string = tags) => {
     const { start, end, token } = getTokenAt (v, pos)
     setBounds ({ start, end })
-    const data = await apiGet<Tag[]> ('/tags/autocomplete', { params: { q: token } })
+    const data = await apiGet<Tag[]> ('/tags/autocomplete', { params: { q: token, nico: 0 } })
     setSuggestions (data.filter (t => t.postCount > 0))
     setSuggestionsVsbl (suggestions.length > 0)
   }
-- 
2.34.1


From 6c3316c3df85b013c41e47ba3f688333fdf86803 Mon Sep 17 00:00:00 2001
From: miteruzo <miteruzo@naver.com>
Date: Sun, 15 Feb 2026 15:40:02 +0900
Subject: [PATCH 2/3] #103

---
 frontend/src/components/PostFormTagsArea.tsx | 27 +++++++++++++-------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/PostFormTagsArea.tsx b/frontend/src/components/PostFormTagsArea.tsx
index a047b15..ee45f40 100644
--- a/frontend/src/components/PostFormTagsArea.tsx
+++ b/frontend/src/components/PostFormTagsArea.tsx
@@ -44,10 +44,10 @@ export default (({ tags, setTags }: Props) => {
   const handleTagSelect = (tag: Tag) => {
     setSuggestionsVsbl (false)
     const textarea = ref.current!
-    const newValue = replaceToken (tags, bounds.start, bounds.end, tag.name)
+    const newValue = replaceToken (tags, bounds.start, bounds.end, tag.name + ' ')
     setTags (newValue)
     requestAnimationFrame (async () => {
-      const p = bounds.start + tag.name.length
+      const p = bounds.start + tag.name.length + 1
       textarea.selectionStart = textarea.selectionEnd = p
       textarea.focus ()
       await recompute (p, newValue)
@@ -56,8 +56,15 @@ export default (({ tags, setTags }: Props) => {
 
   const recompute = async (pos: number, v: string = tags) => {
     const { start, end, token } = getTokenAt (v, pos)
+    if (!(token.trim ()))
+      {
+	setSuggestionsVsbl (false)
+	return
+      }
+
     setBounds ({ start, end })
-    const data = await apiGet<Tag[]> ('/tags/autocomplete', { params: { q: token, nico: 0 } })
+
+    const data = await apiGet<Tag[]> ('/tags/autocomplete', { params: { q: token, nico: '0' } })
     setSuggestions (data.filter (t => t.postCount > 0))
     setSuggestionsVsbl (suggestions.length > 0)
   }
@@ -72,11 +79,13 @@ export default (({ tags, setTags }: Props) => {
 	    onSelect={async (ev: SyntheticEvent<HTMLTextAreaElement>) => {
 	      const pos = (ev.target as HTMLTextAreaElement).selectionStart
 	      await recompute (pos)
-	    }}/>
-	<TagSearchBox suggestions={suggestionsVsbl && suggestions.length
-				   ? suggestions
-				   : [] as Tag[]}
-		      activeIndex={-1}
-		      onSelect={handleTagSelect}/>
+	    }}
+	    onBlur={() => setSuggestionsVsbl (false)}/>
+	<TagSearchBox
+	    suggestions={suggestionsVsbl && suggestions.length > 0
+			 ? suggestions
+			 : [] as Tag[]}
+	    activeIndex={-1}
+	    onSelect={handleTagSelect}/>
       </div>)
 }) satisfies FC<Props>
-- 
2.34.1


From ad81037a778a27d075811fec0854ecf8f28402ae Mon Sep 17 00:00:00 2001
From: miteruzo <miteruzo@naver.com>
Date: Sun, 22 Feb 2026 23:26:49 +0900
Subject: [PATCH 3/3] #103

---
 frontend/src/components/PostFormTagsArea.tsx | 24 +++++++++++++-------
 frontend/src/lib/utils.ts                    |  9 ++++----
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/PostFormTagsArea.tsx b/frontend/src/components/PostFormTagsArea.tsx
index ee45f40..c7775af 100644
--- a/frontend/src/components/PostFormTagsArea.tsx
+++ b/frontend/src/components/PostFormTagsArea.tsx
@@ -38,6 +38,7 @@ export default (({ tags, setTags }: Props) => {
   const ref = useRef<HTMLTextAreaElement> (null)
 
   const [bounds, setBounds] = useState<{ start: number; end: number }> ({ start: 0, end: 0 })
+  const [focused, setFocused] = useState (false)
   const [suggestions, setSuggestions] = useState<Tag[]> ([])
   const [suggestionsVsbl, setSuggestionsVsbl] = useState (false)
 
@@ -70,7 +71,7 @@ export default (({ tags, setTags }: Props) => {
   }
 
   return (
-      <div>
+      <div className="relative w-full">
 	<Label>タグ</Label>
 	<TextArea
 	    ref={ref}
@@ -80,12 +81,19 @@ export default (({ tags, setTags }: Props) => {
 	      const pos = (ev.target as HTMLTextAreaElement).selectionStart
 	      await recompute (pos)
 	    }}
-	    onBlur={() => setSuggestionsVsbl (false)}/>
-	<TagSearchBox
-	    suggestions={suggestionsVsbl && suggestions.length > 0
-			 ? suggestions
-			 : [] as Tag[]}
-	    activeIndex={-1}
-	    onSelect={handleTagSelect}/>
+	    onFocus={() => {
+	      setFocused (true)
+	    }}
+	    onBlur={() => {
+	      setFocused (false)
+	      setSuggestionsVsbl (false)
+	    }}/>
+	{focused && (
+	    <TagSearchBox
+		suggestions={suggestionsVsbl && suggestions.length > 0
+			     ? suggestions
+			     : [] as Tag[]}
+		activeIndex={-1}
+		onSelect={handleTagSelect}/>)}
       </div>)
 }) satisfies FC<Props>
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index 3a281f6..871bdd6 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -1,6 +1,7 @@
-import { clsx, type ClassValue } from 'clsx'
+import { clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
-export function cn (...inputs: ClassValue[]) {
-  return twMerge(clsx(...inputs))
-}
+import type { ClassValue } from 'clsx'
+
+
+export const cn = (...inputs: ClassValue[]) => twMerge (clsx (...inputs))
-- 
2.34.1