Attachment Input

구조는 당근 SEED Attachment Input(rootage attachment-input · -trigger · -item · -item-action-button · -item-remove-button · -dropzone, qvism-preset recipe, React AttachmentField — Apache-2.0)을 따른다 — 첨부 타일(80, "3/10") · 사진 80 썸네일(Media) · 파일 160 × 80 카드(File) · 오른쪽 위 × 20 · 올리는 중 · 실패 · 다시 시도 · 대표 배지 · 순서 바꾸기 · 드롭존. 드롭존의 색 · 파일 이름 줄 · 항목 메뉴(끌지 않고 옮기는 길) · 포커스 링은 groo 가 정했다(2026-10-15 사용자 결정 — 마무리 3A · 4A · 5A, 이어서 11D · 12A · 13B · 14A). 값은 groo 토큰이고, SEED 와 다른 자리는 맨 아래 "SEED 와 다른 점" 에 적었다. 옛 DESIGN.md 의 File Upload 절(v73 — 2px 점선 · 📁 · 막힘 불투명도 0.5)을 대신한다.

수치 원본은 attachment-input.yaml이다. 수치 표 자리([표: …])와 그림 자리([그림: …])는 사이트가 그 파일로 그린다 — GitHub 에서는 그 파일 · 그림 코드로 가는 링크로 보인다.

직접 골라 보기제목 링크 복사

모양(타일 · 드롭존) · 받는 형식 · 최대 개수 · 대표 배지 · 순서 바꾸기 · 막힘 · 읽기 전용을 고르면 스펙대로 그린 칸과 그 코드가 바뀐다. 실제로 파일을 고르고 끌어 놓을 수 있다 — 올리는 중 · 실패 · 다시 시도와 거절 안내가 함께 보인다.

import { AttachmentInput } from "@/components/ui/attachment-input"
import { Field } from "@/components/ui/field"

<Field label="영수증" description="사진 · PDF 를 10MB 까지 올려요. 10개까지." invalid={error !== null} errorMessage={error}>
  <AttachmentInput
    accept="image/*,application/pdf"
    maxFiles={10}
    maxFileSize={10 * 1024 * 1024}
    entries={entries}
    onFilesAccept={accept}
    onFilesReject={reject}
    onRemove={remove}
    onRetry={retry}
    onReorder={setEntries}
    onPreview={openViewer}
  />
</Field>

Anatomy제목 링크 복사

항목의 모양은 파일 종류가 정한다 — 사진(image/*)은 썸네일, 그 밖(PDF · 표)은 파일 카드이고 한 줄에 섞인다(SEED React 는 accept="image/*" 면 썸네일, 아니면 카드 — 비교 페이지가 섞인 줄을 그렸다). × 둘레는 항목 모서리를 × 보다 2 크게 파내 사진 · 덮개 · 윤곽이 × 에 닿지 않는다(SEED 의 구멍).

부위

Properties제목 링크 복사

Layout제목 링크 복사

• tile(기본, 사용자 결정 4A) — 첨부 타일 + 항목 줄. 영수증 · 메모 첨부처럼 여럿을 붙이고 사진이 섞이는 자리. 항목 줄은 화면(시트 · 대화상자 본문) 가장자리까지 넓히고 넘치면 가로로 스크롤한다 — 첫 항목은 다른 칸과 같은 자리(24)에서 시작하고, 좌우 끝은 늘 20 흐린다(Scroll Fog row — 스크롤바는 숨긴다). 앱은 칸이 제 상자 밖을 받지 못하므로 놓는 화면이 칸을 화면 폭에 두고 안쪽 여백 24 를 준다(SEED --seed-attachment-input-extend-x · Chip 스크롤 줄과 같은 방법) — Field 안이면 Field 의 머리 · 꼬리를 24 들여 라벨이 다른 칸과 같은 자리에 선다. 칸을 화면 여백 안에 둔 채 쓰지 않는다 — 늘 켜진 흐림 20 이 첨부 타일을 깎는다(구현 세션 질문 Q-016-2 — 사용자 결정 4A 의 앱 풀이).
• dropzone(사용자 결정 5A) — 파일 하나를 골라 바로 서버로 넘기는 자리(CSV · Excel 가져오기). 1280 이상 웹은 드롭존(높이 120 · 1px 실선 · 안내 "파일을 여기로 끌어다 놓으세요" + "파일 선택" 버튼), 1280 미만 웹 · 앱은 끌어 놓기가 없으니 드롭존 없이 "파일 선택" 버튼(large · 칸 폭 · 앞 아이콘 upload)만이다. 고른 파일은 아래 파일 카드로 보인다. 썸네일 · 여럿 · 순서 · 개수가 필요 없는 자리라 SEED 의 드롭존만 가져온다.

List 줄로 첨부를 늘어놓는 안(4C)과 지금 앱 위젯(4B), 지금 웹의 점선 상자 전체(5B) · 앱의 실선 상자(5C) · 옛 File Upload(5D)는 고르지 않았다.

모양

Trigger제목 링크 복사

첨부 타일은 80 × 80 · 모서리 12 · 1px stroke-neutral-weak · 투명 바탕이다. 아이콘 24 fg-neutral-subtle(사진을 받으면 image, 파일만 받으면 paperclip) 아래 개수 — 지금 개수 fg-neutral + "/최대" fg-neutral-subtle(12 / 16 · 400). 최대가 없으면 개수를 두지 않는다 — "n/최대" 를 쓰려면 서버의 개수 한도부터 정한다(지금 desk-back 에 없다). 다 차면 타일이 막힌다 — 아이콘 · 개수가 fg-disabled 이고, aria-disabled 라 초점은 남아 "10/10, 사용할 수 없음" 을 읽는다. 누르면 바탕 + 타일만 2px 거리로 준다.

첨부 타일

다 찼을 때

Item제목 링크 복사

사진 · 파일

항목 공통

파일 카드 — 썸네일

파일 카드 — 이름

파일 카드 — 크기

사진은 투명 윤곽 1px stroke-neutral-overlay(v118 — Image Frame · Avatar 와 같다)를 그림 위에 겹쳐 그린다. 파일 카드는 썸네일 칸 48(bg-neutral-weak · 모서리 8 · 아이콘 24) + 이름(12 / 16 · 500) + 크기(11 / 15 · fg-neutral-subtle · "9.8MB")다.

파일 이름 — 네 줄 · 확장자는 남긴다제목 링크 복사

이름은 폭 70 에 글자 단위로 줄을 바꾸고(word-break: break-all — SEED 레시피와 같다) 네 줄까지 보인다 — 네 줄(64) + 크기(15) 가 80 상자에 든다(따라오는 것). 파일 이름은 문장이 아니라 이름표다 — 띄어쓰기 없이 밑줄 · 붙임표로 이어져 단어 단위의 이득이 없고, 글자 단위로 채워야 같은 칸에 이름이 가장 많이 든다. 그래서 이 칸은 Typography v114(단어 단위 — keep-all · break-word)의 예외다(사용자 결정 2026-10-15 마무리 11D). 네 줄을 넘으면 셋째 줄 끝을 "…" 로 줄이고 넷째 줄에 확장자(".xlsx")를 남긴다 — 끝을 자르면 확장자가 사라져 무슨 파일인지 모른다. 전체 이름은 항목의 이름(보조 기술)에 늘 있다. SEED 레시피는 줄을 자르지 않아 다섯 줄부터 상자를 넘는다. 단어 단위 + 확장자 남김(11A) · 네 줄째에서 자름(11B) · SEED 그대로 넘침(11C)은 고르지 않았다.

첫 줄만 오른쪽 4 를 비운다 — 네 줄이면 이름이 카드 위에 바짝 붙어 × 둘레 구멍(24)이 첫 줄 끝 글자를 파먹는다. 둘째 줄부터는 폭 70 그대로다.

Remove Button제목 링크 복사

× 는 20 원(bg-layer-default · 1px stroke-neutral-weak · 아이콘 10 fg-neutral)이 항목 모서리 밖으로 위 4 · 오른쪽 4 걸친다. 누르는 자리는 44 다 — 보이는 원 둘레로 12 씩 넓힌다(기초 Inclusive Design). 이웃 항목과 겹친 8 도 × 가 먼저 받고, 칸 위에 라벨이 없어도 위 16 이 잘리지 않는다. 앱은 보이는 자리는 그대로 두고 누르는 44 를 받는 방법을 고른다(부모 상자 밖도 받는다 — 구현 세션 질문 Q-016-3, 사용자 결정 4A 의 44 · 방법은 카드 머리 동작 Q-011-8 과 같다). 이름은 "{파일 이름} 지우기" 이고, 누르면 묻지 않고 지운다 — 되돌리기는 다시 고르기다. 누르면 바탕 + × 만 2px 준다.

지우기 ×

구멍

Status제목 링크 복사

항목은 고른 직후(pending) · 올리는 중(uploading) · 올림(success) · 실패(error)다(SEED). 고른 직후와 올림은 같은 모습이다.

• 올리는 중 — 이미 정한 값 있는 Progress Circle 24(두께 3 — Progress Circle "올리기 · 받기", 2026-10-03)다. 사진은 사진 위 딤(라이트 50% · 다크 65%) 가운데 staticWhite 원, 파일 카드는 썸네일 칸에서 아이콘 대신 neutral 원. 진행이 10초 동안 멈추면 실패다. 막대(Progress)는 쓰지 않는다.
• 실패 — SEED 대로 덮개 + "다시 시도"(아이콘 rotate-cw 24 + 12 / 16 · 500). 사진은 검정 65% 덮개 위 흰 글, 파일 카드는 썸네일 · 이름 자리를 다시 시도 하나가 채운다(fg-neutral-subtle). 실패 덮개는 두 모드 모두 65% 다 — 50% 면 흰 사진 위 흰 글이 3.95 로 모자란다.

사진 올리는 중

파일 올리는 중

사진 실패

파일 실패

다시 시도

대표 배지 · 순서 바꾸기제목 링크 복사

SEED 의 두 능력을 그대로 둔다(사용자 결정 3A) — 지금 세 제품에 쓰는 자리는 없다. 생길 법한 자리는 영수증 여러 장의 대표 사진 · 순서다.

• 대표 배지 — 첫 사진 아래 24 띠(검정 65% · 좌우 4 · 아래 두 모서리 12) 위 흰 글 "대표"(12 / 16 · 500 · 한 줄, badgeLabel 로 바꾼다). 띠는 두 모드 모두 65% 다(Image Frame 의 Indicator 와 같은 까닭).
• 순서 바꾸기 — 항목을 끌어 옮긴다(SEED — dnd-kit). 끄는 항목은 2px 줄어든 채 따라가고 × 와 구멍이 사라지며, 사진은 불투명도 0.5, 파일 카드는 글 · 아이콘이 fg-disabled 다 — SEED 그대로다(사용자 결정 13B). 사진의 0.5 는 기초 v106 "불투명도로 흐리지 않는다" 의 예외로, 이 칸의 끄는 중 · 읽기 전용 사진에만 쓴다. 마우스는 누른 채 8px 넘게 움직이면, 터치는 250ms 누른 채 움직이면 끌기다 — 그 전에 움직이면 줄이 가로로 스크롤하고, 그냥 떼면 누르기(메뉴)다. 앱도 같다 — 250ms 길게 눌러 움직이면 끈다(SEED Lynx attachment-field-reorderable 의 가로 long-press, 구현 세션 질문 Q-016-1 — 사용자 결정 3A "SEED 와 1:1"). 순서를 바꾸면 대표 띠는 새 첫 사진으로 옮겨 간다.
• 끌지 않고 옮기기 — 항목을 누르면 메뉴가 열린다(사용자 결정 14A — 아래 "항목 메뉴"). 키보드는 항목에 초점을 두고 Space 로 들고 ← → 로 옮긴 뒤 Space 로 놓는다(Esc 는 그만두기 — 아래 Behavior). 키보드 들기는 웹이다 — 앱은 들기 대신 접근성 동작(앞으로 옮기기 · 뒤로 옮기기)과 메뉴가 같은 일을 한다(SEED Lynx 도 그렇다). 끌기 + 키보드만(14B) · 순서 바꾸기를 두지 않기(14C)는 고르지 않았다.

대표 띠

끄는 중

사진 — 읽기 전용 · 끄는 중의 흐림

파일 카드 — 읽기 전용 · 끄는 중의 글 · 아이콘

항목 메뉴제목 링크 복사

항목(사진 · 파일 카드)을 누르면 메뉴가 열린다 — 1280 미만 · 앱은 Menu Sheet(머리에 전체 파일 이름), 1280 이상은 Menu. 끌기가 어려운 사람 · 화면 읽기 · 스위치 사용자도 한 번 누르고 골라 순서를 바꾼다(WCAG 2.5.7). 순서 바꾸기(onReorder)나 크게 보기(onPreview)를 줄 때만 열린다.

• 위 묶음 — 크게 보기(사진을 누르면 바로 크게 보던 자리는 이 첫 줄로 옮긴다 — 한 번 더 누른다. 파일 카드는 "열기") · 대표로 정하기(대표 띠를 쓰는 칸의 사진만 — 맨 앞으로 옮긴다. 띠를 안 쓰면 이 줄을 빼고 넷) · 앞으로 옮기기 · 뒤로 옮기기(한 칸씩).
• 아래 위험 묶음 — 지우기(critical, 묻지 않고 지운다). × 는 지름길로 남고 메뉴에 동작을 다 둔다 — 스와이프는 지름길이고 같은 동작을 다른 길에 다 두는 원칙과 같다(Menu Sheet "스와이프의 대신 길").
• 끝에 닿으면 그 방향이 막힌다 — 맨 앞(대표) 항목은 "앞으로 옮기기" · "대표로 정하기", 맨 끝 항목은 "뒤로 옮기기". 줄은 보이고 누를 수 없다(메뉴의 막힌 줄).
• 옮긴 뒤 초점은 옮긴 항목(새 자리)에, 지운 뒤에는 × 와 같은 규칙이다. 읽기 전용이면 메뉴 대신 누르면 바로 크게 보기, 막힘이면 누르지 않는다.

항목 메뉴

항목 자리 — 막히는 줄

Dropzone제목 링크 복사

드롭존(1280 이상 웹)은 높이 120 · 모서리 12 · 1px 실선이다. 테두리는 stroke-neutral-solid 다 — 놓인 면 위 흰 면 4.18 · 다크 4.13(시트 · 대화상자 4.18 · 3.58)으로 3:1 이 넘는다. 파일을 끌고 들어오면 테두리가 stroke-neutral-contrast(16.41 · 13.42)로, 바탕이 bg-layer-default-pressed 로 함께 바뀐다 — 기본 테두리와 3.93 · 3.25 로 또렷이 갈린다. SEED 의 값(테두리 palette.gray-500 — 다크 2.71, 끌기 stroke.neutral-solid — 차이 1.32 · 1.53)은 다크에서 테두리가 3:1 에 못 미치고 끌기가 거의 보이지 않아 역할 색으로 맞췄다(질문에서 약속한 고침). 막히면 테두리도 stroke-neutral-weak 로 옅어진다.

안내 글은 14 / 19 · 500 fg-neutral-subtle "파일을 여기로 끌어다 놓으세요", 그 아래 8 에 Button neutralWeak small "파일 선택" — CTA 가 아닌 보조 동작이고, 높이 120 안에 안내와 함께 든다. 상자 전체를 누르는 자리로 두지 않는다 — 키보드는 이 버튼으로 닿는다(지금 웹은 상자 div onClick 이라 키보드로 못 닿는다). 고른 파일은 드롭존 아래 8 에 파일 카드로 보이고(분석 중이면 썸네일 칸에 원), 하나를 고르면 드롭존이 막힌다(최대 1). 바꾸려면 × 로 지우고 다시 고른다.

테두리는 늘 1px 실선이다(사용자 결정 5A · 12A) — SEED rootage 설명은 평소 점선 · 끄는 동안 실선이지만, 평소 점선(12B)은 고르지 않았다. 끄는 동안 "파일 선택" 버튼 면(bg-neutral-weak)은 끌기 바탕(bg-layer-default-pressed)과 1.02 · 1.00:1 로 섞여 글만 남는다 — 끄는 중엔 누를 일이 없어 그대로 둔다.

드롭존

파일 선택 버튼

파일 선택 버튼 — 끄는 동안 · 막힘

State제목 링크 복사

상태 — 타일 · 개수

상태 — 항목 · × · 포커스 링

항목 줄

모션

Guidelines제목 링크 복사

언제 쓰나제목 링크 복사

한 줄로 — 넘치면 옆으로제목 링크 복사

항목은 줄을 바꾸지 않고 한 줄(80)로 놓는다 — 열 장이어도 시트가 길어지지 않는다. 대신 대부분이 옆으로 숨는다 — 올리는 중 · 실패가 끝에 있으면 밀어야 보인다. 그래서 실패는 항목 덮개와 함께 칸의 이름에도 들린다(보조 기술 — "1개는 올리지 못했어요"). 줄은 화면 가장자리까지 넓혀 끝 흐림 20 이 더 있다는 것을 알린다.

다시 검사한다 — 거절은 그 자리에제목 링크 복사

accept 는 고르기 창의 편의일 뿐이다 — 사용자는 "모든 파일" 로 다른 형식을 고를 수 있다(SEED). 그래서 형식 · 크기 · 개수를 다시 검사하고, 거절한 파일은 붙이지 않고 Field 의 오류 글로 한 번 알린다 — 토스트로 알리지 않는다. 이유마다 한 문장이다.

칸의 설명에 받는 형식 · 크기 · 개수를 미리 적는다("사진 · PDF 를 10MB 까지 올려요. 10개까지."). 서버도 같은 한도로 검사한다 — 화면의 검사는 먼저 알리는 것일 뿐이다.

앱은 메뉴 시트로 연다제목 링크 복사

앱의 첨부 타일 · 파일 선택은 Menu Sheet 를 연다 — "사진 찍기" · "앨범에서 고르기" · "파일 고르기"(받는 형식에 없는 줄은 빼고, 남는 줄이 하나면 바로 그 창). 웹은 브라우저의 고르기 창이다 — 폰 브라우저가 카메라 · 앨범을 스스로 묻는다.

글제목 링크 복사

칸 이름은 무엇을 붙이는지 명사로("영수증"), 설명은 형식 · 크기 · 개수("사진 · PDF 를 10MB 까지 올려요. 10개까지."). 타일 이름은 "{칸 이름} 첨부, 3/10", × 는 "{파일 이름} 지우기", 다시 시도는 "{파일 이름} 다시 시도". 드롭존 안내는 "파일을 여기로 끌어다 놓으세요", 버튼은 "파일 선택". 거절 글은 위 표대로.

코드제목 링크 복사

레시피 recipes/shadcn/components/ui/attachment-input.tsx 를 Field 안에 둔다. 항목 목록은 쓰는 쪽이 쥔다(제어 컴포넌트) — 올리기 요청과 상태는 쓰는 쪽이 바꾼다. 아래 미리보기는 스펙 값으로 그린 모습이다.

• AttachmentInput — entries(필수 — AttachmentEntry[]) · onFilesAccept(added)(필수 — 검사를 통과한 새 항목, 상태 "pending") · onRemove(id)(필수) · onRetry(id) · onFilesReject(rejections)(한 번 고른 것 가운데 거절된 것 모두 — AttachmentRejection[]) · onReorder(next)(주면 항목을 끌어 · 키보드 · 항목 메뉴(대표로 정하기 · 앞으로 옮기기 · 뒤로 옮기기)로 순서를 바꾼다 — 바뀐 AttachmentEntry[]) · onPreview(id)(주면 메뉴 첫 줄 "크게 보기" · 파일 카드는 "열기" — 크게 보는 화면은 쓰는 쪽이 연다) · layout("tile" 기본 · "dropzone") · accept(고르기 창 · 다시 검사) · maxFiles(기본 1 — SEED. Infinity 면 개수를 그리지 않는다) · maxFileSize(바이트) · badgeLabel(주면 첫 사진에 띠) · disabled · readOnly · name(고른 파일을 숨은 <input type="file"> 에 맞춰 폼에 낸다) · triggerLabel(타일 이름의 앞 — 기본은 Field 라벨). 1280 이상 웹에서만 드롭존을 그린다. 항목 메뉴는 레시피가 그린다 — onReorder · onPreview 가운데 하나라도 주면 항목을 누를 때 1280 미만 Menu Sheet(머리 = 파일 이름) · 이상 Menu 로 크게 보기 · 대표로 정하기(badgeLabel 이 있는 칸의 사진만) · 앞으로 옮기기 · 뒤로 옮기기 | 지우기(onRemove)를 열고, 맨 앞 · 맨 끝의 막히는 줄도 레시피가 가린다. 읽기 전용이면 누를 때 바로 onPreview. Field 안이면 Field 의 라벨 · 설명 · 오류를 잇고 disabled · readOnly · invalid 를 받는다.
• AttachmentEntry — { id: string; name: string; size: number; type: string; file?: File; previewUrl?: string; status: "pending" | "uploading" | "success" | "error"; progress?: number } — progress 는 0 ~ 1(올리는 중 원). 사진 · 파일 카드는 type 으로 가른다.
• AttachmentRejection — { file: File; codes: ("FILE_TOO_LARGE" | "INVALID_TYPE" | "TOO_MANY_FILES")[] }.
• formatFileSize(bytes) — "9.8MB" 꼴.
• 한 번 고른 것에 통과한 것과 거절된 것이 섞이면 onFilesAccept 를 먼저, onFilesReject 를 뒤에 부른다 — 아래 예시처럼 accept 에서 지난 오류 글을 지우고 reject 에서 새 오류 글을 쓰는 쪽이 그 순서에 기댄다.

영수증 첨부 — 타일제목 링크 복사

import { useState } from "react"
import { AttachmentInput, type AttachmentEntry, type AttachmentRejection } from "@/components/ui/attachment-input"
import { Field } from "@/components/ui/field"

const MAX_SIZE = 10 * 1024 * 1024
const uploadReceipt = (file: File, onProgress: (ratio: number) => void) => {
  onProgress(1)
  return Promise.resolve(file.name) // POST /files/upload(EXPENSE_RECEIPT) — 진행을 알려 준다
}
const REJECT_TEXT = {
  FILE_TOO_LARGE: "10MB 넘는 파일은 올릴 수 없어요.",
  INVALID_TYPE: "사진 · PDF 만 올릴 수 있어요.",
  TOO_MANY_FILES: "10개까지 올릴 수 있어요.",
} as const

const [entries, setEntries] = useState<AttachmentEntry[]>([])
const [error, setError] = useState<string | null>(null)

const update = (id: string, patch: Partial<AttachmentEntry>) =>
  setEntries((list) => list.map((e) => (e.id === id ? { ...e, ...patch } : e)))

const start = (entry: AttachmentEntry) => {
  if (!entry.file) return
  update(entry.id, { status: "uploading", progress: 0 })
  uploadReceipt(entry.file, (progress) => update(entry.id, { progress })).then(
    () => update(entry.id, { status: "success" }),
    () => update(entry.id, { status: "error" }),
  )
}

// 이유마다 한 문장 — 토스트가 아니라 칸 아래 오류 글
const reject = (rejections: AttachmentRejection[]) => {
  const codes = [...new Set(rejections.flatMap((r) => r.codes))]
  setError(codes.map((c) => REJECT_TEXT[c]).join(" "))
}

<Field
  label="영수증"
  description="사진 · PDF 를 10MB 까지 올려요. 10개까지."
  invalid={error !== null}
  errorMessage={error}
>
  <AttachmentInput
    accept="image/*,application/pdf"
    maxFiles={10}
    maxFileSize={MAX_SIZE}
    entries={entries}
    onFilesAccept={(added) => {
      setError(null)
      setEntries((list) => [...list, ...added])
      added.forEach(start)
    }}
    onFilesReject={reject}
    onRemove={(id) => setEntries((list) => list.filter((e) => e.id !== id))}
    onRetry={(id) => {
      const entry = entries.find((e) => e.id === id)
      if (entry) start(entry)
    }}
  />
</Field>

파일 하나 가져오기 — 드롭존제목 링크 복사

import { useState } from "react"
import { AttachmentInput, type AttachmentEntry } from "@/components/ui/attachment-input"
import { Field } from "@/components/ui/field"

const analyze = (file: File) => Promise.resolve(file.size) // POST /import/analyze — 다음 단계로 넘긴다
const [entries, setEntries] = useState<AttachmentEntry[]>([])
const [error, setError] = useState<string | null>(null)

<Field
  label="파일 업로드"
  description="CSV(.csv) 또는 Excel(.xlsx, .xls) 파일을 올려주세요. 최대 10MB."
  invalid={error !== null}
  errorMessage={error}
>
  {/* 1280 이상 웹은 드롭존, 1280 미만 · 앱은 파일 선택 버튼 — 하나를 고르면 드롭존이 막힌다 */}
  <AttachmentInput
    layout="dropzone"
    accept=".csv,.xlsx,.xls"
    maxFiles={1}
    maxFileSize={10 * 1024 * 1024}
    entries={entries}
    onFilesAccept={(added) => {
      const entry = added[0] // 최대 1 — 하나만 온다
      if (!entry?.file) return
      setError(null)
      setEntries([{ ...entry, status: "uploading" }])
      analyze(entry.file).then(
        () => setEntries([{ ...entry, status: "success" }]),
        () => setEntries([{ ...entry, status: "error" }]),
      )
    }}
    onFilesReject={() => setError("CSV · Excel 파일을 10MB 까지 올릴 수 있어요.")}
    onRemove={() => setEntries([])}
  />
</Field>