# Menu Sheet URL: /components/menu-sheet Source: https://github.com/daangn/seed-design/blob/dev/docs/content/components/menu-sheet.mdx 사용자의 작업과 관련된 선택지를 제공하는 시트 형태의 컴포넌트입니다. | Platform | Status | | --- | --- | | Figma | Done | | [React](/react/components/menu-sheet) | Done | | Lynx | Not Ready | | iOS | Done | | Android | Done | ## Anatomy ![Menu Sheet의 Anatomy 이미지](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/6b759ad9-31c3-4447-9871-d29bdd09271a) Menu Sheet는 Backdrop, Header, Menu Group, Close Button과 함께 조합되어서 제공됩니다. ## Properties ### Menu Group Count Property ![Menu Sheet의 Menu Group Count Property](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/317e43fd-a85f-48db-abf0-566f6ad2b5c5) Menu Item이 많을 때는 기능이나 관련성에 따라 그룹으로 묶어서 표시할 수 있습니다. 그룹 간에는 시각적 구분을 위해 간격을 제공합니다. 그룹 구분은 전체 아이템이 3개 이상일 때만 권장되며, 최대 3개 그룹까지 나눌 수 있습니다. ### Layout Property ![Menu Sheet의 Layout Property - Text Only와 Text with Icon](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/41e78d15-083e-4a93-98cc-0bb56124ca40) Menu Item은 Text Only와 Text with Icon 두 가지 레이아웃이 있습니다. 아이콘이 포함된 경우에는 항상 좌측 정렬로 표시됩니다. 아이콘은 해당 아이템의 톤에 맞는 색상으로 표시됩니다. ### Menu Item Tone ![Menu Sheet의 Menu Item Tone - Neutral과 Critical](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/9bcef5d4-9c1a-40d3-932e-7f0ab4aa9e41) Menu Item은 Neutral과 Critical의 두 가지 톤을 가집니다. | Tone | 설명 | | ------------ | ------------------------------------------------------------------ | | **Neutral** | 일반적인 작업을 수행하는 기본 아이템으로, 대부분의 메뉴에서 사용됩니다. | | **Critical** | 데이터 삭제와 같이 되돌릴 수 없는 작업을 수행하는 아이템입니다. 사용자의 주의를 환기하기 위해 빨간색으로 표시됩니다. | ### Show Header ![Menu Sheet의 Show Header Property](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/4070e6dd-95f7-4057-af8a-20dfcadab3ea) Header를 활용하여 Menu Sheet의 부가 설명을 추가할 수 있습니다. Header는 Title과 Description으로 구성되며 Header를 사용할 경우 Title은 반드시 포함되어야 합니다. ### Show Item Description ![Menu Sheet의 Show Item Description Property](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/6b40a12d-2a4e-469b-a602-f6bfce7fe6a3) 메뉴 아이템의 액션 설명(description)은 'Show Item Description' prop (on/off)을 이용해 제어할 수 있습니다. 다만, 이 prop은 모든 아이템에 공통으로 사용되는 경우가 드물기 때문에 사용할 리스트 아이템을 클릭하여 Properties 패널에서 설정을 확인해 주세요. **Layout 'Text Only'에서는 제공되지 않습니다.** ## Guidelines ### 아이콘의 사용 ![Menu Sheet에서 아이콘 사용 예시 - Text Only와 Text with Icon](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/80685cec-9d4a-46d6-93c8-e9625bb56f45) Menu Item 라벨에 아이콘을 함께 표시할 수 있습니다. 아이콘은 라벨만으로 설명이 부족할 때 시각적 단서를 제공하며, 꼭 필요한 경우에만 제한적으로 사용하길 권장합니다. ### 메뉴 그룹 ![Menu Sheet의 메뉴 그룹 사용 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/c2d9c12b-fd12-4630-a2e5-97542cd50241) Menu Item이 많을 때는 기능이나 관련성에 따라 그룹으로 묶어서 표시할 수 있습니다. 아이템이 3개 이상일 때부터 그룹을 사용할 수 있습니다. 아이템의 개수가 적을 때에는 1개씩 구성하기보다는 가능한 한 그룹으로 묶어 구성하는 것을 권장합니다. **그룹과 아이템 수를 적절히 유지하여 스크롤이 발생하지 않도록 해주세요.** ### Critical Tone의 사용 ![Menu Sheet에서 Critical Tone 사용 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/499a3767-89ed-4192-9f6c-1cb6bffd0120) 삭제, 신고, 나가기 등 되돌릴 수 없는 작업을 수행하는 아이템은 Critical Tone으로 표현할 수 있습니다. Critical Tone 아이템은 반드시 하나로 제한되지 않으며, 필요한 경우 여러 개를 사용할 수 있습니다. ### Header의 사용 ![Menu Sheet에서 Header 사용 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/d6d26a85-35ba-4541-8c35-bf60df6179ff) 부가적인 설명이 필요한 경우 Header를 사용해서 내용의 설명을 도울 수 있습니다. Title은 한 줄에 표시될 수 있도록 간결하게 유지하고, Description은 꼭 필요한 경우에만 추가해주세요. **Description만 사용하는 것은 권장하지 않습니다.** ### Item Description의 사용 ![Menu Sheet에서 Item Description 사용 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/41ba5384-d40f-487b-80ec-e2dfdf92c53c) 기능 이름이 추상적이어서 직접적인 설명이 있어야 오작동을 막는 경우와 같이 선택지를 이해하기 위해 추가 설명이 필요한 경우 사용할 수 있습니다. **Item Description는 꼭 필요한 경우에만 추가해주세요.** ## Specification ### Menu Sheet Component spec (JSON): /rootage/components/menu-sheet.json ### Menu Sheet Item Component spec (JSON): /rootage/components/menu-sheet-item.json ### Menu Sheet Close Button Component spec (JSON): /rootage/components/menu-sheet-close-button.json