sellmate-design-system-react 9.0.0-beta.59 → 9.0.0-beta.60

package/AGENTS.md

@@ -1067,20 +1067,38 @@ const columns: STableColumn[] = [
 라벨 [helpText ?] [editable] [navigable] [required *] [sortable 정렬버튼]
 ```
 
-**`editable` 은 값을 직접 고칠 수 있는 열, `navigable` 은 눌러서 다른 화면으로 넘어가는 열에 준다.** 둘 다 **표식일 뿐 버튼이 아니다** — 아이콘·크기·색은 컴포넌트가 고정하고 클릭은 받지 않는다.
+**둘을 가르는 기준은 "무엇을 하느냐"가 아니라 "현재 화면을 떠나느냐"다.**
+
+| 셀을 눌렀을 때 | 표식 |
+| --- | --- |
+| 셀에서 바로 고친다 | `editable` |
+| 모달·바텀시트를 띄워 고친다 | `editable` |
+| 새 창·새 팝업을 띄운다, 페이지를 이동한다 | `navigable` |
+| 모달로 보여주기만 한다 (고치지 않는다) | 둘 다 없음 |
+
+**모달은 `navigable` 이 아니다.** 현재 화면 위에 겹쳐 뜰 뿐 화면을 떠나는 것이 아니다 — 거기서 값을 고치면 고치는 자리가 셀이든 모달이든 `editable` 이다. 반대로 새 창·새 팝업은 거기서 값을 고치더라도 `navigable` 이다. 화면을 떠나기 때문이다.
+
+둘 다 **표식일 뿐 버튼이 아니다** — 아이콘·크기·색은 컴포넌트가 고정하고 클릭은 받지 않는다.
 
 ```tsx
 const columns: STableColumn[] = [
+  // 새 창으로 상세를 연다 → navigable
   { name: 'name', label: '상품명', field: 'name', width: 200,
     navigable: true,
-    render: (row: SRow) => <STextLink label={row.name} onClick={() => goDetail(row.id)} /> },
+    render: (row: SRow) => <STextLink label={row.name} onClick={() => openDetailWindow(row.id)} /> },
+  // 셀에서 바로 고친다 → editable
   { name: 'stock', label: '재고', field: 'stock', width: 160, contentType: 'control',
     editable: true, required: true,
     render: (row: SRow) => <SNumberInput value={row.stock} width="100%" /> },
+  // 수정 모달을 띄워 고친다 → 화면을 떠나지 않으므로 navigable 이 아니라 editable
+  { name: 'memo', label: '메모', field: 'memo', width: 200,
+    editable: true,
+    render: (row: SRow) => <STextLink label={row.memo} onClick={() => openMemoModal(row.id)} /> },
 ];
 ```
 
-- **실제로 그렇게 동작하는 열에만 켠다.** 표식만 켜고 셀은 텍스트 그대로 두면, 고칠 수 있다고 해 놓고 고칠 방법이 없고 넘어갈 수 있다고 해 놓고 누를 것이 없다. `editable` 이면 셀에 입력 컨트롤이, `navigable` 이면 셀에 링크·클릭이 있어야 한다.
+- **실제로 그렇게 동작하는 열에만 켠다.** 표식만 켜고 셀은 텍스트 그대로 두면, 고칠 수 있다고 해 놓고 고칠 방법이 없고 넘어갈 수 있다고 해 놓고 누를 것이 없다. `editable` 이면 셀에 고치는 수단(입력 컨트롤이나 수정 모달을 여는 링크·클릭)이, `navigable` 이면 셀에 새 화면을 여는 링크·클릭이 있어야 한다.
+- **한 열에 둘 다 켜는 것은 두 동작이 모두 있을 때만이다** — 예를 들어 셀에서 값을 고치면서 라벨을 누르면 새 창으로 상세가 열리는 열. 판단이 서지 않으면 하나만 켠다.
 - **표식으로 동작을 대신하지 않는다.** 고치는 UI 도 넘어가는 동작도 셀(`column.render`) 몫이다.
 - **`renderHeader` 로 헤더를 통째로 교체하면 표식도 `required` 도 그려지지 않는다** — 헤더 전체가 소비 앱 책임이 되므로 순서·크기·색을 손으로 맞추게 된다.
 
@@ -1765,6 +1783,8 @@ const [from, setFrom] = useState<string | null>(null);
 
 선택은 다르다. 앱이 `selectedId` 스칼라 하나를 들면 상호배제가 구조적으로 보장되고, 그 값은 URL·store 로 복원돼야 한다. 리스트가 사본을 들면 그 순간 진실이 둘이 되어 어긋난다.
 
+같은 이유로 `STree` 노드의 `disabled` 는 **선택만** 막는다. 체크박스는 잠기고 전체 선택·부모 선택에서 빠지지만, 캐럿·행 클릭·키보드로 접고 펴는 것은 그대로 된다 — 부모가 disabled 라고 자식에 닿는 길까지 막지 않는다.
+
 ```tsx
 const [selectedId, setSelectedId] = useState<string>();
 
@@ -2668,7 +2688,7 @@ export default function TransferOrderPopupPage() {
 - [ ] 일부 행만 고를 수 있는 표라면 `isRowSelectable` 로 잠갔는가 — 체크박스를 밖에서 직접 잠그거나 전체 선택을 손으로 보정하지 않았는가 (§3-4)
 - [ ] 표 본문의 스크롤이 필요하면 `onScroll` · `ref.getScrollElement()` 를 썼는가 — 내부 마크업을 겨냥한 선택자로 스크롤 컨테이너를 찾지 않았는가 (§3-4)
 - [ ] 스크롤 위치를 저장했다 되돌린다면 **행 번호**(`getFirstVisibleRow` → `scrollToRow`)로 했는가, `scrollTop` 픽셀을 저장하지는 않았는가 (§3-4 — 가상 스크롤에서는 좌표계가 실측으로 움직여 다른 행이 나온다)
-- [ ] `editable` · `navigable` 표식을 켠 열이 **셀에서도 실제로 그렇게 동작하는가** (입력 컨트롤 · 링크가 있는가), 표식을 붙인 열의 폭을 함께 넓혔는가 (§3-4)
+- [ ] `editable` · `navigable` 표식을 켠 열이 **셀에서도 실제로 그렇게 동작하는가** (입력 컨트롤 · 링크가 있는가), **모달로 처리하는 열에 `navigable` 을 켜지는 않았는가** (화면을 떠나지 않으므로 `editable` 이다), 표식을 붙인 열의 폭을 함께 넓혔는가 (§3-4)
 - [ ] 금액·수량 등 양을 나타내는 숫자에 빠짐없이 `toLocaleString()` 을 썼는가 (번호·코드는 제외)
 - [ ] 날짜를 `YYYY-MM-DD` 로 표기했는가 (`toLocaleDateString()` ❌, §1-4)
 - [ ] 필드 폭을 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`)으로 줬는가 — px 직접 지정 ❌ (§4-3)

package/dist/components/STable/STable.d.ts

@@ -75,7 +75,10 @@ interface STableColumnBase {
      */
     required?: boolean;
     /**
-     * 셀 값을 직접 고칠 수 있는 열. 라벨 뒤에 `pageEdit` 표식이 붙는다.
+     * **지금 이 화면에 머문 채로** 값을 고치는 열. 라벨 뒤에 `pageEdit` 표식이 붙는다.
+     *
+     * 셀에서 바로 고치는 것도, 수정 모달·바텀시트를 띄워 고치는 것도 모두 이쪽이다 —
+     * 모달은 현재 화면 **위에** 겹쳐 뜰 뿐 화면을 떠나는 것이 아니라서 `navigable` 이 아니다.
      *
      * **표식일 뿐 버튼이 아니다** — 실제로 고치는 UI 는 셀(`render`)이 그린다. 표식만 켜 두면
      * 고칠 수 있다고 해 놓고 고칠 방법이 없는 열이 된다.
@@ -84,9 +87,13 @@ interface STableColumnBase {
      */
     editable?: boolean;
     /**
-     * 셀을 눌러 다른 화면으로 넘어가는 열. 라벨 뒤에 `pageMove` 표식이 붙는다.
+     * 눌러서 **이 화면을 떠나** 다른 화면으로 가는 열 — 새 창·새 팝업으로 띄우거나 페이지를
+     * 이동한다. 라벨 뒤에 `pageMove` 표식이 붙는다.
+     *
+     * 모달로 처리하는 열은 화면을 떠나지 않으므로 여기에 해당하지 않는다. 모달에서 값을 고치면
+     * `editable`, 고치지 않고 보여주기만 하면 둘 다 붙이지 않는다.
      *
-     * **표식일 뿐 버튼이 아니다** — 넘어가는 것은 셀(`render`)의 링크·클릭이 한다.
+     * **표식일 뿐 버튼이 아니다** — 화면을 여는 것은 셀(`render`)의 링크·클릭이 한다.
      *
      * `renderHeader` 로 헤더를 통째로 교체하면 그리지 않는다 (헤더 전체가 소비 앱 책임).
      */

package/dist/components/STree/README.md

@@ -68,7 +68,7 @@ export interface STreeNode {
   label: ReactNode;
   /** 하위 노드 */
   children?: STreeNode[];
-  /** 비활성 상태 */
+  /** 선택 비활성. 체크박스만 막고 접기·펼치기는 그대로 된다 (전체 선택·부모 선택에서도 제외) */
   disabled?: boolean;
 }
 ```

package/dist/components/STree/STree.d.ts

@@ -7,7 +7,7 @@ export interface STreeNode {
     label: ReactNode;
     /** 하위 노드 */
     children?: STreeNode[];
-    /** 비활성 상태 */
+    /** 선택 비활성. 체크박스만 막고 접기·펼치기는 그대로 된다 (전체 선택·부모 선택에서도 제외) */
     disabled?: boolean;
 }
 export interface STreeItemRenderState {

package/dist/components/STree/STree.examples.d.ts

@@ -2,3 +2,5 @@ import type { STreeNode } from './STree';
 export declare const treeUsageItems: STreeNode[];
 export declare const treeUsageDefaultValue: string[];
 export declare const treeUsageExpandedIds: string[];
+/** 부모가 disabled 여도 자식은 접고 펼 수 있고, 자식 중 정상 노드는 고를 수 있다 */
+export declare const treeDisabledItems: STreeNode[];

package/dist/index.cjs

@@ -7084,7 +7084,6 @@ var STreeItemImpl = /* @__PURE__ */ react.forwardRef(function STreeItem({
     onTreeSelect?.(node, event);
   };
   const handleRowClick = (event) => {
-    if (node.disabled) return;
     if (hasChildren) onToggle?.(node, event);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -7101,9 +7100,8 @@ var STreeItemImpl = /* @__PURE__ */ react.forwardRef(function STreeItem({
         "group/tree-item box-border flex w-full items-center gap-(--cmp-tree-item-rowGap) overflow-hidden bg-(--cmp-tree-item-bg-default) px-(--cmp-tree-item-paddingX) text-left",
         typography.rowHeight,
         border && "border-b border-(--cmp-tree-item-border-default)",
-        !node.disabled && "hover:bg-(--cmp-tree-item-bg-hover)",
-        node.disabled && "cursor-not-allowed opacity-60",
-        !node.disabled && hasChildren && "cursor-pointer",
+        "hover:bg-(--cmp-tree-item-bg-hover)",
+        hasChildren && "cursor-pointer",
         className
       ),
       ...rest,
@@ -7127,10 +7125,8 @@ var STreeItemImpl = /* @__PURE__ */ react.forwardRef(function STreeItem({
               size: "xxs",
               ariaLabel: expanded ? "collapse tree item" : "expand tree item",
               ariaExpanded: expanded,
-              disabled: node.disabled,
               onClick: (event) => {
                 event.stopPropagation();
-                if (node.disabled) return;
                 onToggle?.(node, event);
               }
             }
@@ -7163,6 +7159,7 @@ var STreeItemImpl = /* @__PURE__ */ react.forwardRef(function STreeItem({
               className: cn(
                 "block min-w-0 flex-1 truncate py-(--cmp-tree-item-paddingY) text-(--cmp-tree-item-text-default)",
                 labelTypo,
+                node.disabled && "opacity-60",
                 node.disabled ? "cursor-not-allowed" : selectable ? "cursor-pointer" : void 0
               ),
               children: node.label
@@ -7288,13 +7285,13 @@ var STreeImpl = /* @__PURE__ */ react.forwardRef(function STree({
         break;
       }
       case "ArrowRight": {
-        if (!hasChildren || row.node.disabled) return;
+        if (!hasChildren) return;
         if (!row.expanded) updateExpanded(row.node);
         else if (visibleRows[index + 1]) focusRow(visibleRows[index + 1].id);
         break;
       }
       case "ArrowLeft": {
-        if (hasChildren && row.expanded && !row.node.disabled) updateExpanded(row.node);
+        if (hasChildren && row.expanded) updateExpanded(row.node);
         else if (row.parentId != null) focusRow(row.parentId);
         else return;
         break;
@@ -7312,7 +7309,7 @@ var STreeImpl = /* @__PURE__ */ react.forwardRef(function STree({
       case " ": {
         if (row.id === TREE_ALL_NODE.id) updateAllSelected();
         else if (selectable) updateSelected(row.node);
-        else if (hasChildren && !row.node.disabled) updateExpanded(row.node);
+        else if (hasChildren) updateExpanded(row.node);
         else return;
         break;
       }
@@ -16265,7 +16262,7 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
                                               name: "pageMove",
                                               size: 12,
                                               color: "var(--sys-color-link-accent)",
-                                              label: "\uB2E4\uB978 \uD654\uBA74\uC73C\uB85C \uC774\uB3D9",
+                                              label: "\uC0C8 \uD654\uBA74\uC5D0\uC11C \uC5F4\uAE30",
                                               className: "shrink-0"
                                             }
                                           ),