From 16556e1dcc4fca5143097e18f42c5f75aa54b2a0 Mon Sep 17 00:00:00 2001
From: lanrtop <lanrtop@gmail.com>
Date: Sat, 4 Jul 2026 10:40:49 +0900
Subject: [PATCH] =?UTF-8?q?fix(manage):=20=E4=BA=A7=E5=93=81=E7=BB=84?=
 =?UTF-8?q?=E6=A6=82=E8=A7=88=E9=A1=B9=E7=9B=AE=20tag=20=E8=A1=A5=20=C3=97?=
 =?UTF-8?q?=20=E7=A7=BB=E9=99=A4=E5=85=A5=E5=8F=A3=EF=BC=8C=E4=B8=8E=20det?=
 =?UTF-8?q?ail=20=E8=A7=86=E5=9B=BE=E8=87=AA=E6=B4=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/manage/ManagePage.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/manage/ManagePage.tsx b/src/components/manage/ManagePage.tsx
index 4b943e8..e11de66 100644
--- a/src/components/manage/ManagePage.tsx
+++ b/src/components/manage/ManagePage.tsx
@@ -463,10 +463,10 @@ function GroupsTab({ spaceId }: { spaceId?: string }) {
             </thead>
             <tbody className="divide-y divide-gray-100">
               {groups.map((g) => {
-                const groupProjectNames = maps
+                const groupProjectEntries = maps
                   .filter((m) => m.group_id === g.id)
-                  .map((m) => projects.find((p) => p.id === m.project_id)?.name)
-                  .filter((n): n is string => !!n);
+                  .map((m) => { const p = projects.find((x) => x.id === m.project_id); return p ? { id: p.id, name: p.name } : null; })
+                  .filter((e): e is { id: string; name: string } => e !== null);
                 return (
                   <tr key={g.id} className="bg-white hover:bg-gray-50/60 transition-colors group">
                     <td className="px-5 py-4">
@@ -475,9 +475,13 @@ function GroupsTab({ spaceId }: { spaceId?: string }) {
                     </td>
                     <td className="px-5 py-4 max-w-[320px]">
                       <div className="flex flex-wrap gap-1">
-                        {groupProjectNames.length > 0 ? groupProjectNames.map((name) => (
-                          <span key={name} className="px-2 py-0.5 rounded-md bg-blue-50 text-blue-700 text-xs font-medium border border-blue-100">
+                        {groupProjectEntries.length > 0 ? groupProjectEntries.map(({ id, name }) => (
+                          <span key={id} className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-blue-50 text-blue-700 text-xs font-medium border border-blue-100">
                             {name}
+                            <button
+                              onClick={async () => { await removeGroupMember(id, g.id); qc.invalidateQueries({ queryKey: ["maps"] }); }}
+                              className="text-blue-400 hover:text-red-400 transition-colors leading-none"
+                            >×</button>
                           </span>
                         )) : (
                           <span className="text-xs text-gray-300">—</span>