Web - ContextMenu

Definition

정의	ContextMenu
최적화 대상	Desktop Mobile
기획 배포	완료
디자인 가이드 배포	완료
개발 코드 배포	완료

Principle

Dropdown 선택 시 펼쳐지는 메뉴로 사용합니다.

항목을 클릭할 때 뜨는 팝업 메뉴이고, 아이템들을 감싸고 있는 면적 부분을 뜻합니다.

ContextMenu는 Shadow를 가지고 있으며, Modal Layer에 포함되는 요소이기 때문에 elevation-4로 설정합니다.
(Elevations and Shadows 문서 참고)

Spec

Guide

Size, Property

구성	내용
group title text Added 2.1	Web - TextLabel 참고 styleTheme : caption1Bold letterSpacing : 0.15em
divider Added 2.1	Divider 참고 (default)
width	min-width : 128px 텍스트 길이에 따라 늘어납니다.
height	아이템 갯수에 따라 변동
base	메뉴들을 담고 있는 면적 radius : 14px

*메뉴 하나가 모두 터치 영역입니다.

Color 구성

‌

Color Key

요소들의 컬러 변화로 상태들을 표현합니다.

구성	내용
base color	`ui_cpnt_contextmenu_base`
border color	`ui_cpnt_contextmenu_border`
shadow	Modal Layer에 소속, elevation-4를 적용합니다.

Properties

valueArray (Deprecated in 1.2)

Deprecated in 1.2

~~표시할 값입니다.~~

size (Deprecated in 1.2)

Deprecated in 1.2

~~메뉴의 크기를 결정합니다.~~

Type	`enum`
Default	`'small'`

Enum Values Description
~~small~~	~~//TODO 설명 추가 예정~~
~~medium~~	~~//TODO 설명 추가 예정~~
~~large~~	~~//TODO 설명 추가 예정~~

autoWidthMode

Added in 1.2.0

contextMenu가 상위 컴포넌트의 width와 같은 값을 가질지 결정합니다.

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	`'none'`

Enum Values Description
`'none'`	contextMenu에 들어오는 자식 요소 중 가장 큰 값을 따라 갑니다.
`'use'`	contextMenu가 상위 컴포넌트의 width와 같은 값을 가집니다.

children

Added in 1.4

ContextMenu에 들어갈 자식 요소입니다. 현재는 ContextMenuItem 컴포넌트만 위치시킬 수 있습니다.

기획 지시사항

기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

Type	`React.ReactNode`
Default	-

maxHeight

Added in 1.4

ContextMenu의 스크롤을 조절할 때 사용합니다.

기획 지시사항

기획서 상 작성 방법 : 숫자만 기술

Type	`number`
Default	-

customWidth

Added in 1.4

직접 지정한 ContextMenu의 사이즈를 결정합니다. (단위도 함께 적어주어야 합니다.)

*반드시 디자인 검수 후에 사용가능합니다.

기획 지시사항

기획서 상 작성 방법 : 텍스트만 기술

Type	`string`
Default	-

문서 작성 정보

소유자 / 관리자

김혜진, 박윤규

변경 이력

2022/07/08 : customWidth prop 추가 - 김혜진
2022/06/08 : border-radius 8px에서 14px로 수정 - 안은수
2022/05/24 : maxHeight prop추가 - 안은수
2022/03/24 : Property 기술방법 변경, 코드에만 있던 prop추가 - 안은수
2022/02/25 : 개발 코드 배포여부 추가 - 안은수
2022/02/19 : Property 기술방법 변경 - 박윤규
2022/02/08 : ContextMenuItem 추가로 문서 수정 - 김혜진
2021/11/26 : contextmenu border 컬러값 추가 - 김혜진
2021/11/23 : check에 대한 옵션 삭제 - 김혜진
2021/11/17 : style을 styleTheme로 수정 - 김혜진
2021/11/16 : spec 내용 수정 - 김혜진

2021/11/11 : 행간에 대한 내용 추가 - 김혜진
2021/11/09 : MobileWeb 통합, size value 추가 (medium) - 김혜진
2021/10/26 : 텍스트 부분 TextLabel 값으로 수정 - 김혜진
2021/09/30 : Spec 내용 추가 - 김혜진
2021/09/12 : DropdownMenu -> ContextMenu로 변경 - 박윤규
2021/09/10-11 : 최초작성, Property 및 Value 업데이트 - 박윤규