From 99ff24cb73841885c745544b60c3af705f48148a Mon Sep 17 00:00:00 2001
From: gunshiz <spsshop1047@gmail.com>
Date: Sun, 27 Sep 2026 01:38:02 +0700
Subject: [PATCH] fix : reorder animation for team calc char

---
 components/admin/guide-section-editor.tsx | 24 +++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/components/admin/guide-section-editor.tsx b/components/admin/guide-section-editor.tsx
index 44c40c6..9565e3c 100644
--- a/components/admin/guide-section-editor.tsx
+++ b/components/admin/guide-section-editor.tsx
@@ -21,7 +21,7 @@ import {
   Trash2Icon,
   XIcon,
 } from "lucide-react";
-import { useEffect, useMemo, useState, type ComponentProps, type ReactNode, type SetStateAction } from "react";
+import { useEffect, useMemo, useRef, useState, type ComponentProps, type ReactNode, type SetStateAction } from "react";
 import { toast } from "sonner";
 import {
   closestCenter,
@@ -179,6 +179,7 @@ import {
   teamPresetStorageKey,
   type TeamApplySelection,
   type TeamMemberApplyField,
+  type TeamToolMember,
   type TeamPreset,
   type TeamToolValue,
 } from "@/lib/guides/team-tools";
@@ -2806,6 +2807,14 @@ function TeamEditor({
       coordinateGetter: sortableKeyboardCoordinates,
     }),
   );
+  const memberSortableIds = useRef(new WeakMap<TeamToolMember, string>());
+  const getMemberSortableId = (member: TeamToolMember) => {
+    const existingId = memberSortableIds.current.get(member);
+    if (existingId) return existingId;
+    const id = createClientId("team-member");
+    memberSortableIds.current.set(member, id);
+    return id;
+  };
   const [teamGroups, setTeamGroups] = useState(() => initial.teamGroups.length
     ? initial.teamGroups.map((group) => ({ clientId: group.id, name: group.name ?? "", note: group.note ?? "", teams: group.teams.map(({ id, ...team }) => ({ clientId: id, ...team })) }))
     : [{ clientId: "team-condition-default", name: "", note: "", teams: [] as TeamToolValue[] }]);
@@ -3007,9 +3016,7 @@ function TeamEditor({
     setTeams((current) =>
       current.map((team) => {
         if (team.clientId !== teamId) return team;
-        const memberIds = team.members.map(
-          (_, index) => `${team.clientId}-member-${index}`,
-        );
+        const memberIds = team.members.map(getMemberSortableId);
         const from = memberIds.indexOf(String(active.id));
         const to = memberIds.indexOf(String(over.id));
         return from === -1 || to === -1
@@ -3501,10 +3508,7 @@ function TeamEditor({
                               }
                             >
                               <SortableContext
-                                items={team.members.map(
-                                  (_, index) =>
-                                    `${team.clientId}-member-${index}`,
-                                )}
+                                items={team.members.map(getMemberSortableId)}
                                 strategy={rectSortingStrategy}
                               >
                                 <div className="grid grid-cols-4 gap-1 sm:gap-3">
@@ -3527,8 +3531,8 @@ function TeamEditor({
                                       : 0;
                                     return (
                                       <SortableTeamMember
-                                        key={`${team.clientId}-member-${memberIndex}`}
-                                        id={`${team.clientId}-member-${memberIndex}`}
+                                        key={getMemberSortableId(member)}
+                                        id={getMemberSortableId(member)}
                                       >
                                         {(memberDragHandle) => (
                                           <div