Resizable

Component

react-resizable-panels 래퍼. 드래그로 크기를 조절할 수 있는 패널 분할 레이아웃.

layout

Related docs

bun add @reopt-ai/opt-ui

100%

기본 사용

수평 분할

패널 A

패널 B

수직 분할

상단

하단

ResizablePanelGroup

Prop	Type	Default	Description
direction*	"horizontal" \| "vertical"	—	패널 분할 방향
children*	ReactNode	—	ResizablePanel + ResizableHandle 조합
id	string	—	그룹과 defaultLayout의 패널 크기를 식별하는 고유 ID
defaultLayout	Record<string, number>	—	패널 ID별 초기 비율(0-100)
onLayoutChanged	(layout: Record<string, number>) => void	—	드래그가 끝난 뒤 확정된 레이아웃 콜백
groupRef	Ref<ResizablePanelGroupHandle>	—	레이아웃 조회·설정을 위한 명령형 그룹 ref
autoSaveId	string	—	id의 deprecated 별칭
className	string	—	커스텀 CSS 클래스

ResizablePanel

Prop	Type	Default	Description
defaultSize	number \| string	—	초기 크기. 숫자는 퍼센트, 문자열은 명시한 CSS 단위
minSize	number \| string	—	최소 크기. 숫자는 퍼센트
maxSize	number \| string	—	최대 크기. 숫자는 퍼센트
collapsible	boolean	false	최소 크기 이하 시 접히기 허용
onResize	(size: ResizablePanelSize, id?: string \| number, previous?: ResizablePanelSize) => void	—	패널 크기 변경 콜백
panelRef	Ref<ResizablePanelHandle>	—	접기·펼치기·크기 제어를 위한 명령형 패널 ref
children*	ReactNode	—	패널 콘텐츠
className	string	—	커스텀 CSS 클래스

ResizableHandle

Prop	Type	Default	Description
withHandle	boolean	false	시각적 드래그 핸들 표시
disabled	boolean	—	드래그 및 키보드 리사이즈 비활성화
className	string	—	커스텀 CSS 클래스

컴포넌트 의존 관계

깊이

View test results

테스트 커버리지

2026년 7월 9일3/3 통과

3성공

0실패

3전체

패널 콘텐츠를 렌더링한다
withHandle이 시각적 핸들을 렌더링한다
withHandle 없으면 svg가 없다

Related components

Card

Layout

PageHeader

Layout

ScrollArea

Layout

Container

Layout

Section

Layout

FieldToken

Resizable

Component

react-resizable-panels 래퍼. 드래그로 크기를 조절할 수 있는 패널 분할 레이아웃.

layout

Related docs

bun add @reopt-ai/opt-ui

100%

기본 사용

수평 분할

패널 A

패널 B

수직 분할

상단

하단

ResizablePanelGroup

Prop	Type	Default	Description
direction*	"horizontal" \| "vertical"	—	패널 분할 방향
children*	ReactNode	—	ResizablePanel + ResizableHandle 조합
id	string	—	그룹과 defaultLayout의 패널 크기를 식별하는 고유 ID
defaultLayout	Record<string, number>	—	패널 ID별 초기 비율(0-100)
onLayoutChanged	(layout: Record<string, number>) => void	—	드래그가 끝난 뒤 확정된 레이아웃 콜백
groupRef	Ref<ResizablePanelGroupHandle>	—	레이아웃 조회·설정을 위한 명령형 그룹 ref
autoSaveId	string	—	id의 deprecated 별칭
className	string	—	커스텀 CSS 클래스

ResizablePanel

Prop	Type	Default	Description
defaultSize	number \| string	—	초기 크기. 숫자는 퍼센트, 문자열은 명시한 CSS 단위
minSize	number \| string	—	최소 크기. 숫자는 퍼센트
maxSize	number \| string	—	최대 크기. 숫자는 퍼센트
collapsible	boolean	false	최소 크기 이하 시 접히기 허용
onResize	(size: ResizablePanelSize, id?: string \| number, previous?: ResizablePanelSize) => void	—	패널 크기 변경 콜백
panelRef	Ref<ResizablePanelHandle>	—	접기·펼치기·크기 제어를 위한 명령형 패널 ref
children*	ReactNode	—	패널 콘텐츠
className	string	—	커스텀 CSS 클래스

ResizableHandle

Prop	Type	Default	Description
withHandle	boolean	false	시각적 드래그 핸들 표시
disabled	boolean	—	드래그 및 키보드 리사이즈 비활성화
className	string	—	커스텀 CSS 클래스

컴포넌트 의존 관계

깊이

View test results

테스트 커버리지

2026년 7월 9일3/3 통과

3성공

0실패

3전체

패널 콘텐츠를 렌더링한다
withHandle이 시각적 핸들을 렌더링한다
withHandle 없으면 svg가 없다

Related components

Card

Layout

PageHeader

Layout

ScrollArea

Layout

Container

Layout

Section

Layout

Resizable

기본 사용

ResizablePanelGroup

ResizablePanel

ResizableHandle

컴포넌트 의존 관계

테스트 커버리지

Related components

Card

PageHeader

ScrollArea

Container

Section

FieldToken

Resizable

기본 사용

ResizablePanelGroup

ResizablePanel

ResizableHandle

컴포넌트 의존 관계

테스트 커버리지

Related components

Card

PageHeader

ScrollArea

Container

Section

FieldToken

기본 사용

카드 제목

변형

패딩 크기

기본 사용

프로젝트 설정

대시보드

사용자 목록

기본 사용

기본 사용

기본 사용

기본 정보

고급 설정

스키마 컬럼 목록

전체 타입

크기와 채우기