@mindlogic-ai/logician-ui 5.0.0-alpha.2 → 5.0.0-alpha.4

package/src/components/ExpandableText/ExpandableText.usage.mdx

@@ -0,0 +1,176 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
+import { En, Ko, LangToggle, Verdict } from '../../guidelines/_components/Lang';
+import * as ExpandableTextStories from './ExpandableText.stories';
+
+<Meta of={ExpandableTextStories} name="Usage" />
+
+<LangToggle />
+
+<En>
+
+# ExpandableText
+
+Text clipped to a number of lines, with a 더보기 / 접기 link that opens it.
+Opening animates the height, so the content below slides down rather than
+jumping. The link appears only when the text actually overflows.
+
+## When to use
+
+- A long secondary description in a card or a header: a chatbot's
+  description, an announcement preview, an image prompt in a history list.
+
+## When not to use
+
+- The main content the reader came for → show it in full.
+- Warnings, prices, terms, or anything the reader must not miss → show it in
+  full.
+- A section with a heading and structure → `Collapsible`.
+
+## Props
+
+| Prop | Means |
+| --- | --- |
+| `lineClamp` | Lines shown while closed. Default `3`. |
+| `component` | The typography tier that wraps it: `Text` (default), `Subtitle`, `Subtext`, `H1`–`H5`. Other props go to that component. |
+| `charLimit` | Deprecated and ignored. Truncation is by line. |
+
+## Do / Don't
+
+</En>
+
+<Ko>
+
+# ExpandableText
+
+정해진 줄 수만큼만 보여 주고, '더보기' / '접기' 링크로 펼치는 글입니다. 펼칠 때 높이가
+움직이므로 아래 내용이 갑자기 튀지 않고 밀려 내려갑니다. 링크는 글이 실제로 넘칠 때만
+나타납니다.
+
+## 언제 쓰나요
+
+- 카드나 머리 영역의 긴 보조 설명: 챗봇 설명, 공지 미리보기, 이미지 기록 목록의
+  프롬프트.
+
+## 언제 쓰지 않나요
+
+- 읽는 사람이 보러 온 본 내용은 전부 보여 줍니다.
+- 경고, 가격, 약관처럼 놓치면 안 되는 내용은 전부 보여 줍니다.
+- 제목과 구조가 있는 섹션은 `Collapsible`을 씁니다.
+
+## 속성
+
+| 속성 | 뜻 |
+| --- | --- |
+| `lineClamp` | 접혀 있을 때 보여 줄 줄 수. 기본값 `3`. |
+| `component` | 감싸는 글자 단계: `Text`(기본값), `Subtitle`, `Subtext`, `H1`–`H5`. 나머지 속성은 이 컴포넌트로 넘어갑니다. |
+| `charLimit` | deprecated이며 무시됩니다. 글은 줄 단위로 자릅니다. |
+
+## 이렇게 하세요 / 이렇게 하지 마세요
+
+</Ko>
+
+<Canvas of={ExpandableTextStories.DoSecondaryDescription} />
+<Verdict
+  kind="do"
+  en="Clip a long secondary description so the cards in a row stay the same height."
+  ko="긴 보조 설명을 접어서, 한 줄에 놓인 카드들의 높이를 맞춥니다."
+/>
+
+<Canvas of={ExpandableTextStories.DontClipTheMessage} />
+<Verdict
+  kind="dont"
+  en="Clip a warning. The consequence sits behind 더보기, where most people never look."
+  ko="경고를 접지 마세요. 결과가 '더보기' 뒤에 숨어 대부분의 사람이 보지 못합니다."
+/>
+
+<En>
+
+## Content
+
+- Put the most important sentence first, so the clipped lines still say what
+  the text is about.
+- Keep `lineClamp` the same for every item in a list.
+
+## Accessibility
+
+What ExpandableText does for you:
+
+- The toggle is a `<button>` styled as a link, with `aria-expanded`, and a
+  translated label (더보기 / 접기) (WCAG 2.1.1, 4.1.2).
+- The full text is in the DOM while closed; only its height is clipped, so
+  find-in-page and text selection reach it.
+
+What you still have to do:
+
+- While closed, the hidden lines are still read by a screen reader (they are
+  only clipped visually). Do not rely on the clamp to shorten what is
+  announced.
+- Do not use a heading tier (`H1`–`H5`) for a long paragraph only to get its
+  size; the whole paragraph becomes a heading (`ACCESSIBILITY.md` §2).
+- Known markup issue: the clipping box is a `<div>` inside the `<p>` (or
+  heading) that `component` renders, which a markup validator reports as a
+  nesting error (KWCAG 5.4.1.1). Tracked in the PR that added this page.
+
+## Tokens
+
+The toggle is a `Link`; on hover it turns `fg.default` instead of
+`fg.linkHover`, and it has no underline.
+
+</En>
+
+<Ko>
+
+## 문구
+
+- 가장 중요한 문장을 앞에 둡니다. 그래야 접힌 상태에서도 무엇에 관한 글인지 알 수
+  있습니다.
+- 한 목록 안의 항목은 모두 같은 `lineClamp`를 씁니다.
+
+## 접근성
+
+ExpandableText가 알아서 하는 일
+
+- 펼침 버튼은 링크 모양의 `<button>`이고, `aria-expanded`와 번역된 이름('더보기' /
+  '접기')이 있습니다(WCAG 2.1.1, 4.1.2).
+- 접혀 있어도 전체 글이 DOM에 있고 높이만 잘립니다. 그래서 페이지 내 검색과 글 선택이
+  닿습니다.
+
+직접 챙겨야 하는 일
+
+- 접혀 있어도 화면 낭독기는 숨은 줄까지 읽습니다(화면에서만 잘립니다). 읽히는 양을
+  줄이는 용도로 쓰지 않습니다.
+- 크기만 보고 긴 문단에 제목 단계(`H1`–`H5`)를 쓰지 않습니다. 문단 전체가 제목이
+  됩니다(`ACCESSIBILITY.md` 2절).
+- 알려진 마크업 문제: 자르는 상자가 `component`가 그리는 `<p>`(또는 제목) 안의
+  `<div>`라서, 마크업 검사기가 중첩 오류로 봅니다(KWCAG 5.4.1.1). 이 페이지를 추가한
+  PR에 기록해 두었습니다.
+
+## 토큰
+
+펼침 버튼은 `Link`입니다. 호버하면 `fg.linkHover`가 아니라 `fg.default`로 바뀌고,
+밑줄이 없습니다.
+
+</Ko>
+
+<Canvas of={ExpandableTextStories.UsageTokens} sourceState="none" />
+
+<En>
+
+## Related
+
+- **Collapsible**: a section with a trigger.
+- **Typography**: the tiers `component` can use.
+- **Markdown**: formatted long text.
+
+</En>
+
+<Ko>
+
+## 관련 컴포넌트
+
+- **Collapsible**: 트리거가 있는 섹션.
+- **Typography**: `component`로 고를 수 있는 글자 단계.
+- **Markdown**: 서식 있는 긴 글.
+
+</Ko>

package/src/components/FileInput/FileInput.stories.tsx

@@ -1,9 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 
+import { Stack } from '@chakra-ui/react';
+
+import { FieldRow } from '../Form';
 import { FileInput } from '.';
 
- const meta = {
+const meta = {
   title: 'Components/FileInput',
   component: FileInput,
   args: {
@@ -36,3 +39,37 @@ export const Basic: Story = {
     return <FileInput onChange={handleChange} bgImage={bgImage} />;
   },
 };
+
+// ───────────────────────── Usage-page specimens ─────────────────────────
+// Pulled into `FileInput.usage.mdx` with <Canvas of={…} />. Hidden (`!dev`).
+
+export const DoSayWhatFits: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: 'Usage / Do: say which files fit',
+  render: () => (
+    <Stack maxW="420px">
+      <FieldRow
+        label="멤버 목록 파일"
+        helperText="CSV 또는 XLSX, 최대 5MB. 첫 줄은 이메일, 이름 순서입니다."
+      >
+        <FileInput
+          accept=".csv,.xlsx"
+          fileInputLabel="파일을 눌러서 고르기"
+          onChange={() => {}}
+        />
+      </FieldRow>
+    </Stack>
+  ),
+};
+
+export const DontUnexplained: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: "Usage / Don't: no type, size or purpose",
+  render: () => (
+    <Stack maxW="420px">
+      <FileInput onChange={() => {}} />
+    </Stack>
+  ),
+};

package/src/components/FileInput/FileInput.usage.mdx

@@ -0,0 +1,178 @@
+import { ArgTypes, Canvas, Meta } from '@storybook/blocks';
+
+import { En, Ko, LangToggle, Verdict } from '../../guidelines/_components/Lang';
+import * as FileInputStories from './FileInput.stories';
+
+<Meta of={FileInputStories} name="Usage" />
+
+<LangToggle />
+
+<En>
+
+# FileInput
+
+A dashed area that opens the system file picker when clicked, with an
+optional image preview behind it.
+
+## When to use
+
+- Uploading a file into a form: a member list CSV, a policy document,
+  reference images, a project file.
+- Replacing an image, with the current one shown through `bgImage`.
+
+## When not to use
+
+- Attaching files to a chat message → the chat composer's attach button.
+- Showing files already uploaded → `FileList` or `FileItem` (put them under
+  the FileInput).
+
+## Props
+
+</En>
+
+<Ko>
+
+# FileInput
+
+누르면 시스템 파일 선택 창이 열리는 점선 영역입니다. 뒤에 이미지 미리보기를 깔 수
+있습니다.
+
+## 언제 쓰나요
+
+- 폼에 파일을 올릴 때: 멤버 목록 CSV, 정책 문서, 참고 이미지, 프로젝트 파일.
+- 이미지를 바꿀 때. 지금 이미지는 `bgImage`로 보여 줍니다.
+
+## 언제 쓰지 않나요
+
+- 채팅 메시지에 파일을 붙일 때는 채팅 입력창의 첨부 버튼을 씁니다.
+- 이미 올린 파일을 보여 줄 때는 `FileList`나 `FileItem`을 씁니다(FileInput 아래에
+  둡니다).
+
+## 속성
+
+</Ko>
+
+<ArgTypes
+  of={FileInputStories}
+  include={[
+    'onChange',
+    'fileInputLabel',
+    'bgImage',
+    'isLoading',
+    'containerStyle',
+  ]}
+/>
+
+<En>
+
+`onChange` receives the browser's `FileList` (or `null`). Native input props
+such as `accept`, `multiple` and `name` pass through to the hidden
+`<input type="file">`, and the forwarded ref points at it. `isLoading`
+replaces the prompt with a spinner. The default prompt is translated
+(`upload_your_file`). The area does not handle drag and drop.
+
+## Do / Don't
+
+</En>
+
+<Ko>
+
+`onChange`는 브라우저의 `FileList`(또는 `null`)를 받습니다. `accept`, `multiple`,
+`name` 같은 네이티브 속성은 숨은 `<input type="file">`에 그대로 전달되고, 넘긴 ref도 이
+입력을 가리킵니다. `isLoading`이면 안내 문구 대신 스피너를 보여 줍니다. 기본 안내
+문구는 번역됩니다(`upload_your_file`). 끌어다 놓기는 처리하지 않습니다.
+
+## 이렇게 하세요 / 이렇게 하지 마세요
+
+</Ko>
+
+<Canvas of={FileInputStories.DoSayWhatFits} />
+<Verdict
+  kind="do"
+  en="Label it, set accept, and say the allowed types, size limit and expected layout in helper text."
+  ko="라벨을 붙이고 accept를 지정하며, 받는 형식, 최대 크기, 내용 형식을 도움말로 알려 줍니다."
+/>
+
+<Canvas of={FileInputStories.DontUnexplained} />
+<Verdict
+  kind="dont"
+  en="Show the drop area with only the default prompt. The user finds out the rules by failing."
+  ko="기본 안내 문구만 있는 영역을 두지 마세요. 사용자는 실패하고 나서야 조건을 압니다."
+/>
+
+<En>
+
+## Content
+
+- The prompt says what to do with the pointer (파일을 눌러서 고르기). Do not
+  promise dragging; it is not supported.
+- Types and size limit go in `FieldRow` `helperText`, the same words the
+  error will use.
+
+## Accessibility
+
+What FileInput does for you:
+
+- The prompt sits inside a `<label>` around the file input, so clicking
+  anywhere in it opens the picker. There is no extra role on the wrapper
+  (`ACCESSIBILITY.md` §3).
+
+Known gap, and what to do:
+
+- **It cannot be reached by keyboard.** The file input is `hidden`, so it is
+  out of the tab order and the label is not focusable (WCAG 2.1.1). Until the
+  component is fixed, add a visible `Button` next to it that calls
+  `ref.current?.click()`.
+- Wrap it in `FieldRow` with a label so the purpose is in text (WCAG 3.3.2),
+  and report rejected files in words, not only with the red row in
+  `FileItem` (WCAG 3.3.1).
+
+## Tokens
+
+The dashed border is `border.default`; the prompt and icon are `fg.subtle` on
+a `bg.muted` tile, over an 85% `bg.surface` wash. With `bgImage` the prompt
+turns `fg.default` and appears on hover.
+
+## Related
+
+- **FileList** / **FileItem**: what was uploaded.
+- **FieldRow**: label, rules and error.
+
+</En>
+
+<Ko>
+
+## 문구
+
+- 안내 문구에는 포인터로 할 일을 씁니다(파일을 눌러서 고르기). 끌어다 놓기는 지원하지
+  않으므로 약속하지 않습니다.
+- 형식과 최대 크기는 `FieldRow`의 `helperText`에 쓰고, 오류 문구에서도 같은 표현을
+  씁니다.
+
+## 접근성
+
+FileInput이 알아서 하는 일
+
+- 안내 문구가 파일 입력을 감싼 `<label>` 안에 있어서 영역 어디를 눌러도 선택 창이
+  열립니다. 감싸는 요소에 불필요한 역할을 주지 않습니다(`ACCESSIBILITY.md` 3절).
+
+알려진 한계와 대처
+
+- **키보드로 닿을 수 없습니다.** 파일 입력이 `hidden`이라 Tab 순서에서 빠지고, 라벨도
+  초점을 받지 않습니다(WCAG 2.1.1). 고쳐지기 전까지는 옆에 `ref.current?.click()`을
+  호출하는 보이는 `Button`을 둡니다.
+- 라벨이 있는 `FieldRow`로 감싸 용도를 글자로 알리고(WCAG 3.3.2), 받지 못한 파일은
+  `FileItem`의 빨간 행만이 아니라 문구로 알립니다(WCAG 3.3.1).
+
+## 토큰
+
+점선 테두리는 `border.default`, 안내 문구와 아이콘은 `bg.muted` 타일 위의
+`fg.subtle`이며, 바탕은 85% `bg.surface`입니다. `bgImage`가 있으면 안내 문구가
+`fg.default`로 바뀌고 마우스를 올렸을 때 나타납니다.
+
+## 관련 컴포넌트
+
+- **FileList** / **FileItem**: 올린 파일.
+- **FieldRow**: 라벨, 조건, 오류 문구.
+
+</Ko>

package/src/components/FileItem/FileItem.stories.tsx

@@ -1,5 +1,10 @@
 import { Meta, StoryObj } from '@storybook/react';
 
+import { Stack } from '@chakra-ui/react';
+
+import { T } from '../../guidelines/_components/Lang';
+import { TokenTable } from '../../guidelines/_components/TokenTable';
+import { FieldRow } from '../Form';
 import { FileItem } from './FileItem';
 
 const meta = {
@@ -53,3 +58,69 @@ export const Deleting: Story = {
     isDeleting: true,
   },
 };
+
+// ───────────────────────── Usage-page specimens ─────────────────────────
+// Pulled into `FileItem.usage.mdx` with <Canvas of={…} />. Hidden (`!dev`).
+
+export const DoErrorInText: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: 'Usage / Do: repeat the error in text',
+  render: () => (
+    <Stack maxW="480px">
+      <FieldRow error="members.xlsx: 파일이 5MB를 넘습니다. 나눠서 올려 주세요.">
+        <FileItem
+          fileName="members.xlsx"
+          error="파일이 5MB를 넘습니다."
+          onFileDelete={() => {}}
+        />
+      </FieldRow>
+    </Stack>
+  ),
+};
+
+export const DontErrorInTooltipOnly: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: "Usage / Don't: the reason only in a tooltip",
+  render: () => (
+    <Stack maxW="480px">
+      <FileItem
+        fileName="members.xlsx"
+        error="파일이 5MB를 넘습니다."
+        onFileDelete={() => {}}
+      />
+    </Stack>
+  ),
+};
+
+/** Tokens `FileItem.tsx` reads. */
+export const UsageTokens: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: 'Usage / Tokens',
+  render: () => (
+    <TokenTable
+      rows={[
+        { token: 'border.subtle', use: <T en="Row border" ko="행 테두리" /> },
+        {
+          token: 'fg.muted',
+          use: <T en="File icon, action icons" ko="파일 아이콘, 동작 아이콘" />,
+        },
+        {
+          token: 'fg.subtle',
+          use: <T en="Cancel-upload icon" ko="업로드 취소 아이콘" />,
+        },
+        {
+          token: 'danger.fg',
+          use: (
+            <T
+              en="Error: left bar, icon, file name"
+              ko="오류: 왼쪽 막대, 아이콘, 파일 이름"
+            />
+          ),
+        },
+      ]}
+    />
+  ),
+};

package/src/components/FileItem/FileItem.usage.mdx

@@ -0,0 +1,180 @@
+import { ArgTypes, Canvas, Meta } from '@storybook/blocks';
+
+import { En, Ko, LangToggle, Verdict } from '../../guidelines/_components/Lang';
+import * as FileItemStories from './FileItem.stories';
+
+<Meta of={FileItemStories} name="Usage" />
+
+<LangToggle />
+
+<En>
+
+# FileItem
+
+One row for one file: its name, upload progress or size, and download and
+delete buttons.
+
+## When to use
+
+- A single attached or uploaded file in a form: the CSV just picked, a
+  template being uploaded, a verification document.
+
+## When not to use
+
+- Several files → `FileList`, which renders FileItem rows and a "see more".
+- A file inside a chat message → the chat attachment components.
+
+## Props
+
+</En>
+
+<Ko>
+
+# FileItem
+
+파일 하나를 보여 주는 한 줄입니다. 파일 이름, 업로드 진행률이나 크기, 내려받기와 삭제
+버튼이 있습니다.
+
+## 언제 쓰나요
+
+- 폼에 붙인 파일 하나: 방금 고른 CSV, 올리는 중인 템플릿, 증빙 서류.
+
+## 언제 쓰지 않나요
+
+- 파일이 여러 개라면 `FileList`를 씁니다. FileItem 행과 "더 보기"를 그려 줍니다.
+- 채팅 메시지 안의 파일은 채팅 첨부 컴포넌트를 씁니다.
+
+## 속성
+
+</Ko>
+
+<ArgTypes
+  of={FileItemStories}
+  include={[
+    'fileName',
+    'progress',
+    'fileSize',
+    'error',
+    'onFileDownload',
+    'onFileDelete',
+    'isDownloading',
+    'isDeleting',
+  ]}
+/>
+
+<En>
+
+- `progress` from 0 to 99 shows a percentage, a bar, a spinner and a cancel
+  button that calls `onFileDelete`. At 100, or with no `progress`, the row
+  shows the size and the actions.
+- The download and delete buttons appear only when you pass their handlers.
+  `isDownloading` / `isDeleting` swap them for a spinner.
+- `error` turns the name, icon and left edge `danger.fg` and puts the message
+  in a tooltip on an alert icon. It hides the download button.
+
+## Do / Don't
+
+</En>
+
+<Ko>
+
+- `progress`가 0~99이면 백분율, 진행 막대, 스피너, `onFileDelete`를 부르는 취소 버튼을
+  보여 줍니다. 100이거나 `progress`가 없으면 크기와 동작 버튼을 보여 줍니다.
+- 내려받기와 삭제 버튼은 처리 함수를 넘겼을 때만 나타납니다. `isDownloading`·
+  `isDeleting`이면 버튼 대신 스피너가 보입니다.
+- `error`를 주면 이름, 아이콘, 왼쪽 가장자리가 `danger.fg`로 바뀌고, 문구는 경고
+  아이콘의 툴팁에 들어갑니다. 내려받기 버튼은 숨겨집니다.
+
+## 이렇게 하세요 / 이렇게 하지 마세요
+
+</Ko>
+
+<Canvas of={FileItemStories.DoErrorInText} />
+<Verdict
+  kind="do"
+  en="Repeat the reason in text under the row, with the file name, so it can be read without hovering."
+  ko="실패 이유를 파일 이름과 함께 행 아래에 글자로 한 번 더 보여 줍니다. 마우스를 올리지 않아도 읽을 수 있습니다."
+/>
+
+<Canvas of={FileItemStories.DontErrorInTooltipOnly} />
+<Verdict
+  kind="dont"
+  en="Leave the reason only in the tooltip. The icon is not focusable, so keyboard and screen reader users never reach it."
+  ko="실패 이유를 툴팁에만 두지 마세요. 아이콘이 초점을 받지 않아서 키보드와 화면 낭독기 사용자는 끝내 읽지 못합니다."
+/>
+
+<En>
+
+## Content
+
+- Show the real file name; let it truncate rather than rewriting it.
+- Error text says what failed and what to do (파일이 5MB를 넘습니다. 나눠서
+  올려 주세요.).
+
+## Accessibility
+
+What FileItem does for you:
+
+- Download and delete are `IconButton`s with translated names and tooltips.
+
+Known gaps, and what to do:
+
+- **The error is in a hover tooltip on a non-focusable icon** (WCAG 1.4.1,
+  3.3.1). Repeat it in text, as above.
+- **The cancel-upload button is named in English** ("remove uploading file
+  button") on every screen, Korean included.
+- Progress is shown as a percentage and a bar; a screen reader is not told
+  when the upload finishes. Announce completion with a toast (WCAG 4.1.3).
+
+## Tokens
+
+</En>
+
+<Ko>
+
+## 문구
+
+- 실제 파일 이름을 그대로 보여 줍니다. 길면 고쳐 쓰지 말고 말줄임표로 자릅니다.
+- 오류 문구는 무엇이 실패했고 어떻게 하면 되는지 씁니다(파일이 5MB를 넘습니다. 나눠서
+  올려 주세요.).
+
+## 접근성
+
+FileItem이 알아서 하는 일
+
+- 내려받기와 삭제는 번역된 이름과 툴팁이 있는 `IconButton`입니다.
+
+알려진 한계와 대처
+
+- **오류 문구가 초점을 받지 않는 아이콘의 툴팁에만 있습니다**(WCAG 1.4.1, 3.3.1). 위처럼
+  글자로 한 번 더 보여 줍니다.
+- **업로드 취소 버튼 이름이 영어입니다**("remove uploading file button"). 한국어 화면에서도
+  영어로 읽힙니다.
+- 진행 상황은 백분율과 막대로만 보이고, 업로드가 끝났다는 사실은 화면 낭독기에 알리지
+  않습니다. 끝나면 토스트로 알립니다(WCAG 4.1.3).
+
+## 토큰
+
+</Ko>
+
+<Canvas of={FileItemStories.UsageTokens} sourceState="none" />
+
+<En>
+
+## Related
+
+- **FileList**: several FileItem rows.
+- **FileInput**: picking the file.
+- **ProgressBar** / **Tooltip**: the parts it uses.
+
+</En>
+
+<Ko>
+
+## 관련 컴포넌트
+
+- **FileList**: FileItem 여러 줄.
+- **FileInput**: 파일 고르기.
+- **ProgressBar** / **Tooltip**: 안에서 쓰는 부품.
+
+</Ko>

package/src/components/FileList/FileList.stories.tsx

@@ -53,3 +53,28 @@ export const Default: Story = {
     return <FileList {...args} files={files} onFileDelete={handleFileDelete} />;
   },
 };
+
+// ───────────────────────── Usage-page specimens ─────────────────────────
+// Pulled into `FileList.usage.mdx` with <Canvas of={…} />. Hidden (`!dev`).
+
+export const DoDownloadAndDelete: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: 'Usage / Do: download where there is a URL',
+  render: () => (
+    <FileList
+      files={[
+        {
+          id: 1,
+          name: '2026년 3분기 이용 보고서.pdf',
+          size: 482_133,
+          fileUrl: '#',
+        },
+        { id: 2, name: '서비스 이용약관.docx', size: 91_204, fileUrl: '#' },
+        { id: 3, name: '업로드 중인 파일.pptx', progress: 40 },
+      ]}
+      onFileDownload={() => {}}
+      onFileDelete={async () => {}}
+    />
+  ),
+};