From 83405c4ca2755b81722ca0292dbd29676e7da836 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=88=98=ED=98=84?= <shkim4@samaneng.com>
Date: Thu, 22 Oct 2026 20:58:22 +0900
Subject: [PATCH] fix(sw): viewer header hides button labels one at a time by
 measured room
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Labels with an icon now go icon-only one item at a time while the header lacks room (Open,
then the panel toggles, 전체 보기 last) instead of all together, and come back as the room
returns; collapse into More is unchanged.

Verified: Responsive More rows (1440 / 1280 keep 전체 보기 text, 950 / 860 icons, 760 / 520
More), shrink-and-grow restore, no overflow. Not re-run: viewer browser tests.
---
 .../src/components/sw-viewer/SWViewerHeader.tsx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/sw/src/components/sw-viewer/SWViewerHeader.tsx b/packages/sw/src/components/sw-viewer/SWViewerHeader.tsx
index 189d4f1..f91344a 100644
--- a/packages/sw/src/components/sw-viewer/SWViewerHeader.tsx
+++ b/packages/sw/src/components/sw-viewer/SWViewerHeader.tsx
@@ -94,20 +94,25 @@ const isShown = (item: { id: string; hidden?: boolean }, collapsed: ReadonlySet<
 
 /**
  * Measured responsive steps (2026-10-21), applied one at a time while the header has no room left and undone in reverse
- * order once the room a step freed is back: 1. every item with an `icon` and `iconOnlyBelow` shows its icon only (label
- * kept as tooltip and accessible name); 2. `collapseBelow` items move into More one by one, the higher value first and,
+ * order once the room a step freed is back: 1. items with an `icon` and `iconOnlyBelow` show their icon only one by one
+ * (label kept as tooltip and accessible name); 2. `collapseBelow` items move into More one by one, the higher value first and,
  * for the same value, the rightmost first. No fixed width decides a step: the values only give the order.
  */
 type Step = { kind: "icons"; ids: string[] } | { kind: "collapse"; id: string }
+// 2026-10-22 (user request): labels hide one item at a time (not all at once), so a label with room stays (e.g. 전체 보기
+// at 1440 / 1280): the higher `iconOnlyBelow` first, the rightmost first for the same value; extra icons (Open) first.
 function responsiveSteps(groups: SWViewerHeaderGroup[], extraIcons: string[] = []): Step[] {
-  const icons: string[] = [...extraIcons], collapse: { id: string; rank: number; order: number }[] = []
+  const icons: { id: string; rank: number; order: number }[] = extraIcons.map((id, order) => ({ id, rank: Infinity, order }))
+  const collapse: { id: string; rank: number; order: number }[] = []
   groups.filter(group => !group.hidden).flatMap(group => group.items).forEach((item, order) => {
     if (item.hidden) return
-    if (item.type !== "custom" && item.icon && !item.iconOnly && item.iconOnlyBelow !== undefined) icons.push(item.id)
+    if (item.type !== "custom" && item.icon && !item.iconOnly && item.iconOnlyBelow !== undefined) icons.push({ id: item.id, rank: item.iconOnlyBelow, order: order + extraIcons.length })
     if (item.collapseBelow !== undefined) collapse.push({ id: item.id, rank: item.collapseBelow, order })
   })
-  collapse.sort((a, b) => b.rank - a.rank || b.order - a.order)
-  return [...(icons.length ? [{ kind: "icons" as const, ids: icons }] : []), ...collapse.map(item => ({ kind: "collapse" as const, id: item.id }))]
+  const byRank = (a: { rank: number; order: number }, b: { rank: number; order: number }) => b.rank - a.rank || b.order - a.order
+  icons.sort(byRank)
+  collapse.sort(byRank)
+  return [...icons.map(item => ({ kind: "icons" as const, ids: [item.id] })), ...collapse.map(item => ({ kind: "collapse" as const, id: item.id }))]
 }
 
 /**