Resizable

그리드 레이아웃에서 컴포넌트의 너비·높이를 단위(Unit) 값으로 드래그 조절하는 래퍼 컴포넌트

개요

그리드 셀 단위로 배치되는 컴포넌트를 감싸, 우측/하단/우하단 핸들 드래그로 크기를 단위 값으로 조절합니다. 조절된 단위는 grid-column/grid-row span 스타일로 반영되며, 리사이즈 중에는 커서 주변에 현재 단위 값 툴팁이 표시됩니다.

Foundation의 ResizablePanelGroup/Panel/Handle은 패널 분할(react-resizable-panels)용으로 이 컴포넌트와는 용도가 다릅니다.

주요 특징

• ✅ 단위 기반 크기 관리: widthUnit/heightUnit → grid span 반영
• ✅ 3방향 핸들: 우측(너비), 하단(높이), 우하단(대각 동시 조절)
• ✅ 범위 제한: min/max 단위로 조절 범위 제한
• ✅ 리사이즈 중 툴팁: 커서 주변에 W × H 단위 실시간 표시
• ✅ 활성화 제어: resizable / enableWidth / enableHeight로 기능 제어
• ✅ 접근성: 핸들 role=“slider” + 키보드 화살표 조절
• ✅ controlled / uncontrolled 모두 지원

기본 사용

그리드 컨테이너 안에서 핸들을 드래그하면 단위가 변경됩니다. (핸들은 hover 시 표시)

<div
  className="grid gap-2"
  style={{ gridTemplateColumns: "repeat(6, 80px)", gridAutoRows: "64px" }}
>
  <Resizable defaultWidthUnit={2} maxWidthUnit={6} maxHeightUnit={4}>
    핸들을 드래그하세요
  </Resizable>
</div>

활성화 제어

방향별(enableWidth/enableHeight) 또는 전체(resizable)로 리사이즈 기능을 제어할 수 있습니다.

<Resizable enableHeight={false}>너비만 조절</Resizable>
<Resizable resizable={false}>리사이즈 불가</Resizable>

Controlled 단위 제어

widthUnit/heightUnit과 onWidthUnitChange/onHeightUnitChange로 외부 상태와 동기화합니다.

const [widthUnit, setWidthUnit] = useState(2)
const [heightUnit, setHeightUnit] = useState(1)
 
<Resizable
  widthUnit={widthUnit}
  heightUnit={heightUnit}
  maxWidthUnit={6}
  maxHeightUnit={4}
  onWidthUnitChange={setWidthUnit}
  onHeightUnitChange={setHeightUnit}
/>

Props