shin
71 lines
2.1 KiB
Markdown
71 lines
2.1 KiB
Markdown
# 스크롤 문제 상세 패턴 및 예시
|
|
|
|
## 패턴 A: 최상위 Fixed/Absolute 컨테이너
|
|
|
|
```tsx
|
|
<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 컨테이너
|
|
|
|
```tsx
|
|
<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: 스크롤 가능 영역
|
|
|
|
```tsx
|
|
<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>
|
|
```
|
|
|
|
## 일반적인 실수
|
|
|
|
### 부모 높이 미확정
|
|
```tsx
|
|
// 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 누락
|
|
```tsx
|
|
// 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)
|
|
```
|