Commit @3c3b7a9994f5e8016e1aaf2d5572201cd9a8ea6d

임동욱 08-13

feat: FoxFileUpload 추가

Figma 시안 다섯을 한 컴포넌트로 옮긴다 — file-upload(391:3677) ·
file-upload-area(392:5968) · file-upload-img(391:3732) · file-list(392:5938) ·
file-list-item(391:3509). 고르는 방식만 다르고 목록은 같아서다.

시안에서 버튼·입력이 모두 기존 컴포넌트의 인스턴스라 그대로 조합한다.
썸네일 삭제 버튼은 FoxIconButton overlay xsm이 시안과 정확히 같다(24px ·
모서리 4 · 검정 50% · 배경흐림 10 · 흰 아이콘).

업로드는 하지 않는다. 파일을 고르면 원본 File을 넘길 뿐이고 진행률·서버
오류를 목록에 어떻게 비출지는 files로 정한다. files를 안 주면 안에서 들고
있어 간단한 폼에 그대로 쓴다.

default 모드는 시안의 두 상태를 모두 갖는다 — 비었으면 흰 칸에
파일선택(secondary), 파일 하나를 목록 없이 들고 있으면 칸이 회색으로 잠기고
버튼이 삭제(default 계열 · 휴지통)로 바뀐다. 흰 칸 규칙은 FoxInput의 읽기
전용 규칙(0,6,0)보다 특이도를 높여 로드 순서와 무관하게 이기도록 적었다.

끌어다 놓기는 prop으로 켜되 area는 안내문이 그렇게 말하므로 언제나 받는다.
입력칸 폭과 썸네일 크기는 토큰에 없어 prop 기본값으로 뒀다(사용자 승인).

Co-Authored-By: Claude Opus 5

@3c3b7a9994f5e8016e1aaf2d5572201cd9a8ea6d

84b98ea

3c3b7a9

@fox/README.md

--- @fox/README.md

+++ @fox/README.md

...	...	@@ -162,6 +162,9 @@
162	162	- 전화번호는 화면만 세 칸이고 값은 숫자만 담긴 문자열 하나입니다 — 하이픈은 값에 들어가지
163	163	않습니다. `unit`은 앞자리가 드롭다운이라 조각을 select·input으로 조립하고, `combine`은
164	164	상자 하나에 세 칸을 둡니다.
	165	+- 파일 첨부는 세 모드(`default`·`area`·`image`)를 한 컴포넌트로 둡니다. 업로드는 하지
	166	+ 않고 고른 원본 `File`만 넘기며, 진행률·서버 오류를 목록에 어떻게 비출지는 `files`로
	167	+ 정합니다. `area`는 끌어다 놓기가 항상 켜져 있고 `image`에는 목록이 없습니다.
165	168	- 아이콘 SVG는 `currentColor`로 그려야 계열별 색이 적용됩니다. 크기는 슬롯이 정합니다.
166	169
167	170	`core/`의 React 컴포넌트는 이 클래스를 조립해주는 얇은 래퍼일 뿐입니다 — 쓰지 않아도

3c3b7a9

@fox/core/components/fox-file-upload/fox-file-upload.tsx (added)

+++ @fox/core/components/fox-file-upload/fox-file-upload.tsx

...	...	@@ -0,0 +1,460 @@
	1	+"use client";
	2	+
	3	+import {
	4	+ useEffect,
	5	+ useId,
	6	+ useRef,
	7	+ useState,
	8	+ type ChangeEvent,
	9	+ type CSSProperties,
	10	+ type DragEvent,
	11	+} from "react";
	12	+import { cx } from "../../utils";
	13	+import { FoxButton } from "../fox-button";
	14	+import { FoxIconButton } from "../fox-icon-button";
	15	+import { FoxInput } from "../fox-input";
	16	+import { FoxTextButton } from "../fox-text-button";
	17	+
	18	+export type FoxFileUploadMode = "default" \| "area" \| "image";
	19	+
	20	+/** 목록에 그릴 파일 한 줄. 업로드 상태는 호출부가 이 모양으로 바꿔서 넘긴다. */
	21	+export interface FoxFileItem {
	22	+ /** 목록에서 구분하는 키. */
	23	+ id: string;
	24	+ /** 확장자를 뺀 이름. 길면 말줄임된다. */
	25	+ name: string;
	26	+ /** 이름 뒤에 붙는 표기 — 시안은 `.PDF (20KB)`. 줄어들지 않는다. */
	27	+ meta?: string;
	28	+ /** 참이면 줄이 붉어지고 `message`가 아래에 붙는다. */
	29	+ error?: boolean;
	30	+ message?: string;
	31	+ /** image 모드에서 썸네일로 쓸 주소. */
	32	+ previewUrl?: string;
	33	+}
	34	+
	35	+export interface FoxFileUploadProps {
	36	+ mode?: FoxFileUploadMode;
	37	+ /** 주면 제어 컴포넌트가 된다. 없으면 고른 파일을 안에서 들고 있는다. */
	38	+ files?: FoxFileItem[];
	39	+ defaultFiles?: FoxFileItem[];
	40	+ /** 목록이 바뀔 때(고르기·삭제) 부른다. */
	41	+ onFilesChange?: (files: FoxFileItem[]) => void;
	42	+ /** 파일을 고르면 원본 `File`을 그대로 넘긴다 — 업로드는 호출부가 한다. */
	43	+ onSelect?: (picked: File[]) => void;
	44	+ onRemove?: (id: string) => void;
	45	+
	46	+ accept?: string;
	47	+ multiple?: boolean;
	48	+ /**
	49	+ * `default`·`area`에서 목록을 보여준다. `image`에는 목록이 없다.
	50	+ * 넘기지 않으면 `area`이거나 여러 개를 받을 때만 켜진다 — 파일 하나는 칸이 곧 목록이다.
	51	+ */
	52	+ showList?: boolean;
	53	+ /** 끌어다 놓기. `area`는 안내문이 그렇게 말하므로 이 값과 무관하게 항상 켜져 있다. */
	54	+ droppable?: boolean;
	55	+
	56	+ label?: string;
	57	+ description?: string;
	58	+ placeholder?: string;
	59	+ areaText?: string;
	60	+ selectLabel?: string;
	61	+ removeLabel?: string;
	62	+
	63	+ /** `default` 모드 입력칸 폭. 시안은 320px이고 토큰에 없어 여기서 받는다. */
	64	+ inputWidth?: string \| number;
	65	+ /** `image` 모드 썸네일 크기. 시안은 213×120px(16:9)이고 토큰에 없어 여기서 받는다. */
	66	+ thumbnailWidth?: string \| number;
	67	+ thumbnailHeight?: string \| number;
	68	+
	69	+ disabled?: boolean;
	70	+ /** 참이면 렌더하지 않는다(DOM에 남지 않는다). */
	71	+ hidden?: boolean;
	72	+ /** 배치 조정용. */
	73	+ className?: string;
	74	+}
	75	+
	76	+const DEFAULT_AREA_TEXT = "첨부할 파일을 여기에 끌어다 놓거나 파일 선택 버튼을 직접 선택해주세요.";
	77	+
	78	+/* ── 아이콘 ────────────────────────────────────────────────────────────────
	79	+ @fox에 아이콘 세트가 없어 시안의 모양을 직접 그린다. 세트가 들어오면 교체할 자리다.
	80	+ 전부 `currentColor`라 감싼 쪽이 색을 정한다. */
	81	+
	82	+function UploadIcon() {
	83	+ return (
	84	+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" aria-hidden="true">
	85	+ <path d="M8 10.5V2.4M4.8 5.4L8 2.2l3.2 3.2" strokeLinecap="round" strokeLinejoin="round" />
	86	+ <path d="M2.4 10.2v2.6h11.2v-2.6" strokeLinecap="round" />
	87	+ </svg>
	88	+ );
	89	+}
	90	+
	91	+function PaperclipIcon() {
	92	+ return (
	93	+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" aria-hidden="true">
	94	+ <path
	95	+ d="M12.6 7.6l-4.7 4.7a3 3 0 0 1-4.2-4.2l5.4-5.4a2 2 0 0 1 2.8 2.8l-5.4 5.4a1 1 0 0 1-1.4-1.4l4.7-4.7"
	96	+ strokeLinecap="round"
	97	+ strokeLinejoin="round"
	98	+ />
	99	+ </svg>
	100	+ );
	101	+}
	102	+
	103	+function XCircleIcon() {
	104	+ return (
	105	+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" aria-hidden="true">
	106	+ <circle cx="8" cy="8" r="6.3" />
	107	+ <path d="M6 6l4 4M10 6l-4 4" strokeLinecap="round" />
	108	+ </svg>
	109	+ );
	110	+}
	111	+
	112	+function ProhibitIcon() {
	113	+ return (
	114	+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" aria-hidden="true">
	115	+ <circle cx="8" cy="8" r="6.3" />
	116	+ <path d="M3.5 3.5l9 9" strokeLinecap="round" />
	117	+ </svg>
	118	+ );
	119	+}
	120	+
	121	+function CameraPlusIcon() {
	122	+ return (
	123	+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.2" aria-hidden="true">
	124	+ <path d="M1.8 5.4h2.6l1-1.6h3.2l1 1.6h4.6v7.4H1.8z" strokeLinejoin="round" />
	125	+ <circle cx="8" cy="9.1" r="2.2" />
	126	+ <path d="M12.6 1.6v2.6M11.3 2.9h2.6" strokeLinecap="round" />
	127	+ </svg>
	128	+ );
	129	+}
	130	+
	131	+function TrashIcon() {
	132	+ return (
	133	+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" aria-hidden="true">
	134	+ <path d="M2.6 4.2h10.8M6.4 4.2V2.8h3.2v1.4M4 4.2l.6 8.4h6.8l.6-8.4" strokeLinecap="round" strokeLinejoin="round" />
	135	+ </svg>
	136	+ );
	137	+}
	138	+
	139	+/* ── 값 다루기 ─────────────────────────────────────────────────────────────── */
	140	+
	141	+function formatBytes(bytes: number): string {
	142	+ if (bytes < 1024) {
	143	+ return `${bytes}B`;
	144	+ }
	145	+ if (bytes < 1024 * 1024) {
	146	+ return `${Math.round(bytes / 1024)}KB`;
	147	+ }
	148	+ return `${(bytes / 1024 / 1024).toFixed(1)}MB`;
	149	+}
	150	+
	151	+/** 비제어로 쓸 때 원본 `File`을 목록 한 줄로 바꾼다. 시안의 `이름` + `.PDF (20KB)` 모양이다. */
	152	+function toItem(file: File, previewUrl?: string): FoxFileItem {
	153	+ const dot = file.name.lastIndexOf(".");
	154	+ const base = dot > 0 ? file.name.slice(0, dot) : file.name;
	155	+ const ext = dot > 0 ? file.name.slice(dot + 1).toUpperCase() : "";
	156	+ return {
	157	+ id: `${file.name}:${file.size}:${file.lastModified}`,
	158	+ name: base,
	159	+ meta: ext ? `.${ext} (${formatBytes(file.size)})` : `(${formatBytes(file.size)})`,
	160	+ previewUrl,
	161	+ };
	162	+}
	163	+
	164	+function toSize(value: string \| number \| undefined): string \| undefined {
	165	+ if (value === undefined) {
	166	+ return undefined;
	167	+ }
	168	+ return typeof value === "number" ? `${value}px` : value;
	169	+}
	170	+
	171	+/**
	172	+ * @fox 파일 첨부. 세 모드를 한 컴포넌트로 둔다 — 고르는 방식만 다르고 목록은 같기 때문이다.
	173	+ *
	174	+ * 업로드는 하지 않는다. 파일을 고르면 원본 `File`을 넘길 뿐이고, 진행률·서버 오류를 목록에
	175	+ * 어떻게 비출지는 호출부가 `files`로 정한다. `files`를 넘기지 않으면 고른 파일을 안에서
	176	+ * 들고 있어 간단한 폼에서는 그대로 쓸 수 있다.
	177	+ *
	178	+ * ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
	179	+ * (또는 개별 파티셜)로 한 번 불러와야 한다.
	180	+ */
	181	+export function FoxFileUpload({
	182	+ mode = "default",
	183	+ files,
	184	+ defaultFiles,
	185	+ onFilesChange,
	186	+ onSelect,
	187	+ onRemove,
	188	+ accept,
	189	+ multiple = false,
	190	+ showList,
	191	+ droppable = false,
	192	+ label,
	193	+ description,
	194	+ placeholder = "파일을 선택해 주세요.",
	195	+ areaText = DEFAULT_AREA_TEXT,
	196	+ selectLabel = "파일선택",
	197	+ removeLabel = "삭제",
	198	+ inputWidth = 320,
	199	+ thumbnailWidth = 213,
	200	+ thumbnailHeight = 120,
	201	+ disabled = false,
	202	+ hidden = false,
	203	+ className,
	204	+}: FoxFileUploadProps) {
	205	+ const autoId = useId();
	206	+ const pickerRef = useRef<HTMLInputElement>(null);
	207	+ const objectUrls = useRef<string[]>([]);
	208	+ const [inner, setInner] = useState<FoxFileItem[]>(defaultFiles ?? []);
	209	+ const [over, setOver] = useState(false);
	210	+
	211	+ // 비제어로 만든 미리보기 주소는 사라질 때 돌려준다.
	212	+ useEffect(
	213	+ () => () => {
	214	+ objectUrls.current.forEach((url) => URL.revokeObjectURL(url));
	215	+ },
	216	+ []
	217	+ );
	218	+
	219	+ if (hidden) {
	220	+ return null;
	221	+ }
	222	+
	223	+ const current = files ?? inner;
	224	+ // area는 안내문이 끌어다 놓으라고 말하므로 언제나 받는다.
	225	+ const dropEnabled = !disabled && (mode === "area" \|\| droppable);
	226	+ const listVisible = (showList ?? (mode === "area" \|\| multiple)) && mode !== "image";
	227	+ const preview = current[0];
	228	+ // 시안의 upload=true 모양 — 목록 없이 파일 하나를 들고 있으면 칸이 잠기고 버튼이 삭제로 바뀐다.
	229	+ const singleFilled = mode === "default" && !listVisible && current.length === 1;
	230	+
	231	+ const openPicker = () => {
	232	+ pickerRef.current?.click();
	233	+ };
	234	+
	235	+ const takeFiles = (picked: File[]) => {
	236	+ if (!picked.length) {
	237	+ return;
	238	+ }
	239	+ onSelect?.(picked);
	240	+
	241	+ if (files !== undefined) {
	242	+ return;
	243	+ }
	244	+ const made = picked.map((file) => {
	245	+ if (!file.type.startsWith("image/")) {
	246	+ return toItem(file);
	247	+ }
	248	+ const url = URL.createObjectURL(file);
	249	+ objectUrls.current.push(url);
	250	+ return toItem(file, url);
	251	+ });
	252	+ const next = multiple ? [...inner, ...made] : made.slice(0, 1);
	253	+ setInner(next);
	254	+ onFilesChange?.(next);
	255	+ };
	256	+
	257	+ const handlePicked = (event: ChangeEvent<HTMLInputElement>) => {
	258	+ takeFiles(Array.from(event.target.files ?? []));
	259	+ // 같은 파일을 다시 골라도 이벤트가 오게 비운다.
	260	+ event.target.value = "";
	261	+ };
	262	+
	263	+ const handleRemove = (id: string) => {
	264	+ onRemove?.(id);
	265	+ if (files !== undefined) {
	266	+ return;
	267	+ }
	268	+ const next = inner.filter((item) => item.id !== id);
	269	+ setInner(next);
	270	+ onFilesChange?.(next);
	271	+ };
	272	+
	273	+ const handleDragOver = (event: DragEvent<HTMLDivElement>) => {
	274	+ if (!dropEnabled) {
	275	+ return;
	276	+ }
	277	+ event.preventDefault();
	278	+ setOver(true);
	279	+ };
	280	+
	281	+ const handleDragLeave = () => {
	282	+ setOver(false);
	283	+ };
	284	+
	285	+ const handleDrop = (event: DragEvent<HTMLDivElement>) => {
	286	+ if (!dropEnabled) {
	287	+ return;
	288	+ }
	289	+ event.preventDefault();
	290	+ setOver(false);
	291	+ takeFiles(Array.from(event.dataTransfer.files ?? []));
	292	+ };
	293	+
	294	+ const thumbStyle: CSSProperties = {
	295	+ inlineSize: toSize(thumbnailWidth),
	296	+ blockSize: toSize(thumbnailHeight),
	297	+ };
	298	+
	299	+ const selectButton = (type: "primary" \| "secondary") => (
	300	+ <FoxButton
	301	+ size="md"
	302	+ type={type}
	303	+ label={selectLabel}
	304	+ leadingIcon={<UploadIcon />}
	305	+ disabled={disabled}
	306	+ onAction={openPicker}
	307	+ />
	308	+ );
	309	+
	310	+ return (
	311	+ <div
	312	+ className={cx("fox-file-upload", mode === "area" && "fox-file-upload--area", className)}
	313	+ onDragOver={handleDragOver}
	314	+ onDragLeave={handleDragLeave}
	315	+ onDrop={handleDrop}
	316	+ >
	317	+ {label && (
	318	+ <span className="fox-file-upload__label" id={`${autoId}-label`}>
	319	+ {label}
	320	+ </span>
	321	+ )}
	322	+
	323	+ {/* 파일 고르기는 네이티브 입력이 맡고 화면에는 버튼만 보인다. */}
	324	+ <input
	325	+ ref={pickerRef}
	326	+ type="file"
	327	+ accept={accept}
	328	+ multiple={multiple}
	329	+ disabled={disabled}
	330	+ hidden
	331	+ onChange={handlePicked}
	332	+ />
	333	+
	334	+ {mode === "default" && (
	335	+ <div className="fox-file-upload__row">
	336	+ <div
	337	+ className={cx(
	338	+ "fox-file-upload__field",
	339	+ !singleFilled && "fox-file-upload__field--empty"
	340	+ )}
	341	+ style={{ inlineSize: toSize(inputWidth) }}
	342	+ >
	343	+ <FoxInput
	344	+ size="md"
	345	+ aria-label={placeholder}
	346	+ value={singleFilled ? `${preview.name}${preview.meta ?? ""}` : ""}
	347	+ placeholder={placeholder}
	348	+ message={description}
	349	+ readOnly
	350	+ disabled={disabled}
	351	+ />
	352	+ </div>
	353	+
	354	+ {singleFilled ? (
	355	+ <FoxButton
	356	+ size="md"
	357	+ type="default"
	358	+ label={removeLabel}
	359	+ leadingIcon={<TrashIcon />}
	360	+ disabled={disabled}
	361	+ onAction={() => handleRemove(preview.id)}
	362	+ />
	363	+ ) : (
	364	+ selectButton("secondary")
	365	+ )}
	366	+ </div>
	367	+ )}
	368	+
	369	+ {mode === "area" && (
	370	+ <div className={cx("fox-file-upload__area", over && "fox-file-upload__area--over")}>
	371	+ <p className="fox-file-upload__area-text">{areaText}</p>
	372	+ {selectButton("primary")}
	373	+ </div>
	374	+ )}
	375	+
	376	+ {mode === "image" && (
	377	+ <div className="fox-file-upload__image">
	378	+ <div
	379	+ className={cx(
	380	+ "fox-file-upload__thumb",
	381	+ preview?.previewUrl && "fox-file-upload__thumb--filled"
	382	+ )}
	383	+ style={thumbStyle}
	384	+ >
	385	+ {preview?.previewUrl ? (
	386	+ <>
	387	+ {/* eslint-disable-next-line @next/next/no-img-element -- next/image를 쓰면 이
	388	+ 폴더가 Next 전용이 된다. */}
	389	+ <img className="fox-file-upload__thumb-image" src={preview.previewUrl} alt="" />
	390	+ <span className="fox-file-upload__thumb-remove">
	391	+ <FoxIconButton
	392	+ size="xsm"
	393	+ type="overlay"
	394	+ label={removeLabel}
	395	+ icon={<TrashIcon />}
	396	+ disabled={disabled}
	397	+ onAction={() => handleRemove(preview.id)}
	398	+ />
	399	+ </span>
	400	+ </>
	401	+ ) : (
	402	+ <span className="fox-file-upload__thumb-icon" aria-hidden="true">
	403	+ <CameraPlusIcon />
	404	+ </span>
	405	+ )}
	406	+ </div>
	407	+
	408	+ <div className="fox-file-upload__image-side">
	409	+ {selectButton("secondary")}
	410	+ {description && <p className="fox-file-upload__description">{description}</p>}
	411	+ </div>
	412	+ </div>
	413	+ )}
	414	+
	415	+ {listVisible && current.length > 0 && (
	416	+ <ul className="fox-file-upload__list">
	417	+ {current.map((item) => (
	418	+ <li
	419	+ key={item.id}
	420	+ className={cx(
	421	+ "fox-file-upload__item",
	422	+ item.error && "fox-file-upload__item--error"
	423	+ )}
	424	+ >
	425	+ <div className="fox-file-upload__item-main">
	426	+ <span className="fox-file-upload__item-title">
	427	+ <span className="fox-file-upload__item-icon" aria-hidden="true">
	428	+ <PaperclipIcon />
	429	+ </span>
	430	+ <span className="fox-file-upload__item-name">{item.name}</span>
	431	+ {item.meta && <span className="fox-file-upload__item-meta">{item.meta}</span>}
	432	+ </span>
	433	+
	434	+ <span className="fox-file-upload__item-actions">
	435	+ <FoxTextButton
	436	+ size="md"
	437	+ type="secondary"
	438	+ label={removeLabel}
	439	+ trailingIcon={<XCircleIcon />}
	440	+ disabled={disabled}
	441	+ onAction={() => handleRemove(item.id)}
	442	+ />
	443	+ </span>
	444	+ </div>
	445	+
	446	+ {item.error && item.message && (
	447	+ <p className="fox-file-upload__item-message">
	448	+ <span className="fox-file-upload__item-message-icon" aria-hidden="true">
	449	+ <ProhibitIcon />
	450	+ </span>
	451	+ {item.message}
	452	+ </p>
	453	+ )}
	454	+ </li>
	455	+ ))}
	456	+ </ul>
	457	+ )}
	458	+ </div>
	459	+ );
	460	+}

3c3b7a9

@fox/core/components/fox-file-upload/index.ts (added)

+++ @fox/core/components/fox-file-upload/index.ts

...	...	@@ -0,0 +1,6 @@
	1	+export {
	2	+ FoxFileUpload,
	3	+ type FoxFileUploadProps,
	4	+ type FoxFileUploadMode,
	5	+ type FoxFileItem,
	6	+} from "./fox-file-upload";

84b98ea

3c3b7a9

@fox/core/components/index.ts

--- @fox/core/components/index.ts

+++ @fox/core/components/index.ts


 export * from "./fox-button-panel";
 export * from "./fox-certified";
 export * from "./fox-email";
+export * from "./fox-file-upload";
 export * from "./fox-icon-button";
 export * from "./fox-input";
 export * from "./fox-link-button";

84b98ea

3c3b7a9

@fox/dev-test/component-registry.tsx

--- @fox/dev-test/component-registry.tsx

+++ @fox/dev-test/component-registry.tsx

...	...	@@ -10,6 +10,7 @@
10	10	import { FoxAddress, type FoxAddressSearchResult, type FoxAddressValue } from "../core/components/fox-address";
11	11	import { FoxCertified } from "../core/components/fox-certified";
12	12	import { FoxEmail } from "../core/components/fox-email";
	13	+import { FoxFileUpload, type FoxFileItem } from "../core/components/fox-file-upload";
13	14	import { FoxPhoneNumber, type FoxPhoneNumberState } from "../core/components/fox-phone-number";
14	15	import { FoxTextArea, type FoxTextAreaState } from "../core/components/fox-text-area";
15	16	import { FoxTextButton } from "../core/components/fox-text-button";
...	...	@@ -205,6 +206,41 @@
205	206	</InputStage>
206	207	<pre className={styles.code}>{JSON.stringify(value, null, 2)}</pre>
207	208	</>
	209	+ );
	210	+}
	211	+
	212	+// 목록은 업로드 결과에 따라 바뀌므로, 오류 줄까지 보려면 예제가 값을 들고 있어야 한다.
	213	+const SAMPLE_FILES: FoxFileItem[] = [
	214	+ { id: "a", name: "사업자등록증", meta: ".PDF (20KB)" },
	215	+ { id: "b", name: "아주 긴 파일 이름이라 가운데에서 말줄임되어야 하는 첨부물", meta: ".XLSX (1.2MB)" },
	216	+ {
	217	+ id: "c",
	218	+ name: "용량초과파일",
	219	+ meta: ".ZIP (32MB)",
	220	+ error: true,
	221	+ message: "등록 가능한 파일 용량을 초과하였습니다. 20MB 미만의 파일만 등록할 수 있습니다.",
	222	+ },
	223	+];
	224	+
	225	+function FileUploadLiveDemo({ mode }: { mode: "default" \| "area" }) {
	226	+ const [files, setFiles] = useState<FoxFileItem[]>(SAMPLE_FILES);
	227	+ return (
	228	+ <InputStage wide>
	229	+ <FoxFileUpload
	230	+ mode={mode}
	231	+ label={mode === "area" ? "끌어다 놓거나 버튼으로 고릅니다" : "고른 파일이 칸에 적힙니다"}
	232	+ files={files}
	233	+ onSelect={(picked) =>
	234	+ setFiles((prev) => [
	235	+ ...prev,
	236	+ ...picked.map((file) => ({ id: file.name, name: file.name, meta: `(${file.size}B)` })),
	237	+ ])
	238	+ }
	239	+ onRemove={(id) => setFiles((prev) => prev.filter((item) => item.id !== id))}
	240	+ description={mode === "default" ? "JPG, PNG 파일만 가능 (최대 5MB)" : undefined}
	241	+ multiple
	242	+ />
	243	+ </InputStage>
208	244	);
209	245	}
210	246
...	...	@@ -1268,4 +1304,92 @@
1268	1304	},
1269	1305	],
1270	1306	},
	1307	+ {
	1308	+ id: "fox-file-upload",
	1309	+ name: "FoxFileUpload",
	1310	+ description:
	1311	+ "Figma 시안 다섯(file-upload 391:3677 · file-upload-area 392:5968 · file-upload-img 391:3732 · file-list 392:5938 · file-list-item 391:3509)을 한 컴포넌트로 옮겼습니다. 버튼·입력이 모두 기존 컴포넌트의 인스턴스라 FoxButton·FoxTextButton·FoxIconButton·FoxInput을 그대로 조합했습니다. 업로드는 하지 않고 고른 원본 File만 넘깁니다 — 목록은 files로 주면 제어, 안 주면 안에서 들고 있습니다. default·area는 목록을 붙일 수 있고 image는 목록이 없습니다.",
	1312	+ variants: [
	1313	+ {
	1314	+ label: "default 모드 — 읽기 전용 칸 + 파일선택, 목록 지원",
	1315	+ node: <FileUploadLiveDemo mode="default" />,
	1316	+ },
	1317	+ {
	1318	+ label: "area 모드 — 끌어다 놓기가 항상 켜져 있고 목록을 지원합니다",
	1319	+ node: <FileUploadLiveDemo mode="area" />,
	1320	+ },
	1321	+ {
	1322	+ label: "image 모드 — 목록이 없고 썸네일 하나입니다",
	1323	+ node: (
	1324	+ <>
	1325	+ <InputStage wide>
	1326	+ <FoxFileUpload
	1327	+ mode="image"
	1328	+ label="비었을 때"
	1329	+ accept="image/*"
	1330	+ description="JPG, PNG 파일만 가능 (권장 사이즈: 1280x720px, 최대 5MB)"
	1331	+ />
	1332	+ </InputStage>
	1333	+ <InputStage wide>
	1334	+ <FoxFileUpload
	1335	+ mode="image"
	1336	+ label="채워졌을 때 — 가운데 버튼으로 지웁니다"
	1337	+ accept="image/*"
	1338	+ defaultFiles={[
	1339	+ { id: "p", name: "미리보기", previewUrl: "https://picsum.photos/seed/picsum/426/240" },
	1340	+ ]}
	1341	+ description="JPG, PNG 파일만 가능 (권장 사이즈: 1280x720px, 최대 5MB)"
	1342	+ />
	1343	+ </InputStage>
	1344	+ </>
	1345	+ ),
	1346	+ },
	1347	+ {
	1348	+ label: "default 모드 · 파일 하나 (시안 upload=true) — 칸이 잠기고 버튼이 삭제로 바뀝니다",
	1349	+ node: (
	1350	+ <>
	1351	+ <InputStage wide>
	1352	+ <FoxFileUpload label="비었을 때" description="JPG, PNG 파일만 가능 (최대 5MB)" />
	1353	+ </InputStage>
	1354	+ <InputStage wide>
	1355	+ <FoxFileUpload
	1356	+ label="파일이 있을 때"
	1357	+ defaultFiles={[{ id: "one", name: "파일명", meta: ".PDF (20KB)" }]}
	1358	+ description="JPG, PNG 파일만 가능 (최대 5MB)"
	1359	+ />
	1360	+ </InputStage>
	1361	+ </>
	1362	+ ),
	1363	+ },
	1364	+ {
	1365	+ label: "목록 없이 · 크기 바꾸기",
	1366	+ node: (
	1367	+ <>
	1368	+ <InputStage wide>
	1369	+ <FoxFileUpload label="showList={false}" defaultFiles={SAMPLE_FILES} showList={false} multiple />
	1370	+ </InputStage>
	1371	+ <InputStage wide>
	1372	+ <FoxFileUpload label="inputWidth=440" inputWidth={440} />
	1373	+ </InputStage>
	1374	+ <InputStage wide>
	1375	+ <FoxFileUpload
	1376	+ mode="image"
	1377	+ label="thumbnail 160×90"
	1378	+ thumbnailWidth={160}
	1379	+ thumbnailHeight={90}
	1380	+ />
	1381	+ </InputStage>
	1382	+ </>
	1383	+ ),
	1384	+ },
	1385	+ {
	1386	+ label: "비활성",
	1387	+ node: (
	1388	+ <InputStage wide>
	1389	+ <FoxFileUpload label="disabled" defaultFiles={SAMPLE_FILES} multiple disabled />
	1390	+ </InputStage>
	1391	+ ),
	1392	+ },
	1393	+ ],
	1394	+ },
1271	1395	];

3c3b7a9

@fox/styles/_fox-file-upload.scss (added)

+++ @fox/styles/_fox-file-upload.scss

...	...	@@ -0,0 +1,286 @@
	1	+// FoxFileUpload — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
	2	+// file-upload (391:3677) · file-upload-area (392:5968) · file-upload-img (391:3732)
	3	+// file-list (392:5938) · file-list-item (391:3509)
	4	+//
	5	+// 세 모드가 한 컴포넌트다.
	6	+// - default: [읽기 전용 입력 + 파일선택(secondary)] — 목록을 붙일 수 있다.
	7	+// - area: 점선 상자에 안내문과 파일선택(primary) — 목록을 붙일 수 있고 끌어다 놓기가
	8	+// 항상 켜져 있다(안내문이 그렇게 말한다).
	9	+// - image: 썸네일 + 파일선택(secondary) + 설명 — 목록이 없다.
	10	+//
	11	+// 시안에서 버튼·입력이 모두 기존 컴포넌트의 인스턴스라 그대로 조합한다.
	12	+// 파일선택 = FoxButton(secondary/primary md) · 삭제 = FoxTextButton(md secondary)
	13	+// 썸네일 삭제 = FoxIconButton(overlay xsm — 24px·radius 4·배경흐림·흰 아이콘이 시안과 같다)
	14	+// default 모드 입력칸 = FoxInput(md, 읽기 전용)
	15	+// 그래서 이 파일은 배치와 목록·썸네일·점선 상자만 갖는다.
	16	+//
	17	+// 아이콘 색은 에셋에서 확인해 토큰과 맞췄다 — 클립 #8A949E(icon-neutral-subtler),
	18	+// 오류 #BD2C0F(icon-system-danger-strong), 빈 썸네일은 검정 25%(icon-neutral-fill).
	19	+// 버튼 안 아이콘은 FoxButton·FoxTextButton이 `currentColor`로 칠하므로 여기서 정하지 않는다.
	20	+//
	21	+// 토큰이 아닌 값:
	22	+// - 입력칸 폭과 썸네일 크기는 인라인 스타일로 들어온다 — 시안 값(320px · 213×120px)이
	23	+// 토큰에 없어 prop 기본값으로 두었다(사용자 승인).
	24	+// - line-height / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로
	25	+// export하지 않는다.
	26	+// - object-fit / overflow / position: 구조 규칙.
	27	+
	28	+@use "abstracts" as fox;
	29	+
	30	+.fox-file-upload {
	31	+ display: flex;
	32	+ flex-direction: column;
	33	+ gap: fox.gap(3);
	34	+ inline-size: 100%;
	35	+
	36	+ // area 모드는 상자와 목록 사이가 한 단계 넓다.
	37	+ &--area {
	38	+ gap: fox.gap(7);
	39	+ }
	40	+
	41	+ &__label {
	42	+ color: fox.color(font-neutral-default);
	43	+ font-family: fox.font-family(body);
	44	+ font-size: fox.font-size(label-md);
	45	+ font-weight: fox.font-weight(medium);
	46	+ line-height: 1;
	47	+ letter-spacing: -0.025em;
	48	+ }
	49	+
	50	+ &__description {
	51	+ margin: 0;
	52	+ color: fox.color(font-neutral-subtle);
	53	+ font-family: fox.font-family(body);
	54	+ font-size: fox.font-size(body-sm);
	55	+ font-weight: fox.font-weight(regular);
	56	+ line-height: 1.5;
	57	+ letter-spacing: -0.025em;
	58	+ }
	59	+
	60	+ // ── default 모드 ──────────────────────────────────────────────────────────
	61	+ &__row {
	62	+ display: flex;
	63	+ align-items: flex-start;
	64	+ gap: fox.gap(3);
	65	+ inline-size: 100%;
	66	+ }
	67	+
	68	+ // 폭은 prop이 인라인 스타일로 정한다.
	69	+ &__field {
	70	+ flex-shrink: 0;
	71	+ }
	72	+
	73	+
	74	+ // ── area 모드 ─────────────────────────────────────────────────────────────
	75	+ &__area {
	76	+ box-sizing: border-box;
	77	+ display: flex;
	78	+ flex-direction: column;
	79	+ align-items: center;
	80	+ gap: fox.gap(7);
	81	+ inline-size: 100%;
	82	+ padding: fox.padding(10);
	83	+ border: fox.border(2) dashed fox.color(border-neutral-subtle);
	84	+ border-radius: fox.radius(6);
	85	+ background: fox.color(surface-neutral-gray);
	86	+ }
	87	+
	88	+ // 끌어오는 동안. 시안에 없는 상태라 기존 토큰으로 최소한만 표시한다.
	89	+ &__area--over {
	90	+ border-color: fox.color(border-theme-primary);
	91	+ background: fox.color(surface-theme-primary);
	92	+ }
	93	+
	94	+ &__area-text {
	95	+ margin: 0;
	96	+ inline-size: 100%;
	97	+ color: fox.color(font-neutral-default);
	98	+ font-family: fox.font-family(body);
	99	+ font-size: fox.font-size(body-lg);
	100	+ font-weight: fox.font-weight(regular);
	101	+ line-height: 1.5;
	102	+ letter-spacing: -0.025em;
	103	+ text-align: center;
	104	+ }
	105	+
	106	+ // ── image 모드 ────────────────────────────────────────────────────────────
	107	+ &__image {
	108	+ display: flex;
	109	+ align-items: center;
	110	+ gap: fox.gap(6);
	111	+ inline-size: 100%;
	112	+ }
	113	+
	114	+ &__thumb {
	115	+ position: relative;
	116	+ box-sizing: border-box;
	117	+ display: flex;
	118	+ flex-shrink: 0;
	119	+ align-items: center;
	120	+ justify-content: center;
	121	+ overflow: hidden;
	122	+ border: fox.border(1) dashed fox.color(border-neutral-subtle);
	123	+ border-radius: fox.radius(3);
	124	+ background: fox.color(surface-neutral-gray);
	125	+ color: fox.color(icon-neutral-fill);
	126	+ }
	127	+
	128	+ // 그림이 들어오면 점선이 실선이 되고 바탕은 그림이 덮는다.
	129	+ &__thumb--filled {
	130	+ border-style: solid;
	131	+ background: none;
	132	+ }
	133	+
	134	+ &__thumb-icon > * {
	135	+ inline-size: fox.icon(6);
	136	+ block-size: fox.icon(6);
	137	+ }
	138	+
	139	+ &__thumb-image {
	140	+ inline-size: 100%;
	141	+ block-size: 100%;
	142	+ object-fit: cover;
	143	+ }
	144	+
	145	+ &__thumb-remove {
	146	+ position: absolute;
	147	+ inset-block-start: 50%;
	148	+ inset-inline-start: 50%;
	149	+ transform: translate(-50%, -50%);
	150	+ }
	151	+
	152	+ &__image-side {
	153	+ display: flex;
	154	+ flex: 1 0 0;
	155	+ flex-direction: column;
	156	+ gap: fox.gap(4);
	157	+ min-inline-size: 0;
	158	+ }
	159	+
	160	+ // ── 목록 ──────────────────────────────────────────────────────────────────
	161	+ // 줄이 많아지면 상자 안에서만 스크롤한다.
	162	+ &__list {
	163	+ display: flex;
	164	+ flex-direction: column;
	165	+ inline-size: 100%;
	166	+ max-block-size: 32rem;
	167	+ overflow-x: clip;
	168	+ overflow-y: auto;
	169	+ border: fox.border(1) solid fox.color(border-neutral-subtle);
	170	+ border-radius: fox.radius(3);
	171	+ }
	172	+
	173	+ &__item {
	174	+ box-sizing: border-box;
	175	+ display: flex;
	176	+ flex-direction: column;
	177	+ gap: fox.gap(4);
	178	+ justify-content: center;
	179	+ inline-size: 100%;
	180	+ padding-inline: fox.padding(6);
	181	+ padding-block: fox.padding(4);
	182	+ border-block-end: fox.border(1) solid fox.color(border-neutral-subtle);
	183	+ background: fox.color(surface-neutral-default);
	184	+ }
	185	+
	186	+ // 오류 줄은 네 변 모두 굵은 테두리를 갖는다.
	187	+ &__item--error {
	188	+ border: fox.border(2) solid fox.color(border-system-danger);
	189	+ background: fox.color(surface-system-danger);
	190	+ }
	191	+
	192	+ &__item-main {
	193	+ display: flex;
	194	+ align-items: center;
	195	+ gap: fox.gap(3);
	196	+ inline-size: 100%;
	197	+ }
	198	+
	199	+ &__item-title {
	200	+ display: flex;
	201	+ flex: 1 0 0;
	202	+ align-items: center;
	203	+ gap: fox.gap(2);
	204	+ min-inline-size: 0;
	205	+ color: fox.color(font-neutral-default);
	206	+ font-family: fox.font-family(body);
	207	+ font-size: fox.font-size(body-md);
	208	+ font-weight: fox.font-weight(regular);
	209	+ line-height: 1.5;
	210	+ letter-spacing: -0.025em;
	211	+ white-space: nowrap;
	212	+ }
	213	+
	214	+ &__item-icon {
	215	+ display: inline-flex;
	216	+ flex-shrink: 0;
	217	+ color: fox.color(icon-neutral-subtler);
	218	+
	219	+ > * {
	220	+ inline-size: fox.icon(4);
	221	+ block-size: fox.icon(4);
	222	+ }
	223	+ }
	224	+
	225	+ // 이름만 줄어들고 확장자·용량은 그대로 남는다.
	226	+ &__item-name {
	227	+ overflow: hidden;
	228	+ text-overflow: ellipsis;
	229	+ }
	230	+
	231	+ &__item-meta {
	232	+ flex-shrink: 0;
	233	+ }
	234	+
	235	+ &__item-actions {
	236	+ display: flex;
	237	+ flex-shrink: 0;
	238	+ align-items: center;
	239	+ gap: fox.gap(4);
	240	+ }
	241	+
	242	+ // 오류 문구는 줄 안에서 옅은 선으로 한 번 끊고 붙는다.
	243	+ &__item-message {
	244	+ display: flex;
	245	+ gap: fox.number(3);
	246	+ align-items: flex-start;
	247	+ inline-size: 100%;
	248	+ margin: 0;
	249	+ padding-block-start: fox.padding(5);
	250	+ border-block-start: fox.border(1) solid fox.color(border-neutral-overlay);
	251	+ color: fox.color(font-system-danger);
	252	+ font-family: fox.font-family(body);
	253	+ font-size: fox.font-size(body-sm);
	254	+ font-weight: fox.font-weight(regular);
	255	+ line-height: 1.5;
	256	+ letter-spacing: -0.025em;
	257	+ }
	258	+
	259	+ &__item-message-icon {
	260	+ display: inline-flex;
	261	+ flex-shrink: 0;
	262	+ align-items: flex-start;
	263	+ padding-block-start: fox.padding(1);
	264	+ color: fox.color(icon-system-danger-strong);
	265	+
	266	+ > * {
	267	+ inline-size: fox.icon(3);
	268	+ block-size: fox.icon(3);
	269	+ }
	270	+ }
	271	+}
	272	+
	273	+// 칸은 손으로 고칠 수 없으므로 언제나 읽기 전용이지만, 시안은 비었을 때 흰 상자를 보여준다
	274	+// (파일이 들어오면 읽기 전용 본래의 회색 상자가 그대로 나온다 — 시안 upload=true).
	275	+// FoxInput의 읽기 전용 규칙이 특이도 0,6,0이라 그보다 높게 적어 로드 순서와 무관하게 이긴다.
	276	+.fox-file-upload
	277	+ .fox-file-upload__field--empty
	278	+ .fox-input:not([data-state])
	279	+ .fox-input__box:has(.fox-file-upload__field--empty .fox-input__field:read-only:not(:disabled)),
	280	+.fox-file-upload
	281	+ .fox-file-upload__field--empty
	282	+ .fox-input:not([data-state])
	283	+ .fox-input__box:has(.fox-input__field:read-only:not(:disabled)) {
	284	+ border-color: fox.color(input-border);
	285	+ background: fox.color(input-surface);
	286	+}

84b98ea

3c3b7a9

@fox/styles/components.scss

--- @fox/styles/components.scss

+++ @fox/styles/components.scss


 @use "fox-address";
 @use "fox-certified";
 @use "fox-email";
+@use "fox-file-upload";
 @use "fox-input";
 @use "fox-phone-number";
 @use "fox-select";

Add a comment

Open 0
Closed 0

List

...	...	@@ -4,6 +4,7 @@
4	4	export * from "./fox-button-panel";
5	5	export * from "./fox-certified";
6	6	export * from "./fox-email";
	7	+export * from "./fox-file-upload";
7	8	export * from "./fox-icon-button";
8	9	export * from "./fox-input";
9	10	export * from "./fox-link-button";

...	...	@@ -10,6 +10,7 @@
10	10	@use "fox-address";
11	11	@use "fox-certified";
12	12	@use "fox-email";
	13	+@use "fox-file-upload";
13	14	@use "fox-input";
14	15	@use "fox-phone-number";
15	16	@use "fox-select";

Delete comment