Resizable
설치 확인크기 조절 패널 분할
1. 목적과 출처
크기 조절 패널 분할
- 출처
- shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
- 프로젝트
src/components/ui/resizable.tsx- Registry
@adcapsule/resizable
2. 프리뷰와 변형
오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.
| orientation | 모양 |
|---|---|
| 좌우 horizontal | 목록 상세 |
| 위아래 vertical | 위 아래 |
3. 속성 바꿔 보기
목록
상세
orientation
4. 설치와 사용
- npm 패키지
- react-resizable-panels
- 함께 설치
- @adcapsule/utils
처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결
5. 바꿔도 되는 것과 유지할 토큰
제품에서 바꿔도 되는 것
- orientation: horizontal·vertical
- defaultSize·minSize(숫자는 px, 단위 없는 글자는 %)
- withHandle로 손잡이
- 키보드 화살표로 크기 조절
- ResizableHandle에 aria-label
공통으로 유지할 토큰
- border.default (구분선·손잡이)
- accent.default (포커스 링)