거터를 끌어 두 패널 비율을 바꾸는, 키보드와 가로/세로 전환까지 되는 split pane.
한 줄 요약
가운데 거터를 드래그해 두 영역 비율을 %로 바꾸고, 더블클릭 리셋키보드 조절ARIA separator를 갖춘 분할 패널입니다.
두 패널을 나란히 두고 사용자가 폭을 조절하게 하고 싶을 때 코드/프리뷰, 파일 목록/내용, 지도/리스트 등.
거터 pointerdown에서 pointer capture하고 드래그로 % 계산한다.
min/max로 비율을 클램프한다.
더블클릭으로 50% 리셋, /Home/End 키보드 조절.
role=separator + aria-valuenow/orientation을 둔다.
패널이 채울 명시적 높이가 있어야 한다.
min-w-0/min-h-0로 내부 콘텐츠 오버플로를 잡는다.
드래그 중 텍스트 선택을 막아 매끄럽게 한다.
코드 에디터라이브 프리뷰
파일 탐색기 레이아웃
import type { Metadata } from "next";
import { SplitPaneDemo } from "./-components/SplitPaneDemo";
export const metadata: Metadata = {
title: "분할 패널 (데모)",
description:
"드래그로 크기를 조절하는 리사이저블 split pane. Pointer Events로 거터를 끌어 좌/우(또는 상/하) 비율을 %로 조절, min/max 클램프 + 더블클릭 50% 리셋 + 키보드 + role=separator.",
robots: { index: false, follow: false },
};
export default function Page() {
return (
<main className="flex min-h-[100dvh] items-center justify-center bg-gradient-to-br from-slate-50 via-white to-violet-50/40">
<SplitPaneDemo />
</main>
);
}