@mindlogic-ai/logician-ui 5.0.0-alpha.1 → 5.0.0-alpha.11

package/src/components/Switch/Switch.usage.mdx

@@ -0,0 +1,199 @@
+import { ArgTypes, Canvas, Meta } from '@storybook/blocks';
+
+import { En, Ko, LangToggle, Verdict } from '../../guidelines/_components/Lang';
+import * as SwitchStories from './Switch.stories';
+
+<Meta of={SwitchStories} name="Usage" />
+
+<LangToggle />
+
+<En>
+
+# Switch
+
+A toggle for one setting that is either on or off.
+
+## When to use
+
+- A single feature or setting the user turns on or off: pin an announcement,
+  show it as a pop-up, enable a connector.
+- A row in a settings list, with the label on the left and the switch at the
+  end.
+
+## When not to use
+
+- Picking items from a list, or several choices that belong together →
+  `Checkbox`.
+- Agreeing to something → `Checkbox`. "On" is not the same as "I agree".
+- One of more than two states → `Radio` or `SelectField`.
+
+## Props
+
+</En>
+
+<Ko>
+
+# Switch
+
+켜거나 끄는 설정 하나를 바꾸는 토글입니다.
+
+## 언제 쓰나요
+
+- 사용자가 켜거나 끄는 기능이나 설정 하나: 공지 상단 고정, 팝업으로 보여 주기, 커넥터
+  사용.
+- 설정 목록의 한 행. 라벨은 왼쪽에, 스위치는 행 끝에 둡니다.
+
+## 언제 쓰지 않나요
+
+- 목록에서 항목을 고르거나, 함께 묶이는 여러 선택은 `Checkbox`를 씁니다.
+- 동의를 받을 때는 `Checkbox`를 씁니다. "켜짐"은 "동의합니다"와 다릅니다.
+- 상태가 셋 이상이라면 `Radio`나 `SelectField`를 씁니다.
+
+## 속성
+
+</Ko>
+
+<ArgTypes
+  of={SwitchStories}
+  include={['checked', 'defaultChecked', 'onCheckedChange', 'disabled', 'size']}
+/>
+
+<En>
+
+Compose it from `<Switch>`, `<Switch.Control />` and `<Switch.Label>`. The
+root is the click target, so the label toggles it too. The thumb settles with
+a small overshoot; under reduced motion it moves without it.
+
+If the change is saved the moment the switch flips, say so on the screen (a
+toast, or a "saved" line). If it is saved with the rest of the form, keep it
+in the form and save on submit, the same as every other field.
+
+## Do / Don't
+
+</En>
+
+<Ko>
+
+`<Switch>`, `<Switch.Control />`, `<Switch.Label>`을 조합해서 씁니다. 루트 전체를 눌러도
+되므로 라벨을 눌러도 바뀝니다. 손잡이는 살짝 지나쳤다가 제자리에 멈추고, 동작 줄이기
+설정에서는 그 움직임 없이 옮겨 갑니다.
+
+스위치를 바꾸는 순간 저장된다면 화면에서 그렇게 알려 줍니다(토스트나 "저장됨" 문구).
+폼의 다른 값과 함께 저장된다면 다른 필드처럼 폼 안에 두고 제출할 때 저장합니다.
+
+## 이렇게 하세요 / 이렇게 하지 마세요
+
+</Ko>
+
+<Canvas of={SwitchStories.DoSettingRow} />
+<Verdict
+  kind="do"
+  en="Name the setting in the label, describe its effect in a muted line, and put the switch at the end of the row."
+  ko="라벨에 설정 이름을 쓰고, 효과는 흐린 글자로 한 줄 덧붙이며, 스위치는 행 끝에 둡니다."
+/>
+
+<Canvas of={SwitchStories.DontStateInLabel} />
+<Verdict
+  kind="dont"
+  en="Make the label say the current state. The label should name the setting; the switch already shows the state, and a screen reader announces it."
+  ko="라벨에 현재 상태를 쓰지 마세요. 라벨은 설정의 이름이어야 합니다. 상태는 스위치가 이미 보여 주고, 화면 낭독기도 읽어 줍니다."
+/>
+
+<Canvas of={SwitchStories.DontSwitchList} />
+<Verdict
+  kind="dont"
+  en="Use switches to pick items from a list. Teams are not settings that are on or off."
+  ko="목록에서 항목을 고르는 데 스위치를 쓰지 마세요. 팀은 켜고 끄는 설정이 아닙니다."
+/>
+
+<Canvas of={SwitchStories.DoCheckboxList} />
+<Verdict
+  kind="do"
+  en="Use checkboxes to pick items."
+  ko="항목을 고를 때는 체크박스를 씁니다."
+/>
+
+<En>
+
+## Content
+
+- The label names the setting or feature (상단에 고정), not the action (고정하기)
+  and not the state (켜짐).
+- One muted line under the label says what changes when it is on.
+- No question marks.
+
+## Accessibility
+
+What Switch does for you:
+
+- A native checkbox input carries the state, so Tab focuses it and Space
+  toggles it.
+- The keyboard focus ring shows on the track (WCAG 2.4.7). The off track is
+  `bg.track`, a filled track that stays visible on any surface (WCAG 1.4.11).
+
+What you still have to do:
+
+- **Always render `Switch.Label`** (with `srOnly` if the row's title is
+  elsewhere). Without it the switch has no name (WCAG 4.1.2; KWCAG 5.3.4.1
+  레이블 제공).
+- Position, not colour, shows the state; keep the default thumb so it stays
+  that way (WCAG 1.4.1).
+- If flipping it saves immediately, announce the result (a toast), so the
+  user knows the change was not lost (WCAG 4.1.3).
+
+## Tokens
+
+</En>
+
+<Ko>
+
+## 문구
+
+- 라벨에는 설정이나 기능의 이름을 씁니다(상단에 고정). 동작(고정하기)이나 상태(켜짐)는
+  쓰지 않습니다.
+- 라벨 아래 흐린 글자 한 줄로 켜면 무엇이 달라지는지 씁니다.
+- 물음표를 쓰지 않습니다.
+
+## 접근성
+
+Switch가 알아서 하는 일
+
+- 상태는 네이티브 체크박스 입력이 가지고 있어서 Tab으로 초점을 옮기고 Space로 바꿀 수
+  있습니다.
+- 키보드 초점 링이 트랙에 보입니다(WCAG 2.4.7). 꺼짐 트랙은 어떤 면 위에서도 보이도록
+  채워진 `bg.track`을 씁니다(WCAG 1.4.11).
+
+직접 챙겨야 하는 일
+
+- **`Switch.Label`을 항상 그립니다.** 행 제목이 다른 곳에 있다면 `srOnly`를 줍니다.
+  라벨이 없으면 스위치에 이름이 없습니다(WCAG 4.1.2, KWCAG 5.3.4.1 레이블 제공).
+- 상태는 색이 아니라 손잡이 위치로 드러납니다. 기본 손잡이를 그대로 두어 이 점을
+  지킵니다(WCAG 1.4.1).
+- 바꾸는 즉시 저장된다면 토스트 등으로 결과를 알려, 바뀐 내용이 사라지지 않았다는 것을
+  알 수 있게 합니다(WCAG 4.1.3).
+
+## 토큰
+
+</Ko>
+
+<Canvas of={SwitchStories.UsageTokens} sourceState="none" />
+
+<En>
+
+## Related
+
+- **Checkbox**: picking items, agreeing.
+- **Radio** / **SelectField**: more than two states.
+- **Toast**: confirming a change that saved immediately.
+
+</En>
+
+<Ko>
+
+## 관련 컴포넌트
+
+- **Checkbox**: 항목 고르기, 동의.
+- **Radio** / **SelectField**: 상태가 셋 이상일 때.
+- **Toast**: 바로 저장된 변경 알림.
+
+</Ko>

package/src/components/Table/Table.stories.tsx

@@ -2,9 +2,13 @@ import { useState } from 'react';
 import { Flex } from '@chakra-ui/react';
 import { Meta, StoryObj } from '@storybook/react';
 
+import { TokenTable } from '../../guidelines/_components/TokenTable';
+import { tableSlotRecipe } from '../../theme/recipes/table';
+import { Badge } from '../Badge';
 import { Button } from '../Button';
 import { IoChevronDownOutline } from '../Icon';
 import { IconButton } from '../IconButton';
+import { Link } from '../Typography';
 import {
   ExpandingTr,
   Table,
@@ -126,7 +130,7 @@ export const Default: Story = {
 /**
  * Rows that receive `onClick` (or `role="button"` / `tabIndex`) automatically
  * get the interactive treatment from the table recipe: pointer cursor,
- * `bg.muted` hover, and a focus-visible outline. Static rows never highlight.
+ * `primary.wash` hover, and a focus-visible outline. Static rows never highlight.
  */
 export const InteractiveRows: Story = {
   render: (args) => (
@@ -699,3 +703,157 @@ export const StickyOffsetsSurvivePagination: Story = {
   args: { width: '220%' },
   argTypes: {},
 };
+
+// ───────────────────────── Usage-page specimens ─────────────────────────
+// Pulled into `Table.usage.mdx` with <Canvas of={…} />. Hidden from the
+// sidebar (`!dev`); `tags` is written out on each story because the indexer
+// reads CSF statically.
+
+const USAGE_ROWS = [
+  { name: '김지민', group: '마케팅', credits: 12480, status: 'ok' },
+  { name: '이서준', group: '영업', credits: 830, status: 'ok' },
+  { name: '박하은', group: '개발', credits: 0, status: 'invalid' },
+] as const;
+
+export const DoNumbersAligned: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: 'Usage / Do: a link in the name cell, numbers aligned to the end',
+  render: () => (
+    <TableContainer maxW="520px">
+      <Table>
+        <Thead>
+          <Tr>
+            <Th>이름</Th>
+            <Th>그룹</Th>
+            <Th textAlign="end">사용 크레딧</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          {USAGE_ROWS.map((row) => (
+            <Tr key={row.name}>
+              <Td>
+                <Link href={`#member-${row.name}`}>{row.name}</Link>
+              </Td>
+              <Td>{row.group}</Td>
+              <Td textAlign="end" fontVariantNumeric="tabular-nums">
+                {row.credits.toLocaleString('ko-KR')}
+              </Td>
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+    </TableContainer>
+  ),
+};
+
+export const DoStateWithWords: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: 'Usage / Do: a row state backed by words',
+  render: () => (
+    <TableContainer maxW="520px">
+      <Table>
+        <Thead>
+          <Tr>
+            <Th>이름</Th>
+            <Th>상태</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          {USAGE_ROWS.map((row) => (
+            <Tr
+              key={row.name}
+              state={row.status === 'invalid' ? 'invalid' : undefined}
+            >
+              <Td>{row.name}</Td>
+              <Td>
+                {row.status === 'invalid' ? (
+                  <Badge variant="danger">이메일 오류</Badge>
+                ) : (
+                  <Badge variant="success">정상</Badge>
+                )}
+              </Td>
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+    </TableContainer>
+  ),
+};
+
+export const DontStateColourOnly: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: "Usage / Don't: a tinted row with no words",
+  render: () => (
+    <TableContainer maxW="520px">
+      <Table>
+        <Thead>
+          <Tr>
+            <Th>이름</Th>
+            <Th>그룹</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          {USAGE_ROWS.map((row) => (
+            <Tr
+              key={row.name}
+              state={row.status === 'invalid' ? 'invalid' : undefined}
+            >
+              <Td>{row.name}</Td>
+              <Td>{row.group}</Td>
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+    </TableContainer>
+  ),
+};
+
+/**
+ * Every colour token in the table slot recipe (`theme/recipes/table.ts`),
+ * collected by walking the recipe, so a recipe change shows up here.
+ */
+const recipeTokens = (
+  node: unknown,
+  path: string[] = []
+): { token: string; use: string }[] => {
+  if (typeof node === 'string') {
+    return /^[a-z]+(\.[a-zA-Z0-9]+)+$/.test(node)
+      ? [{ token: node, use: path.join(' › ') }]
+      : [];
+  }
+  if (node && typeof node === 'object') {
+    return Object.entries(node).flatMap(([key, value]) =>
+      recipeTokens(value, [...path, key])
+    );
+  }
+  return [];
+};
+
+/** One row per token; the places it is read from are listed together. */
+const mergeByToken = (rows: { token: string; use: string }[]) =>
+  [...new Set(rows.map((row) => row.token))].map((token) => ({
+    token,
+    use: rows
+      .filter((row) => row.token === token)
+      .map((row) => row.use)
+      .join(', '),
+  }));
+
+export const UsageTokens: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: 'Usage / Tokens',
+  render: () => (
+    <TokenTable
+      rows={mergeByToken([
+        ...recipeTokens(tableSlotRecipe.base),
+        { token: 'border.subtle', use: 'TableContainer › border' },
+        { token: 'bg.subtle', use: 'Th isSticky › background' },
+        { token: 'bg.surface', use: 'Td isSticky › background' },
+      ])}
+    />
+  ),
+};

package/src/components/Table/Table.usage.mdx

@@ -0,0 +1,235 @@
+import { ArgTypes, Canvas, Meta } from '@storybook/blocks';
+
+import { En, Ko, LangToggle, Verdict } from '../../guidelines/_components/Lang';
+import * as TableStories from './Table.stories';
+import { Tr } from './Tr';
+
+<Meta of={TableStories} name="Usage" />
+
+<LangToggle />
+
+<En>
+
+# Table
+
+Rows of records that share the same columns, for reading and comparing
+values: members, usage, invoices, API keys.
+
+`TableContainer` › `Table` › `Thead` / `Tbody` › `Tr` › `Th` / `Td`. The
+container draws the rounded border, scrolls horizontally, and tracks scroll
+position for sticky columns.
+
+## When to use
+
+- A list where each item has the same attributes and the reader compares
+  across rows: a member list, usage by model, call history.
+- When the reader scans a column (a date, an amount, a status).
+
+## When not to use
+
+- Items that are read one at a time and have different shapes → `Card` in a
+  list or grid.
+- Two to five label–value pairs about one thing → a plain stack of `Text`.
+- A hierarchy (groups inside groups) → `Tree`.
+- Page layout. A table is for data only.
+
+## Row states and options
+
+</En>
+
+<Ko>
+
+# Table
+
+같은 열을 가진 기록을 행으로 늘어놓고 값을 읽고 비교하게 하는 컴포넌트입니다.
+멤버, 사용량, 청구서, API 키 목록에 씁니다.
+
+구조는 `TableContainer` › `Table` › `Thead` / `Tbody` › `Tr` › `Th` / `Td`입니다.
+컨테이너가 둥근 테두리를 그리고, 가로 스크롤을 맡고, 고정 열을 위해 스크롤 위치를
+추적합니다.
+
+## 언제 쓰나요
+
+- 항목마다 같은 속성이 있고 행끼리 비교해 읽는 목록: 멤버 목록, 모델별 사용량, 호출
+  기록.
+- 읽는 사람이 한 열(날짜, 금액, 상태)을 훑어볼 때.
+
+## 언제 쓰지 않나요
+
+- 하나씩 읽는 항목이고 모양이 서로 다르다면 목록이나 격자 안의 `Card`를 씁니다.
+- 한 대상의 라벨과 값 두세 쌍이라면 `Text`를 쌓아서 보여 줍니다.
+- 그룹 안의 그룹 같은 계층은 `Tree`를 씁니다.
+- 페이지 레이아웃에는 쓰지 않습니다. 표는 데이터에만 씁니다.
+
+## 행 상태와 옵션
+
+</Ko>
+
+<ArgTypes of={Tr} include={['state']} />
+
+<En>
+
+| Option | Means | Use for |
+| --- | --- | --- |
+| `<Tr state="selected">` | The row is part of the current selection (`primary.selected`) | Rows ticked for a bulk action |
+| `<Tr state="invalid">` | Something in the row is wrong (`bg.invalid.subtle`) | A failed import row |
+| `<Tr state="highlighted">` | Draw the eye to one row (`bg.highlighted`) | The row just added or edited |
+| `onClick` / `tabIndex` / `role="button"` on `Tr` | The row is clickable; it gets the pointer, `primary.wash` hover and a focus outline | Opening a detail drawer |
+| `<Thead sticky>` | The header stays at the top of the scroll area | Long lists in a fixed-height container |
+| `isSticky` + `stickyDirection` + `stickyIndex` on `Th`/`Td` | The column stays put while the table scrolls sideways | A name column on a wide table |
+| `Td wrap` | Long text wraps instead of being cut off | Addresses, descriptions |
+| `ExpandingTr` | A row with a detail row under it, opened by `isExpanded` | Error details for one row |
+
+## Do / Don't
+
+</En>
+
+<Ko>
+
+| 옵션 | 뜻 | 쓰는 곳 |
+| --- | --- | --- |
+| `<Tr state="selected">` | 현재 선택에 포함된 행(`primary.selected`) | 일괄 작업을 위해 체크한 행 |
+| `<Tr state="invalid">` | 행 안의 무언가가 잘못됨(`bg.invalid.subtle`) | 가져오기에 실패한 행 |
+| `<Tr state="highlighted">` | 한 행으로 눈길을 끎(`bg.highlighted`) | 방금 추가하거나 고친 행 |
+| `Tr`의 `onClick` / `tabIndex` / `role="button"` | 누를 수 있는 행. 포인터, `primary.wash` 호버, 초점 테두리가 생김 | 상세 서랍 열기 |
+| `<Thead sticky>` | 스크롤해도 머리글이 위에 남음 | 높이가 정해진 영역 안의 긴 목록 |
+| `Th`/`Td`의 `isSticky` + `stickyDirection` + `stickyIndex` | 표를 옆으로 스크롤해도 그 열은 그대로 있음 | 넓은 표의 이름 열 |
+| `Td wrap` | 긴 글을 자르지 않고 줄바꿈함 | 주소, 설명 |
+| `ExpandingTr` | 아래에 상세 행이 붙은 행. `isExpanded`로 엶 | 한 행의 오류 상세 |
+
+## 이렇게 하세요 / 이렇게 하지 마세요
+
+</Ko>
+
+<Canvas of={TableStories.DoNumbersAligned} />
+<Verdict
+  kind="do"
+  en="Put a real link in the name cell, and align numbers to the end with tabular figures so they line up."
+  ko="이름 칸에는 실제 링크를 두고, 숫자는 끝에 맞추고 고정폭 숫자를 써서 자릿수가 맞게 합니다."
+/>
+
+<Canvas of={TableStories.DoStateWithWords} />
+<Verdict
+  kind="do"
+  en="Back a row state with words in a cell. The tint draws the eye; the Badge says what is wrong."
+  ko="행 상태는 칸 안의 문구로 함께 알립니다. 배경색은 눈길을 끌고, Badge가 무엇이 잘못됐는지 말합니다."
+/>
+
+<Canvas of={TableStories.DontStateColourOnly} />
+<Verdict
+  kind="dont"
+  en="Rely on the row tint alone. A screen reader does not announce it, and in some modes it is hard to see at all."
+  ko="행 배경색만으로 알리지 마세요. 화면 낭독기는 배경색을 읽지 않고, 모드에 따라 거의 보이지 않기도 합니다."
+/>
+
+<En>
+
+## Content
+
+- Column headers are short nouns: 이름, 그룹, 사용 크레딧. Put the unit in
+  the header, not in every cell.
+- Numbers and amounts align to the end (`textAlign="end"`); text aligns to the
+  start.
+- An empty value is "—", not a blank cell, so the reader knows nothing is
+  missing from the page.
+- Keep a status in its own column with a `Badge`, rather than colouring a
+  whole row.
+
+## Accessibility
+
+What Table does for you:
+
+- It renders native table elements (`<table>`, `<th>`, `<td>`), so screen
+  readers announce row and column positions.
+- A clickable `Tr` gets a pointer, a hover tint and a 2px inset focus
+  outline when focused from the keyboard. Static rows never highlight.
+- Sticky header and sticky columns get an opaque background, so text never
+  shows through.
+
+What you still have to do:
+
+- **A clickable row is not a button by itself.** `Tr` only styles it. Give
+  it `tabIndex={0}` and handle Enter in `onKeyDown` (WCAG 2.1.1), or better,
+  put a real link or button in the row and let that be the target (WCAG
+  4.1.2). Never put a button inside a row that is also `role="button"`
+  (nested interactive controls, see `ACCESSIBILITY.md` §3).
+- **Row states need words** (WCAG 1.4.1). `state` only tints the row.
+- **Name icon-only buttons in cells**: `aria-label` on the `IconButton`
+  (WCAG 4.1.2). For an `ExpandingTr` toggle, also pass `aria-expanded`.
+- Give the table a caption or a heading next to it so it has a name
+  (WCAG 1.3.1).
+- A cell cut off with an ellipsis hides content. Use `wrap`, or make the full
+  value available another way (WCAG 1.4.10).
+
+## Tokens
+
+Read from the table slot recipe (`theme/recipes/table.ts`) and the sticky
+styles in `Table.styles.ts`.
+
+</En>
+
+<Ko>
+
+## 문구
+
+- 열 머리글은 짧은 명사로 씁니다: 이름, 그룹, 사용 크레딧. 단위는 칸마다 쓰지 않고
+  머리글에 씁니다.
+- 숫자와 금액은 끝에 맞추고(`textAlign="end"`), 글은 앞에 맞춥니다.
+- 값이 없으면 빈칸 대신 "—"를 써서, 화면에서 빠진 것이 없다는 것을 알립니다.
+- 상태는 행 전체에 색을 칠하지 않고 `Badge`로 따로 열을 둡니다.
+
+## 접근성
+
+Table이 알아서 하는 일
+
+- 기본 표 요소(`<table>`, `<th>`, `<td>`)로 그리므로 화면 낭독기가 행과 열의 위치를
+  읽어 줍니다.
+- 누를 수 있는 `Tr`에는 포인터, 호버 배경, 키보드 초점 시 안쪽 2px 테두리가 생깁니다.
+  누를 수 없는 행은 강조되지 않습니다.
+- 고정 머리글과 고정 열은 불투명한 배경을 가지므로 뒤의 글자가 비치지 않습니다.
+
+직접 챙겨야 하는 일
+
+- **누를 수 있는 행이 저절로 버튼이 되지는 않습니다.** `Tr`은 모양만 바꿉니다.
+  `tabIndex={0}`를 주고 `onKeyDown`에서 Enter를 처리하거나(WCAG 2.1.1), 행 안에 실제
+  링크나 버튼을 두고 그것을 누르게 하는 편이 낫습니다(WCAG 4.1.2). `role="button"`인
+  행 안에 다시 버튼을 넣지 않습니다(상호작용 요소 중첩, `ACCESSIBILITY.md` 3절).
+- **행 상태는 문구로도 알립니다**(WCAG 1.4.1). `state`는 배경색만 바꿉니다.
+- **칸 안의 아이콘 버튼에는 이름을 붙입니다.** `IconButton`에 `aria-label`을 줍니다
+  (WCAG 4.1.2). `ExpandingTr`을 여닫는 버튼에는 `aria-expanded`도 줍니다.
+- 표에 캡션을 달거나 옆에 제목을 두어 이름을 붙입니다(WCAG 1.3.1).
+- 말줄임표로 잘린 칸은 내용을 숨깁니다. `wrap`을 쓰거나 전체 값을 다른 방법으로
+  볼 수 있게 합니다(WCAG 1.4.10).
+
+## 토큰
+
+표 슬롯 레시피(`theme/recipes/table.ts`)와 `Table.styles.ts`의 고정 열 스타일에서
+읽습니다.
+
+</Ko>
+
+<Canvas of={TableStories.UsageTokens} sourceState="none" />
+
+<En>
+
+## Related
+
+- **Badge**: a status in its own column.
+- **Pagination**: long lists split into pages.
+- **Checkbox**: row selection for bulk actions, with `state="selected"`.
+- **Tree**: hierarchical data.
+- **Card**: items with different shapes.
+
+</En>
+
+<Ko>
+
+## 관련 컴포넌트
+
+- **Badge**: 따로 둔 열의 상태 표시.
+- **Pagination**: 긴 목록을 쪽으로 나눕니다.
+- **Checkbox**: 일괄 작업을 위한 행 선택. `state="selected"`와 함께 씁니다.
+- **Tree**: 계층이 있는 데이터.
+- **Card**: 모양이 서로 다른 항목.
+
+</Ko>