FileUploaderItem

파일 업로더에서 업로드된 파일(또는 업로드 대기 파일)을 리스트로 보여줄 때 사용하는 아이템입니다. 우측에는 업로드 상태에 따라 Spinner/체크 아이콘이 표시되며, 상태에 따라 삭제(닫기) 버튼 노출이 바뀝니다.

buttonProps로 클릭/접근성 속성을 전달하고, onRemoveClick으로 삭제 버튼 동작을 연결합니다.

기본 사용법

'use client';

import FileUploaderItem, {
  FileUploaderItemUploadStatus,
} from '@aift/ui/FileUploaderItem';
import Blank20Icon from '@aift/ui/Icons/Blank20';
import { useState } from 'react';
import { Button } from '@aift/ui/Button';

export default function FileUploaderItemPreviewExample() {
  const [visible, setVisible] = useState(true);
  const [uploadStatus, setUploadStatus] =
    useState<FileUploaderItemUploadStatus>('idle');
  const handleUpload = () => {
    setUploadStatus('uploading');
    setTimeout(() => {
      setUploadStatus('success');
    }, 1000);
  };
  return (
    <div className="max-w-md space-y-2">
      <Button
        onClick={handleUpload}
        size="small"
        variant="outlined"
        color="default"
      >
        업로드
      </Button>
      <div className="flex flex-col p-4 bg-background-neutral rounded-md">
        {visible ? (
          <FileUploaderItem
            leftSlot={<Blank20Icon size={16} />}
            onRemoveClick={() => setVisible(false)}
            uploadStatus={uploadStatus}
          >
            example.pdf (1.2MB)
          </FileUploaderItem>
        ) : (
          <div className="typography-label-2 text-text-alternative">
            삭제됨 (새로고침하면 다시 보입니다)
          </div>
        )}
      </div>
    </div>
  );
}

'use client';import FileUploaderItem, {  FileUploaderItemUploadStatus,} from '@aift/ui/FileUploaderItem';import Blank20Icon from '@aift/ui/Icons/Blank20';import { useState } from 'react';import { Button } from '@aift/ui/Button';export default function FileUploaderItemPreviewExample() {  const [visible, setVisible] = useState(true);  const [uploadStatus, setUploadStatus] =    useState<FileUploaderItemUploadStatus>('idle');  const handleUpload = () => {    setUploadStatus('uploading');    setTimeout(() => {      setUploadStatus('success');    }, 1000);  };  return (    <div className="max-w-md space-y-2">      <Button        onClick={handleUpload}        size="small"        variant="outlined"        color="default"      >        업로드      </Button>      <div className="flex flex-col p-4 bg-background-neutral rounded-md">        {visible ? (          <FileUploaderItem            leftSlot={<Blank20Icon size={16} />}            onRemoveClick={() => setVisible(false)}            uploadStatus={uploadStatus}          >            example.pdf (1.2MB)          </FileUploaderItem>        ) : (          <div className="typography-label-2 text-text-alternative">            삭제됨 (새로고침하면 다시 보입니다)          </div>        )}      </div>    </div>  );}

UploadStatus

'use client';

import FileUploaderItem, {
  type FileUploaderItemUploadStatus,
} from '@aift/ui/FileUploaderItem';
import Blank20Icon from '@aift/ui/Icons/Blank20';
import { Button } from '@aift/ui/Button';
import { useState } from 'react';

export default function FileUploaderItemUploadStatusExample() {
  const [status, setStatus] = useState<FileUploaderItemUploadStatus>('idle');

  return (
    <div className="max-w-md space-y-2">
      <div className="flex flex-wrap gap-2">
        <Button
          size="small"
          variant="outlined"
          color="default"
          onClick={() => setStatus('idle')}
        >
          idle
        </Button>
        <Button
          size="small"
          variant="outlined"
          color="default"
          onClick={() => setStatus('uploading')}
        >
          uploading
        </Button>
        <Button
          size="small"
          variant="outlined"
          color="default"
          onClick={() => setStatus('success')}
        >
          success
        </Button>
      </div>

      <div className="flex flex-col rounded-md bg-background-neutral p-4">
        <FileUploaderItem
          leftSlot={<Blank20Icon size={16} />}
          uploadStatus={status}
          // null이면 success 체크 표시가 계속 유지됩니다.
          successIndicatorDurationMs={status === 'success' ? null : undefined}
          onRemoveClick={() => setStatus('idle')}
        >
          example.pdf (1.2MB)
        </FileUploaderItem>
      </div>
    </div>
  );
}

'use client';import FileUploaderItem, {  type FileUploaderItemUploadStatus,} from '@aift/ui/FileUploaderItem';import Blank20Icon from '@aift/ui/Icons/Blank20';import { Button } from '@aift/ui/Button';import { useState } from 'react';export default function FileUploaderItemUploadStatusExample() {  const [status, setStatus] = useState<FileUploaderItemUploadStatus>('idle');  return (    <div className="max-w-md space-y-2">      <div className="flex flex-wrap gap-2">        <Button          size="small"          variant="outlined"          color="default"          onClick={() => setStatus('idle')}        >          idle        </Button>        <Button          size="small"          variant="outlined"          color="default"          onClick={() => setStatus('uploading')}        >          uploading        </Button>        <Button          size="small"          variant="outlined"          color="default"          onClick={() => setStatus('success')}        >          success        </Button>      </div>      <div className="flex flex-col rounded-md bg-background-neutral p-4">        <FileUploaderItem          leftSlot={<Blank20Icon size={16} />}          uploadStatus={status}          // null이면 success 체크 표시가 계속 유지됩니다.          successIndicatorDurationMs={status === 'success' ? null : undefined}          onRemoveClick={() => setStatus('idle')}        >          example.pdf (1.2MB)        </FileUploaderItem>      </div>    </div>  );}

Disabled

'use client';

import FileUploaderItem from '@aift/ui/FileUploaderItem';

export default function FileUploaderItemDisabledExample() {
  return (
    <div className="max-w-md space-y-2">
      <div className="flex flex-col p-4 bg-background-neutral rounded-md gap-2">
        <FileUploaderItem disabled>disabled-file.zip (32MB)</FileUploaderItem>
        <FileUploaderItem>file.png (240KB)</FileUploaderItem>
      </div>
    </div>
  );
}

'use client';import FileUploaderItem from '@aift/ui/FileUploaderItem';export default function FileUploaderItemDisabledExample() {  return (    <div className="max-w-md space-y-2">      <div className="flex flex-col p-4 bg-background-neutral rounded-md gap-2">        <FileUploaderItem disabled>disabled-file.zip (32MB)</FileUploaderItem>        <FileUploaderItem>file.png (240KB)</FileUploaderItem>      </div>    </div>  );}

Invalid

파일 용량이 초과되었습니다.

'use client';

import FileUploaderItem from '@aift/ui/FileUploaderItem';

export default function FileUploaderItemInvalidExample() {
  return (
    <div className="max-w-md space-y-2">
      <div className="flex flex-col p-4 bg-background-neutral rounded-md gap-2">
        <FileUploaderItem invalid invalidMessage="파일 용량이 초과되었습니다.">
          file.png (240KB)
        </FileUploaderItem>
      </div>
    </div>
  );
}

'use client';import FileUploaderItem from '@aift/ui/FileUploaderItem';export default function FileUploaderItemInvalidExample() {  return (    <div className="max-w-md space-y-2">      <div className="flex flex-col p-4 bg-background-neutral rounded-md gap-2">        <FileUploaderItem invalid invalidMessage="파일 용량이 초과되었습니다.">          file.png (240KB)        </FileUploaderItem>      </div>    </div>  );}

Props

Prop	타입	기본값	설명
`children`	`ReactNode`	-	메인 텍스트/콘텐츠
`leftSlot`	`ReactNode`	-	왼쪽 아이콘/요소 슬롯
`buttonProps`	`ButtonHTMLAttributes<HTMLButtonElement>`	-	메인 버튼에 전달할 props (`onClick`, `aria-label` 등)
`disabled`	`boolean`	-	비활성화
`readOnly`	`boolean`	-	읽기 전용
`onRemoveClick`	`() => void`	-	우측 Close(삭제) 버튼 클릭 핸들러
`removeAriaLabel`	`string`	`'파일 삭제'`	삭제 버튼 `aria-label`
`uploadStatus`	`'idle' \| 'uploading' \| 'success' \| 'error'`	`'idle'`	업로드 상태 표시. `uploading/success` 동안 Close 버튼은 숨김
`successIndicatorDurationMs`	`number \| null`	`1200`	`success` 체크 표시 유지 시간. `null`이면 계속 유지
`invalid`	`boolean`	-	에러 상태
`invalidMessage`	`string`	-	에러 메시지( `invalid`일 때 표시)