"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { code: "code", h2: "h2", img: "img", p: "p", pre: "pre", ..._provideComponents(), ...props.components }, {CollapsibleAnimationDemo} = _components; if (!CollapsibleAnimationDemo) _missingMdxReference("CollapsibleAnimationDemo", true); return _jsxs(_Fragment, { children: [_jsx(_components.h2, { id: "들어가며", children: "들어가며" }), "\n", _jsx(_components.p, { children: "네비게이션 메뉴에 Collapsible을 적용했다. 메뉴 위에 마우스를 올리면 하위 메뉴가 열리고, 벗어나면 닫히는 구조다." }), "\n", _jsx(_components.p, { children: "열릴 때는 부드럽게 펼쳐지는데, 닫힐 때는 애니메이션 없이 뚝 사라진다." }), "\n", _jsx(CollapsibleAnimationDemo, {}), "\n", _jsxs(_components.p, { children: ["DevTools로 확인해봤다. ", _jsx(_components.code, { children: "grid-template-rows" }), "가 ", _jsx(_components.code, { children: "1fr" }), "에서 ", _jsx(_components.code, { children: "0fr" }), "로 정상적으로 변경된다. CSS transition도 설정되어 있다. 그런데 왜 닫힘만 애니메이션이 안 될까?"] }), "\n", _jsx(_components.h2, { id: "현상-분석", children: "현상 분석" }), "\n", _jsx(_components.p, { children: "먼저 Collapsible의 구조를 보자." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "const [activeMenu, setActiveMenu] = useState(null);\n\n\n {items.map((item) => (\n

\n {/* 메뉴 콘텐츠 */}\n

\n ))}\n;\n" }) }), "\n", _jsxs(_components.p, { children: ["마우스가 메뉴를 벗어나면 ", _jsx(_components.code, { children: "activeMenu" }), "가 ", _jsx(_components.code, { children: "null" }), "이 된다."] }), "\n", _jsxs(_components.p, { children: ["이때 두 가지 일이 동시에 발생한다. Collapsible의 ", _jsx(_components.code, { children: "open" }), " prop이 ", _jsx(_components.code, { children: "false" }), "가 되면서 닫힘 애니메이션이 시작되고, 동시에 모든 아이템에 ", _jsx(_components.code, { children: "hidden" }), " 클래스가 적용되면서 콘텐츠가 즉시 사라진다."] }), "\n", _jsx(_components.p, { children: "즉, 닫힘 애니메이션이 시작되기도 전에 콘텐츠가 먼저 없어져 버린다." }), "\n", _jsx(_components.h2, { id: "왜-이게-문제인가", children: "왜 이게 문제인가?" }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://brewlo-blog-images.s3.ap-northeast-2.amazonaws.com/images/2026/02/03/a1b323ae-e484-4693-aa70-3fefe754f435.png", alt: "" }) }), "\n", _jsxs(_components.p, { children: ["Collapsible은 일반적으로 ", _jsx(_components.code, { children: "grid-template-rows" }), " 트릭을 사용한다. ", _jsx(_components.code, { children: "height: auto" }), "는 CSS transition이 적용되지 않기 때문에, 대신 grid의 ", _jsx(_components.code, { children: "fr" }), " 단위를 활용해서 높이 변화에 애니메이션을 준다."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-css", children: ".collapsible {\n display: grid;\n grid-template-rows: 0fr;\n transition: grid-template-rows 300ms ease;\n}\n\n.collapsible.open {\n grid-template-rows: 1fr;\n}\n\n.collapsible-content {\n min-height: 0;\n overflow: hidden;\n}\n" }) }), "\n", _jsxs(_components.p, { children: ["여기서 ", _jsx(_components.code, { children: "1fr" }), "이 의미하는 건 \"남은 공간 전체\"가 아니다. grid 컨테이너 안에 콘텐츠가 있을 때, ", _jsx(_components.code, { children: "1fr" }), "은 그 콘텐츠의 intrinsic size(본래 높이)를 기준으로 계산된다. 콘텐츠가 100px 높이를 차지하면 ", _jsx(_components.code, { children: "1fr" }), "도 100px이 되는 식이다."] }), "\n", _jsxs(_components.p, { children: ["그런데 콘텐츠에 ", _jsx(_components.code, { children: "display: none" }), "이 적용되면 어떻게 될까? 콘텐츠의 높이가 0이 된다. ", _jsx(_components.code, { children: "1fr" }), "이 가리킬 높이 자체가 사라진다. 그래서 ", _jsx(_components.code, { children: "grid-template-rows: 1fr → 0fr" }), " 트랜지션을 아무리 걸어도, 이미 ", _jsx(_components.code, { children: "1fr" }), "이 0이므로 애니메이션할 대상이 없다. 트랜지션이 시작되는 순간 이미 높이가 0인 것이다."] }), "\n", _jsx(_components.p, { children: "그렇다면 열림 애니메이션은 왜 잘 동작할까?" }), "\n", _jsxs(_components.p, { children: ["마우스가 메뉴 위로 올라오면 ", _jsx(_components.code, { children: "activeMenu" }), "가 설정되고, 해당 메뉴의 ", _jsx(_components.code, { children: "hidden" }), "이 제거된다. 콘텐츠가 다시 높이를 가지게 되고, ", _jsx(_components.code, { children: "0fr → 1fr" }), " 트랜지션이 정상적으로 동작한다. 콘텐츠가 나타난 후에 높이 애니메이션이 시작되기 때문이다."] }), "\n", _jsx(_components.h2, { id: "해결-마지막-활성-상태-유지", children: "해결: 마지막 활성 상태 유지" }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://brewlo-blog-images.s3.ap-northeast-2.amazonaws.com/images/2026/02/03/047b147d-a8d0-4fa6-84cf-b326aada52e1.png", alt: "" }) }), "\n", _jsxs(_components.p, { children: ["해결책은 닫히는 동안에도 콘텐츠가 높이를 유지하도록 만드는 것이다. 나는 ", _jsx(_components.code, { children: "lastActiveMenu" }), "라는 상태를 추가해서 마지막으로 활성화된 메뉴를 기억하도록 했다."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "const [activeMenu, setActiveMenu] = useState(null);\nconst [lastActiveMenu, setLastActiveMenu] = useState(null);\n\nconst handleMouseEnter = (label: string) => {\n setActiveMenu(label);\n setLastActiveMenu(label); // 마지막 활성 메뉴 저장\n};\n\nconst handleMouseLeave = () => {\n setActiveMenu(null);\n // lastActiveMenu는 유지됨\n};\n\n// 표시할 메뉴 결정: 현재 활성 메뉴가 없으면 마지막 메뉴 사용\nconst displayMenu = activeMenu ?? lastActiveMenu;\n\nreturn (\n \n {items.map((item) => (\n

\n {/* 메뉴 콘텐츠 */}\n

\n ))}\n \n);\n" }) }), "\n", _jsxs(_components.p, { children: ["마우스가 벗어나면 ", _jsx(_components.code, { children: "activeMenu" }), "는 ", _jsx(_components.code, { children: "null" }), "이 되어 Collapsible이 닫히기 시작하지만, ", _jsx(_components.code, { children: "displayMenu" }), "는 ", _jsx(_components.code, { children: "lastActiveMenu" }), " 값을 사용한다. 덕분에 콘텐츠는 닫힘 애니메이션이 끝날 때까지 화면에 남아있고, ", _jsx(_components.code, { children: "grid-template-rows" }), " 트랜지션이 정상적으로 높이를 줄여나간다."] }), "\n", _jsx(_components.h2, { id: "대안-visibility로-숨기기", children: "대안: visibility로 숨기기" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "display: none" }), " 대신 ", _jsx(_components.code, { children: "visibility: hidden" }), "을 사용하는 방법도 있다."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "\n" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "visibility: hidden" }), "은 요소를 보이지 않게 하지만 레이아웃 공간은 유지한다. 그래서 콘텐츠의 높이가 사라지지 않고, ", _jsx(_components.code, { children: "grid-template-rows" }), " 트랜지션도 정상 동작한다."] }), "\n", _jsx(_components.p, { children: "다만 이 방식은 주의가 필요하다. 여러 메뉴 콘텐츠가 동시에 공간을 차지하게 되면 레이아웃이 예상과 다르게 동작할 수 있다. 메뉴별로 콘텐츠 높이가 다르면 가장 큰 높이에 맞춰지는 문제도 있다." }), "\n", _jsx(_components.h2, { id: "정리", children: "정리" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "grid-template-rows" }), " 애니메이션은 내부 콘텐츠가 실제 높이를 가지고 있어야 동작한다. 닫힘 애니메이션이 끊기는 건 트랜지션 시작 전에 ", _jsx(_components.code, { children: "display: none" }), "이 적용되어 콘텐츠 높이가 0이 되기 때문이다. 마지막 활성 상태를 유지하거나 ", _jsx(_components.code, { children: "visibility" }), "를 사용해서 닫히는 동안에도 콘텐츠가 높이를 유지하도록 만들면 해결된다."] })] }); } 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."); }