# 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/cds';

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은 사용자 친화적이고 접근성이 뛰어난 메뉴 시스템을 구축하는 핵심 컴포넌트입니다. 적절히 활용하면 직관적이고 효율적인 사용자 인터페이스를 만들 수 있습니다.
