@ceed/cds 1.34.1 → 1.36.0-next.1

package/dist/components/data-display/Table.md

@@ -8,22 +8,26 @@ The Table component is a foundational table component for displaying structured
 
 ```tsx
 <Table aria-label="basic table" {...args}>
-  <TableHead headCells={headCells} />
-  <TableBody rows={rows} rowOptions={{
-    calories: {
-      numeric: true
-    },
-    fat: {
-      numeric: true
-    },
-    carbs: {
-      numeric: true
-    },
-    protein: {
-      numeric: true
-    }
-  }} cellOrder={['dessert', 'calories', 'fat', 'carbs', 'protein']} />
-</Table>
+    <TableHead headCells={headCells} />
+    <TableBody
+      rows={rows}
+      rowOptions={{
+        calories: {
+          numeric: true
+        },
+        fat: {
+          numeric: true
+        },
+        carbs: {
+          numeric: true
+        },
+        protein: {
+          numeric: true
+        }
+      }}
+      cellOrder={["dessert", "calories", "fat", "carbs", "protein"]}
+    />
+  </Table>
 ```
 
 | Field                        | Description | Default |
@@ -51,10 +55,7 @@ function MyComponent() {
   return (
     <Table>
       <TableHead headCells={headCells} />
-      <TableBody
-        rows={rows}
-        cellOrder={['name', 'email', 'role', 'joinDate']}
-      />
+      <TableBody rows={rows} cellOrder={['name', 'email', 'role', 'joinDate']} />
     </Table>
   );
 }
@@ -68,22 +69,26 @@ The most basic Table usage patterns.
 
 ```tsx
 <Table aria-label="basic table" {...args}>
-  <TableHead headCells={headCells} />
-  <TableBody rows={rows} rowOptions={{
-    calories: {
-      numeric: true
-    },
-    fat: {
-      numeric: true
-    },
-    carbs: {
-      numeric: true
-    },
-    protein: {
-      numeric: true
-    }
-  }} cellOrder={['dessert', 'calories', 'fat', 'carbs', 'protein']} />
-</Table>
+    <TableHead headCells={headCells} />
+    <TableBody
+      rows={rows}
+      rowOptions={{
+        calories: {
+          numeric: true
+        },
+        fat: {
+          numeric: true
+        },
+        carbs: {
+          numeric: true
+        },
+        protein: {
+          numeric: true
+        }
+      }}
+      cellOrder={["dessert", "calories", "fat", "carbs", "protein"]}
+    />
+  </Table>
 ```
 
 ### With Hover Effect
@@ -103,22 +108,27 @@ A selectable table that includes checkboxes.
 
 ```tsx
 <Table aria-label="checkbox table" hoverRow {...args}>
-  <TableHead showCheckbox headCells={headCells} />
-  <TableBody showCheckbox rows={rows} rowOptions={{
-    calories: {
-      numeric: true
-    },
-    fat: {
-      numeric: true
-    },
-    carbs: {
-      numeric: true
-    },
-    protein: {
-      numeric: true
-    }
-  }} cellOrder={['dessert', 'calories', 'fat', 'carbs', 'protein']} />
-</Table>
+    <TableHead showCheckbox headCells={headCells} />
+    <TableBody
+      showCheckbox
+      rows={rows}
+      rowOptions={{
+        calories: {
+          numeric: true
+        },
+        fat: {
+          numeric: true
+        },
+        carbs: {
+          numeric: true
+        },
+        protein: {
+          numeric: true
+        }
+      }}
+      cellOrder={["dessert", "calories", "fat", "carbs", "protein"]}
+    />
+  </Table>
 ```
 
 ## Common Use Cases
@@ -129,175 +139,207 @@ A table for user management. It includes avatars, role labels, status indicators
 
 ```tsx
 <Table aria-label="user management table" hoverRow>
-  <thead>
-    <tr>
-      <th style={{
-        width: '30%'
-      }}>사용자</th>
-      <th style={{
-        width: '25%'
-      }}>이메일</th>
-      <th style={{
-        width: '15%'
-      }}>역할</th>
-      <th style={{
-        width: '15%'
-      }}>상태</th>
-      <th style={{
-        width: '15%'
-      }}>작업</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>
-        <Stack direction="row" spacing={2} alignItems="center">
-          <Avatar size="sm" variant="soft" color="primary">
-            김
-          </Avatar>
-          <Stack spacing={0}>
-            <Typography level="title-sm">김철수</Typography>
-            <Typography level="body-xs" color="neutral">
-              kim@example.com
-            </Typography>
+    <thead>
+      <tr>
+        <th
+          style={{
+            width: "30%"
+          }}
+        >
+          사용자
+        </th>
+        <th
+          style={{
+            width: "25%"
+          }}
+        >
+          이메일
+        </th>
+        <th
+          style={{
+            width: "15%"
+          }}
+        >
+          역할
+        </th>
+        <th
+          style={{
+            width: "15%"
+          }}
+        >
+          상태
+        </th>
+        <th
+          style={{
+            width: "15%"
+          }}
+        >
+          작업
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          <Stack direction="row" spacing={2} alignItems="center">
+            <Avatar size="sm" variant="soft" color="primary">
+              김
+            </Avatar>
+            <Stack spacing={0}>
+              <Typography level="title-sm">김철수</Typography>
+              <Typography level="body-xs" color="neutral">
+                kim@example.com
+              </Typography>
+            </Stack>
           </Stack>
-        </Stack>
-      </td>
-      <td>kim@example.com</td>
-      <td>
-        <Chip size="sm" variant="soft" color="primary">
-          관리자
-        </Chip>
-      </td>
-      <td>
-        <Chip size="sm" variant="soft" color="success">
-          활성
-        </Chip>
-      </td>
-      <td>
-        <Stack direction="row" spacing={1}>
-          <IconButton size="sm" variant="plain">
-            <EditIcon />
-          </IconButton>
-          <IconButton size="sm" variant="plain" color="danger">
-            <DeleteIcon />
-          </IconButton>
-          <Dropdown>
-            <MenuButton variant="plain" size="sm" sx={{
-              minHeight: 'auto',
-              p: 1
-            }}>
-            <MoreVertIcon />
-          </MenuButton>
-          <Menu placement="bottom-end">
-            <MenuItem>상세 보기</MenuItem>
-            <MenuItem>권한 변경</MenuItem>
-            <MenuItem color="danger">계정 비활성화</MenuItem>
-          </Menu>
-        </Dropdown>
-      </Stack>
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <Stack direction="row" spacing={2} alignItems="center">
-        <Avatar size="sm" variant="soft" color="primary">
-          이
-        </Avatar>
-        <Stack spacing={0}>
-          <Typography level="title-sm">이영희</Typography>
-          <Typography level="body-xs" color="neutral">
-            lee@example.com
-          </Typography>
-        </Stack>
-      </Stack>
-    </td>
-    <td>lee@example.com</td>
-    <td>
-      <Chip size="sm" variant="soft" color="neutral">
-        사용자
-      </Chip>
-    </td>
-    <td>
-      <Chip size="sm" variant="soft" color="neutral">
-        비활성
-      </Chip>
-    </td>
-    <td>
-      <Stack direction="row" spacing={1}>
-        <IconButton size="sm" variant="plain">
-          <EditIcon />
-        </IconButton>
-        <IconButton size="sm" variant="plain" color="danger">
-          <DeleteIcon />
-        </IconButton>
-        <Dropdown>
-          <MenuButton variant="plain" size="sm" sx={{
-            minHeight: 'auto',
-            p: 1
-          }}>
-          <MoreVertIcon />
-        </MenuButton>
-        <Menu placement="bottom-end">
-          <MenuItem>상세 보기</MenuItem>
-          <MenuItem>권한 변경</MenuItem>
-          <MenuItem color="danger">계정 비활성화</MenuItem>
-        </Menu>
-      </Dropdown>
-    </Stack>
-  </td>
-</tr>
-<tr>
-  <td>
-    <Stack direction="row" spacing={2} alignItems="center">
-      <Avatar size="sm" variant="soft" color="primary">
-        박
-      </Avatar>
-      <Stack spacing={0}>
-        <Typography level="title-sm">박민수</Typography>
-        <Typography level="body-xs" color="neutral">
-          park@example.com
-        </Typography>
-      </Stack>
-    </Stack>
-  </td>
-  <td>park@example.com</td>
-  <td>
-    <Chip size="sm" variant="soft" color="warning">
-      편집자
-    </Chip>
-  </td>
-  <td>
-    <Chip size="sm" variant="soft" color="success">
-      활성
-    </Chip>
-  </td>
-  <td>
-    <Stack direction="row" spacing={1}>
-      <IconButton size="sm" variant="plain">
-        <EditIcon />
-      </IconButton>
-      <IconButton size="sm" variant="plain" color="danger">
-        <DeleteIcon />
-      </IconButton>
-      <Dropdown>
-        <MenuButton variant="plain" size="sm" sx={{
-          minHeight: 'auto',
-          p: 1
-        }}>
-        <MoreVertIcon />
-      </MenuButton>
-      <Menu placement="bottom-end">
-        <MenuItem>상세 보기</MenuItem>
-        <MenuItem>권한 변경</MenuItem>
-        <MenuItem color="danger">계정 비활성화</MenuItem>
-      </Menu>
-    </Dropdown>
-  </Stack>
-</td>
-</tr>
-</tbody>
-</Table>
+        </td>
+        <td>kim@example.com</td>
+        <td>
+          <Chip size="sm" variant="soft" color="primary">
+            관리자
+          </Chip>
+        </td>
+        <td>
+          <Chip size="sm" variant="soft" color="success">
+            활성
+          </Chip>
+        </td>
+        <td>
+          <Stack direction="row" spacing={1}>
+            <IconButton size="sm" variant="plain">
+              <EditIcon />
+            </IconButton>
+            <IconButton size="sm" variant="plain" color="danger">
+              <DeleteIcon />
+            </IconButton>
+            <Dropdown>
+              <MenuButton
+                variant="plain"
+                size="sm"
+                sx={{
+                  minHeight: "auto",
+                  p: 1
+                }}
+              >
+                <MoreVertIcon />
+              </MenuButton>
+              <Menu placement="bottom-end">
+                <MenuItem>상세 보기</MenuItem>
+                <MenuItem>권한 변경</MenuItem>
+                <MenuItem color="danger">계정 비활성화</MenuItem>
+              </Menu>
+            </Dropdown>
+          </Stack>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <Stack direction="row" spacing={2} alignItems="center">
+            <Avatar size="sm" variant="soft" color="primary">
+              이
+            </Avatar>
+            <Stack spacing={0}>
+              <Typography level="title-sm">이영희</Typography>
+              <Typography level="body-xs" color="neutral">
+                lee@example.com
+              </Typography>
+            </Stack>
+          </Stack>
+        </td>
+        <td>lee@example.com</td>
+        <td>
+          <Chip size="sm" variant="soft" color="neutral">
+            사용자
+          </Chip>
+        </td>
+        <td>
+          <Chip size="sm" variant="soft" color="neutral">
+            비활성
+          </Chip>
+        </td>
+        <td>
+          <Stack direction="row" spacing={1}>
+            <IconButton size="sm" variant="plain">
+              <EditIcon />
+            </IconButton>
+            <IconButton size="sm" variant="plain" color="danger">
+              <DeleteIcon />
+            </IconButton>
+            <Dropdown>
+              <MenuButton
+                variant="plain"
+                size="sm"
+                sx={{
+                  minHeight: "auto",
+                  p: 1
+                }}
+              >
+                <MoreVertIcon />
+              </MenuButton>
+              <Menu placement="bottom-end">
+                <MenuItem>상세 보기</MenuItem>
+                <MenuItem>권한 변경</MenuItem>
+                <MenuItem color="danger">계정 비활성화</MenuItem>
+              </Menu>
+            </Dropdown>
+          </Stack>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <Stack direction="row" spacing={2} alignItems="center">
+            <Avatar size="sm" variant="soft" color="primary">
+              박
+            </Avatar>
+            <Stack spacing={0}>
+              <Typography level="title-sm">박민수</Typography>
+              <Typography level="body-xs" color="neutral">
+                park@example.com
+              </Typography>
+            </Stack>
+          </Stack>
+        </td>
+        <td>park@example.com</td>
+        <td>
+          <Chip size="sm" variant="soft" color="warning">
+            편집자
+          </Chip>
+        </td>
+        <td>
+          <Chip size="sm" variant="soft" color="success">
+            활성
+          </Chip>
+        </td>
+        <td>
+          <Stack direction="row" spacing={1}>
+            <IconButton size="sm" variant="plain">
+              <EditIcon />
+            </IconButton>
+            <IconButton size="sm" variant="plain" color="danger">
+              <DeleteIcon />
+            </IconButton>
+            <Dropdown>
+              <MenuButton
+                variant="plain"
+                size="sm"
+                sx={{
+                  minHeight: "auto",
+                  p: 1
+                }}
+              >
+                <MoreVertIcon />
+              </MenuButton>
+              <Menu placement="bottom-end">
+                <MenuItem>상세 보기</MenuItem>
+                <MenuItem>권한 변경</MenuItem>
+                <MenuItem color="danger">계정 비활성화</MenuItem>
+              </Menu>
+            </Dropdown>
+          </Stack>
+        </td>
+      </tr>
+    </tbody>
+  </Table>
 ```
 
 ### Product Inventory Table
@@ -306,117 +348,186 @@ A table for product inventory management. It includes stock status, price displa
 
 ```tsx
 <Table aria-label="product inventory table" hoverRow>
-  <thead>
-    <tr>
-      <th style={{
-        width: '25%'
-      }}>제품명</th>
-      <th style={{
-        width: '15%'
-      }}>카테고리</th>
-      <th style={{
-        width: '10%',
-        textAlign: 'right'
-      }}>재고</th>
-      <th style={{
-        width: '15%',
-        textAlign: 'right'
-      }}>가격</th>
-      <th style={{
-        width: '15%'
-      }}>상태</th>
-      <th style={{
-        width: '20%'
-      }}>진행률</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>MacBook Pro 16"</td>
-      <td>노트북</td>
-      <td style={{
-        textAlign: 'right'
-      }}>25</td>
-      <td style={{
-        textAlign: 'right'
-      }}>₩2,590,000</td>
-      <td>
-        <Chip size="sm" variant="soft" color="success">
-          재고 있음
-        </Chip>
-      </td>
-      <td>
-        <Box sx={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 2,
-          minWidth: 120
-        }}>
-        <LinearProgress determinate value={85} sx={{
-          flex: 1
-        }} color="success" />
-        <Typography level="body-xs">85%</Typography>
-      </Box>
-    </td>
-  </tr>
-  <tr>
-    <td>iPhone 15 Pro</td>
-    <td>스마트폰</td>
-    <td style={{
-      textAlign: 'right'
-    }}>3</td>
-    <td style={{
-      textAlign: 'right'
-    }}>₩1,550,000</td>
-    <td>
-      <Chip size="sm" variant="soft" color="warning">
-        재고 부족
-      </Chip>
-    </td>
-    <td>
-      <Box sx={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: 2,
-        minWidth: 120
-      }}>
-      <LinearProgress determinate value={15} sx={{
-        flex: 1
-      }} color="danger" />
-      <Typography level="body-xs">15%</Typography>
-    </Box>
-  </td>
-</tr>
-<tr>
-  <td>iPad Air</td>
-  <td>태블릿</td>
-  <td style={{
-    textAlign: 'right'
-  }}>0</td>
-  <td style={{
-    textAlign: 'right'
-  }}>₩899,000</td>
-  <td>
-    <Chip size="sm" variant="soft" color="danger">
-      품절
-    </Chip>
-  </td>
-  <td>
-    <Box sx={{
-      display: 'flex',
-      alignItems: 'center',
-      gap: 2,
-      minWidth: 120
-    }}>
-    <LinearProgress determinate value={0} sx={{
-      flex: 1
-    }} color="danger" />
-    <Typography level="body-xs">0%</Typography>
-  </Box>
-</td>
-</tr>
-</tbody>
-</Table>
+    <thead>
+      <tr>
+        <th
+          style={{
+            width: "25%"
+          }}
+        >
+          제품명
+        </th>
+        <th
+          style={{
+            width: "15%"
+          }}
+        >
+          카테고리
+        </th>
+        <th
+          style={{
+            width: "10%",
+            textAlign: "right"
+          }}
+        >
+          재고
+        </th>
+        <th
+          style={{
+            width: "15%",
+            textAlign: "right"
+          }}
+        >
+          가격
+        </th>
+        <th
+          style={{
+            width: "15%"
+          }}
+        >
+          상태
+        </th>
+        <th
+          style={{
+            width: "20%"
+          }}
+        >
+          진행률
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>MacBook Pro 16"</td>
+        <td>노트북</td>
+        <td
+          style={{
+            textAlign: "right"
+          }}
+        >
+          25
+        </td>
+        <td
+          style={{
+            textAlign: "right"
+          }}
+        >
+          ₩2,590,000
+        </td>
+        <td>
+          <Chip size="sm" variant="soft" color="success">
+            재고 있음
+          </Chip>
+        </td>
+        <td>
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              gap: 2,
+              minWidth: 120
+            }}
+          >
+            <LinearProgress
+              determinate
+              value={85}
+              sx={{
+                flex: 1
+              }}
+              color="success"
+            />
+            <Typography level="body-xs">85%</Typography>
+          </Box>
+        </td>
+      </tr>
+      <tr>
+        <td>iPhone 15 Pro</td>
+        <td>스마트폰</td>
+        <td
+          style={{
+            textAlign: "right"
+          }}
+        >
+          3
+        </td>
+        <td
+          style={{
+            textAlign: "right"
+          }}
+        >
+          ₩1,550,000
+        </td>
+        <td>
+          <Chip size="sm" variant="soft" color="warning">
+            재고 부족
+          </Chip>
+        </td>
+        <td>
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              gap: 2,
+              minWidth: 120
+            }}
+          >
+            <LinearProgress
+              determinate
+              value={15}
+              sx={{
+                flex: 1
+              }}
+              color="danger"
+            />
+            <Typography level="body-xs">15%</Typography>
+          </Box>
+        </td>
+      </tr>
+      <tr>
+        <td>iPad Air</td>
+        <td>태블릿</td>
+        <td
+          style={{
+            textAlign: "right"
+          }}
+        >
+          0
+        </td>
+        <td
+          style={{
+            textAlign: "right"
+          }}
+        >
+          ₩899,000
+        </td>
+        <td>
+          <Chip size="sm" variant="soft" color="danger">
+            품절
+          </Chip>
+        </td>
+        <td>
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              gap: 2,
+              minWidth: 120
+            }}
+          >
+            <LinearProgress
+              determinate
+              value={0}
+              sx={{
+                flex: 1
+              }}
+              color="danger"
+            />
+            <Typography level="body-xs">0%</Typography>
+          </Box>
+        </td>
+      </tr>
+    </tbody>
+  </Table>
 ```
 
 ### Task Management Table
@@ -425,151 +536,192 @@ A table for project task management. It displays assignees, priorities, progress
 
 ```tsx
 <Table aria-label="task management table" hoverRow>
-  <thead>
-    <tr>
-      <th style={{
-        width: '30%'
-      }}>작업</th>
-      <th style={{
-        width: '20%'
-      }}>담당자</th>
-      <th style={{
-        width: '15%'
-      }}>우선순위</th>
-      <th style={{
-        width: '20%'
-      }}>진행률</th>
-      <th style={{
-        width: '15%'
-      }}>마감일</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>
-        <Stack spacing={0.5}>
-          <Typography level="title-sm">UI 컴포넌트 개발</Typography>
-          <Typography level="body-xs" color="neutral">
-            새로운 테이블 컴포넌트 구현
+    <thead>
+      <tr>
+        <th
+          style={{
+            width: "30%"
+          }}
+        >
+          작업
+        </th>
+        <th
+          style={{
+            width: "20%"
+          }}
+        >
+          담당자
+        </th>
+        <th
+          style={{
+            width: "15%"
+          }}
+        >
+          우선순위
+        </th>
+        <th
+          style={{
+            width: "20%"
+          }}
+        >
+          진행률
+        </th>
+        <th
+          style={{
+            width: "15%"
+          }}
+        >
+          마감일
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          <Stack spacing={0.5}>
+            <Typography level="title-sm">UI 컴포넌트 개발</Typography>
+            <Typography level="body-xs" color="neutral">
+              새로운 테이블 컴포넌트 구현
+            </Typography>
+          </Stack>
+        </td>
+        <td>
+          <Stack direction="row" spacing={1} alignItems="center">
+            <Avatar size="sm" variant="soft">
+              김
+            </Avatar>
+            <Typography level="body-sm">김개발</Typography>
+          </Stack>
+        </td>
+        <td>
+          <Chip size="sm" variant="soft" color="danger">
+            높음
+          </Chip>
+        </td>
+        <td>
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              gap: 2
+            }}
+          >
+            <LinearProgress
+              determinate
+              value={75}
+              sx={{
+                flex: 1,
+                minWidth: 80
+              }}
+              color="success"
+            />
+            <Typography level="body-xs">75%</Typography>
+          </Box>
+        </td>
+        <td>
+          <Typography level="body-sm" color="neutral">
+            2024-01-20
           </Typography>
-        </Stack>
-      </td>
-      <td>
-        <Stack direction="row" spacing={1} alignItems="center">
-          <Avatar size="sm" variant="soft">
-            김
-          </Avatar>
-          <Typography level="body-sm">김개발</Typography>
-        </Stack>
-      </td>
-      <td>
-        <Chip size="sm" variant="soft" color="danger">
-          높음
-        </Chip>
-      </td>
-      <td>
-        <Box sx={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 2
-        }}>
-        <LinearProgress determinate value={75} sx={{
-          flex: 1,
-          minWidth: 80
-        }} color="success" />
-        <Typography level="body-xs">75%</Typography>
-      </Box>
-    </td>
-    <td>
-      <Typography level="body-sm" color="neutral">
-        2024-01-20
-      </Typography>
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <Stack spacing={0.5}>
-        <Typography level="title-sm">API 연동</Typography>
-        <Typography level="body-xs" color="neutral">
-          사용자 관리 API 연동 작업
-        </Typography>
-      </Stack>
-    </td>
-    <td>
-      <Stack direction="row" spacing={1} alignItems="center">
-        <Avatar size="sm" variant="soft">
-          이
-        </Avatar>
-        <Typography level="body-sm">이백엔드</Typography>
-      </Stack>
-    </td>
-    <td>
-      <Chip size="sm" variant="soft" color="warning">
-        중간
-      </Chip>
-    </td>
-    <td>
-      <Box sx={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: 2
-      }}>
-      <LinearProgress determinate value={50} sx={{
-        flex: 1,
-        minWidth: 80
-      }} color="warning" />
-      <Typography level="body-xs">50%</Typography>
-    </Box>
-  </td>
-  <td>
-    <Typography level="body-sm" color="neutral">
-      2024-01-25
-    </Typography>
-  </td>
-</tr>
-<tr>
-  <td>
-    <Stack spacing={0.5}>
-      <Typography level="title-sm">테스트 작성</Typography>
-      <Typography level="body-xs" color="neutral">
-        단위 테스트 및 통합 테스트
-      </Typography>
-    </Stack>
-  </td>
-  <td>
-    <Stack direction="row" spacing={1} alignItems="center">
-      <Avatar size="sm" variant="soft">
-        박
-      </Avatar>
-      <Typography level="body-sm">박테스터</Typography>
-    </Stack>
-  </td>
-  <td>
-    <Chip size="sm" variant="soft" color="success">
-      낮음
-    </Chip>
-  </td>
-  <td>
-    <Box sx={{
-      display: 'flex',
-      alignItems: 'center',
-      gap: 2
-    }}>
-    <LinearProgress determinate value={25} sx={{
-      flex: 1,
-      minWidth: 80
-    }} color="primary" />
-    <Typography level="body-xs">25%</Typography>
-  </Box>
-</td>
-<td>
-  <Typography level="body-sm" color="neutral">
-    2024-01-30
-  </Typography>
-</td>
-</tr>
-</tbody>
-</Table>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <Stack spacing={0.5}>
+            <Typography level="title-sm">API 연동</Typography>
+            <Typography level="body-xs" color="neutral">
+              사용자 관리 API 연동 작업
+            </Typography>
+          </Stack>
+        </td>
+        <td>
+          <Stack direction="row" spacing={1} alignItems="center">
+            <Avatar size="sm" variant="soft">
+              이
+            </Avatar>
+            <Typography level="body-sm">이백엔드</Typography>
+          </Stack>
+        </td>
+        <td>
+          <Chip size="sm" variant="soft" color="warning">
+            중간
+          </Chip>
+        </td>
+        <td>
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              gap: 2
+            }}
+          >
+            <LinearProgress
+              determinate
+              value={50}
+              sx={{
+                flex: 1,
+                minWidth: 80
+              }}
+              color="warning"
+            />
+            <Typography level="body-xs">50%</Typography>
+          </Box>
+        </td>
+        <td>
+          <Typography level="body-sm" color="neutral">
+            2024-01-25
+          </Typography>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <Stack spacing={0.5}>
+            <Typography level="title-sm">테스트 작성</Typography>
+            <Typography level="body-xs" color="neutral">
+              단위 테스트 및 통합 테스트
+            </Typography>
+          </Stack>
+        </td>
+        <td>
+          <Stack direction="row" spacing={1} alignItems="center">
+            <Avatar size="sm" variant="soft">
+              박
+            </Avatar>
+            <Typography level="body-sm">박테스터</Typography>
+          </Stack>
+        </td>
+        <td>
+          <Chip size="sm" variant="soft" color="success">
+            낮음
+          </Chip>
+        </td>
+        <td>
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              gap: 2
+            }}
+          >
+            <LinearProgress
+              determinate
+              value={25}
+              sx={{
+                flex: 1,
+                minWidth: 80
+              }}
+              color="primary"
+            />
+            <Typography level="body-xs">25%</Typography>
+          </Box>
+        </td>
+        <td>
+          <Typography level="body-sm" color="neutral">
+            2024-01-30
+          </Typography>
+        </td>
+      </tr>
+    </tbody>
+  </Table>
 ```
 
 ### Sales Report with Cell Merging
@@ -578,194 +730,292 @@ A sales report table that uses complex cell merging. This example uses `rowSpan`
 
 ```tsx
 <Table aria-label="sales report table with merged cells">
-  <thead>
-    <tr>
-      <th rowSpan={2} style={{
-        textAlign: 'center',
-        verticalAlign: 'middle',
-        backgroundColor: '#f8f9fa',
-        fontWeight: 600
-      }}>
-      지역
-    </th>
-    <th colSpan={2} style={{
-      textAlign: 'center',
-      backgroundColor: '#f8f9fa',
-      fontWeight: 600
-    }}>
-    2024년 1분기
-  </th>
-  <th colSpan={2} style={{
-    textAlign: 'center',
-    backgroundColor: '#f8f9fa',
-    fontWeight: 600
-  }}>
-  2024년 2분기
-</th>
-<th rowSpan={2} style={{
-  textAlign: 'center',
-  verticalAlign: 'middle',
-  backgroundColor: '#f8f9fa',
-  fontWeight: 600
-}}>
-증감률
-</th>
-</tr>
-<tr>
-  <th style={{
-    textAlign: 'center',
-    backgroundColor: '#f0f0f0',
-    fontWeight: 500
-  }}>매출</th>
-  <th style={{
-    textAlign: 'center',
-    backgroundColor: '#f0f0f0',
-    fontWeight: 500
-  }}>목표대비</th>
-  <th style={{
-    textAlign: 'center',
-    backgroundColor: '#f0f0f0',
-    fontWeight: 500
-  }}>매출</th>
-  <th style={{
-    textAlign: 'center',
-    backgroundColor: '#f0f0f0',
-    fontWeight: 500
-  }}>목표대비</th>
-</tr>
-</thead>
-<tbody>
-  <tr>
-    <td style={{
-      fontWeight: 600
-    }}>서울</td>
-    <td style={{
-      textAlign: 'right'
-    }}>₩15,000만</td>
-    <td style={{
-      textAlign: 'center'
-    }}>
-    <Chip size="sm" variant="soft" color="success">
-      105%
-    </Chip>
-  </td>
-  <td style={{
-    textAlign: 'right'
-  }}>₩18,000만</td>
-  <td style={{
-    textAlign: 'center'
-  }}>
-  <Chip size="sm" variant="soft" color="success">
-    120%
-  </Chip>
-</td>
-<td style={{
-  textAlign: 'center'
-}}>
-<Chip size="sm" variant="soft" color="success">
-  +20%
-</Chip>
-</td>
-</tr>
-<tr>
-  <td style={{
-    fontWeight: 600
-  }}>부산</td>
-  <td style={{
-    textAlign: 'right'
-  }}>₩8,500만</td>
-  <td style={{
-    textAlign: 'center'
-  }}>
-  <Chip size="sm" variant="soft" color="warning">
-    95%
-  </Chip>
-</td>
-<td style={{
-  textAlign: 'right'
-}}>₩9,200만</td>
-<td style={{
-  textAlign: 'center'
-}}>
-<Chip size="sm" variant="soft" color="success">
-  102%
-</Chip>
-</td>
-<td style={{
-  textAlign: 'center'
-}}>
-<Chip size="sm" variant="soft" color="success">
-  +8%
-</Chip>
-</td>
-</tr>
-<tr>
-  <td style={{
-    fontWeight: 600
-  }}>대구</td>
-  <td style={{
-    textAlign: 'right'
-  }}>₩6,200만</td>
-  <td style={{
-    textAlign: 'center'
-  }}>
-  <Chip size="sm" variant="soft" color="danger">
-    88%
-  </Chip>
-</td>
-<td style={{
-  textAlign: 'right'
-}}>₩7,100만</td>
-<td style={{
-  textAlign: 'center'
-}}>
-<Chip size="sm" variant="soft" color="success">
-  110%
-</Chip>
-</td>
-<td style={{
-  textAlign: 'center'
-}}>
-<Chip size="sm" variant="soft" color="success">
-  +15%
-</Chip>
-</td>
-</tr>
-<tr style={{
-  backgroundColor: '#f8f9fa',
-  fontWeight: 600
-}}>
-<td>합계</td>
-<td style={{
-  textAlign: 'right'
-}}>₩29,700만</td>
-<td style={{
-  textAlign: 'center'
-}}>
-<Chip size="sm" variant="solid" color="primary">
-  99%
-</Chip>
-</td>
-<td style={{
-  textAlign: 'right'
-}}>₩34,300만</td>
-<td style={{
-  textAlign: 'center'
-}}>
-<Chip size="sm" variant="solid" color="primary">
-  112%
-</Chip>
-</td>
-<td style={{
-  textAlign: 'center'
-}}>
-<Chip size="sm" variant="solid" color="success">
-  +15%
-</Chip>
-</td>
-</tr>
-</tbody>
-</Table>
+    <thead>
+      <tr>
+        <th
+          rowSpan={2}
+          style={{
+            textAlign: "center",
+            verticalAlign: "middle",
+            backgroundColor: "#f8f9fa",
+            fontWeight: 600
+          }}
+        >
+          지역
+        </th>
+        <th
+          colSpan={2}
+          style={{
+            textAlign: "center",
+            backgroundColor: "#f8f9fa",
+            fontWeight: 600
+          }}
+        >
+          2024년 1분기
+        </th>
+        <th
+          colSpan={2}
+          style={{
+            textAlign: "center",
+            backgroundColor: "#f8f9fa",
+            fontWeight: 600
+          }}
+        >
+          2024년 2분기
+        </th>
+        <th
+          rowSpan={2}
+          style={{
+            textAlign: "center",
+            verticalAlign: "middle",
+            backgroundColor: "#f8f9fa",
+            fontWeight: 600
+          }}
+        >
+          증감률
+        </th>
+      </tr>
+      <tr>
+        <th
+          style={{
+            textAlign: "center",
+            backgroundColor: "#f0f0f0",
+            fontWeight: 500
+          }}
+        >
+          매출
+        </th>
+        <th
+          style={{
+            textAlign: "center",
+            backgroundColor: "#f0f0f0",
+            fontWeight: 500
+          }}
+        >
+          목표대비
+        </th>
+        <th
+          style={{
+            textAlign: "center",
+            backgroundColor: "#f0f0f0",
+            fontWeight: 500
+          }}
+        >
+          매출
+        </th>
+        <th
+          style={{
+            textAlign: "center",
+            backgroundColor: "#f0f0f0",
+            fontWeight: 500
+          }}
+        >
+          목표대비
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td
+          style={{
+            fontWeight: 600
+          }}
+        >
+          서울
+        </td>
+        <td
+          style={{
+            textAlign: "right"
+          }}
+        >
+          ₩15,000만
+        </td>
+        <td
+          style={{
+            textAlign: "center"
+          }}
+        >
+          <Chip size="sm" variant="soft" color="success">
+            105%
+          </Chip>
+        </td>
+        <td
+          style={{
+            textAlign: "right"
+          }}
+        >
+          ₩18,000만
+        </td>
+        <td
+          style={{
+            textAlign: "center"
+          }}
+        >
+          <Chip size="sm" variant="soft" color="success">
+            120%
+          </Chip>
+        </td>
+        <td
+          style={{
+            textAlign: "center"
+          }}
+        >
+          <Chip size="sm" variant="soft" color="success">
+            +20%
+          </Chip>
+        </td>
+      </tr>
+      <tr>
+        <td
+          style={{
+            fontWeight: 600
+          }}
+        >
+          부산
+        </td>
+        <td
+          style={{
+            textAlign: "right"
+          }}
+        >
+          ₩8,500만
+        </td>
+        <td
+          style={{
+            textAlign: "center"
+          }}
+        >
+          <Chip size="sm" variant="soft" color="warning">
+            95%
+          </Chip>
+        </td>
+        <td
+          style={{
+            textAlign: "right"
+          }}
+        >
+          ₩9,200만
+        </td>
+        <td
+          style={{
+            textAlign: "center"
+          }}
+        >
+          <Chip size="sm" variant="soft" color="success">
+            102%
+          </Chip>
+        </td>
+        <td
+          style={{
+            textAlign: "center"
+          }}
+        >
+          <Chip size="sm" variant="soft" color="success">
+            +8%
+          </Chip>
+        </td>
+      </tr>
+      <tr>
+        <td
+          style={{
+            fontWeight: 600
+          }}
+        >
+          대구
+        </td>
+        <td
+          style={{
+            textAlign: "right"
+          }}
+        >
+          ₩6,200만
+        </td>
+        <td
+          style={{
+            textAlign: "center"
+          }}
+        >
+          <Chip size="sm" variant="soft" color="danger">
+            88%
+          </Chip>
+        </td>
+        <td
+          style={{
+            textAlign: "right"
+          }}
+        >
+          ₩7,100만
+        </td>
+        <td
+          style={{
+            textAlign: "center"
+          }}
+        >
+          <Chip size="sm" variant="soft" color="success">
+            110%
+          </Chip>
+        </td>
+        <td
+          style={{
+            textAlign: "center"
+          }}
+        >
+          <Chip size="sm" variant="soft" color="success">
+            +15%
+          </Chip>
+        </td>
+      </tr>
+      <tr
+        style={{
+          backgroundColor: "#f8f9fa",
+          fontWeight: 600
+        }}
+      >
+        <td>합계</td>
+        <td
+          style={{
+            textAlign: "right"
+          }}
+        >
+          ₩29,700만
+        </td>
+        <td
+          style={{
+            textAlign: "center"
+          }}
+        >
+          <Chip size="sm" variant="solid" color="primary">
+            99%
+          </Chip>
+        </td>
+        <td
+          style={{
+            textAlign: "right"
+          }}
+        >
+          ₩34,300만
+        </td>
+        <td
+          style={{
+            textAlign: "center"
+          }}
+        >
+          <Chip size="sm" variant="solid" color="primary">
+            112%
+          </Chip>
+        </td>
+        <td
+          style={{
+            textAlign: "center"
+          }}
+        >
+          <Chip size="sm" variant="solid" color="success">
+            +15%
+          </Chip>
+        </td>
+      </tr>
+    </tbody>
+  </Table>
 ```
 
 ### Comparison Table
@@ -774,157 +1024,251 @@ A table for comparing plans or products. It visually represents boolean values.
 
 ```tsx
 <Table aria-label="plan comparison table">
-  <thead>
-    <tr>
-      <th style={{
-        width: '25%'
-      }}>기능</th>
-      <th style={{
-        width: '25%'
-      }}>Basic 플랜</th>
-      <th style={{
-        width: '25%'
-      }}>Pro 플랜</th>
-      <th style={{
-        width: '25%'
-      }}>Enterprise 플랜</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>
-        <Typography level="title-sm" sx={{
-          fontWeight: 600
-        }}>
-        사용자 수
-      </Typography>
-    </td>
-    <td style={{
-      textAlign: 'center'
-    }}>최대 5명</td>
-    <td style={{
-      textAlign: 'center'
-    }}>최대 50명</td>
-    <td style={{
-      textAlign: 'center'
-    }}>무제한</td>
-  </tr>
-  <tr>
-    <td>
-      <Typography level="title-sm" sx={{
-        fontWeight: 600
-      }}>
-      저장공간
-    </Typography>
-  </td>
-  <td style={{
-    textAlign: 'center'
-  }}>10GB</td>
-  <td style={{
-    textAlign: 'center'
-  }}>100GB</td>
-  <td style={{
-    textAlign: 'center'
-  }}>1TB</td>
-</tr>
-<tr>
-  <td>
-    <Typography level="title-sm" sx={{
-      fontWeight: 600
-    }}>
-    API 호출
-  </Typography>
-</td>
-<td style={{
-  textAlign: 'center'
-}}>1,000/월</td>
-<td style={{
-  textAlign: 'center'
-}}>10,000/월</td>
-<td style={{
-  textAlign: 'center'
-}}>무제한</td>
-</tr>
-<tr>
-  <td>
-    <Typography level="title-sm" sx={{
-      fontWeight: 600
-    }}>
-    고급 분석
-  </Typography>
-</td>
-<td style={{
-  textAlign: 'center'
-}}>
-<Chip size="sm" variant="soft" color="neutral">
-  ✗ 미포함
-</Chip>
-</td>
-<td style={{
-  textAlign: 'center'
-}}>
-<Chip size="sm" variant="soft" color="success">
-  ✓ 포함
-</Chip>
-</td>
-<td style={{
-  textAlign: 'center'
-}}>
-<Chip size="sm" variant="soft" color="success">
-  ✓ 포함
-</Chip>
-</td>
-</tr>
-<tr>
-  <td>
-    <Typography level="title-sm" sx={{
-      fontWeight: 600
-    }}>
-    24/7 지원
-  </Typography>
-</td>
-<td style={{
-  textAlign: 'center'
-}}>
-<Chip size="sm" variant="soft" color="neutral">
-  ✗ 미포함
-</Chip>
-</td>
-<td style={{
-  textAlign: 'center'
-}}>
-<Chip size="sm" variant="soft" color="neutral">
-  ✗ 미포함
-</Chip>
-</td>
-<td style={{
-  textAlign: 'center'
-}}>
-<Chip size="sm" variant="soft" color="success">
-  ✓ 포함
-</Chip>
-</td>
-</tr>
-<tr>
-  <td>
-    <Typography level="title-sm" sx={{
-      fontWeight: 600
-    }}>
-    가격
-  </Typography>
-</td>
-<td style={{
-  textAlign: 'center'
-}}>무료</td>
-<td style={{
-  textAlign: 'center'
-}}>₩29,000/월</td>
-<td style={{
-  textAlign: 'center'
-}}>문의</td>
-</tr>
-</tbody>
-</Table>
+    <thead>
+      <tr>
+        <th
+          style={{
+            width: "25%"
+          }}
+        >
+          기능
+        </th>
+        <th
+          style={{
+            width: "25%"
+          }}
+        >
+          Basic 플랜
+        </th>
+        <th
+          style={{
+            width: "25%"
+          }}
+        >
+          Pro 플랜
+        </th>
+        <th
+          style={{
+            width: "25%"
+          }}
+        >
+          Enterprise 플랜
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          <Typography
+            level="title-sm"
+            sx={{
+              fontWeight: 600
+            }}
+          >
+            사용자 수
+          </Typography>
+        </td>
+        <td
+          style={{
+            textAlign: "center"
+          }}
+        >
+          최대 5명
+        </td>
+        <td
+          style={{
+            textAlign: "center"
+          }}
+        >
+          최대 50명
+        </td>
+        <td
+          style={{
+            textAlign: "center"
+          }}
+        >
+          무제한
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <Typography
+            level="title-sm"
+            sx={{
+              fontWeight: 600
+            }}
+          >
+            저장공간
+          </Typography>
+        </td>
+        <td
+          style={{
+            textAlign: "center"
+          }}
+        >
+          10GB
+        </td>
+        <td
+          style={{
+            textAlign: "center"
+          }}
+        >
+          100GB
+        </td>
+        <td
+          style={{
+            textAlign: "center"
+          }}
+        >
+          1TB
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <Typography
+            level="title-sm"
+            sx={{
+              fontWeight: 600
+            }}
+          >
+            API 호출
+          </Typography>
+        </td>
+        <td
+          style={{
+            textAlign: "center"
+          }}
+        >
+          1,000/월
+        </td>
+        <td
+          style={{
+            textAlign: "center"
+          }}
+        >
+          10,000/월
+        </td>
+        <td
+          style={{
+            textAlign: "center"
+          }}
+        >
+          무제한
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <Typography
+            level="title-sm"
+            sx={{
+              fontWeight: 600
+            }}
+          >
+            고급 분석
+          </Typography>
+        </td>
+        <td
+          style={{
+            textAlign: "center"
+          }}
+        >
+          <Chip size="sm" variant="soft" color="neutral">
+            ✗ 미포함
+          </Chip>
+        </td>
+        <td
+          style={{
+            textAlign: "center"
+          }}
+        >
+          <Chip size="sm" variant="soft" color="success">
+            ✓ 포함
+          </Chip>
+        </td>
+        <td
+          style={{
+            textAlign: "center"
+          }}
+        >
+          <Chip size="sm" variant="soft" color="success">
+            ✓ 포함
+          </Chip>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <Typography
+            level="title-sm"
+            sx={{
+              fontWeight: 600
+            }}
+          >
+            24/7 지원
+          </Typography>
+        </td>
+        <td
+          style={{
+            textAlign: "center"
+          }}
+        >
+          <Chip size="sm" variant="soft" color="neutral">
+            ✗ 미포함
+          </Chip>
+        </td>
+        <td
+          style={{
+            textAlign: "center"
+          }}
+        >
+          <Chip size="sm" variant="soft" color="neutral">
+            ✗ 미포함
+          </Chip>
+        </td>
+        <td
+          style={{
+            textAlign: "center"
+          }}
+        >
+          <Chip size="sm" variant="soft" color="success">
+            ✓ 포함
+          </Chip>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <Typography
+            level="title-sm"
+            sx={{
+              fontWeight: 600
+            }}
+          >
+            가격
+          </Typography>
+        </td>
+        <td
+          style={{
+            textAlign: "center"
+          }}
+        >
+          무료
+        </td>
+        <td
+          style={{
+            textAlign: "center"
+          }}
+        >
+          ₩29,000/월
+        </td>
+        <td
+          style={{
+            textAlign: "center"
+          }}
+        >
+          문의
+        </td>
+      </tr>
+    </tbody>
+  </Table>
 ```
 
 ### Empty State Table
@@ -933,65 +1277,89 @@ A table that displays an empty state when no data is available.
 
 ```tsx
 <Stack spacing={2}>
-  <Stack direction="row" justifyContent="space-between" alignItems="center">
-    <Typography level="title-lg">사용자 목록</Typography>
-    <Button startDecorator={<AddIcon />} size="sm">
-      새 사용자 추가
-    </Button>
-  </Stack>
+    <Stack direction="row" justifyContent="space-between" alignItems="center">
+      <Typography level="title-lg">사용자 목록</Typography>
+      <Button startDecorator={<AddIcon />} size="sm">
+        새 사용자 추가
+      </Button>
+    </Stack>
 
-  <Table aria-label="empty state table">
-    <thead>
-      <tr>
-        <th style={{
-          width: '25%'
-        }}>이름</th>
-        <th style={{
-          width: '30%'
-        }}>이메일</th>
-        <th style={{
-          width: '20%'
-        }}>역할</th>
-        <th style={{
-          width: '15%'
-        }}>상태</th>
-        <th style={{
-          width: '10%'
-        }}>작업</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td colSpan={5}>
-          <Box sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-            py: 8,
-            gap: 2
-          }}>
-          <SearchIcon sx={{
-            fontSize: 48,
-            color: 'neutral.400'
-          }} />
-          <Stack spacing={1} alignItems="center">
-            <Typography level="title-md" color="neutral">
-              사용자가 없습니다
-            </Typography>
-            <Typography level="body-sm" color="neutral">
-              새 사용자를 추가하여 시작해보세요.
-            </Typography>
-          </Stack>
-          <Button variant="soft" startDecorator={<AddIcon />} size="sm">
-            사용자 추가하기
-          </Button>
-        </Box>
-      </td>
-    </tr>
-  </tbody>
-</Table>
-</Stack>
+    <Table aria-label="empty state table">
+      <thead>
+        <tr>
+          <th
+            style={{
+              width: "25%"
+            }}
+          >
+            이름
+          </th>
+          <th
+            style={{
+              width: "30%"
+            }}
+          >
+            이메일
+          </th>
+          <th
+            style={{
+              width: "20%"
+            }}
+          >
+            역할
+          </th>
+          <th
+            style={{
+              width: "15%"
+            }}
+          >
+            상태
+          </th>
+          <th
+            style={{
+              width: "10%"
+            }}
+          >
+            작업
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td colSpan={5}>
+            <Box
+              sx={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                py: 8,
+                gap: 2
+              }}
+            >
+              <SearchIcon
+                sx={{
+                  fontSize: 48,
+                  color: "neutral.400"
+                }}
+              />
+              <Stack spacing={1} alignItems="center">
+                <Typography level="title-md" color="neutral">
+                  사용자가 없습니다
+                </Typography>
+                <Typography level="body-sm" color="neutral">
+                  새 사용자를 추가하여 시작해보세요.
+                </Typography>
+              </Stack>
+              <Button variant="soft" startDecorator={<AddIcon />} size="sm">
+                사용자 추가하기
+              </Button>
+            </Box>
+          </td>
+        </tr>
+      </tbody>
+    </Table>
+  </Stack>
 ```
 
 ### Advanced Features Table
@@ -999,78 +1367,132 @@ A table that displays an empty state when no data is available.
 A table that includes advanced features such as sticky headers, scrolling, and responsiveness.
 
 ```tsx
-<Box sx={{
-  maxHeight: 400,
-  overflow: 'auto'
-}}>
-<Table aria-label="advanced features table" hoverRow stickyHeader sx={{
-  '& th': {
-    position: 'sticky',
-    top: 0,
-    backgroundColor: 'background.surface',
-    zIndex: 1
-  }
-}}>
-<thead>
-  <tr>
-    <th style={{
-      width: '8%',
-      textAlign: 'right'
-    }}>ID</th>
-    <th style={{
-      width: '20%'
-    }}>제품명</th>
-    <th style={{
-      width: '30%'
-    }}>설명</th>
-    <th style={{
-      width: '12%'
-    }}>카테고리</th>
-    <th style={{
-      width: '12%',
-      textAlign: 'right'
-    }}>가격</th>
-    <th style={{
-      width: '8%',
-      textAlign: 'right'
-    }}>재고</th>
-    <th style={{
-      width: '10%'
-    }}>등록일</th>
-  </tr>
-</thead>
-<tbody>
-  {advancedRows.map(row => <tr key={row.id}>
-  <td style={{
-    textAlign: 'right'
-  }}>{row.id}</td>
-  <td>{row.name}</td>
-  <td>
-    <Typography level="body-sm" sx={{
-      maxWidth: 200,
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap'
-    }}>
-    {row.description}
-  </Typography>
-</td>
-<td>{row.category}</td>
-<td style={{
-  textAlign: 'right'
-}}>₩{Number(row.price).toLocaleString()}</td>
-<td style={{
-  textAlign: 'right'
-}}>
-<Chip size="sm" variant="soft" color={row.stock > 50 ? 'success' : row.stock > 10 ? 'warning' : 'danger'}>
-  {row.stock}
-</Chip>
-</td>
-<td>{row.createdAt}</td>
-</tr>)}
-</tbody>
-</Table>
-</Box>
+<Box
+    sx={{
+      maxHeight: 400,
+      overflow: "auto"
+    }}
+  >
+    <Table
+      aria-label="advanced features table"
+      hoverRow
+      stickyHeader
+      sx={{
+        "& th": {
+          position: "sticky",
+          top: 0,
+          backgroundColor: "background.surface",
+          zIndex: 1
+        }
+      }}
+    >
+      <thead>
+        <tr>
+          <th
+            style={{
+              width: "8%",
+              textAlign: "right"
+            }}
+          >
+            ID
+          </th>
+          <th
+            style={{
+              width: "20%"
+            }}
+          >
+            제품명
+          </th>
+          <th
+            style={{
+              width: "30%"
+            }}
+          >
+            설명
+          </th>
+          <th
+            style={{
+              width: "12%"
+            }}
+          >
+            카테고리
+          </th>
+          <th
+            style={{
+              width: "12%",
+              textAlign: "right"
+            }}
+          >
+            가격
+          </th>
+          <th
+            style={{
+              width: "8%",
+              textAlign: "right"
+            }}
+          >
+            재고
+          </th>
+          <th
+            style={{
+              width: "10%"
+            }}
+          >
+            등록일
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        {advancedRows.map((row) => (
+          <tr key={row.id}>
+            <td
+              style={{
+                textAlign: "right"
+              }}
+            >
+              {row.id}
+            </td>
+            <td>{row.name}</td>
+            <td>
+              <Typography
+                level="body-sm"
+                sx={{
+                  maxWidth: 200,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap"
+                }}
+              >
+                {row.description}
+              </Typography>
+            </td>
+            <td>{row.category}</td>
+            <td
+              style={{
+                textAlign: "right"
+              }}
+            >
+              ₩{Number(row.price).toLocaleString()}
+            </td>
+            <td
+              style={{
+                textAlign: "right"
+              }}
+            >
+              <Chip
+                size="sm"
+                variant="soft"
+                color={row.stock > 50 ? "success" : row.stock > 10 ? "warning" : "danger"}
+              >
+                {row.stock}
+              </Chip>
+            </td>
+            <td>{row.createdAt}</td>
+          </tr>
+        ))}
+      </tbody>
+    </Table>
+  </Box>
 ```
 
 ### Drag and Drop Headers Table
@@ -1079,50 +1501,70 @@ A table that uses `@atlaskit/pragmatic-drag-and-drop` so headers can be dragged
 
 ```tsx
 <Stack spacing={3}>
-  <Stack spacing={1}>
-    <Typography level="title-lg">드래그 앤 드롭 헤더 재정렬 테이블</Typography>
-    <Typography level="body-sm" color="neutral">
-      헤더를 드래그하여 컬럼 순서를 변경할 수 있습니다. 드래그 아이콘을 클릭하고 드래그하세요.
-    </Typography>
-  </Stack>
+    <Stack spacing={1}>
+      <Typography level="title-lg">드래그 앤 드롭 헤더 재정렬 테이블</Typography>
+      <Typography level="body-sm" color="neutral">
+        헤더를 드래그하여 컬럼 순서를 변경할 수 있습니다. 드래그 아이콘을 클릭하고 드래그하세요.
+      </Typography>
+    </Stack>
 
-  <Table aria-label="drag and drop headers table" hoverRow>
-    <thead>
-      <tr>
-        {columns.map((column, index) => <DraggableHeader key={column.key} columnKey={column.key} index={index} onReorder={handleReorder}>
-        <Typography level="title-sm" fontWeight="lg">
-          {column.label}
-        </Typography>
-      </DraggableHeader>)}
-    </tr>
-  </thead>
-  <tbody>
-    {sampleData.map(row => <tr key={`${row.name}-${row.email}`}>
-    {columns.map(column => <td key={column.key} style={{
-      width: column.width
-    }}>
-    {renderCellContent(column.key, row)}
-  </td>)}
-</tr>)}
-</tbody>
-</Table>
+    <Table aria-label="drag and drop headers table" hoverRow>
+      <thead>
+        <tr>
+          {columns.map((column, index) => (
+            <DraggableHeader
+              key={column.key}
+              columnKey={column.key}
+              index={index}
+              onReorder={handleReorder}
+            >
+              <Typography level="title-sm" fontWeight="lg">
+                {column.label}
+              </Typography>
+            </DraggableHeader>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {sampleData.map((row) => (
+          <tr key={`${row.name}-${row.email}`}>
+            {columns.map((column) => (
+              <td
+                key={column.key}
+                style={{
+                  width: column.width
+                }}
+              >
+                {renderCellContent(column.key, row)}
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </Table>
 
-<Box sx={{
-  mt: 2,
-  p: 2,
-  bgcolor: 'background.level1',
-  borderRadius: 'sm'
-}}>
-<Typography level="body-sm" fontWeight="lg" sx={{
-  mb: 1
-}}>
-현재 컬럼 순서:
-</Typography>
-<Typography level="body-sm" color="neutral">
-  {columns.map(col => col.label).join(' → ')}
-</Typography>
-</Box>
-</Stack>
+    <Box
+      sx={{
+        mt: 2,
+        p: 2,
+        bgcolor: "background.level1",
+        borderRadius: "sm"
+      }}
+    >
+      <Typography
+        level="body-sm"
+        fontWeight="lg"
+        sx={{
+          mb: 1
+        }}
+      >
+        현재 컬럼 순서:
+      </Typography>
+      <Typography level="body-sm" color="neutral">
+        {columns.map((col) => col.label).join(" → ")}
+      </Typography>
+    </Box>
+  </Stack>
 ```
 
 ## Detailed Code Examples
@@ -1151,10 +1593,7 @@ function SimpleTable() {
   return (
     <Table aria-label="simple table" hoverRow>
       <TableHead headCells={headCells} />
-      <TableBody
-        rows={rows}
-        cellOrder={['name', 'email', 'role']}
-      />
+      <TableBody rows={rows} cellOrder={['name', 'email', 'role']} />
     </Table>
   );
 }
@@ -1184,7 +1623,9 @@ function ComplexTable() {
         <tr>
           <td>
             <Stack direction="row" spacing={2} alignItems="center">
-              <Avatar size="sm" variant="soft" color="primary">김</Avatar>
+              <Avatar size="sm" variant="soft" color="primary">
+                김
+              </Avatar>
               <Stack spacing={0}>
                 <Typography level="title-sm">김철수</Typography>
                 <Typography level="body-xs" color="neutral">
@@ -1248,14 +1689,17 @@ The Table component supports various advanced features:
 Keeps the header fixed while scrolling:
 
 ```tsx
-<Table stickyHeader sx={{
-  '& th': {
-    position: 'sticky',
-    top: 0,
-    backgroundColor: 'background.surface',
-    zIndex: 1,
-  }
-}}>
+<Table
+  stickyHeader
+  sx={{
+    '& th': {
+      position: 'sticky',
+      top: 0,
+      backgroundColor: 'background.surface',
+      zIndex: 1,
+    },
+  }}
+>
   {/* Table content */}
 </Table>
 ```
@@ -1284,14 +1728,16 @@ Displays an appropriate empty state when no data is available:
 Guidance for responsive design:
 
 ```tsx
-<Table sx={{
-  '@media (max-width: 768px)': {
-    '& td, & th': {
-      fontSize: 'sm',
-      px: 1,
-    }
-  }
-}}>
+<Table
+  sx={{
+    '@media (max-width: 768px)': {
+      '& td, & th': {
+        fontSize: 'sm',
+        px: 1,
+      },
+    },
+  }}
+>
   {/* Table content */}
 </Table>
 ```