pipeline/.cursor/skills/ui-debugging/reference.md

스크롤 문제 상세 패턴 및 예시

패턴 A: 최상위 Fixed/Absolute 컨테이너

<div className="fixed inset-0 z-50 bg-background">
  <div className="flex h-full flex-col">
    <div className="flex items-center gap-4 border-b bg-background p-4">헤더</div>
    <div className="flex-1 overflow-hidden">
      <FlowEditor />
    </div>
  </div>
</div>

패턴 B: 중첩된 Flex 컨테이너

<div className="flex h-full w-full" style={{ height: '100%', overflow: 'hidden' }}>
  <div className="h-full w-[300px] border-r">사이드바</div>
  <div className="relative flex-1">캔버스</div>
  <div style={{ height: "100%", width: "350px", display: "flex", flexDirection: "column" }} className="border-l bg-white">
    <PropertiesPanel />
  </div>
</div>

패턴 C: 스크롤 가능 영역

<div style={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
  <div style={{ flexShrink: 0, height: '64px' }} className="flex items-center justify-between border-b p-4">헤더</div>
  <div style={{ flex: 1, minHeight: 0, overflowY: 'auto', overflowX: 'hidden' }}>
    <PropertiesContent />
  </div>
</div>

일반적인 실수

부모 높이 미확정

// Bad
<div className="flex flex-col"><div className="flex-1"><ScrollComponent /></div></div>
// Good
<div className="flex flex-col h-screen"><div className="flex-1 overflow-hidden"><ScrollComponent /></div></div>

minHeight: 0 누락

// Bad
<div style={{ flex: 1, overflowY: 'auto' }}>{/* 스크롤 안 됨 */}</div>
// Good
<div style={{ flex: 1, minHeight: 0, overflowY: 'auto' }}>{/* 스크롤 됨 */}</div>

최종 구조

페이지 (fixed inset-0)
└─ flex flex-col h-full
   ├─ 헤더 (고정)
   └─ 컨테이너 (flex-1 overflow-hidden)
      └─ 에디터 (height: 100%, overflow: hidden)
         └─ flex row
            └─ 패널 (display: flex, flexDirection: column)
               └─ 패널 내부 (height: 100%)
                  ├─ 헤더 (flexShrink: 0, height: 64px)
                  └─ 스크롤 (flex: 1, minHeight: 0, overflowY: auto)