@ceed/ads 1.13.4 → 1.15.0-next.1

package/dist/components/navigation/Menu.md

@@ -0,0 +1,957 @@
+# Menu
+
+## Introduction
+
+Menu와 MenuItem 컴포넌트는 드롭다운 메뉴의 콘텐츠를 구성하는 컴포넌트입니다. Joy UI의 Menu와 MenuItem을 기반으로 합니다.. Dropdown 컴포넌트와 함께 사용하여 사용자에게 선택 가능한 옵션들을 제공합니다. 네비게이션, 액션 메뉴, 컨텍스트 메뉴 등 다양한 용도로 활용할 수 있습니다.
+
+```tsx
+<Box sx={{
+  p: 2
+}}>
+<Dropdown>
+  <MenuButton variant="outlined">메뉴 열기</MenuButton>
+  <Menu>
+    <MenuItem>첫 번째 옵션</MenuItem>
+    <MenuItem>두 번째 옵션</MenuItem>
+    <MenuItem>세 번째 옵션</MenuItem>
+  </Menu>
+</Dropdown>
+</Box>
+```
+
+| Field                        | Description | Default |
+| ---------------------------- | ----------- | ------- |
+| Controls resolved at runtime | —           | —       |
+
+## Usage
+
+```tsx
+import { Dropdown, MenuButton, Menu, MenuItem } from '@ceed/ads';
+
+function MyComponent() {
+  return (
+    <Dropdown>
+      <MenuButton>메뉴 열기</MenuButton>
+      <Menu>
+        <MenuItem>옵션 1</MenuItem>
+        <MenuItem>옵션 2</MenuItem>
+        <MenuItem>옵션 3</MenuItem>
+      </Menu>
+    </Dropdown>
+  );
+}
+```
+
+## Examples
+
+### Basic Menu
+
+가장 기본적인 Menu 사용법입니다.
+
+```tsx
+<Stack direction="row" spacing={3}>
+  <Dropdown>
+    <MenuButton variant="outlined">기본 메뉴</MenuButton>
+    <Menu>
+      <MenuItem>홈</MenuItem>
+      <MenuItem>제품</MenuItem>
+      <MenuItem>서비스</MenuItem>
+      <MenuItem>문의</MenuItem>
+    </Menu>
+  </Dropdown>
+
+  <Dropdown>
+    <MenuButton variant="soft">구분선 포함</MenuButton>
+    <Menu>
+      <MenuItem>새 파일</MenuItem>
+      <MenuItem>열기</MenuItem>
+      <ListDivider />
+      <MenuItem>저장</MenuItem>
+      <MenuItem>다른 이름으로 저장</MenuItem>
+      <ListDivider />
+      <MenuItem>종료</MenuItem>
+    </Menu>
+  </Dropdown>
+</Stack>
+```
+
+### Menu Sizes
+
+다양한 크기의 메뉴를 사용할 수 있습니다.
+
+```tsx
+<Stack direction="row" spacing={3}>
+  <Dropdown>
+    <MenuButton size="sm" variant="outlined">
+      Small Menu
+    </MenuButton>
+    <Menu size="sm">
+      <MenuItem>작은 아이템 1</MenuItem>
+      <MenuItem>작은 아이템 2</MenuItem>
+      <MenuItem>작은 아이템 3</MenuItem>
+    </Menu>
+  </Dropdown>
+
+  <Dropdown>
+    <MenuButton size="md" variant="outlined">
+      Medium Menu
+    </MenuButton>
+    <Menu size="md">
+      <MenuItem>중간 아이템 1</MenuItem>
+      <MenuItem>중간 아이템 2</MenuItem>
+      <MenuItem>중간 아이템 3</MenuItem>
+    </Menu>
+  </Dropdown>
+
+  <Dropdown>
+    <MenuButton size="lg" variant="outlined">
+      Large Menu
+    </MenuButton>
+    <Menu size="lg">
+      <MenuItem>큰 아이템 1</MenuItem>
+      <MenuItem>큰 아이템 2</MenuItem>
+      <MenuItem>큰 아이템 3</MenuItem>
+    </Menu>
+  </Dropdown>
+</Stack>
+```
+
+### MenuItem States
+
+MenuItem의 다양한 상태를 표현할 수 있습니다.
+
+```tsx
+<Dropdown>
+  <MenuButton variant="outlined">다양한 상태</MenuButton>
+  <Menu>
+    <MenuItem>일반 아이템</MenuItem>
+    <MenuItem selected>선택된 아이템</MenuItem>
+    <MenuItem disabled>비활성 아이템</MenuItem>
+    <MenuItem color="primary">Primary 색상</MenuItem>
+    <MenuItem color="danger">Danger 색상</MenuItem>
+    <MenuItem color="success">Success 색상</MenuItem>
+    <MenuItem color="warning">Warning 색상</MenuItem>
+  </Menu>
+</Dropdown>
+```
+
+### MenuItem with Icons
+
+메뉴 아이템에 아이콘을 추가할 수 있습니다.
+
+```tsx
+<Dropdown>
+  <MenuButton variant="outlined" startDecorator={<PersonIcon />} endDecorator={<ExpandMoreIcon />}>
+    아이콘 메뉴
+  </MenuButton>
+  <Menu>
+    <MenuItem>
+      <PersonIcon sx={{
+        mr: 1.5,
+        fontSize: 'lg'
+      }} />
+      프로필 보기
+    </MenuItem>
+    <MenuItem>
+      <SettingsIcon sx={{
+        mr: 1.5,
+        fontSize: 'lg'
+      }} />
+      설정
+    </MenuItem>
+    <MenuItem>
+      <BookmarkIcon sx={{
+        mr: 1.5,
+        fontSize: 'lg'
+      }} />
+      북마크
+    </MenuItem>
+    <ListDivider />
+    <MenuItem>
+      <LogoutIcon sx={{
+        mr: 1.5,
+        fontSize: 'lg'
+      }} />
+      로그아웃
+    </MenuItem>
+  </Menu>
+</Dropdown>
+```
+
+### Actions Menu
+
+편집, 삭제 등의 액션 메뉴로 활용할 수 있습니다.
+
+```tsx
+<Dropdown>
+  <MenuButton variant="plain" size="sm">
+    작업
+  </MenuButton>
+  <Menu>
+    <MenuItem>
+      <EditIcon sx={{
+        mr: 1,
+        fontSize: 'md'
+      }} />
+      편집
+    </MenuItem>
+    <MenuItem>
+      <CopyIcon sx={{
+        mr: 1,
+        fontSize: 'md'
+      }} />
+      복사
+    </MenuItem>
+    <MenuItem>
+      <ShareIcon sx={{
+        mr: 1,
+        fontSize: 'md'
+      }} />
+      공유
+    </MenuItem>
+    <ListDivider />
+    <MenuItem color="danger">
+      <DeleteIcon sx={{
+        mr: 1,
+        fontSize: 'md'
+      }} />
+      <Typography color="danger">삭제</Typography>
+    </MenuItem>
+  </Menu>
+</Dropdown>
+```
+
+### Clickable Menu Items
+
+메뉴 아이템에 클릭 이벤트를 연결할 수 있습니다.
+
+```tsx
+<Stack spacing={2}>
+  <Typography level="body-sm">상태: {message}</Typography>
+
+  <Dropdown>
+    <MenuButton variant="outlined">클릭 이벤트</MenuButton>
+    <Menu>
+      <MenuItem onClick={() => setMessage('홈을 클릭했습니다')}>홈</MenuItem>
+      <MenuItem onClick={() => setMessage('프로필을 클릭했습니다')}>프로필</MenuItem>
+      <MenuItem onClick={() => setMessage('설정을 클릭했습니다')}>설정</MenuItem>
+    </Menu>
+  </Dropdown>
+</Stack>
+```
+
+### Menu as Links
+
+메뉴 아이템을 링크로 사용할 수 있습니다.
+
+```tsx
+<Dropdown>
+  <MenuButton variant="outlined">링크 메뉴</MenuButton>
+  <Menu>
+    <MenuItem component="a" href="#home">
+      홈 (링크)
+    </MenuItem>
+    <MenuItem component="a" href="#about">
+      회사소개 (링크)
+    </MenuItem>
+    <MenuItem component="a" href="#products">
+      제품 (링크)
+    </MenuItem>
+    <MenuItem component="a" href="https://example.com" target="_blank" rel="noopener noreferrer">
+      외부 링크
+    </MenuItem>
+  </Menu>
+</Dropdown>
+```
+
+### Profile Menu
+
+사용자 프로필 메뉴의 완성된 예제입니다.
+
+```tsx
+<Dropdown>
+  <MenuButton variant="plain" color="neutral" startDecorator={<Avatar size="sm" variant="soft" color="primary">
+    김
+  </Avatar>} endDecorator={<ExpandMoreIcon />} sx={{
+  gap: 1,
+  padding: 1
+}}>
+김철수
+</MenuButton>
+<Menu sx={{
+  minWidth: 240
+}}>
+{/* 사용자 정보 헤더 */}
+<Box sx={{
+  px: 2,
+  py: 1.5,
+  borderBottom: '1px solid',
+  borderColor: 'divider'
+}}>
+<Stack direction="row" spacing={2} alignItems="center">
+  <Avatar size="md" variant="soft" color="primary">
+    김철수
+  </Avatar>
+  <Stack spacing={0}>
+    <Typography level="title-sm" fontWeight="bold">
+      김철수
+    </Typography>
+    <Typography level="body-xs" color="neutral">
+      kim@example.com
+    </Typography>
+  </Stack>
+</Stack>
+</Box>
+
+{/* 메뉴 항목들 */}
+<MenuItem>
+  <PersonIcon sx={{
+    mr: 1.5
+  }} />내 프로필
+</MenuItem>
+<MenuItem>
+  <BookmarkIcon sx={{
+    mr: 1.5
+  }} />
+  저장된 항목
+</MenuItem>
+<MenuItem>
+  <SettingsIcon sx={{
+    mr: 1.5
+  }} />
+  계정 설정
+</MenuItem>
+
+<ListDivider />
+
+<MenuItem>
+  <LogoutIcon sx={{
+    mr: 1.5
+  }} />
+  로그아웃
+</MenuItem>
+</Menu>
+</Dropdown>
+```
+
+### Menu Placements
+
+메뉴가 나타나는 위치를 다양하게 설정할 수 있습니다.
+
+```tsx
+<Stack spacing={4} alignItems="center" sx={{
+  mt: 6,
+  mb: 6
+}}>
+<Stack direction="row" spacing={2}>
+  <Dropdown>
+    <MenuButton variant="outlined">Top Start</MenuButton>
+    <Menu placement="top-start">
+      <MenuItem>위쪽 시작</MenuItem>
+      <MenuItem>옵션 2</MenuItem>
+      <MenuItem>옵션 3</MenuItem>
+    </Menu>
+  </Dropdown>
+
+  <Dropdown>
+    <MenuButton variant="outlined">Top</MenuButton>
+    <Menu placement="top">
+      <MenuItem>위쪽 중앙</MenuItem>
+      <MenuItem>옵션 2</MenuItem>
+      <MenuItem>옵션 3</MenuItem>
+    </Menu>
+  </Dropdown>
+
+  <Dropdown>
+    <MenuButton variant="outlined">Top End</MenuButton>
+    <Menu placement="top-end">
+      <MenuItem>위쪽 끝</MenuItem>
+      <MenuItem>옵션 2</MenuItem>
+      <MenuItem>옵션 3</MenuItem>
+    </Menu>
+  </Dropdown>
+</Stack>
+
+<Stack direction="row" spacing={2}>
+  <Dropdown>
+    <MenuButton variant="outlined">Bottom Start</MenuButton>
+    <Menu placement="bottom-start">
+      <MenuItem>아래쪽 시작</MenuItem>
+      <MenuItem>옵션 2</MenuItem>
+      <MenuItem>옵션 3</MenuItem>
+    </Menu>
+  </Dropdown>
+
+  <Dropdown>
+    <MenuButton variant="outlined">Bottom</MenuButton>
+    <Menu placement="bottom">
+      <MenuItem>아래쪽 중앙</MenuItem>
+      <MenuItem>옵션 2</MenuItem>
+      <MenuItem>옵션 3</MenuItem>
+    </Menu>
+  </Dropdown>
+
+  <Dropdown>
+    <MenuButton variant="outlined">Bottom End</MenuButton>
+    <Menu placement="bottom-end">
+      <MenuItem>아래쪽 끝</MenuItem>
+      <MenuItem>옵션 2</MenuItem>
+      <MenuItem>옵션 3</MenuItem>
+    </Menu>
+  </Dropdown>
+</Stack>
+</Stack>
+```
+
+### Long Scrollable Menu
+
+많은 옵션이 있는 메뉴는 스크롤을 적용할 수 있습니다.
+
+```tsx
+<Dropdown>
+  <MenuButton variant="outlined">긴 메뉴 (스크롤)</MenuButton>
+  <Menu sx={{
+    maxHeight: 300,
+    overflow: 'auto'
+  }}>
+  {Array.from({
+    length: 30
+  }, (_, index) => <MenuItem key={index}>메뉴 항목 {index + 1}</MenuItem>)}
+</Menu>
+</Dropdown>
+```
+
+### Custom Styled Menu
+
+CSS 스타일을 이용해 메뉴를 커스터마이징할 수 있습니다.
+
+```tsx
+<Stack direction="row" spacing={3}>
+  <Dropdown>
+    <MenuButton variant="soft" color="primary">
+      둥근 메뉴
+    </MenuButton>
+    <Menu sx={{
+      borderRadius: 'lg',
+      boxShadow: 'lg',
+      border: '2px solid',
+      borderColor: 'primary.200',
+      p: 0.5
+    }}>
+    <MenuItem sx={{
+      borderRadius: 'md',
+      my: 0.25
+    }}>둥근 아이템 1</MenuItem>
+    <MenuItem sx={{
+      borderRadius: 'md',
+      my: 0.25
+    }}>둥근 아이템 2</MenuItem>
+    <MenuItem sx={{
+      borderRadius: 'md',
+      my: 0.25
+    }}>둥근 아이템 3</MenuItem>
+  </Menu>
+</Dropdown>
+
+<Dropdown>
+  <MenuButton variant="outlined">그림자 메뉴</MenuButton>
+  <Menu sx={{
+    boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+    border: 'none',
+    borderRadius: 'xl'
+  }}>
+  <MenuItem sx={{
+    px: 3,
+    py: 1.5
+  }}>
+  <StarIcon sx={{
+    mr: 2,
+    color: 'warning.500'
+  }} />
+  특별한 아이템 1
+</MenuItem>
+<MenuItem sx={{
+  px: 3,
+  py: 1.5
+}}>
+<StarIcon sx={{
+  mr: 2,
+  color: 'warning.500'
+}} />
+특별한 아이템 2
+</MenuItem>
+</Menu>
+</Dropdown>
+</Stack>
+```
+
+### Menu in Card
+
+카드나 다른 컴포넌트 내에서 메뉴를 사용할 수 있습니다.
+
+```tsx
+<Sheet variant="outlined" sx={{
+  maxWidth: 400,
+  p: 3,
+  borderRadius: 'lg'
+}}>
+<Stack direction="row" justifyContent="space-between" alignItems="flex-start">
+  <Stack spacing={1}>
+    <Typography level="title-lg">프로젝트 카드</Typography>
+    <Typography level="body-sm" color="neutral">
+      이 카드에는 메뉴가 포함되어 있습니다.
+    </Typography>
+    <Typography level="body-xs" color="neutral">
+      2024.01.15 생성
+    </Typography>
+  </Stack>
+
+  <Dropdown>
+    <MenuButton variant="plain" color="neutral" size="sm" sx={{
+      minHeight: 'auto',
+      p: 1
+    }}>
+    ⋮
+  </MenuButton>
+  <Menu placement="bottom-end">
+    <MenuItem>
+      <EditIcon sx={{
+        mr: 1
+      }} />
+      편집
+    </MenuItem>
+    <MenuItem>
+      <CopyIcon sx={{
+        mr: 1
+      }} />
+      복제
+    </MenuItem>
+    <MenuItem>
+      <ShareIcon sx={{
+        mr: 1
+      }} />
+      공유
+    </MenuItem>
+    <ListDivider />
+    <MenuItem color="danger">
+      <DeleteIcon sx={{
+        mr: 1
+      }} />
+      삭제
+    </MenuItem>
+  </Menu>
+</Dropdown>
+</Stack>
+</Sheet>
+```
+
+### Nested Content
+
+메뉴 내에 복잡한 콘텐츠를 구성할 수 있습니다.
+
+```tsx
+<Dropdown>
+  <MenuButton variant="outlined">복합 콘텐츠</MenuButton>
+  <Menu sx={{
+    minWidth: 280
+  }}>
+  {/* 사용자 정보 섹션 */}
+  <Box sx={{
+    px: 2,
+    py: 2
+  }}>
+  <Stack direction="row" spacing={2} alignItems="center">
+    <Avatar variant="soft" color="primary">
+      A
+    </Avatar>
+    <Stack>
+      <Typography level="title-sm">Admin 사용자</Typography>
+      <Typography level="body-xs" color="neutral">
+        admin@example.com
+      </Typography>
+    </Stack>
+  </Stack>
+</Box>
+
+<ListDivider />
+
+{/* 일반 메뉴 항목들 */}
+<MenuItem>
+  <PersonIcon sx={{
+    mr: 1.5
+  }} />
+  프로필 관리
+</MenuItem>
+<MenuItem>
+  <SettingsIcon sx={{
+    mr: 1.5
+  }} />
+  시스템 설정
+</MenuItem>
+
+<ListDivider />
+
+{/* 상태 정보 */}
+<Box sx={{
+  px: 2,
+  py: 1.5
+}}>
+<Stack spacing={1}>
+  <Stack direction="row" justifyContent="space-between">
+    <Typography level="body-xs" color="neutral">
+      저장 공간
+    </Typography>
+    <Typography level="body-xs">75%</Typography>
+  </Stack>
+  <Box sx={{
+    height: 4,
+    bgcolor: 'neutral.200',
+    borderRadius: 'sm',
+    position: 'relative'
+  }}>
+  <Box sx={{
+    width: '75%',
+    height: '100%',
+    bgcolor: 'primary.500',
+    borderRadius: 'sm'
+  }} />
+</Box>
+</Stack>
+</Box>
+
+<ListDivider />
+
+<MenuItem>
+  <LogoutIcon sx={{
+    mr: 1.5
+  }} />
+  로그아웃
+</MenuItem>
+</Menu>
+</Dropdown>
+```
+
+## Component Structure
+
+Menu는 다음과 같은 구조로 구성됩니다:
+
+```tsx
+<Dropdown>
+  <MenuButton>트리거</MenuButton>
+  <Menu>
+    {/* 기본 메뉴 아이템 */}
+    <MenuItem>기본 아이템</MenuItem>
+
+    {/* 아이콘이 있는 메뉴 아이템 */}
+    <MenuItem>
+      <Icon sx={{ mr: 1 }} />
+      아이콘 아이템
+    </MenuItem>
+
+    {/* 구분선 */}
+    <ListDivider />
+
+    {/* 색상이 있는 메뉴 아이템 */}
+    <MenuItem color="danger">위험한 작업</MenuItem>
+
+    {/* 비활성 메뉴 아이템 */}
+    <MenuItem disabled>비활성 아이템</MenuItem>
+
+    {/* 링크 메뉴 아이템 */}
+    <MenuItem component="a" href="/link">
+      링크 아이템
+    </MenuItem>
+
+    {/* 클릭 핸들러가 있는 메뉴 아이템 */}
+    <MenuItem onClick={handleClick}>클릭 가능한 아이템</MenuItem>
+  </Menu>
+</Dropdown>
+```
+
+## Common Use Cases
+
+### Navigation Menu
+
+```tsx
+<Dropdown>
+  <MenuButton>네비게이션</MenuButton>
+  <Menu>
+    <MenuItem component="a" href="/home">
+      홈
+    </MenuItem>
+    <MenuItem component="a" href="/products">
+      제품
+    </MenuItem>
+    <MenuItem component="a" href="/services">
+      서비스
+    </MenuItem>
+    <ListDivider />
+    <MenuItem component="a" href="/contact">
+      문의하기
+    </MenuItem>
+  </Menu>
+</Dropdown>
+```
+
+### Action Menu with Icons
+
+```tsx
+<Dropdown>
+  <MenuButton variant="plain" size="sm">
+    작업
+  </MenuButton>
+  <Menu>
+    <MenuItem onClick={handleEdit}>
+      <EditIcon sx={{ mr: 1 }} />
+      편집
+    </MenuItem>
+    <MenuItem onClick={handleCopy}>
+      <CopyIcon sx={{ mr: 1 }} />
+      복사
+    </MenuItem>
+    <MenuItem onClick={handleShare}>
+      <ShareIcon sx={{ mr: 1 }} />
+      공유
+    </MenuItem>
+    <ListDivider />
+    <MenuItem color="danger" onClick={handleDelete}>
+      <DeleteIcon sx={{ mr: 1 }} />
+      삭제
+    </MenuItem>
+  </Menu>
+</Dropdown>
+```
+
+### User Profile Menu
+
+```tsx
+<Dropdown>
+  <MenuButton startDecorator={<Avatar size="sm" src="/avatar.jpg" />} endDecorator={<ExpandMoreIcon />}>
+    사용자명
+  </MenuButton>
+  <Menu>
+    {/* 프로필 헤더 */}
+    <Box sx={{ px: 2, py: 1.5 }}>
+      <Typography level="title-sm">사용자명</Typography>
+      <Typography level="body-xs" color="neutral">
+        user@example.com
+      </Typography>
+    </Box>
+
+    <ListDivider />
+
+    <MenuItem>
+      <PersonIcon sx={{ mr: 1 }} />
+      프로필 보기
+    </MenuItem>
+    <MenuItem>
+      <SettingsIcon sx={{ mr: 1 }} />
+      설정
+    </MenuItem>
+
+    <ListDivider />
+
+    <MenuItem>
+      <LogoutIcon sx={{ mr: 1 }} />
+      로그아웃
+    </MenuItem>
+  </Menu>
+</Dropdown>
+```
+
+### Filter Menu
+
+```tsx
+const [filter, setFilter] = useState('전체');
+
+<Dropdown>
+  <MenuButton startDecorator={<FilterListIcon />} endDecorator={<ExpandMoreIcon />}>
+    필터: {filter}
+  </MenuButton>
+  <Menu>
+    <MenuItem selected={filter === '전체'} onClick={() => setFilter('전체')}>
+      전체
+    </MenuItem>
+    <MenuItem selected={filter === '활성'} onClick={() => setFilter('활성')}>
+      활성
+    </MenuItem>
+    <MenuItem selected={filter === '비활성'} onClick={() => setFilter('비활성')}>
+      비활성
+    </MenuItem>
+  </Menu>
+</Dropdown>;
+```
+
+### Context Menu (Right-click Menu)
+
+```tsx
+const [contextMenu, setContextMenu] = useState(null);
+
+const handleContextMenu = (event) => {
+  event.preventDefault();
+  setContextMenu({
+    mouseX: event.clientX - 2,
+    mouseY: event.clientY - 4,
+  });
+};
+
+<div onContextMenu={handleContextMenu}>
+  우클릭 가능한 영역
+  {contextMenu && (
+    <Menu
+      open
+      anchorReference="anchorPosition"
+      anchorPosition={{
+        top: contextMenu.mouseY,
+        left: contextMenu.mouseX,
+      }}
+      onClose={() => setContextMenu(null)}
+    >
+      <MenuItem>복사</MenuItem>
+      <MenuItem>붙여넣기</MenuItem>
+      <MenuItem>삭제</MenuItem>
+    </Menu>
+  )}
+</div>;
+```
+
+### Submenu Pattern
+
+```tsx
+<Dropdown>
+  <MenuButton>파일</MenuButton>
+  <Menu>
+    <MenuItem>새 파일</MenuItem>
+    <MenuItem>열기</MenuItem>
+
+    {/* 서브메뉴는 별도 Dropdown으로 구현 */}
+    <MenuItem>
+      최근 파일
+      <Dropdown>
+        <MenuButton variant="plain" size="sm" sx={{ ml: 'auto' }}>
+          ▶
+        </MenuButton>
+        <Menu placement="right-start">
+          <MenuItem>파일1.txt</MenuItem>
+          <MenuItem>파일2.txt</MenuItem>
+          <MenuItem>파일3.txt</MenuItem>
+        </Menu>
+      </Dropdown>
+    </MenuItem>
+
+    <ListDivider />
+    <MenuItem>저장</MenuItem>
+    <MenuItem>종료</MenuItem>
+  </Menu>
+</Dropdown>
+```
+
+## Menu Placement
+
+메뉴의 위치는 `placement` prop으로 조정할 수 있습니다:
+
+```tsx
+<Menu placement="top-start">      {/* 위쪽 왼쪽 정렬 */}
+<Menu placement="top">            {/* 위쪽 중앙 정렬 */}
+<Menu placement="top-end">        {/* 위쪽 오른쪽 정렬 */}
+<Menu placement="bottom-start">   {/* 아래쪽 왼쪽 정렬 (기본값) */}
+<Menu placement="bottom">         {/* 아래쪽 중앙 정렬 */}
+<Menu placement="bottom-end">     {/* 아래쪽 오른쪽 정렬 */}
+```
+
+## Accessibility
+
+Menu 컴포넌트는 다음과 같은 접근성 기능을 제공합니다:
+
+### 키보드 탐색
+
+- **Tab**: 메뉴 버튼으로 포커스 이동
+- **Enter/Space**: 메뉴 열기/닫기
+- **↑/↓**: 메뉴 아이템 간 이동
+- **Escape**: 메뉴 닫기
+- **Enter**: 메뉴 아이템 선택
+
+### ARIA 속성
+
+- `role="menu"`: 메뉴 역할 정의
+- `role="menuitem"`: 메뉴 아이템 역할 정의
+- `aria-expanded`: 메뉴 열림/닫힘 상태
+- `aria-haspopup`: 팝업 메뉴 존재 표시
+
+### 추가 접근성 고려사항
+
+```tsx
+<MenuItem aria-label="사용자 프로필 편집">
+  <EditIcon />
+  편집
+</MenuItem>
+
+<MenuItem disabled aria-label="현재 사용할 수 없는 기능">
+  사용 불가
+</MenuItem>
+```
+
+## Best Practices
+
+1. **명확한 라벨링**: 메뉴 아이템은 명확하고 이해하기 쉬운 텍스트를 사용하세요.
+
+2. **아이콘 일관성**: 아이콘을 사용할 때는 일관된 크기와 스타일을 유지하세요.
+
+   ```tsx
+   <MenuItem>
+     <EditIcon sx={{ mr: 1.5, fontSize: 'lg' }} />
+     편집
+   </MenuItem>
+   ```
+
+3. **논리적 그룹화**: 관련된 메뉴 아이템들은 ListDivider로 구분하세요.
+
+4. **위험한 작업 구분**: 삭제와 같은 위험한 작업은 색상으로 구분하세요.
+
+   ```tsx
+   <MenuItem color="danger">
+     <DeleteIcon sx={{ mr: 1 }} />
+     삭제
+   </MenuItem>
+   ```
+
+5. **적절한 메뉴 크기**: 너무 긴 메뉴는 스크롤을 적용하거나 서브메뉴로 나누세요.
+
+   ```tsx
+   <Menu sx={{ maxHeight: 300, overflow: 'auto' }}>
+   ```
+
+6. **상태 피드백**: 선택된 아이템이나 현재 상태를 명확히 표시하세요.
+
+7. **모바일 고려**: 터치 기기에서 사용하기 쉽도록 충분한 터치 영역을 제공하세요.
+
+## Performance Considerations
+
+1. **메뉴 지연 로딩**: 복잡한 메뉴는 필요할 때만 렌더링하세요.
+
+2. **가상화**: 매우 긴 메뉴 목록에는 가상화를 고려하세요.
+
+3. **메모이제이션**: 정적인 메뉴 아이템들은 메모이제이션을 활용하세요.
+
+## Troubleshooting
+
+### 흔한 문제들
+
+1. **메뉴가 화면을 벗어남**
+
+   ```tsx
+   <Menu placement="top-end"> {/* placement 조정 */}
+   ```
+
+2. **긴 메뉴 스크롤 문제**
+
+   ```tsx
+   <Menu sx={{ maxHeight: 400, overflow: 'auto' }}>
+   ```
+
+3. **모바일에서 터치 영역 부족**
+   ```tsx
+   <MenuItem sx={{ minHeight: 44 }}> {/* 최소 터치 영역 보장 */}
+   ```
+
+Menu와 MenuItem은 사용자 친화적이고 접근성이 뛰어난 메뉴 시스템을 구축하는 핵심 컴포넌트입니다. 적절히 활용하면 직관적이고 효율적인 사용자 인터페이스를 만들 수 있습니다.