@ceed/cds 1.34.1 → 1.36.0

package/dist/components/navigation/Menu.md

@@ -5,18 +5,20 @@ Menu and MenuItem are the content layer of a dropdown menu system. Menu renders
 Menu is built on Joy UI's Menu component and supports sizes, placements, custom styling, and rich content inside menu items such as icons, links, and nested layouts.
 
 ```tsx
-<Box sx={{
-  p: 2
-}}>
-<Dropdown>
-  <MenuButton variant="outlined">메뉴 열기</MenuButton>
-  <Menu>
-    <MenuItem>첫 번째 옵션</MenuItem>
-    <MenuItem>두 번째 옵션</MenuItem>
-    <MenuItem>세 번째 옵션</MenuItem>
-  </Menu>
-</Dropdown>
-</Box>
+<Box
+    sx={{
+      p: 2
+    }}
+  >
+    <Dropdown>
+      <MenuButton variant="outlined">메뉴 열기</MenuButton>
+      <Menu>
+        <MenuItem>첫 번째 옵션</MenuItem>
+        <MenuItem>두 번째 옵션</MenuItem>
+        <MenuItem>세 번째 옵션</MenuItem>
+      </Menu>
+    </Dropdown>
+  </Box>
 ```
 
 | Field                        | Description | Default |
@@ -65,29 +67,29 @@ A standard menu with simple text items, optionally separated by dividers.
 
 ```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="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>
+    <Dropdown>
+      <MenuButton variant="soft">구분선 포함</MenuButton>
+      <Menu>
+        <MenuItem>새 파일</MenuItem>
+        <MenuItem>열기</MenuItem>
+        <ListDivider />
+        <MenuItem>저장</MenuItem>
+        <MenuItem>다른 이름으로 저장</MenuItem>
+        <ListDivider />
+        <MenuItem>종료</MenuItem>
+      </Menu>
+    </Dropdown>
+  </Stack>
 ```
 
 ### Menu Sizes
@@ -96,39 +98,39 @@ Menu supports `sm`, `md`, and `lg` sizes that affect the padding and font size o
 
 ```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="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="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>
+    <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
@@ -137,17 +139,17 @@ MenuItems can be `selected`, `disabled`, or colored with semantic colors like `p
 
 ```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>
+    <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
@@ -156,41 +158,53 @@ Add icons before item text to improve scannability. Use consistent icon sizing w
 
 ```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>
+    <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
@@ -199,41 +213,49 @@ Build action menus for CRUD operations. Use `color="danger"` to highlight destru
 
 ```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>
+    <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
@@ -242,17 +264,17 @@ Attach `onClick` handlers to menu items to respond to user selections.
 
 ```tsx
 <Stack spacing={2}>
-  <Typography level="body-sm">상태: {message}</Typography>
+    <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>
+    <Dropdown>
+      <MenuButton variant="outlined">클릭 이벤트</MenuButton>
+      <Menu>
+        <MenuItem onClick={() => setMessage("홈을 클릭했습니다")}>홈</MenuItem>
+        <MenuItem onClick={() => setMessage("프로필을 클릭했습니다")}>프로필</MenuItem>
+        <MenuItem onClick={() => setMessage("설정을 클릭했습니다")}>설정</MenuItem>
+      </Menu>
+    </Dropdown>
+  </Stack>
 ```
 
 ### Menu as Links
@@ -261,22 +283,22 @@ Use the `component="a"` prop on MenuItem to render items as anchor links for nav
 
 ```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>
+    <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
@@ -285,137 +307,162 @@ Combine custom Box content (user info header) with standard MenuItem entries for
 
 ```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">
+    <MenuButton
+      variant="plain"
+      color="neutral"
+      startDecorator={
+        <Avatar size="sm" variant="soft" color="primary">
+          김
+        </Avatar>
+      }
+      endDecorator={<ExpandMoreIcon />}
+      sx={{
+        gap: 1,
+        padding: 1
+      }}
+    >
       김철수
-    </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
+    </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>
 
-Control the position of the menu panel relative to the trigger using the `placement` prop. Supported values include `top-start`, `top`, `top-end`, `bottom-start`, `bottom`, and `bottom-end`.
+      <ListDivider />
 
-```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>
+      <MenuItem>
+        <LogoutIcon
+          sx={{
+            mr: 1.5
+          }}
+        />
+        로그아웃
+      </MenuItem>
     </Menu>
   </Dropdown>
+```
 
-  <Dropdown>
-    <MenuButton variant="outlined">Top</MenuButton>
-    <Menu placement="top">
-      <MenuItem>위쪽 중앙</MenuItem>
-      <MenuItem>옵션 2</MenuItem>
-      <MenuItem>옵션 3</MenuItem>
-    </Menu>
-  </Dropdown>
+### Menu Placements
 
-  <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>
+Control the position of the menu panel relative to the trigger using the `placement` prop. Supported values include `top-start`, `top`, `top-end`, `bottom-start`, `bottom`, and `bottom-end`.
 
-  <Dropdown>
-    <MenuButton variant="outlined">Bottom</MenuButton>
-    <Menu placement="bottom">
-      <MenuItem>아래쪽 중앙</MenuItem>
-      <MenuItem>옵션 2</MenuItem>
-      <MenuItem>옵션 3</MenuItem>
-    </Menu>
-  </Dropdown>
+```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>
 
-  <Dropdown>
-    <MenuButton variant="outlined">Bottom End</MenuButton>
-    <Menu placement="bottom-end">
-      <MenuItem>아래쪽 끝</MenuItem>
-      <MenuItem>옵션 2</MenuItem>
-      <MenuItem>옵션 3</MenuItem>
-    </Menu>
-  </Dropdown>
-</Stack>
-</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
@@ -424,16 +471,23 @@ For menus with many items, apply `maxHeight` and `overflow: 'auto'` through the
 
 ```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>
+    <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
@@ -442,62 +496,86 @@ Customize the menu panel appearance with border-radius, shadows, borders, and cu
 
 ```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="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>
+    <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
@@ -505,59 +583,75 @@ Customize the menu panel appearance with border-radius, shadows, borders, and cu
 Embed a Dropdown menu inside cards or other container components for contextual actions.
 
 ```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>
+<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
@@ -566,84 +660,100 @@ Menu can contain non-MenuItem elements like Box, Typography, and progress indica
 
 ```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>
+    <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>
 ```
 
 ## Common Use Cases
@@ -652,7 +762,9 @@ Menu can contain non-MenuItem elements like Box, Typography, and progress indica
 
 ```tsx
 <Dropdown>
-  <MenuButton variant="plain" size="sm">Actions</MenuButton>
+  <MenuButton variant="plain" size="sm">
+    Actions
+  </MenuButton>
   <Menu>
     <MenuItem onClick={handleEdit}>
       <EditIcon sx={{ mr: 1 }} />
@@ -677,11 +789,19 @@ Menu can contain non-MenuItem elements like Box, Typography, and progress indica
 <Dropdown>
   <MenuButton>Navigate</MenuButton>
   <Menu>
-    <MenuItem component="a" href="/home">Home</MenuItem>
-    <MenuItem component="a" href="/products">Products</MenuItem>
-    <MenuItem component="a" href="/services">Services</MenuItem>
+    <MenuItem component="a" href="/home">
+      Home
+    </MenuItem>
+    <MenuItem component="a" href="/products">
+      Products
+    </MenuItem>
+    <MenuItem component="a" href="/services">
+      Services
+    </MenuItem>
     <ListDivider />
-    <MenuItem component="a" href="/contact">Contact</MenuItem>
+    <MenuItem component="a" href="/contact">
+      Contact
+    </MenuItem>
   </Menu>
 </Dropdown>
 ```
@@ -690,16 +810,15 @@ Menu can contain non-MenuItem elements like Box, Typography, and progress indica
 
 ```tsx
 <Dropdown>
-  <MenuButton
-    startDecorator={<Avatar size="sm" src="/avatar.jpg" />}
-    endDecorator={<ExpandMoreIcon />}
-  >
+  <MenuButton startDecorator={<Avatar size="sm" src="/avatar.jpg" />} endDecorator={<ExpandMoreIcon />}>
     Username
   </MenuButton>
   <Menu>
     <Box sx={{ px: 2, py: 1.5 }}>
       <Typography level="title-sm">Username</Typography>
-      <Typography level="body-xs" color="neutral">user@example.com</Typography>
+      <Typography level="body-xs" color="neutral">
+        user@example.com
+      </Typography>
     </Box>
     <ListDivider />
     <MenuItem>
@@ -741,13 +860,15 @@ Menu can contain non-MenuItem elements like Box, Typography, and progress indica
 - **Use ListDivider to group related items.** Logical grouping helps users scan the menu faster. Place destructive actions (like Delete) in their own group at the bottom.
 
   ```tsx
-  {/* ✅ Good: Grouped actions with divider */}
+  {
+    /* ✅ Good: Grouped actions with divider */
+  }
   <Menu>
     <MenuItem>Edit</MenuItem>
     <MenuItem>Duplicate</MenuItem>
     <ListDivider />
     <MenuItem color="danger">Delete</MenuItem>
-  </Menu>
+  </Menu>;
   ```
 
 - **Keep icon sizing consistent.** When using icons in menu items, apply the same `fontSize` and `mr` (margin-right) to all icons so items align cleanly.