Resizable
corereact-resizable-panels 래퍼. 드래그로 크기를 조절할 수 있는 패널 분할 레이아웃.
100%
기본 사용
수평 분할
패널 A
패널 B
수직 분할
상단
하단
테스트 커버리지
2026년 2월 4일생성된 테스트 결과를 찾지 못했습니다.
Resizable 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.
테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.
ResizablePanelGroup Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
direction* | "horizontal" | "vertical" | — | 패널 분할 방향 |
children* | ReactNode | — | ResizablePanel + ResizableHandle 조합 |
autoSaveId | string | — | 로컬 스토리지에 크기 상태 저장 (고유 ID) |
className | string | — | 커스텀 CSS 클래스 |
ResizablePanel Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
defaultSize | number | — | 초기 크기 (퍼센트, 0-100) |
minSize | number | — | 최소 크기 (퍼센트) |
maxSize | number | — | 최대 크기 (퍼센트) |
collapsible | boolean | false | 최소 크기 이하 시 접히기 허용 |
children* | ReactNode | — | 패널 콘텐츠 |
className | string | — | 커스텀 CSS 클래스 |
ResizableHandle Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
withHandle | boolean | false | 시각적 드래그 핸들 표시 |
className | string | — | 커스텀 CSS 클래스 |
Import
tsx
import {
ResizablePanelGroup,
ResizablePanel,
ResizableHandle,
} from "@reopt-ai/opt-ui";