feat(ui): 고르기 모달 나무 M02 나무 꼴 — 층 단추 셋 · 잎 = 마지막 이름 · 폴더 먼저 · 왼쪽 폭 320px(173-2)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018jonfdxn1Xit9bdkNJpE4G

ui_template/ui_template_item_picker_data.ts

@@ -71,6 +71,9 @@ export function pathOf(row: PickerRow): string[] {
 /** 보이는 항목 이름 — 경로를 이음(비면 열 id · 키) */
 export const itemName = (row: PickerRow): string => pathOf(row).join(" ") || row.열 || row.key;
 
+/** 나무 잎 글 — 경로 마지막 이름(M02 나무와 같게 · 173-2) · 비면 열 id · 키 */
+export const leafLabel = (row: PickerRow): string => pathOf(row).at(-1) || row.열 || row.key;
+
 /** 마우스를 올렸을 때 — 층 이름 + 키 */
 export const rowTip = (row: PickerRow, labels: TreeLabels): string =>
   `${labels.layers[layerOf(row)]} · ${row.key}`;
@@ -115,7 +118,13 @@ export interface TreeLabels {
 
 const folderId = (layer: PickerLayer, path: string[]): string => [layer, ...path].join("|");
 
-/** 그룹 → 폴더(경로 앞부분 · 깊이 자유) → 항목(잎). 서버가 준 차례를 지킴 · 빈 그룹도 한 줄 남김. */
+/** 폴더 먼저 · 잎 뒤(M02 나무와 같게 · 173-2) — 같은 갈래 안은 서버 차례 그대로(안정 정렬) */
+function foldersFirst(node: PickNode): PickNode {
+  node.children?.sort((a, b) => Number(!!a.row) - Number(!!b.row)).forEach(foldersFirst);
+  return node;
+}
+
+/** 그룹 → 폴더(경로 앞부분 · 깊이 자유) → 항목(잎). 폴더 먼저 · 빈 그룹도 한 줄 남김. */
 export function buildTree(rows: PickerRow[], labels: TreeLabels): PickNode[] {
   return PICKER_LAYERS.map((layer) => {
     const root: PickNode = {
@@ -142,8 +151,8 @@ export function buildTree(rows: PickerRow[], labels: TreeLabels): PickNode[] {
       });
       parent.children?.push({
         id: rowId(row),
-        label: itemName(row),
-        tip: rowTip(row, labels),
+        label: leafLabel(row),
+        tip: `${itemName(row)} · ${rowTip(row, labels)}`,
         count: null,
         row,
       });
@@ -152,7 +161,7 @@ export function buildTree(rows: PickerRow[], labels: TreeLabels): PickNode[] {
         if (node) node.count = (node.count ?? 0) + 1;
       }
     }
-    return root;
+    return foldersFirst(root);
   });
 }