Flexible Column Layout
Betav1.0.0마스터-디테일-디테일 3개 칸 레이아웃을 상태(layout) 로 관리. 메일·이슈·드라이브 같은 앱에 적합한 흐름. SAP UI5 FlexibleColumnLayout 디자인 패턴 참고.
Loading…
import {
FlexibleColumnLayout,
FCLLayoutSwitcher,
type FCLLayout,
} from "@/components/ui/flexible-column-layout";
const [layout, setLayout] = useState<FCLLayout>("TwoColumnsMidExpanded");
<FlexibleColumnLayout
layout={layout}
beginColumn={<MailList onSelect={(id) => {
setSelectedId(id);
if (layout === "OneColumn") setLayout("TwoColumnsMidExpanded");
}} />}
midColumn={<MailDetail mailId={selectedId} />}
endColumn={<Attachment />}
/>Installation
pnpm dlx shadcn@latest add https://groudit.com/r/flexible-column-layout.jsonLayout modes
7가지 layout 옵션 — SAP UI5 FCL 의 전체 모드 참고.
| Mode | Ratio | Use case |
|---|---|---|
| OneColumn | 100 | 리스트만 (모바일·진입 화면) |
| TwoColumnsMidExpanded | 50 / 50 | 리스트 + 상세 (기본) |
| TwoColumnsBeginExpanded | 67 / 33 | 리스트 강조 |
| ThreeColumnsMidExpanded | 25 / 50 / 25 | 상세 강조 (3-column) |
| ThreeColumnsEndExpanded | 25 / 25 / 50 | 디테일의 디테일 강조 (3-column) |
| MidColumnFullScreen | 0 / 100 / 0 | 상세 풀스크린 (집중 모드) |
| EndColumnFullScreen | 0 / 0 / 100 | 디테일의 디테일 풀스크린 |
Composition
FlexibleColumnLayout
├── beginColumn (리스트)
├── midColumn (상세)
└── endColumn (디테일의 디테일)+ 부속: FCLLayoutSwitcher — 외부에서 layout 토글하는 라디오 그룹.
Dependencies
설치 시 자동으로 함께 들어오는 의존성. 모든 버전은 정확히 고정되어 자동 업데이트를 방지합니다.
npm packages
| Package | Version |
|---|---|
| react-resizable-panels | 4.11.2 |
| clsx | 2.1.1 |
| tailwind-merge | 3.6.0 |
Accessibility
Notes
- •내부 Resizable 키보드 동작 그대로 사용.
- •layout 전환 시 활성 패널로 포커스 이동 권장.
- •반응형 — desktop(>=1024) 사용자 layout / tablet(640-1023) 2-column / mobile(<640) 1-column 자동 다운그레이드.