fix: keep Holo-work rows stable until sorting is reapplied

src/routes/tools/holo-work/+page.svelte

@@ -8,6 +8,7 @@
   import boardSummary from '$lib/data/boards-summary.json';
   import { adjustWorkTeam, isWorkCount, parseWorkTeams, type HoloWorkCounts } from '$lib/storage/holo-work';
   import type { HoloWorkTeam } from '$lib/models/user-data';
+  import { sortHoloWorkMembers, type HoloWorkSort } from '$lib/models/holo-work-sort';
   import { USER_DATA_STORAGE_KEY, loadBrowserData, saveBrowserData } from '$lib/storage/browser-storage';
   import { defaultPreferences } from '$lib/models/default-preferences';
 
@@ -22,14 +23,20 @@
   $: validTeam = Boolean(teamName.trim()) && selectedMembers.every((id) => members.some((member) => member.id === id)) && new Set(selectedMembers).size === 5;
   let ready = false;
   let search = '';
-  let sort = 'member';
+  let sort: HoloWorkSort = 'member';
+  let sortedMembers = [...members];
   let status = '';
   let error = '';
-  $: visibleMembers = members.filter((member) => member.name.replace(/\s/g, '').toLocaleLowerCase().includes(search.replace(/\s/g, '').toLocaleLowerCase()))
-    .sort((a, b) => (sort === 'asc' ? (counts[a.id] ?? 0) - (counts[b.id] ?? 0) : sort === 'desc' ? (counts[b.id] ?? 0) - (counts[a.id] ?? 0) : 0) || a.order - b.order);
+  $: visibleMembers = sortedMembers.filter((member) => member.name.replace(/\s/g, '').toLocaleLowerCase().includes(search.replace(/\s/g, '').toLocaleLowerCase()));
   $: total = members.reduce((sum, member) => sum + BigInt(counts[member.id] ?? 0), 0n);
   $: recorded = members.filter((member) => (counts[member.id] ?? 0) > 0).length;
 
+  function applySort(nextSort: HoloWorkSort = sort) {
+    sort = nextSort;
+    sortedMembers = sortHoloWorkMembers(members, counts, sort);
+    status = '현재 횟수로 정렬했습니다.';
+  }
+
   function loadLatestData() {
     const data = loadBrowserData(defaultPreferences());
     bonuses = calculateHoloWorkBoardBonuses(boardSummary, data.memberBoards, {
@@ -224,8 +231,9 @@
   <h2 class="all-members-title">멤버별 기록</h2>
   <div class="filters">
     <label>멤버 검색<input type="search" bind:value={search} placeholder="멤버 이름 입력" /></label>
-    <label>정렬<select bind:value={sort}><option value="member">멤버순</option><option value="asc">횟수 적은 순</option><option value="desc">횟수 많은 순</option></select></label>
+    <label>정렬<select value={sort} on:change={(event) => applySort(event.currentTarget.value as HoloWorkSort)}><option value="member">멤버순</option><option value="asc">횟수 적은 순</option><option value="desc">횟수 많은 순</option></select></label>
   </div>
+  <div class="sort-actions"><p class="hint">횟수를 변경해도 위치는 유지됩니다. 정렬 기준을 바꾸거나 다시 정렬하면 최신 횟수를 반영합니다.</p><button type="button" on:click={() => applySort()} disabled={!ready}>다시 정렬</button></div>
   <ul aria-label="멤버별 Holo워크 횟수">
     {#each visibleMembers as member (member.id)}
       <li>
@@ -253,6 +261,9 @@
   .summary strong { display: block; margin-top: 10px; color: #f3b4d0; font-size: 26px; overflow-wrap: anywhere; }
   small { margin-left: 7px; color: #a4adba; font-size: 13px; font-weight: 400; }
   .filters { display: grid; grid-template-columns: 1fr 150px; gap: 12px; }
+  .sort-actions { display: flex; align-items: center; gap: 12px; justify-content: space-between; margin-top: 12px; }
+  .sort-actions .hint { margin: 0; }
+  .sort-actions button { flex-shrink: 0; padding: 8px 12px; font-size: 13px; }
   label { display: grid; gap: 8px; color: #a4adba; font-size: 13px; }
   input, select { box-sizing: border-box; min-width: 0; width: 100%; height: 44px; padding: 0 12px; border: 1px solid #414b5b; border-radius: 9px; background: #101319; color: #e8ebf1; font: inherit; }
   .status { min-height: 20px; color: #f3b4d0; font-size: 13px; }