Context Menu

설치 확인

오른쪽 클릭 메뉴

1. 목적과 출처

오른쪽 클릭 메뉴

출처: shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
프로젝트: src/components/ui/context-menu.tsx
Registry: @adcapsule/context-menu

2. 프리뷰와 변형

오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.

Context Menu
쓰임	모양
목록 행	ADX-102공통 컴포넌트의 다크 테마 정리

3. 속성 바꿔 보기

여기를 오른쪽 클릭

고른 메뉴 없음 · 완료 보기

하위 메뉴완료 보기(체크 항목)

<ContextMenu>
  <ContextMenuTrigger className="…">여기를 오른쪽 클릭</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem onClick={…}>열기 <ContextMenuShortcut>↵</ContextMenuShortcut></ContextMenuItem>
    <ContextMenuSub>
      <ContextMenuSubTrigger>이동</ContextMenuSubTrigger>
      <ContextMenuSubContent>…</ContextMenuSubContent>
    </ContextMenuSub>
    <ContextMenuCheckboxItem checked={true} onCheckedChange={setShowDone}>완료 보기</ContextMenuCheckboxItem>
  </ContextMenuContent>
</ContextMenu>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/context-menu

npm 패키지: @base-ui/react, lucide-react
함께 설치: @adcapsule/utils

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "@/components/ui/context-menu"

<ContextMenu>
  <ContextMenuTrigger>…</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>열기</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

어떤 영역이든 ContextMenuTrigger로 감쌈
같은 동작을 다른 방법(버튼·단축키)으로도 제공해야 함
항목 구성은 Dropdown Menu와 같음
ContextMenuLabel은 반드시 ContextMenuGroup 안에

공통으로 유지할 토큰

Dropdown Menu와 같음

쓰임

모양

목록 행

ADX-102공통 컴포넌트의 다크 테마 정리

3. 속성 바꿔 보기

여기를 오른쪽 클릭

고른 메뉴 없음 · 완료 보기

하위 메뉴완료 보기(체크 항목)

<ContextMenu>
  <ContextMenuTrigger className="…">여기를 오른쪽 클릭</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem onClick={…}>열기 <ContextMenuShortcut>↵</ContextMenuShortcut></ContextMenuItem>
    <ContextMenuSub>
      <ContextMenuSubTrigger>이동</ContextMenuSubTrigger>
      <ContextMenuSubContent>…</ContextMenuSubContent>
    </ContextMenuSub>
    <ContextMenuCheckboxItem checked={true} onCheckedChange={setShowDone}>완료 보기</ContextMenuCheckboxItem>
  </ContextMenuContent>
</ContextMenu>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/context-menu

npm 패키지: @base-ui/react, lucide-react
함께 설치: @adcapsule/utils

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "@/components/ui/context-menu"

<ContextMenu>
  <ContextMenuTrigger>…</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>열기</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

어떤 영역이든 ContextMenuTrigger로 감쌈
같은 동작을 다른 방법(버튼·단축키)으로도 제공해야 함
항목 구성은 Dropdown Menu와 같음
ContextMenuLabel은 반드시 ContextMenuGroup 안에

공통으로 유지할 토큰

Dropdown Menu와 같음

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿