커서 위치에 뜨고 화면 가장자리에서 뒤집히는, 키보드까지 되는 컨텍스트 메뉴.
한 줄 요약
우클릭한 자리에 정확히 뜨고, 영역 가장자리를 넘으면 반대쪽으로 뒤집고 clamp해서 잘리지 않는 컨텍스트 메뉴입니다.
운영체제처럼 항목 위에서 맥락 동작을 제공하고 싶을 때 파일/이미지 그리드, 에디터, 보드 등.
contextmenu에서 preventDefault하고 커서 좌표에 연다.
렌더 직후 메뉴 크기를 측정해 넘치면 flip + clamp한다.
/EnterEsc 키보드 네비, 바깥클릭스크롤에 닫는다.
role=menu/menuitem과 구분선비활성 항목을 둔다.
측정보정은 한 번에 수렴하게 해 깜빡임을 막는다.
터치엔 우클릭이 없으니 탭/롱프레스 fallback을 둔다.
스크롤리사이즈 시 메뉴를 닫아 위치 어긋남을 막는다.
파일이미지 관리 UI
캔버스/보드 편집기
import type { Metadata } from "next";
import { ContextMenuDemo } from "./-components/ContextMenuDemo";
export const metadata: Metadata = {
title: "커스텀 컨텍스트 메뉴 (데모)",
description:
"우클릭 위치에 뜨는 커스텀 컨텍스트 메뉴. 가장자리 충돌 회피, 키보드 내비게이션, 그룹·구분선·아이콘·비활성 항목을 지원합니다.",
robots: { index: false, follow: false },
};
export default function Page() {
return (
<main className="flex min-h-[100dvh] items-center justify-center bg-white">
<ContextMenuDemo />
</main>
);
}