Resizable
드래그로 크기를 조절할 수 있는 패널 레이아웃 컴포넌트
개요
Resizable 컴포넌트는 react-resizable-panels를 기반으로 구축된 리사이즈 가능한 패널 레이아웃 컴포넌트입니다. 패널 사이의 핸들을 드래그하여 각 패널의 크기를 조절할 수 있으며, 가로/세로 방향과 다중 패널을 지원합니다.
주요 특징
- ✅ 드래그 리사이즈: 패널 사이 핸들 드래그로 크기 조절
- ✅ 방향 지원: horizontal, vertical 방향 지원
- ✅ 다중 패널: 2개 이상의 패널 자유롭게 구성
- ✅ 크기 제약:
defaultSize,minSize,maxSize지정 - ✅ 핸들 표시:
withHandle로 시각적 그립 표시 - ✅ 접근성:
role="separator", 키보드 리사이즈 지원
구조 (Anatomy)
<ResizablePanelGroup orientation="horizontal">
<ResizablePanel defaultSize={50}>패널 1</ResizablePanel>
<ResizableHandle />
<ResizablePanel defaultSize={50}>패널 2</ResizablePanel>
</ResizablePanelGroup>사용 예시
가로 방향
Preview
패널 1
패널 2
세로 방향
Preview
헤더
콘텐츠
핸들 표시
withHandle prop으로 드래그 가능한 시각적 그립을 표시합니다.
Preview
패널 1
패널 2
다중 패널
3개 이상의 패널도 구성할 수 있습니다.
Preview
사이드바
콘텐츠
패널
API Reference
ResizablePanelGroup
리사이즈 가능한 패널들의 그룹 컨테이너입니다. react-resizable-panels의 Group을 래핑합니다.
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | 패널 배치 방향 |
defaultLayout | number[] | - | 초기 패널 레이아웃 배열 |
onLayoutChange | (layout: number[]) => void | - | 레이아웃 변경 콜백 |
disabled | boolean | - | 리사이즈 비활성화 |
className | string | - | 추가 CSS 클래스 |
ResizablePanel
개별 리사이즈 가능한 패널입니다.
| Prop | Type | Default | Description |
|---|---|---|---|
defaultSize | number | string | - | 초기 크기 (%) |
minSize | number | string | - | 최소 크기 |
maxSize | number | string | - | 최대 크기 |
collapsible | boolean | - | 접기 가능 여부 |
className | string | - | 추가 CSS 클래스 |
ResizableHandle
패널 사이의 리사이즈 핸들입니다.
| Prop | Type | Default | Description |
|---|---|---|---|
withHandle | boolean | - | 시각적 그립 표시 여부 |
disabled | boolean | - | 핸들 비활성화 |
className | string | - | 추가 CSS 클래스 |
기본 사용법
import {
ResizablePanelGroup,
ResizablePanel,
ResizableHandle,
} from "@vortex/ui-foundation"
<ResizablePanelGroup orientation="horizontal">
<ResizablePanel defaultSize={50}>왼쪽</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel defaultSize={50}>오른쪽</ResizablePanel>
</ResizablePanelGroup>접근성
시맨틱 마크업
- 핸들에
role="separator"와aria-orientation속성이 자동 적용 - 핸들 포커스 시 방향키로 패널 크기를 키보드로 조절 가능
aria-valuenow,aria-valuemin,aria-valuemax로 현재 크기 상태 전달
권장 사항
- ✅ 핸들에
withHandle을 사용해 드래그 가능함을 시각적으로 표시 - ✅ 패널에
minSize를 지정해 콘텐츠가 과도하게 축소되지 않도록 제한 - ✅ 그룹에 명시적인 높이(
min-h-*등)를 지정해 레이아웃 안정화
관련 컴포넌트
Last updated on