@ihabdevteam/core 0.199.0 → 0.201.0

package/dist/packages/core/src/components/Header.css

@@ -74,6 +74,45 @@
   background: rgba(255,255,255,0.25);
 }
 
+/* **막대는 옅은 흰색이다**(사장님 지시 2026-09-27) — 얹으면 짙어진다.
+
+   브랜드 색(`--color-main` → 얹으면 `--color-sub`)으로 한 번 가 봤다가 되돌렸다.
+   이 지면이 바로 그 두 색 사이를 지나가는 그라디언트라, **막대가 어딘가에서 지면과
+   같아진다** — 재 보니 main 은 레일 맨 위에서 1.06, sub 은 맨 아래에서 1.01 이었다.
+   게다가 둘이 엇갈려서 위쪽에서는 얹으면 잘 보이고 아래쪽에서는 얹으면 **덜** 보였다.
+   색을 고르는 것으로는 못 푸는 자리다 — 지면이 색을 갈아입으니까.
+
+   투명도로 푼다. 흰빛을 옅게 얹으면 지면이 무슨 색이든 **그만큼 밝아져** 어디서나
+   같은 만큼 떠오른다. 이 블록의 구분선(`rgba(255,255,255,0.25)`)이 쓰는 방식과 같다.
+
+   **재어 둔다 — 정하는 것은 사람이다**(RELEASE.md "색은 문을 두지 않는다").
+   220×518 레일에서 가장 나쁜 자리(지면이 가장 밝은 아래쪽)의 대비다:
+
+       alpha   0.25   0.4    0.5    0.6    0.75   0.9    1.0
+       대비    1.18   1.30   1.39   1.49   1.65   1.82   1.94
+
+   **흰빛으로는 3.0 에 못 간다** — 꽉 채운 흰색도 1.94 다. 아래쪽 지면(민트)이 이미 밝아서,
+   거기서 3.0 을 얻으려면 막대가 **어두워져야** 한다. 그러면 위쪽(파랑)에서 또 뒤집힌다.
+   지금 값(0.4 → 얹으면 0.75)은 그 안에서 고른 것이고, 브랜드 색과 달리 **어디서도 지면과
+   같아지지 않고 얹으면 늘 더 보인다**(가장 나쁜 자리에서도 1.30 → 1.65). */
+.header--manager .side-nav__scroll-thumb {
+  background: rgba(255, 255, 255, 0.4);
+}
+.header--manager .side-nav__scroll-thumb:hover,
+.header--manager .side-nav__scroll-thumb:active {
+  background: rgba(255, 255, 255, 0.75);
+}
+
+/* **못 쓰는 항목은 회색이 아니라 옅은 흰색이다.** 기본 꼴의 `--color-lightGray` 는
+   흰 지면에서 물러나 보이라고 고른 색인데, 이 지면에서는 푸른 회색이 그라디언트 위에
+   떠서 **글자는 희고 아이콘만 탁한** 꼴이 됐다(아이콘 규칙이 0,3,0 이라 매니저 규칙
+   0,2,0 을 이긴다 — 사장님 지적 2026-09-27). 물러나는 일은 줄에 이미 걸린
+   `opacity: 0.6` 이 한다. */
+.header--manager .side-nav__item.disabled,
+.header--manager .side-nav__item.disabled .side-nav__icon {
+  color: var(--color-deepWhite);
+}
+
 /* 메뉴 아이템 기본 */
 .header--manager .side-nav__item {
   color: var(--color-deepWhite);
@@ -126,113 +165,139 @@
   .header__bottom { display: none; }
 }
 
-/* Tablet: narrow left rail 60px */
+/* Tablet: 72px 접힌 레일 — 마우스를 얹거나 초점이 들어가면 220px 으로 펼쳐진다.
+
+   **펼친 꼴은 넓은 화면과 같아야 한다**(사장님 지시 2026-09-27). 그래서 이 블록은
+   "접힌 꼴만 덮고, 펼치면 아무것도 안 덮는다" 로 적는다 — 덮은 것을 하나하나 되돌리는
+   대신 **애초에 안 덮는다.**
+
+   예전에는 되돌리는 쪽이었다: 접힌 꼴 규칙마다 `:hover` 짝을 하나씩 두어 되돌렸다.
+   그러면 **짝을 빠뜨린 것이 조용히 남는다** — 실제로 넓은 화면과 여섯 군데가 달랐다
+   (실측 2026-09-27): 목록 여백 11 → 8, 항목 사이 12 → 10, 모서리 10 → 12,
+   이름표 `max-width` none → 200, 그리고 **하위 항목의 들여쓰기 30 → 16**. 마지막 것이
+   눈에 띄는 자리다 — 되돌리는 규칙(`padding: 0 16px`)이 하위 항목 규칙(0,1,0)보다 세서
+   들여쓰기가 통째로 사라졌고, 그 짝은 애초에 적힌 적이 없다.
+
+   안 덮으면 되돌릴 것도 없다. 새 규칙이 넓은 화면에 생겨도 펼친 레일이 저절로 따라간다. */
 @media (min-width: 768px) and (max-width: 1023px) {
   .header {
     width: 72px;
+    transition: width 180ms ease;
+    overflow: visible;
+  }
+  .header:hover,
+  .header:focus-within {
+    width: 220px; /* match desktop */
+  }
+  /* JS 가 접힌 채로 못 박으면(예: 화면을 옮긴 뒤) 호버해도 안 펼쳐진다 */
+  .header.header--force-collapsed,
+  .header.header--force-collapsed:hover,
+  .header.header--force-collapsed:focus-within {
+    width: 72px;
   }
+
   .header__branding { height: 80px; }
-  /* Collapsed: rounded square button (52x52) centered in 72px rail */
+
+  /* ── 두 꼴에 모두 — 움직임과 스크롤바 ─────────────────────────────────────
+     **접힌 레일에서는 스크롤바 자리를 비우지 않는다.** 72px 에서 양쪽 gutter(클래식
+     11px × 2)를 떼면 항목이 28px 로 짓눌려 24px 아이콘이 10px 삐져나간다(실측).
+     아이콘만 있는 좁은 레일에는 막대를 그릴 자리가 애초에 없다 — 막대는 숨기고
+     휠·터치·키보드 스크롤은 그대로 둔다. 넓은 화면도 막대를 숨기므로(제 막대를
+     따로 그린다) 이 줄은 두 꼴에 같다. */
   .header .side-nav__menu {
-    padding: 0 var(--spacing-xs);
     transition: padding 180ms ease;
-    /* **접힌 레일에서는 스크롤바 자리를 비우지 않는다.**
-       72px 에서 양쪽 gutter(클래식 11px × 2)를 떼면 항목이 28px 로 짓눌려 24px
-       아이콘이 10px 삐져나간다(실측). 아이콘만 있는 좁은 레일에는 스크롤바를 그릴
-       자리가 애초에 없다 — 막대는 숨기고 휠·터치·키보드 스크롤은 그대로 둔다.
-       좌우는 padding 만으로 같다(실측 8px 기준: 좌 9 / 우 9, 항목 52). */
     scrollbar-gutter: auto;
     scrollbar-width: none;
   }
   .header .side-nav__menu::-webkit-scrollbar { display: none; }
   .header .side-nav__item {
-    /* (52px item - 24px icon) / 2 = 14px to center icon when collapsed */
-    padding: 0 14px;
-    gap: 0;
-    border-radius: var(--radius-card);
-    /* **단추를 52 로 못 박고 가운데 세운다**(사장님 지시 2026-09-25). 여백만 8px 으로 낮추면
-       항목이 자리를 다 먹어 54 가 되고, 위 14px 셈이 어긋나 아이콘이 1px 오른쪽으로 밀린다.
-       52 로 두면 그 셈이 그대로 맞아 아이콘이 14 / 14 로 선다. */
-    width: 52px;
-    margin: 0 auto;
     transition: padding 180ms ease, gap 180ms ease, width 180ms ease;
   }
-
-  /* **발치도 가운데로.** 발치 줄은 좌우 여백이 없어(`padding: 0`) 단추 40px 이 왼쪽에 붙었고,
-     레일 가운데(37)보다 **5px 왼쪽**에 서서 위 아이콘들과 눈에 띄게 어긋났다(말귀 실측
-     2026-09-25 — 사장님이 보신 어긋남이 이것이다). 펼친 사이드바에서는 발치도 폭을 꽉 채우므로
-     여기서만 가운데로 세운다. */
-  .header .side-nav__footer {
-    align-items: center;
+  /* 이름표는 **접으면 자리까지 없앤다**(`max-width: 0`) — `visibility` 로만 숨기면
+     그만큼 자리를 먹어 아이콘이 가운데를 벗어난다. 그 값은 아래 접힌 꼴에 있다. */
+  .header .side-nav__label {
+    display: inline-block;
+    overflow: hidden;
+    white-space: nowrap;
+    transition: max-width 180ms ease, opacity 180ms ease, transform 180ms ease;
   }
 
-  .header:hover .side-nav__menu,
-  .header:focus-within .side-nav__menu {
+  /* ── 접힌 꼴만 ────────────────────────────────────────────────────────────
+     펼치면(`:hover`·`:focus-within`) 이 아래가 통째로 안 걸리고 넓은 화면 규칙이 그대로
+     산다. 못 박아 접어 둔 레일은 호버해도 안 펼쳐지므로 늘 걸린다 — 그래서 선택자가
+     둘씩이다. */
+  .header:not(:hover):not(:focus-within) .side-nav__menu,
+  .header--force-collapsed .side-nav__menu {
+    /* 좌우는 여백만으로 같다(실측 8px 기준: 좌 9 / 우 9, 항목 52) */
     padding: 0 var(--spacing-xs);
   }
 
-  .header:hover .side-nav__item,
-  .header:focus-within .side-nav__item {
-    padding: 0 16px;
-    gap: 10px;
-    /* 레일이 220px 로 펼쳐지는 동안에는 **폭 고정을 푼다** — 안 풀면 항목만 52px 로 남아
-       이름표가 설 자리가 없다(접힌 꼴의 가운데 맞춤이 펼친 꼴까지 따라오면 안 된다). */
-    width: 100%;
-    margin: 0;
+  .header:not(:hover):not(:focus-within) .side-nav__item,
+  .header--force-collapsed .side-nav__item {
+    /* (52px 항목 - 24px 아이콘) / 2 = 14px — 접힌 꼴에서 아이콘을 가운데 세운다 */
+    padding: 0 14px;
+    gap: 0;
+    border-radius: var(--radius-card);
+    /* **단추를 52 로 못 박고 가운데 세운다**(사장님 지시 2026-09-25). 여백만 8px 으로 낮추면
+       항목이 자리를 다 먹어 54 가 되고, 위 14px 셈이 어긋나 아이콘이 1px 오른쪽으로 밀린다. */
+    width: 52px;
+    margin: 0 auto;
+    /* 아래 배지의 기준 */
+    position: relative;
   }
 
-  /* 발치도 같다 — 펼쳐지면 줄이 폭을 꽉 채운다 */
-  .header:hover .side-nav__footer,
-  .header:focus-within .side-nav__footer {
-    align-items: stretch;
-  }
+  /* **배지는 단추 오른쪽 위로.** 인라인 배지는 이름표 뒤에 서는데, 접히면 이름표가 폭 0 이라
+     배지가 아이콘 바로 옆에 붙는다 — 단추(52)를 10px 넘어서고 통이 그 자리를 잘라, 동그라미가
+     반쯤 베인 채로 남았다(실측 2026-09-27: 단추 344~396, 배지 382~406, 통 안쪽 끝 397.
+     사장님이 짚으신 그림이 이것이다).
 
-  /* Hide label completely from layout when collapsed; fade in on hover */
-  .header .side-nav__label {
-    display: inline-block;
-    max-width: 0;
-    opacity: 0;
-    overflow: hidden;
-    transform: translateX(-6px);
-    transition: max-width 180ms ease, opacity 180ms ease, transform 180ms ease;
-    white-space: nowrap;
-    pointer-events: none;
-  }
+     **모서리 값이 0 인 것은 `--top-right` 기본값(-6px)과 다르다** — BottomNav 와 같은 까닭이다.
+     통이 넘침을 잘라서(넘침 셈에 그 `hidden` 이 필요하다) 바깥으로 나간 6px 은 그대로 사라진다.
+     안쪽 모서리에 얹으면 52 안에 온전히 들어온다(28~52).
 
-  .header {
-    width: 72px;
-    transition: width 180ms ease;
-    overflow: visible;
+     인라인 배지는 흰 테두리를 빼 두는데(흐름 안에 서니 가를 것이 없다), 아이콘 위에 얹히면
+     그 테두리가 있어야 갈린다 — 24px 배지의 테두리는 1px 이다. */
+  .header:not(:hover):not(:focus-within) .side-nav__item > .circle-badge,
+  .header--force-collapsed .side-nav__item > .circle-badge {
+    position: absolute;
+    top: 0;
+    right: 0;
+    border: 1px solid var(--color-pureWhite);
   }
 
-  .header:hover,
-  .header:focus-within {
-    width: 220px; /* match desktop */
+  /* **발치도 가운데로.** 발치 줄은 좌우 여백이 없어 단추 40px 이 왼쪽에 붙었고, 레일
+     가운데(37)보다 5px 왼쪽에 서서 위 아이콘들과 눈에 띄게 어긋났다(말귀 실측 2026-09-25). */
+  .header:not(:hover):not(:focus-within) .side-nav__footer,
+  .header--force-collapsed .side-nav__footer {
+    align-items: center;
   }
 
-  .header:hover .side-nav__label,
-  .header:focus-within .side-nav__label {
-    max-width: 200px;
-    opacity: 1;
-    transform: translateX(0);
-    pointer-events: auto;
+  /* **짧은 구분선도 가운데로.** 그 선은 `margin: 4px var(--spacing-m)` 로 서는데, 명시 폭
+     (24px)을 가진 플렉스 항목이라 `stretch` 가 안 먹고 **시작 모서리**로 떨어진다. 그래서
+     52px 목록 안에서 중심이 38 이 됐다 — 레일·항목·아이콘 중심은 36 인데 그 선만 2px
+     오른쪽이었다(실측 2026-09-26). `auto` 여백이 남는 자리 가운데로 민다.
+     펼치면 이 규칙이 안 걸리고 16px 으로 돌아가는데, 그 16 은 눈대중이 아니라 **아이콘
+     왼쪽 모서리와 줄을 맞추는 값**이다(220px 레일 실측: 목록 482 · 아이콘 498 · 선 498). */
+  .header:not(:hover):not(:focus-within) .side-nav__separator--short,
+  .header--force-collapsed .side-nav__separator--short {
+    margin-left: auto;
+    margin-right: auto;
   }
 
-  /* When JS forces collapsed state (e.g. after navigation), prevent hover from expanding.
-     !important 불필요 — 선택자 특이도(2클래스, :hover 변형은 3클래스)가 .header:hover(1클래스+가상클래스)보다
-     이미 높거나 동일 특이도에서 소스 순서상 뒤에 있어 자연스럽게 우선 적용됨. */
-  .header.header--force-collapsed {
-    width: 72px;
-  }
-  .header.header--force-collapsed .side-nav__label {
+  .header:not(:hover):not(:focus-within) .side-nav__label,
+  .header--force-collapsed .side-nav__label {
     max-width: 0;
     opacity: 0;
     transform: translateX(-6px);
     pointer-events: none;
   }
-  .header.header--force-collapsed:hover {
-    width: 72px;
-  }
+
+  /* 접힌 72px 레일에는 로고가 설 자리가 없다 — 심볼로 선다. 펼치면 넓은 화면과 같은
+     얼굴이 되어야 하므로(같은 220px 폭이다) 여기서만 바꾼다. */
+  .header:not(:hover):not(:focus-within) .brand-identity__image--symbol,
+  .header--force-collapsed .brand-identity__image--symbol { display: block; }
+  .header:not(:hover):not(:focus-within) .brand-identity__image--logo,
+  .header--force-collapsed .brand-identity__image--logo { display: none; }
 }
 
 /* Mobile: top header + bottom bar */
@@ -279,12 +344,17 @@
   object-fit: contain;
 }
 
+/* **심볼과 로고 중 어느 쪽을 보일지는 여기서 고른다** — 까닭은 `Header.tsx` 의 `BrandIdentity` 에.
+   기본은 로고다(넓은 화면·폰). 심볼은 접힌 레일에서만 선다. */
+.brand-identity__image--symbol { display: none; }
+
 @media (min-width: 1024px) {
   .brand-identity__root { height: 100px; }
 }
 
 @media (min-width: 768px) and (max-width: 1023px) {
   .brand-identity__root { height: 100px; }
+  /* 심볼이냐 로고냐는 **접혔느냐**로 갈린다 — 그 갈래는 위 레일 블록에 있다(한자리에 모아 둔다). */
 }
 
 @media (max-width: 767px) {

package/dist/packages/core/src/components/Header.js

@@ -26,8 +26,14 @@ export function BrandIdentity({ appMode }) {
         ? (typeof LogoManagerSvg === 'string' && LogoManagerSvg) || resolveAssetUrl('logo/Logo_speechearManager_kr.svg')
         : (typeof LogoSvg === 'string' && LogoSvg) || resolveAssetUrl('logo/Logo_speechear_kr.svg');
     const symbol = (typeof SymbolSvg === 'string' && SymbolSvg) || resolveAssetUrl('logo/Symbol_speechear.svg');
-    const isTablet = useMediaQuery("(min-width: 768px) and (max-width: 1023px)");
-    return (_jsx("div", { className: "brand-identity__root", "aria-label": t('header.biArea', 'BI 영역'), children: isTablet ? (_jsx("img", { src: symbol, alt: t('header.biSymbol', 'BI 심볼'), className: "brand-identity__image" })) : (_jsx("img", { src: logo, alt: isManager ? t('header.logoManager', '말귀매니저 로고') : t('header.logoMalgwi', '말귀 로고'), className: "brand-identity__image" })) }));
+    /* **둘을 다 그려 두고 고르는 것은 CSS 가 한다.** 예전에는 여기서 화면 폭만 보고
+       (`(min-width: 768px) and (max-width: 1023px)`) 심볼이냐 로고냐를 갈랐는데, **그 폭에서
+       레일은 두 모양이다** — 접힌 72px 과, 호버·포커스로 펼친 220px. 펼친 220 은 넓은 화면과
+       같은 폭인데 BI 만 심볼로 남아, 같은 레일이 같은 폭에서 다른 얼굴을 했다(사장님 지시
+       2026-09-26 — "테블릿에서 호버했을 때 데스크탑과 동일하게"). 펼침은 `:hover`·`:focus-within`
+       이라 **CSS 만 아는 상태**이고, JS 분기로는 `img` 의 `src` 를 바꿀 길이 없다.
+       안 보이는 쪽은 `display: none` 이라 낭독기도 안 읽는다 — `alt` 를 둘 다 둬도 한 번만 읽힌다. */
+    return (_jsxs("div", { className: "brand-identity__root", "aria-label": t('header.biArea', 'BI 영역'), children: [_jsx("img", { src: symbol, alt: t('header.biSymbol', 'BI 심볼'), className: "brand-identity__image brand-identity__image--symbol" }), _jsx("img", { src: logo, alt: isManager ? t('header.logoManager', '말귀매니저 로고') : t('header.logoMalgwi', '말귀 로고'), className: "brand-identity__image brand-identity__image--logo" })] }));
 }
 /**
  * 앱 전체 레이아웃의 내비게이션 헤더(사이드바)입니다.

package/dist/packages/core/src/components/ItemActions.css

@@ -0,0 +1,12 @@
+/* 보고 있는 한 항목에 하는 일들 — 까닭과 쓰는 법은 `ItemActions.tsx` 의 글에.
+
+   제 간격을 스스로 든다. `Popup` 의 `footerStart` 는 이미 같은 간격을 주지만(`--spacing-xs`),
+   바닥 줄을 손수 지어 쓰는 창(`WordTablePopup` 의 `renderFooter`)도 있어서 거기서도 같게
+   서야 한다 — 말귀가 그 자리에 이 네 줄을 그대로 베껴 두고 있었다(2026-09-26). */
+.item-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  /* 좁아져도 잘리는 대신 줄을 바꾼다 — 바닥이 잘려 못 누르던 자리를 겪었다(0.185.0) */
+  flex-wrap: wrap;
+}

package/dist/packages/core/src/components/ItemActions.d.ts

@@ -0,0 +1,95 @@
+import './ItemActions.css';
+/** @public */
+export interface ItemAction {
+    /**
+     * 읽어 줄 이름. 아이콘뿐인 단추라 **이름과 말풍선에 같은 말**이 붙는다 —
+     * 한쪽만 달면 눈으로 본 말과 낭독기가 읽는 말이 갈린다.
+     */
+    label: string;
+    onClick: () => void;
+}
+/**
+ * **한 단추가 뒤집히는 자리**(올리기 ↔ 내리기).
+ *
+ * 둘을 나란히 세우지 않는 까닭은 자리가 아니라 읽힘이다 — 나란히 두면 **지금 어느 쪽인지**를
+ * 화면이 말해 주지 않는다. 아이콘은 그대로 두고 하는 일과 이름만 갈린다.
+ * @public
+ */
+export interface ItemPublishAction {
+    /** 지금 올라가 있나 — 참이면 `unpublish` 쪽이 선다 */
+    published: boolean;
+    publish: ItemAction;
+    unpublish: ItemAction;
+}
+/** @public */
+export interface ItemActionsProps {
+    /**
+     * 이 창을 닫는 길. **닫고 하는 것**(고치기 · 지우기)이 제 일을 하기 전에 이것을 먼저 부른다.
+     *
+     * 줄 것이 없어 보여도 비우지 않는다 — 안 닫으면 고칠 창이 보던 창 **위에 겹쳐** 서고,
+     * 지운 것을 계속 보고 있는 창이 남는다. 그 사고를 막는 것이 이 줄의 규칙이라
+     * 타입으로 못박아 둔다.
+     */
+    onClose: () => void;
+    /** 고치기 — **닫고 한다**(다른 창을 연다) */
+    edit?: ItemAction;
+    /** 복제 — 안 닫는다(보던 것을 계속 본다) */
+    duplicate?: ItemAction;
+    /** 발행 ↔ 발행취소 — 안 닫는다. 올리고 내릴 길이 없으면 아예 주지 않는다 */
+    publish?: ItemPublishAction;
+    /** 링크 복사 — 안 닫는다. 손잡이를 안 준 화면에서는 주지 않는다 */
+    copyLink?: ItemAction;
+    /** 지우기 — **닫고 한다** */
+    remove?: ItemAction;
+    className?: string;
+}
+/**
+ * **보고 있는 한 항목에 하는 일들** — 창 바닥 왼쪽에 서는 아이콘 단추 줄.
+ *
+ * 무언가를 **보여 주는 창**이 동시에 **그것을 손대는 자리**이기도 한 곳에 선다. 말귀에 그런
+ * 창이 셋 있었고(훈련 묶음 실행 · 단어훈련 카드 실행 · 단어표 미리보기), 세 곳이 같은 다섯
+ * 단추를 같은 차례로 세우면서 규칙을 한 벌씩 베껴 적고 있었다(2026-09-26).
+ *
+ * 벌리는 일은 이미 코어 몫이다(`Popup` 의 `footerStart`/`footerEnd`, 0.190.0). 남아 있던 것은
+ * **무엇을 어떤 차례로 세우고 무엇을 닫고 하는가**인데, 그것이 베껴져 있으면 한 곳만 고쳐도
+ * 아무 데서도 안 터진다 — 같은 모양의 창들이 조용히 서로 다르게 움직인다. 실제로 **링크 단추의
+ * 조건이 세 곳에서 달랐다**(둘은 길이 있을 때만, 하나는 늘 세움).
+ *
+ * 이 조각이 쥐는 것 —
+ *  · **차례와 꼴** — 고치기 · 복제 · 발행 · 링크 · 지우기, 모두 `size={40} type="dot"`.
+ *  · **닫고 할 것과 안 닫고 할 것** — 고치기 · 지우기는 `onClose` 를 먼저 부른다. 둘 다 **다른 창을
+ *    여는** 일이라 안 닫으면 창 위에 창이 겹치고, 지운 것을 계속 보고 있게 된다. 복제 · 발행 ·
+ *    링크는 안 닫는다 — 보던 것을 그대로 두고 곁에서 일어나는 일이다.
+ *  · **안 준 것은 안 세운다** — 부르는 쪽이 손으로 `&&` 하던 자리다. 갈라진 그 자리가 여기다.
+ *  · **뒤집히는 단추는 하나** — `publish.published` 가 어느 쪽인지 고른다.
+ *
+ * 새 갈래가 필요하면 **여기에 칸을 만든다.** 아무거나 끼울 구멍(`children` 같은 것)을 두지 않는
+ * 까닭은, 그 구멍으로 들어온 단추는 닫고 할지 말지를 또 부르는 쪽이 정하게 되어 이 조각이
+ * 막으려던 갈라짐이 그대로 돌아오기 때문이다.
+ *
+ * `Popup` 의 `footerStart` 안에서도, 손수 지은 바닥 줄 안에서도 같게 선다 — 제 간격을 스스로
+ * 든다(`--spacing-xs`).
+ *
+ * 이름표는 부르는 쪽의 말이다 — 아래 예의 글자 자리에 그쪽 사전에서 꺼낸 말을 넣는다.
+ * (여기에 `t('…')` 을 적지 않는 까닭은, 소스를 훑는 시험이 **주석 속 예시도 실제로 부르는
+ * 열쇠로 읽기** 때문이다. 글이 시험을 깨뜨릴 수 있으면 안 된다.)
+ *
+ * @example
+ * <Popup
+ *   title={표.name}
+ *   footerStart={({ closeWithAnimation }) => (
+ *     <ItemActions
+ *       onClose={closeWithAnimation}
+ *       edit={{ label: '수정', onClick: () => openEdit(표) }}
+ *       duplicate={{ label: '복제', onClick: () => duplicate(표) }}
+ *       publish={{
+ *         published: 표.isPublished,
+ *         publish: { label: '말귀자료실에 올리기', onClick: () => publish(표) },
+ *         unpublish: { label: '말귀자료실에서 내리기', onClick: () => unpublish(표) },
+ *       }}
+ *       copyLink={링크길있나 ? { label: '링크 복사', onClick: () => copyLink(표) } : undefined}
+ *       remove={{ label: '삭제', onClick: () => askDelete(표) }} />
+ *   )} />
+ * @public
+ */
+export default function ItemActions(props: ItemActionsProps): import("react").JSX.Element;

package/dist/packages/core/src/components/ItemActions.js

@@ -0,0 +1,82 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import Button from './Button';
+import { cx } from '../utils/cx';
+import './ItemActions.css';
+/**
+ * **차례 · 아이콘 · 무엇을 닫고 하는가**를 한 표로 둔다.
+ *
+ * 세 곳에 베껴져 있을 때 실제로 갈라진 것이 이 표의 값들이었다 — 링크 단추의 조건이
+ * 둘은 `&&`, 하나는 늘 세움이었다. 한자리에 있으면 갈라질 자리가 없다.
+ */
+const 차례 = [
+    { 열쇠: 'edit', icon: 'edit-2', 닫고할까: true },
+    { 열쇠: 'duplicate', icon: 'copy', 닫고할까: false },
+    { 열쇠: 'publish', icon: 'book-marked', 닫고할까: false },
+    { 열쇠: 'copyLink', icon: 'link', 닫고할까: false },
+    { 열쇠: 'remove', icon: 'trash-2', 닫고할까: true },
+];
+/**
+ * **보고 있는 한 항목에 하는 일들** — 창 바닥 왼쪽에 서는 아이콘 단추 줄.
+ *
+ * 무언가를 **보여 주는 창**이 동시에 **그것을 손대는 자리**이기도 한 곳에 선다. 말귀에 그런
+ * 창이 셋 있었고(훈련 묶음 실행 · 단어훈련 카드 실행 · 단어표 미리보기), 세 곳이 같은 다섯
+ * 단추를 같은 차례로 세우면서 규칙을 한 벌씩 베껴 적고 있었다(2026-09-26).
+ *
+ * 벌리는 일은 이미 코어 몫이다(`Popup` 의 `footerStart`/`footerEnd`, 0.190.0). 남아 있던 것은
+ * **무엇을 어떤 차례로 세우고 무엇을 닫고 하는가**인데, 그것이 베껴져 있으면 한 곳만 고쳐도
+ * 아무 데서도 안 터진다 — 같은 모양의 창들이 조용히 서로 다르게 움직인다. 실제로 **링크 단추의
+ * 조건이 세 곳에서 달랐다**(둘은 길이 있을 때만, 하나는 늘 세움).
+ *
+ * 이 조각이 쥐는 것 —
+ *  · **차례와 꼴** — 고치기 · 복제 · 발행 · 링크 · 지우기, 모두 `size={40} type="dot"`.
+ *  · **닫고 할 것과 안 닫고 할 것** — 고치기 · 지우기는 `onClose` 를 먼저 부른다. 둘 다 **다른 창을
+ *    여는** 일이라 안 닫으면 창 위에 창이 겹치고, 지운 것을 계속 보고 있게 된다. 복제 · 발행 ·
+ *    링크는 안 닫는다 — 보던 것을 그대로 두고 곁에서 일어나는 일이다.
+ *  · **안 준 것은 안 세운다** — 부르는 쪽이 손으로 `&&` 하던 자리다. 갈라진 그 자리가 여기다.
+ *  · **뒤집히는 단추는 하나** — `publish.published` 가 어느 쪽인지 고른다.
+ *
+ * 새 갈래가 필요하면 **여기에 칸을 만든다.** 아무거나 끼울 구멍(`children` 같은 것)을 두지 않는
+ * 까닭은, 그 구멍으로 들어온 단추는 닫고 할지 말지를 또 부르는 쪽이 정하게 되어 이 조각이
+ * 막으려던 갈라짐이 그대로 돌아오기 때문이다.
+ *
+ * `Popup` 의 `footerStart` 안에서도, 손수 지은 바닥 줄 안에서도 같게 선다 — 제 간격을 스스로
+ * 든다(`--spacing-xs`).
+ *
+ * 이름표는 부르는 쪽의 말이다 — 아래 예의 글자 자리에 그쪽 사전에서 꺼낸 말을 넣는다.
+ * (여기에 `t('…')` 을 적지 않는 까닭은, 소스를 훑는 시험이 **주석 속 예시도 실제로 부르는
+ * 열쇠로 읽기** 때문이다. 글이 시험을 깨뜨릴 수 있으면 안 된다.)
+ *
+ * @example
+ * <Popup
+ *   title={표.name}
+ *   footerStart={({ closeWithAnimation }) => (
+ *     <ItemActions
+ *       onClose={closeWithAnimation}
+ *       edit={{ label: '수정', onClick: () => openEdit(표) }}
+ *       duplicate={{ label: '복제', onClick: () => duplicate(표) }}
+ *       publish={{
+ *         published: 표.isPublished,
+ *         publish: { label: '말귀자료실에 올리기', onClick: () => publish(표) },
+ *         unpublish: { label: '말귀자료실에서 내리기', onClick: () => unpublish(표) },
+ *       }}
+ *       copyLink={링크길있나 ? { label: '링크 복사', onClick: () => copyLink(표) } : undefined}
+ *       remove={{ label: '삭제', onClick: () => askDelete(표) }} />
+ *   )} />
+ * @public
+ */
+export default function ItemActions(props) {
+    const { onClose, className } = props;
+    return (_jsx("div", { className: cx('item-actions', className), children: 차례.map(({ 열쇠, icon, 닫고할까 }) => {
+            const 받은것 = props[열쇠];
+            if (!받은것)
+                return null;
+            const 할일 = 열쇠 === 'publish'
+                ? (받은것.published
+                    ? 받은것.unpublish
+                    : 받은것.publish)
+                : 받은것;
+            return (_jsx(Button, { htmlType: "button", size: 40, type: "dot", icon: icon, ariaLabel: 할일.label, showTooltipInfo: 할일.label, onClick: () => { if (닫고할까)
+                    onClose(); 할일.onClick(); } }, 열쇠));
+        }) }));
+}

package/dist/packages/core/src/components/Popup/useDiscardGuard.d.ts

@@ -0,0 +1,48 @@
+import type { ReactNode } from 'react';
+/** @public */
+export interface DiscardGuardLabels {
+    title?: string;
+    message?: string;
+    confirmLabel?: string;
+}
+/** @public */
+export interface DiscardGuard {
+    /** `Popup` 의 `beforeClose` 로 넘긴다 — `false` 면 안 닫힌다 */
+    beforeClose: () => boolean;
+    /** 물음창. JSX 어디에 두든 된다(아래 글 참고) */
+    discardPopup: ReactNode;
+    /** **다음 한 번은 안 묻는다** — 저장이 끝나고 스스로 닫을 때 부른다 */
+    allowClose: () => void;
+}
+/**
+ * **쓰던 것을 버리고 닫으려 할 때 한 번 더 묻는다.**
+ *
+ * 코어 0.128.0 부터 창은 어두운 바탕을 눌러도 닫힌다(사장님 지시 2026-09-14 "기본값으로").
+ * 긴 글을 받는 창에서 바깥을 한 번 잘못 누르면 쓰던 것이 통째로 사라진다 — 그 자리를 막는다.
+ *
+ * 말귀 회원앱과 어드민에 한 벌씩 있었고(2026-09-27) **어드민 쪽이 윗집합**이었다. 갈라져
+ * 있던 탓에 어드민에서 찾은 고침(`allowClose`)이 회원앱으로 건너오지 못했다 — 회원앱
+ * 고객 추가 창이 **저장을 끝내고도 "저장했는데 버릴까요?" 를 물었다.** 여기 한 벌로 둔다.
+ *
+ * **`allowClose` 가 그 고침이다.** 저장이 끝나고 창이 스스로 닫을 때(`closeWithAnimation`)도
+ * 그 길은 `beforeClose` 를 거치는데, 폼은 방금 채워 달라진 채라 "버릴까요" 가 뜬다. 저장에
+ * 성공한 직후 `allowClose()` 를 부르면 **다음 한 번만** 안 묻고 닫는다. 같은 틱에 닫으므로
+ * 상태가 아니라 ref 로 든다 — 상태로 들면 다시 그려지기 전에 닫혀 안 읽힌다.
+ *
+ * **물음창은 JSX 어디에 두든 된다.** 창은 `document.body` 로 옮겨 붙고(`createPortal`)
+ * 그 차례는 코드 자리가 아니라 **뜬 시각**으로 정해지므로, 나중에 뜨는 이 물음창이 늘 위다.
+ *
+ * 문구는 `labels` 로 바꾼다 — 안 주면 사전(`common.discardConfirm.*`)을 따르고, 사전이
+ * 없으면 한국어 기본값으로 그린다(번역을 안 쓰는 소비자도 그대로 읽힌다).
+ *
+ * ```tsx
+ * const { beforeClose, discardPopup, allowClose } = useDiscardGuard(달라졌나, 닫기)
+ * const 저장 = async () => { await 보내기(); allowClose(); closeWithAnimation() }
+ * return <Popup title={제목} beforeClose={beforeClose} …>{…}{discardPopup}</Popup>
+ * ```
+ *
+ * @param isDirty 지금 닫으면 잃을 것이 있는가
+ * @param onClose 버리기로 했을 때 실제로 닫는 일
+ * @public
+ */
+export declare function useDiscardGuard(isDirty: boolean, onClose: () => void, labels?: DiscardGuardLabels): DiscardGuard;

package/dist/packages/core/src/components/Popup/useDiscardGuard.js

@@ -0,0 +1,56 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import ConfirmPopup from './ConfirmPopup';
+/**
+ * **쓰던 것을 버리고 닫으려 할 때 한 번 더 묻는다.**
+ *
+ * 코어 0.128.0 부터 창은 어두운 바탕을 눌러도 닫힌다(사장님 지시 2026-09-14 "기본값으로").
+ * 긴 글을 받는 창에서 바깥을 한 번 잘못 누르면 쓰던 것이 통째로 사라진다 — 그 자리를 막는다.
+ *
+ * 말귀 회원앱과 어드민에 한 벌씩 있었고(2026-09-27) **어드민 쪽이 윗집합**이었다. 갈라져
+ * 있던 탓에 어드민에서 찾은 고침(`allowClose`)이 회원앱으로 건너오지 못했다 — 회원앱
+ * 고객 추가 창이 **저장을 끝내고도 "저장했는데 버릴까요?" 를 물었다.** 여기 한 벌로 둔다.
+ *
+ * **`allowClose` 가 그 고침이다.** 저장이 끝나고 창이 스스로 닫을 때(`closeWithAnimation`)도
+ * 그 길은 `beforeClose` 를 거치는데, 폼은 방금 채워 달라진 채라 "버릴까요" 가 뜬다. 저장에
+ * 성공한 직후 `allowClose()` 를 부르면 **다음 한 번만** 안 묻고 닫는다. 같은 틱에 닫으므로
+ * 상태가 아니라 ref 로 든다 — 상태로 들면 다시 그려지기 전에 닫혀 안 읽힌다.
+ *
+ * **물음창은 JSX 어디에 두든 된다.** 창은 `document.body` 로 옮겨 붙고(`createPortal`)
+ * 그 차례는 코드 자리가 아니라 **뜬 시각**으로 정해지므로, 나중에 뜨는 이 물음창이 늘 위다.
+ *
+ * 문구는 `labels` 로 바꾼다 — 안 주면 사전(`common.discardConfirm.*`)을 따르고, 사전이
+ * 없으면 한국어 기본값으로 그린다(번역을 안 쓰는 소비자도 그대로 읽힌다).
+ *
+ * ```tsx
+ * const { beforeClose, discardPopup, allowClose } = useDiscardGuard(달라졌나, 닫기)
+ * const 저장 = async () => { await 보내기(); allowClose(); closeWithAnimation() }
+ * return <Popup title={제목} beforeClose={beforeClose} …>{…}{discardPopup}</Popup>
+ * ```
+ *
+ * @param isDirty 지금 닫으면 잃을 것이 있는가
+ * @param onClose 버리기로 했을 때 실제로 닫는 일
+ * @public
+ */
+export function useDiscardGuard(isDirty, onClose, labels = {}) {
+    const { t } = useTranslation();
+    const [confirming, setConfirming] = useState(false);
+    const 통과 = useRef(false);
+    const allowClose = useCallback(() => { 통과.current = true; }, []);
+    const beforeClose = useCallback(() => {
+        /* 한 번 쓰고 되돌린다 — 안 되돌리면 그 뒤로 영영 안 묻는다 */
+        if (통과.current) {
+            통과.current = false;
+            return true;
+        }
+        if (isDirty) {
+            setConfirming(true);
+            return false;
+        }
+        return true;
+    }, [isDirty]);
+    const discardPopup = confirming ? (_jsx(ConfirmPopup, { title: labels.title ?? t('common.discardConfirm.title', '입력을 취소할까요?'), message: labels.message ?? t('common.discardConfirm.body', '저장하지 않으면 지금까지 입력한 내용이 사라집니다.'), confirmLabel: labels.confirmLabel ?? t('common.discardConfirm.confirm', '입력 취소'), confirmVariant: "danger", onConfirm: () => { setConfirming(false); onClose(); }, onClose: () => setConfirming(false) })) : null;
+    return { beforeClose, discardPopup, allowClose };
+}

package/dist/packages/core/src/components/SideNav.css

@@ -140,10 +140,22 @@
 }
 
 /* ── footer: 항상 list 아래에 위치, 줄어들지 않음 ─────────────────────────── */
+/* **배지를 얹으려고 알림 단추에만 한 겹 두른 것**(`position: relative` 가 배지의 기준이다).
+   그 한 겹 때문에 이 하나만 발치 줄에서 다르게 놓였다.
+
+   `align-self: flex-start` 였다 — 접힌 레일에서 발치 줄은 `align-items: center` 인데 이 선언이
+   그것을 덮어 **혼자 왼쪽에 붙었다**. 단추가 동그라미라 다섯이 한 줄로 서면 하나 틀어진 것이
+   바로 보인다(말귀 실측 2026-09-26: 넷은 가운데 36, 이것만 30 — 6px. 놀이터는 단추가 한 급
+   작아져 4px 이지만 같은 일이다. 어긋남은 `(줄 폭 − 단추 폭) / 2` 다).
+
+   **`align-self` 만 걷으면 안 된다.** 펼친 줄은 `align-items: stretch` 라 이 span 이 늘어난다 —
+   1440px 에서 **194px** 이 됐다(실측). 단추는 48 그대로라 눈에는 같지만, 줄 전체가 알림 단추의
+   몸이 되어 빈 자리에서도 호버·클릭이 걸린다. `width: fit-content` 는 definite width 라
+   stretch 를 막는다. 둘을 함께 둬야 두 폭 모두 제자리다(768·1440 재확인). */
 .side-nav__notification-wrap {
   position: relative;
   display: inline-flex;
-  align-self: flex-start;
+  width: fit-content;
 }
 
 .side-nav__footer {

package/dist/packages/core/src/components.d.ts

@@ -134,6 +134,8 @@ export { default as Checkbox } from './components/Checkbox';
 export type { CheckboxProps } from './components/Checkbox';
 export { default as BulkBar } from './components/BulkBar';
 export type { BulkBarProps, BulkAction } from './components/BulkBar';
+export { default as ItemActions } from './components/ItemActions';
+export type { ItemActionsProps, ItemAction, ItemPublishAction } from './components/ItemActions';
 export { default as DatePicker } from './components/DatePicker';
 export type { DatePickerProps } from './components/DatePicker';
 export { useCalendarMonth } from './components/useCalendarMonth';
@@ -236,6 +238,8 @@ export { default as ListPopup } from './components/Popup/ListPopup';
 export type { PopupListProps, PopupListColumn } from './components/Popup/ListPopup';
 export { default as ConfirmPopup } from './components/Popup/ConfirmPopup';
 export type { ConfirmPopupProps } from './components/Popup/ConfirmPopup';
+export { useDiscardGuard } from './components/Popup/useDiscardGuard';
+export type { DiscardGuard, DiscardGuardLabels } from './components/Popup/useDiscardGuard';
 export { default as CouponInputPopup } from './components/Popup/CouponInputPopup';
 export type { CouponInputPopupProps } from './components/Popup/CouponInputPopup';
 export { default as MenuTooltip } from './components/Tooltip/MenuTooltip';