"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", li: "li", p: "p", pre: "pre", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {ColspanProtocolDemo, ExpandableTableDemo} = _components; if (!ColspanProtocolDemo) _missingMdxReference("ColspanProtocolDemo", true); if (!ExpandableTableDemo) _missingMdxReference("ExpandableTableDemo", true); return _jsxs(_Fragment, { children: [_jsx(_components.h2, { id: "들어가며", children: "들어가며" }), "\n", _jsx(_components.p, { children: "CRM 캠페인 테이블에 요구사항 네 개가 한꺼번에 들어왔다. 행을 클릭하면 하위 세그먼트가 인라인으로 펼쳐질 것, 하위 행에서는 여러 컬럼을 병합해 설명 텍스트를 보여줄 것, 하위 행이 또 펼쳐질 것(2단계), 그리고 헤더 고정에 스크롤바는 바디에만 붙을 것....." }), "\n", _jsxs(_components.p, { children: ["마지막 항목은 ", _jsx(_components.a, { href: "/trouble-shooting/25-table-sticky-header-scroll", children: "테이블 분리 글" }), "에서 이미 다룬 구조 그대로다. ", _jsx(_components.code, { children: "display: block" }), " 방식을 먼저 시도했다가 행마다 독립 테이블이 되어 컬럼 동기화가 깨지는 것까지 똑같이 겪었고, 헤더 테이블 + 스크롤 div 속 바디 테이블 + ", _jsx(_components.code, { children: "min-h-0" }), " + ", _jsx(_components.code, { children: "table-fixed" }), "와 명시적 width로 정리했다. 이 글은 그 위에 얹은 나머지 셋, 확장 행 설계 이야기다."] }), "\n", _jsx(_components.h2, { id: "상태는-밖에-렌더링은-프로토콜로", children: "상태는 밖에, 렌더링은 프로토콜로" }), "\n", _jsx(_components.p, { children: "먼저 동작부터. 캠페인을 클릭하면 하위 세그먼트가 펼쳐지고, 그 안에 또 펼칠 것이 있다." }), "\n", _jsx(ExpandableTableDemo, {}), "\n", _jsxs(_components.p, { children: ["설계의 첫 결정은 ", _jsx(_components.strong, { children: "확장 상태를 DataTable이 갖지 않는 것" }), "이었다. 어떤 행이 펼쳐져 있는지는 부모가 ", _jsx(_components.code, { children: "Set" }), "으로 들고, 테이블은 그것을 읽기만 한다."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "const [expandedRowIds, setExpandedRowIds] = useState>(new Set());\n\n setExpandedRowIds((prev) => toggle(prev, row.id))}\n expandedRowIds={expandedRowIds}\n getRowId={(row) => row.id}\n getSubRows={(row) => row.subRows}\n renderSubRowCell={(subRow, columnIndex, columnDef) => { ... }}\n/>\n" }) }), "\n", _jsx(_components.p, { children: "확장이 체크박스 선택, 외부 필터, \"모두 접기\" 버튼 같은 다른 상태와 엮이는 화면이라, 상태가 컴포넌트 안에 숨으면 그 조합을 만들 수 없다. 입력 컴포넌트의 controlled 패턴과 같은 논리를 테이블 확장에 적용한 것이다." }), "\n", _jsxs(_components.p, { children: ["두 번째 결정은 하위 행의 렌더링을 ", _jsx(_components.strong, { children: "컬럼 인덱스 기반 render prop" }), "으로 여는 것이다. 하위 행은 부모와 같은 컬럼 격자를 쓰지만 내용 구성이 다르다. 체크박스가 들어가는 칸, 비우는 칸, 병합되는 칸. 이 다양성을 props 조합으로 표현하는 대신, \"각 컬럼 자리에 무엇을 그릴지\"를 통째로 호출자에게 묻는다."] }), "\n", _jsx(_components.h2, { id: "colspan까지-표현하는-반환-타입", children: "colSpan까지 표현하는 반환 타입" }), "\n", _jsx(_components.p, { children: "병합 요구가 이 프로토콜의 모양을 결정했다. 반환 타입이 곧 세 가지 지시어다." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "renderSubRowCell?: (\n subRow: TSubRow,\n columnIndex: number,\n columnDef: DataTableColumnDef,\n) => ReactNode | { content: ReactNode; colSpan: number } | null;\n" }) }), "\n", _jsxs(_components.p, { children: ["ReactNode는 \"이 칸에 이걸 그려라\", ", _jsx(_components.code, { children: "{ content, colSpan }" }), "은 \"여기서부터 n칸을 병합해라\", null은 \"이 칸은 병합에 먹혔으니 건너뛰어라\"다."] }), "\n", _jsx(ColspanProtocolDemo, {}), "\n", _jsx(_components.p, { children: "구현 쪽에는 이 프로토콜을 받아주는 커서가 하나 있다." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "let skipUntil = -1;\n\nvisibleCells.forEach((cell, cellIndex) => {\n if (cellIndex < skipUntil) return; // 병합 범위 안: 호출 결과와 무관하게 스킵\n\n const result = renderSubRowCell!(subRow, cellIndex, columnDef);\n if (result === null) return;\n\n const isColSpanResult =\n typeof result === \"object\" && result !== null && \"colSpan\" in result;\n const colSpan = isColSpanResult ? result.colSpan : 1;\n if (colSpan > 1) skipUntil = cellIndex + colSpan;\n\n cells.push(\n 1 ? colSpan : undefined} ...>\n {isColSpanResult ? result.content : result}\n ,\n );\n});\n" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "skipUntil" }), "이 핵심 방어선이다. 호출자가 병합 범위 안의 인덱스에서 실수로 값을 반환해도, 구현이 그 구간의 호출 결과를 무시하므로 셀이 한 칸씩 밀리는 사고가 나지 않는다. render prop 프로토콜은 표현력이 좋은 만큼 호출자의 규약 준수에 기대게 되는데, 규약 위반이 깨진 화면이 아니라 무시로 끝나도록 구현이 받쳐주는 것까지가 설계다."] }), "\n", _jsx(_components.h2, { id: "2단계-확장-상태를-합치지-않는다", children: "2단계 확장: 상태를 합치지 않는다" }), "\n", _jsx(_components.p, { children: "하위 행의 하위(VIP 세그먼트 같은 중첩)는 별도의 Set으로 관리했다." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "const [expandedRowIds, setExpandedRowIds] = useState>(new Set()); // 1단계\nconst [expandedSubRowIds, setExpandedSubRowIds] = useState>(\n new Set(),\n); // 2단계\n" }) }), "\n", _jsx(_components.p, { children: "하나의 Set에 합쳐도 동작은 한다. id가 전역에서 유일하다면. 하지만 1단계 id는 캠페인 테이블의 것이고 2단계 id는 세그먼트의 것이라 식별자의 출처가 다르고, \"캠페인을 접으면 그 아래 세그먼트 확장도 함께 닫을 것인가\" 같은 정책이 두 층에서 다르게 결정될 수 있다. 다른 생명주기를 가진 상태는 다른 변수로 두는 쪽이, 합쳐서 얻는 코드 한 줄 절약보다 낫다." }), "\n", _jsxs(_components.p, { children: ["토글 버튼에서 한 가지 잊기 쉬운 디테일은 이벤트 전파다. 하위 행의 펼침 버튼 클릭이 행 자체의 클릭(부모 접기)으로 번지지 않도록 ", _jsx(_components.code, { children: "e.stopPropagation()" }), "이 필요하다."] }), "\n", _jsx(_components.h2, { id: "api-게이트에-대한-회고", children: "API 게이트에 대한 회고" }), "\n", _jsx(_components.p, { children: "DataTable 내부에서 확장 기능은 네 props가 모두 있을 때만 켜진다." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "const isExpandable = !!(\n expandedRowIds &&\n getRowId &&\n getSubRows &&\n renderSubRowCell\n);\n" }) }), "\n", _jsxs(_components.p, { children: ["전부 아니면 전무 게이트는 타입을 단순하게 유지해주지만, 셋만 넘기고 하나를 빠뜨리면 ", _jsx(_components.strong, { children: "에러 없이 조용히 비활성" }), "된다는 약점이 있다. \"분명 expandedRowIds를 넘겼는데 왜 안 펼쳐지지\"로 시간을 쓴 뒤, 개발 모드에서 일부만 전달된 경우 콘솔 경고를 내는 한 줄을 추가했다. 옵션 묶음으로 동작하는 API라면 묶음이 깨졌을 때의 신호까지 설계에 포함하는 게 맞았다."] }), "\n", _jsx(_components.h2, { id: "핵심-정리", children: "핵심 정리" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["확장 상태는 테이블 밖의 ", _jsx(_components.code, { children: "Set" }), "으로, 테이블은 controlled로 읽기만 한다. 확장이 선택, 필터 같은 다른 상태와 조합되는 화면의 전제 조건이다"] }), "\n", _jsx(_components.li, { children: "하위 행 렌더링은 컬럼 인덱스 기반 render prop으로 열고, 반환 타입(ReactNode / colSpan 객체 / null)이 곧 셀 배치 지시어가 된다" }), "\n", _jsxs(_components.li, { children: ["병합 구현의 ", _jsx(_components.code, { children: "skipUntil" }), " 커서는 호출자의 규약 위반을 무시로 흡수하는 방어선이다. 프로토콜형 API는 위반 시의 동작까지가 설계다"] }), "\n", _jsx(_components.li, { children: "중첩 확장의 상태는 층마다 분리한다. 식별자의 출처와 접힘 정책이 다른 상태를 한 Set에 합치지 않는다" }), "\n", _jsxs(_components.li, { children: ["헤더 고정 + 바디 스크롤은 테이블 분리 + ", _jsx(_components.code, { children: "min-h-0" }), " + ", _jsx(_components.code, { children: "table-fixed" }), " 조합 그대로다. 옵션 묶음으로 켜지는 기능은 묶음이 불완전할 때 경고를 내야 한다"] }), "\n"] }), "\n", _jsx(_components.h2, { id: "references", children: "References" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://tanstack.com/table/latest/docs/guide/expanding", children: "TanStack Table: Expanding" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://react.dev/learn/sharing-state-between-components", children: "React: Sharing State Between Components" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td#colspan", children: "MDN: colspan" }) }), "\n"] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }