Resizable

크기를 조절할 수 있는 분할 패널 컴포넌트입니다. 레이아웃을 동적으로 조정할 수 있습니다.

설치

Terminal

npx @msub-core/ui-cli add resizable

사용법

TSX

import {
  ResizablePanelGroup,
  ResizablePanel,
  ResizableHandle,
} from "@msub-core/ui/components/resizable"

function MyComponent() {
  return (
    <ResizablePanelGroup direction="horizontal">
      <ResizablePanel defaultSize={50}>
        {/* 왼쪽 패널 */}
      </ResizablePanel>
      <ResizableHandle />
      <ResizablePanel defaultSize={50}>
        {/* 오른쪽 패널 */}
      </ResizablePanel>
    </ResizablePanelGroup>
  )
}

수평 분할

패널 1

패널 2

Prop	Type	Default	Required	Description
direction	"horizontal" \| "vertical"	-	No	패널 방향
className	string	-	No	스타일 클래스

수직 분할

상단 패널

하단 패널

핸들 스타일

왼쪽

오른쪽

Prop	Type	Default	Required	Description
withHandle	boolean	false	No	드래그 핸들 표시 여부

중첩 패널

사이드바

메인 콘텐츠

푸터

최소/최대 크기

최소 15%, 최대 35%

메인

Prop	Type	Default	Required	Description
defaultSize	number	-	No	기본 크기 (백분율)
minSize	number	-	No	최소 크기 (백분율)
maxSize	number	-	No	최대 크기 (백분율)
collapsible	boolean	false	No	접기 가능 여부