"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", h3: "h3", li: "li", p: "p", pre: "pre", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {ColumnSyncDemo, MinHeightZeroDemo, StickyHeaderStagesDemo} = _components; if (!ColumnSyncDemo) _missingMdxReference("ColumnSyncDemo", true); if (!MinHeightZeroDemo) _missingMdxReference("MinHeightZeroDemo", true); if (!StickyHeaderStagesDemo) _missingMdxReference("StickyHeaderStagesDemo", true); return _jsxs(_Fragment, { children: [_jsx(_components.h2, { id: "들어가며", children: "들어가며" }), "\n", _jsx(_components.p, { children: "@tanstack/react-table로 만든 연락처 테이블이 있었다. 행이 수백 개라 스크롤이 길어지는데, 스크롤을 내리면 어느 열이 무슨 컬럼인지 알 수 없으니 헤더를 상단에 고정해달라는 요구가 들어왔다. 흔한 요구사항이고, 답도 정해져 있다고 생각했다." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "

\n \n \n {/* 헤더 */}\n \n {/* 바디 */}\n

\n" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "sticky top-0" }), " 한 줄. 그런데 헤더는 고정되지 않고 행들과 함께 그대로 스크롤되어 사라졌다 ㅎㅎ.."] }), "\n", _jsx(_components.h2, { id: "단계별로-따라가보기", children: "단계별로 따라가보기" }), "\n", _jsx(_components.p, { children: "이 문제는 한 번에 풀리지 않고 세 단계를 거쳤다. 각 단계를 그대로 재현해뒀으니 직접 스크롤해보면서 따라가면 된다." }), "\n", _jsx(StickyHeaderStagesDemo, {}), "\n", _jsx(_components.h3, { id: "1-sticky가-안-붙는다--범인은-컴포넌트-안에-있다", children: "1. sticky가 안 붙는다 — 범인은 컴포넌트 안에 있다" }), "\n", _jsxs(_components.p, { children: ["페이지 코드만 보면 sticky가 동작해야 한다. 스크롤 컨테이너(", _jsx(_components.code, { children: "overflow-y-auto" }), ") 안에 sticky 헤더가 있으니까. 범인은 디자인 시스템의 ", _jsx(_components.code, { children: "Table" }), " 컴포넌트 ", _jsx(_components.strong, { children: "내부" }), "에 있었다."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "// shared-ui/src/components/Table.tsx\nconst Table = ({ ... }) => (\n

{/* ← 이 래퍼 */}\n \n \n);\n" }) }), "\n", _jsxs(_components.p, { children: ["가로 스크롤 대비용으로 들어 있던 ", _jsx(_components.code, { children: "overflow-auto" }), " 래퍼다. sticky는 ", _jsx(_components.strong, { children: "가장 가까운 스크롤 컨테이너" }), "를 기준으로 붙는데, ", _jsx(_components.code, { children: "overflow" }), "가 ", _jsx(_components.code, { children: "visible" }), "이 아닌 조상은 전부 스크롤 컨테이너로 취급된다. 그래서 헤더의 기준은 바깥의 ", _jsx(_components.code, { children: "overflow-y-auto" }), "가 아니라 이 안쪽 래퍼가 됐고, 실제 스크롤은 바깥에서 일어나니 안쪽 래퍼의 scrollTop은 영원히 0이다. ", _jsx(_components.strong, { children: "기준이 스크롤되지 않으면 sticky는 아무것도 하지 않는다." })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "/trouble-shooting/21-gsap-scrollsmoother-sticky-issue", children: "ScrollSmoother에서 sticky가 동작하지 않던 포스팅" }), "과 정확히 같은 메커니즘인데, 이번에는 그 ", _jsx(_components.code, { children: "overflow" }), "가 내 코드가 아니라 공용 컴포넌트의 구현 디테일 안에 숨어 있었다는 점이 다르다. 사용하는 쪽에서는 마크업 어디에도 보이지 않는 래퍼가 sticky의 기준을 가로채고 있던 것이다."] }), "\n", _jsx(_components.h3, { id: "2-래퍼를-제거하니-이번엔-스크롤바가-이상하다", children: "2. 래퍼를 제거하니 이번엔 스크롤바가 이상하다" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "Table" }), "에 ", _jsx(_components.code, { children: "stickyHeader" }), " prop을 추가해서 내부 래퍼의 ", _jsx(_components.code, { children: "overflow-auto" }), "를 끌 수 있게 했다."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "

\n" }) }), "\n", _jsxs(_components.p, { children: ["헤더가 붙기 시작했다. 그런데 데모의 주황 스트립을 보면 알 수 있듯, 스크롤 영역이 ", _jsx(_components.strong, { children: "헤더까지 포함" }), "한다. 스크롤바 트랙이 헤더 옆에서부터 시작하고, 스크롤바의 길이 계산에도 헤더 높이가 들어간다. 동작은 하는데 \"헤더는 고정 영역, 바디는 스크롤 영역\"이라는 시각적 구분이 스크롤바에서 무너진다. 작은 디테일이지만 한 번 보이면 계속 거슬리는 종류의 어긋남이다."] }), "\n", _jsx(_components.h3, { id: "3-고정하지-말고-스크롤을-가둔다", children: "3. 고정하지 말고, 스크롤을 가둔다" }), "\n", _jsxs(_components.p, { children: ["그래서 접근을 바꿨다. 헤더를 스크롤 영역 안에 두고 떠 있게 만드는(sticky) 게 아니라, ", _jsx(_components.strong, { children: "헤더를 스크롤 영역 밖으로 빼고 스크롤 자체를 바디로 한정" }), "한다."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "

\n {/* 고정 헤더 — 자기만의 테이블 */}\n

\n {/* 헤더 행 */}\n

\n\n {/* 스크롤은 여기서만 */}\n

\n \n {/* 데이터 행들 */}\n

\n" }) }), "\n", _jsx(_components.p, { children: "테이블을 헤더용과 바디용 둘로 쪼갰다. 이제 sticky가 필요 없으니 z-index도, overflow 충돌도, 컴포넌트 내부 래퍼도 전부 무관해진다. 스크롤바는 바디 옆에만 생기고, 헤더는 구조적으로 움직일 수 없는 위치에 있다." }), "\n", _jsx(_components.h2, { id: "min-h-0--이-구조가-동작하기-위한-조건", children: "min-h-0 — 이 구조가 동작하기 위한 조건" }), "\n", _jsxs(_components.p, { children: ["위 코드에서 ", _jsx(_components.code, { children: "min-h-0" }), "을 지우면 전체가 다시 무너진다. 이유는 flexbox의 잘 알려진 기본값에 있다. **flex 아이템의 ", _jsx(_components.code, { children: "min-height" }), "는 0이 아니라 ", _jsx(_components.code, { children: "auto" }), "**고, auto는 콘텐츠 높이를 뜻한다. 즉 ", _jsx(_components.code, { children: "flex-1" }), "을 줘도 아이템은 \"콘텐츠보다 작아지기\"를 거부하고, 행이 많으면 부모 높이를 뚫고 늘어난다. 안쪽의 ", _jsx(_components.code, { children: "overflow-y-auto" }), "는 자기 높이가 콘텐츠만큼 커졌으니 넘칠 것이 없고, 스크롤바는 영영 생기지 않는다."] }), "\n", _jsx(MinHeightZeroDemo, {}), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "min-h-0" }), "을 끄면 scrollHeight와 clientHeight가 같아지는 게 보인다. 이는 스크롤 컨테이너가 내용만큼 늘어나버려서 \"overflow\"가 사라진 상태다. 프레임 밖으로 밀려난 행들은 잘려서 접근할 방법이 없다. ", _jsx(_components.code, { children: "min-h-0" }), "을 켜면 중간 래퍼가 부모 안에 갇히고, 그제서야 안쪽 컨테이너에 넘침이 생겨 스크롤바가 나타난다."] }), "\n", _jsxs(_components.p, { children: ["참고로 ", _jsx(_components.code, { children: "overflow" }), "가 ", _jsx(_components.code, { children: "visible" }), "이 아닌 요소는 spec상 자동 최소 크기가 0으로 풀리기 때문에, ", _jsx(_components.code, { children: "overflow-y-auto" }), "가 걸린 요소 자신에게는 ", _jsx(_components.code, { children: "min-h-0" }), "이 필요 없다. 필요한 곳은 그 ", _jsx(_components.strong, { children: "사이에 낀, overflow 지정이 없는 flex 래퍼들" }), "이다. 래퍼가 몇 겹이든 사슬 중 한 곳이라도 ", _jsx(_components.code, { children: "min-height: auto" }), "로 버티면 거기서 높이가 새어 나간다."] }), "\n", _jsx(_components.h2, { id: "분리의-대가--컬럼-폭-동기화", children: "분리의 대가 — 컬럼 폭 동기화" }), "\n", _jsxs(_components.p, { children: ["개발 코스트가 공짜는 아니다. 테이블이 하나일 때는 브라우저의 auto table layout이 헤더와 바디를 ", _jsx(_components.strong, { children: "같이 보고" }), " 컬럼 폭을 정한다. 둘로 쪼개는 순간 각 테이블은 서로의 존재를 모르고, 각자 자기 콘텐츠 기준으로 폭을 계산한다."] }), "\n", _jsx(ColumnSyncDemo, {}), "\n", _jsxs(_components.p, { children: ["auto layout 상태에서는 헤더의 \"이름\" 컬럼과 바디의 \"이름\" 컬럼 폭이 이미 다르고, 긴 데이터를 넣으면 바디 쪽 폭이 다시 출렁인다. 헤더 라벨이 엉뚱한 컬럼 위에 떠 있는 표가 되는 것이다. 해결은 양쪽 테이블에서 폭 결정권을 콘텐츠로부터 빼앗는 것 — ", _jsx(_components.code, { children: "table-layout: fixed" }), "를 걸고 동일한 ", _jsx(_components.code, { children: "colgroup" }), "(또는 react-table 컬럼 정의의 ", _jsx(_components.code, { children: "size" }), ")을 양쪽에 공유한다."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "const columns = [\n { accessorKey: \"name\", header: \"이름\", size: 150 },\n // ...\n];\n" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "table-fixed" }), "에서는 첫 행(colgroup)이 선언한 폭이 곧 법이라, 두 테이블이 같은 선언을 공유하는 한 어떤 데이터가 와도 어긋나지 않는다. 컬럼 정의 배열 한 곳에서 ", _jsx(_components.code, { children: "size" }), "를 관리하면 동기화 자체를 의식할 일도 없어진다."] }), "\n", _jsx(_components.h2, { id: "적용하지-않은-방법--css만으로-tbody-스크롤", children: "적용하지 않은 방법 — CSS만으로 tbody 스크롤" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "thead" }), "/", _jsx(_components.code, { children: "tbody" }), "에 ", _jsx(_components.code, { children: "display: block" }), "을 걸어 tbody만 스크롤시키는 고전적인 방법도 있다."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-css", children: "thead { display: table; width: 100%; table-layout: fixed; }\ntbody { display: block; max-height: 400px; overflow-y: auto; }\ntbody tr { display: table; width: 100%; table-layout: fixed; }\n" }) }), "\n", _jsxs(_components.p, { children: ["테이블을 쪼개지 않아도 된다는 점은 좋지만 선택하지 않았다. 모든 ", _jsx(_components.code, { children: "tr" }), "이 독립된 table이 되는 구조라 컬럼 동기화 문제가 사라지는 게 아니라 ", _jsx(_components.strong, { children: "행 단위로 곱해지고" }), ", 무엇보다 ", _jsx(_components.code, { children: "display" }), "를 갈아끼우는 순간 브라우저가 테이블 시맨틱을 버릴 수 있어 스크린리더에 row/column 관계가 전달되지 않는 접근성 비용이 생긴다. 테이블 두 개 구조는 마크업이 늘어날 뿐 각 테이블의 시맨틱은 온전하다."] }), "\n", _jsx(_components.h2, { id: "핵심-정리", children: "핵심 정리" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["sticky는 가장 가까운 스크롤 컨테이너 기준이고, 그 컨테이너는 공용 컴포넌트 내부 래퍼처럼 ", _jsx(_components.strong, { children: "내 코드에 보이지 않는 곳" }), "에 있을 수 있다. sticky가 안 붙으면 DevTools에서 조상의 overflow부터 뒤진다"] }), "\n", _jsx(_components.li, { children: "sticky로 풀면 스크롤 영역에 헤더가 포함되는 어색함이 남는다. \"헤더를 고정한다\"를 \"스크롤을 바디로 한정한다\"로 뒤집으면 sticky 없이 구조로 해결된다" }), "\n", _jsxs(_components.li, { children: ["그 구조의 전제는 ", _jsx(_components.code, { children: "min-h-0" }), "이다. flex 아이템의 min-height 기본값은 auto라서, 중간 래퍼가 콘텐츠만큼 늘어나면 overflow는 영영 발생하지 않는다"] }), "\n", _jsxs(_components.li, { children: ["분리의 대가는 컬럼 폭 동기화. ", _jsx(_components.code, { children: "table-fixed" }), " + 공유 colgroup(컬럼 ", _jsx(_components.code, { children: "size" }), " 정의)으로 폭 결정권을 한 곳에 모은다"] }), "\n"] }), "\n", _jsx(_components.h2, { id: "references", children: "References" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://developer.mozilla.org/en-US/docs/Web/CSS/position#sticky", children: "MDN — position: sticky" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://www.w3.org/TR/css-flexbox-1/#min-size-auto", children: "CSS Flexbox spec — Automatic Minimum Size of Flex Items" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout", children: "MDN — table-layout" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://tanstack.com/table/latest/docs/guide/column-sizing", children: "TanStack Table — Column Sizing" }) }), "\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."); }