Attachment Field

import type { NativeFile } from "@seed-design/lynx-react";
import { AttachmentField, AttachmentInput } from "@/components/ui/attachment-field";
import { VStack } from "@seed-design/lynx-react";

// 문서 고정 fixture입니다. 실제 앱에서는 호스트가 제공하는 파일 선택 adapter를 전달하세요.
const FIXTURE_FILES: NativeFile[] = [
  {
    uri: "fixture://attachment-field/document.pdf",
    name: "document.pdf",
    type: "application/pdf",
    size: 5,
  },
];

export default function AttachmentFieldPreview() {
  return (
    <VStack gap="x4" width="100%">
      <AttachmentField
        maxFiles={3}
        label="파일 업로드"
        description="최대 3개까지 업로드할 수 있습니다"
        onSelectFiles={() => FIXTURE_FILES}
      >
        <AttachmentInput />
      </AttachmentField>
    </VStack>
  );
}

import type { AttachmentFileEntry, NativeFile } from "@seed-design/lynx-react";
import { AttachmentField, AttachmentInput } from "@/components/ui/attachment-field";
import { VStack } from "@seed-design/lynx-react";

const DEFAULT_FILES: AttachmentFileEntry[] = [
  {
    id: "document",
    file: {
      uri: "fixture://attachment-field/document.pdf",
      name: "document.pdf",
      type: "application/pdf",
      size: 5,
    },
    status: "success",
  },
];
const PICKED_FILES: NativeFile[] = [
  {
    uri: "fixture://attachment-field/photo.png",
    name: "photo.png",
    type: "image/png",
    size: 8,
    previewUrl: "https://picsum.photos/seed/attachment-trigger/200/200",
  },
];

export default function AttachmentFieldTrigger() {
  return (
    <VStack gap="x4" width="100%">
      <AttachmentField
        maxFiles={3}
        label="파일 업로드"
        defaultAcceptedFileEntries={DEFAULT_FILES}
        onSelectFiles={() => PICKED_FILES}
      >
        <AttachmentInput />
      </AttachmentField>
    </VStack>
  );
}

import { useState } from "@lynx-js/react";
import type { NativeFile } from "@seed-design/lynx-react";
import {
  AttachmentField,
  AttachmentInput,
  AttachmentInputItem,
} from "@/components/ui/attachment-field";
import { Text, VStack } from "@seed-design/lynx-react";

const PICKED_FILES: NativeFile[] = [
  {
    uri: "fixture://attachment-field/value-changes.txt",
    name: "value-changes.txt",
    type: "text/plain",
    size: 12,
  },
];

export default function AttachmentFieldValueChanges() {
  const [logs, setLogs] = useState<string[]>([]);
  const addLog = (message: string) => setLogs((previous) => [...previous, message]);

  return (
    <VStack gap="x4" width="100%">
      <VStack gap="x1">
        {logs.length === 0 ? (
          <Text color="fg.neutralMuted">파일을 추가하거나 삭제하면 로그가 표시됩니다.</Text>
        ) : (
          logs.map((log, index) => (
            <Text key={index} fontSize="fontSize.caption1">
              {log}
            </Text>
          ))
        )}
      </VStack>
      <AttachmentField
        maxFiles={3}
        label="파일 업로드"
        description="콜백 호출 로그를 확인하세요"
        onSelectFiles={() => PICKED_FILES}
        onFileAccept={(entries, { updateFileEntryStatus }) => {
          addLog(`onFileAccept: ${entries.map((entry) => entry.file.name).join(", ")}`);
          for (const entry of entries) {
            updateFileEntryStatus(entry.id, { status: "uploading", progress: 0 });
            setTimeout(
              () => updateFileEntryStatus(entry.id, { status: "uploading", progress: 50 }),
              250,
            );
            setTimeout(() => updateFileEntryStatus(entry.id, { status: "success" }), 500);
          }
        }}
        onAcceptedFileEntriesChange={(entries) =>
          addLog(
            `onAcceptedFileEntriesChange: ${entries.map((entry) => `${entry.file.name} (${entry.status})`).join(", ")}`,
          )
        }
        onFileReject={(files) =>
          addLog(
            `onFileReject: ${files.map((file) => `${file.file.name} (${file.errors.join(", ")})`).join(", ")}`,
          )
        }
      >
        <AttachmentInput>
          {({ acceptedFileEntries }) =>
            acceptedFileEntries.map((fileEntry) => (
              <AttachmentInputItem key={fileEntry.id} fileEntry={fileEntry} />
            ))
          }
        </AttachmentInput>
      </AttachmentField>
    </VStack>
  );
}

import type { AttachmentFileEntry, NativeFile } from "@seed-design/lynx-react";
import { AttachmentField, AttachmentInput } from "@/components/ui/attachment-field";
import { VStack } from "@seed-design/lynx-react";

const DEFAULT_FILES: AttachmentFileEntry[] = [
  {
    id: "document",
    file: {
      uri: "fixture://attachment-field/document.pdf",
      name: "document.pdf",
      type: "application/pdf",
      size: 5,
    },
    status: "success",
  },
];
const PICKED_FILES: NativeFile[] = [
  { uri: "fixture://attachment-field/one.txt", name: "one.txt", type: "text/plain", size: 1 },
  { uri: "fixture://attachment-field/two.txt", name: "two.txt", type: "text/plain", size: 1 },
  { uri: "fixture://attachment-field/three.txt", name: "three.txt", type: "text/plain", size: 1 },
];

export default function AttachmentFieldMaxFiles() {
  return (
    <VStack gap="x4" width="100%">
      <AttachmentField
        maxFiles={3}
        label="파일 업로드"
        description="최대 3개까지 업로드할 수 있습니다"
        defaultAcceptedFileEntries={DEFAULT_FILES}
        onSelectFiles={() => PICKED_FILES}
      >
        <AttachmentInput />
      </AttachmentField>
    </VStack>
  );
}

import { useRef, useState } from "@lynx-js/react";
import type { NativeFile } from "@seed-design/lynx-react";
import { AttachmentField, AttachmentInput } from "@/components/ui/attachment-field";
import { VStack } from "@seed-design/lynx-react";

const INVALID_FILE: NativeFile = {
  uri: "fixture://attachment-field/document.pdf",
  name: "document.pdf",
  type: "application/pdf",
  size: 5,
};
const VALID_FILE: NativeFile = {
  uri: "fixture://attachment-field/photo.jpg",
  name: "photo.jpg",
  type: "image/jpeg",
  size: 8,
  previewUrl: "https://picsum.photos/seed/attachment-invalid/200/200",
};

export default function AttachmentFieldInvalidFileType() {
  const pickCount = useRef(0);
  const [errorMessage, setErrorMessage] = useState<string>();
  return (
    <VStack gap="x4" width="100%">
      <AttachmentField
        accept={["image/png", "image/jpeg"]}
        maxFiles={3}
        invalid={!!errorMessage}
        errorMessage={errorMessage}
        label="이미지 업로드"
        description="PNG, JPEG 파일만 업로드할 수 있습니다"
        onSelectFiles={() => [pickCount.current++ === 0 ? INVALID_FILE : VALID_FILE]}
        onAcceptedFileEntriesChange={() => setErrorMessage(undefined)}
        onFileReject={(files) =>
          setErrorMessage(
            files
              .map(
                ({ file, errors }) =>
                  `"${file.name}": ${errors.includes("INVALID_TYPE") ? "지원하지 않는 파일 형식입니다" : "업로드에 실패했습니다"}`,
              )
              .join("\n"),
          )
        }
      >
        <AttachmentInput />
      </AttachmentField>
    </VStack>
  );
}

import { useRef, useState } from "@lynx-js/react";
import type { NativeFile } from "@seed-design/lynx-react";
import { AttachmentField, AttachmentInput } from "@/components/ui/attachment-field";
import { VStack } from "@seed-design/lynx-react";

const MIN_FILE_SIZE = 1024;
const MAX_FILE_SIZE = 10 * 1024;
const SMALL_FILE: NativeFile = {
  uri: "fixture://attachment-field/small.txt",
  name: "small.txt",
  type: "text/plain",
  size: 1,
};
const VALID_FILE: NativeFile = {
  uri: "fixture://attachment-field/valid.txt",
  name: "valid.txt",
  type: "text/plain",
  size: 2048,
};

export default function AttachmentFieldValidation() {
  const pickCount = useRef(0);
  const [errorMessage, setErrorMessage] = useState<string>();
  return (
    <VStack gap="x4" width="100%">
      <AttachmentField
        maxFiles={3}
        minFileSize={MIN_FILE_SIZE}
        maxFileSize={MAX_FILE_SIZE}
        invalid={!!errorMessage}
        errorMessage={errorMessage}
        label="파일 업로드"
        description="1KB ~ 10KB 크기의 파일만 업로드할 수 있습니다"
        onSelectFiles={() => [pickCount.current++ === 0 ? SMALL_FILE : VALID_FILE]}
        onAcceptedFileEntriesChange={() => setErrorMessage(undefined)}
        onFileReject={(files) =>
          setErrorMessage(
            files
              .map(
                ({ file, errors }) =>
                  `"${file.name}": ${errors.includes("FILE_TOO_SMALL") ? "크기가 1KB 미만입니다" : errors.includes("FILE_TOO_LARGE") ? "크기가 10KB를 초과합니다" : "업로드에 실패했습니다"}`,
              )
              .join("\n"),
          )
        }
      >
        <AttachmentInput />
      </AttachmentField>
    </VStack>
  );
}

import { useRef, useState } from "@lynx-js/react";
import type { NativeFile } from "@seed-design/lynx-react";
import { AttachmentField, AttachmentInput } from "@/components/ui/attachment-field";
import { VStack } from "@seed-design/lynx-react";

const LONG_NAME_FILE: NativeFile = {
  uri: "fixture://attachment-field/filename-too-long.txt",
  name: "filename-too-long.txt",
  type: "text/plain",
  size: 5,
};
const VALID_FILE: NativeFile = {
  uri: "fixture://attachment-field/short.txt",
  name: "short.txt",
  type: "text/plain",
  size: 5,
};

export default function AttachmentFieldCustomValidation() {
  const pickCount = useRef(0);
  const [errorMessage, setErrorMessage] = useState<string>();
  return (
    <VStack gap="x4" width="100%">
      <AttachmentField
        maxFiles={5}
        validate={(file) =>
          file.name.replace(/\.[^.]+$/, "").length > 8 ? ["FILENAME_TOO_LONG"] : null
        }
        invalid={!!errorMessage}
        errorMessage={errorMessage}
        label="파일 업로드"
        description="파일 이름은 확장자를 제외하고 8자 이하여야 합니다"
        onSelectFiles={() => [pickCount.current++ === 0 ? LONG_NAME_FILE : VALID_FILE]}
        onAcceptedFileEntriesChange={() => setErrorMessage(undefined)}
        onFileReject={(files) => {
          if (files.every((file) => file.errors.includes("FILENAME_TOO_LONG")))
            setErrorMessage(
              `"${files.map((file) => file.file.name).join(", ")}"은(는) 파일 이름이 8자를 초과합니다.`,
            );
        }}
      >
        <AttachmentInput />
      </AttachmentField>
    </VStack>
  );
}

import { useRef } from "@lynx-js/react";
import type { AttachmentFileStatusDetails, NativeFile } from "@seed-design/lynx-react";
import { AttachmentField, AttachmentInput } from "@/components/ui/attachment-field";
import { VStack } from "@seed-design/lynx-react";

const PICKED_FILE: NativeFile = {
  uri: "fixture://attachment-field/status.png",
  name: "status.png",
  type: "image/png",
  size: 8,
  previewUrl: "https://picsum.photos/seed/attachment-status/200/200",
};

export default function AttachmentFieldStatus() {
  const attempts = useRef<Record<string, number>>({});
  const startUpload = (
    id: string,
    update: (entryId: string, details: AttachmentFileStatusDetails) => void,
  ) => {
    attempts.current[id] = (attempts.current[id] ?? 0) + 1;
    update(id, { status: "uploading", progress: 0 });
    setTimeout(() => update(id, { status: "uploading", progress: 50 }), 250);
    setTimeout(() => update(id, { status: attempts.current[id] === 1 ? "error" : "success" }), 500);
  };
  return (
    <VStack gap="x4" width="100%">
      <AttachmentField
        accept="image/*"
        maxFiles={5}
        label="파일 업로드"
        description="업로드 상태 시뮬레이션"
        onSelectFiles={() => [PICKED_FILE]}
        onFileAccept={(entries, { updateFileEntryStatus }) => {
          for (const entry of entries) startUpload(entry.id, updateFileEntryStatus);
        }}
      >
        <AttachmentInput
          onRetry={(entry, { updateFileEntryStatus }) =>
            startUpload(entry.id, updateFileEntryStatus)
          }
        />
      </AttachmentField>
    </VStack>
  );
}

import type { AttachmentFileEntry, NativeFile } from "@seed-design/lynx-react";
import { VStack } from "@seed-design/lynx-react";
import { AttachmentField } from "@/components/ui/attachment-field";
import { AttachmentInputReorderable } from "@/components/ui/attachment-field-reorderable";

const PIXEL_SUNSET =
  "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR4nGN4FcEDAAN+AU+hW/ICAAAAAElFTkSuQmCC";
const PIXEL_CITY =
  "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR4nGOYbPwKAAMNAbHKe2UaAAAAAElFTkSuQmCC";
const PIXEL_COFFEE =
  "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR4nGN4tZkDAAQwAaYlKXDxAAAAAElFTkSuQmCC";
function createFixture(name: string, data: string): NativeFile {
  return {
    uri: `fixture://attachment-field/${name}`,
    name,
    type: "image/png",
    size: 1,
    previewUrl: `data:image/png;base64,${data}`,
  };
}
const DEFAULT_FILES: AttachmentFileEntry[] = [
  { id: "1", file: createFixture("sunset-landscape.png", PIXEL_SUNSET), status: "success" },
  { id: "2", file: createFixture("city-night.png", PIXEL_CITY), status: "success" },
  { id: "3", file: createFixture("morning-coffee.png", PIXEL_COFFEE), status: "success" },
];

export default function AttachmentFieldReorderable() {
  return (
    <VStack width="100%">
      <AttachmentField
        accept="image/*"
        maxFiles={5}
        label="이미지 업로드"
        description="길게 눌러 드래그하여 순서를 변경할 수 있습니다"
        defaultAcceptedFileEntries={DEFAULT_FILES}
      >
        <AttachmentInputReorderable />
      </AttachmentField>
    </VStack>
  );
}

import { useRef, useState } from "@lynx-js/react";
import type { NativeFile } from "@seed-design/lynx-react";
import { AttachmentField, AttachmentInput } from "@/components/ui/attachment-field";
import { VStack } from "@seed-design/lynx-react";

const IMAGE_FILE: NativeFile = {
  uri: "fixture://attachment-field/photo.png",
  name: "photo.png",
  type: "image/png",
  size: 8,
  previewUrl: "https://picsum.photos/seed/attachment-image/200/200",
};
const OTHER_FILE: NativeFile = {
  uri: "fixture://attachment-field/readme.pdf",
  name: "readme.pdf",
  type: "application/pdf",
  size: 5,
};

export default function AttachmentFieldAcceptImage() {
  const pickCount = useRef(0);
  const [errorMessage, setErrorMessage] = useState<string>();
  return (
    <VStack gap="x4" width="100%">
      <AttachmentField
        accept="image/*"
        maxFiles={5}
        label="이미지 업로드"
        description="이미지 파일만 허용됩니다"
        invalid={!!errorMessage}
        errorMessage={errorMessage}
        onSelectFiles={() => [pickCount.current++ === 0 ? IMAGE_FILE : OTHER_FILE]}
        onAcceptedFileEntriesChange={() => setErrorMessage(undefined)}
        onFileReject={() => setErrorMessage("지원하지 않는 파일 형식입니다")}
      >
        <AttachmentInput />
      </AttachmentField>
    </VStack>
  );
}

import type { AttachmentFileEntry, NativeFile } from "@seed-design/lynx-react";
import { AttachmentField, AttachmentInput } from "@/components/ui/attachment-field";
import { VStack } from "@seed-design/lynx-react";

const DEFAULT_FILES: AttachmentFileEntry[] = [
  {
    id: "document",
    file: {
      uri: "fixture://attachment-field/document.pdf",
      name: "document.pdf",
      type: "application/pdf",
      size: 5,
    },
    status: "success",
  },
  {
    id: "image",
    file: {
      uri: "fixture://attachment-field/image.png",
      name: "image.png",
      type: "image/png",
      size: 8,
      previewUrl: "https://picsum.photos/seed/attachment-disabled/200/200",
    },
    status: "success",
  },
];

export default function AttachmentFieldDisabled() {
  return (
    <VStack gap="x4" width="100%">
      <AttachmentField
        disabled
        maxFiles={5}
        defaultAcceptedFileEntries={DEFAULT_FILES}
        label="파일 업로드"
        description="비활성화된 AttachmentField"
      >
        <AttachmentInput />
      </AttachmentField>
    </VStack>
  );
}

import type { AttachmentFileEntry, NativeFile } from "@seed-design/lynx-react";
import { AttachmentField, AttachmentInput } from "@/components/ui/attachment-field";
import { VStack } from "@seed-design/lynx-react";

const DEFAULT_FILES: AttachmentFileEntry[] = [
  {
    id: "document",
    file: {
      uri: "fixture://attachment-field/document.pdf",
      name: "document.pdf",
      type: "application/pdf",
      size: 5,
    },
    status: "success",
  },
  {
    id: "image",
    file: {
      uri: "fixture://attachment-field/image.png",
      name: "image.png",
      type: "image/png",
      size: 8,
      previewUrl: "https://picsum.photos/seed/attachment-readonly/200/200",
    },
    status: "success",
  },
];

export default function AttachmentFieldReadOnly() {
  return (
    <VStack gap="x4" width="100%">
      <AttachmentField
        readOnly
        maxFiles={5}
        defaultAcceptedFileEntries={DEFAULT_FILES}
        label="첨부 파일"
        description="읽기 전용 상태"
      >
        <AttachmentInput />
      </AttachmentField>
    </VStack>
  );
}

import { useState } from "@lynx-js/react";
import type { AttachmentFileEntry, NativeFile } from "@seed-design/lynx-react";
import { ActionButton, HStack, Text, VStack } from "@seed-design/lynx-react";
import { AttachmentField, AttachmentInput } from "@/components/ui/attachment-field";

const PICKED_FILE: NativeFile = {
  uri: "fixture://attachment-field/controlled.txt",
  name: "controlled.txt",
  type: "text/plain",
  size: 5,
};

export default function AttachmentFieldControlled() {
  const [acceptedFileEntries, setAcceptedFileEntries] = useState<AttachmentFileEntry[]>([]);
  function clearFiles() {
    "background only";
    setAcceptedFileEntries([]);
  }
  return (
    <VStack gap="x4" width="100%">
      <AttachmentField
        maxFiles={5}
        label="Controlled"
        description="최대 5개까지 업로드할 수 있습니다"
        acceptedFileEntries={acceptedFileEntries}
        onAcceptedFileEntriesChange={setAcceptedFileEntries}
        onSelectFiles={() => [PICKED_FILE]}
      >
        <AttachmentInput />
      </AttachmentField>
      <Text>현재 파일: {JSON.stringify(acceptedFileEntries.map((entry) => entry.file.name))}</Text>
      <HStack gap="x2">
        <ActionButton bindtap={clearFiles} variant="neutralWeak">
          전체 삭제
        </ActionButton>
      </HStack>
    </VStack>
  );
}

import * as React from "@lynx-js/react";
import type { NativeFile } from "@seed-design/lynx-react";
import { AttachmentField, AttachmentInput } from "@/components/ui/attachment-field";
import { TextField, TextFieldInput } from "@/components/ui/text-field";
import { VStack } from "@seed-design/lynx-react";

type AttachmentFieldStyle = NonNullable<React.ComponentProps<typeof AttachmentField>["style"]> & {
  "--seed-attachment-input-extend-x": string;
};

const INSET_STYLE: AttachmentFieldStyle = {
  "--seed-attachment-input-extend-x": "var(--seed-dimension-spacing-x-global-gutter)",
};

const MOCKED_FILES: NativeFile[] = Array.from({ length: 8 }, (_, index) => ({
  uri: `fixture://attachment-field/file${index + 1}.txt`,
  name: `file${index + 1}.txt`,
  type: "text/plain",
  size: 1,
}));

export default function AttachmentFieldCustomInset() {
  return (
    <VStack
      px="spacingX.globalGutter"
      width="100%"
      maxWidth="400px"
      bg="palette.gray300"
      borderWidth={1}
      borderColor="stroke.neutralMuted"
    >
      <VStack gap="spacingY.componentDefault" bg="bg.layerDefault">
        <TextField label="이름">
          <TextFieldInput placeholder="홍길동" />
        </TextField>
        <AttachmentField
          maxFiles={8}
          label="첨부파일"
          defaultAcceptedFileEntries={MOCKED_FILES.map((file, index) => ({
            id: `${index}`,
            file,
            status: "pending",
          }))}
          style={INSET_STYLE}
          onSelectFiles={() => [MOCKED_FILES[0]]}
        >
          <AttachmentInput />
        </AttachmentField>
      </VStack>
    </VStack>
  );
}

import type { NativeFile } from "@seed-design/lynx-react";
import { AttachmentField, AttachmentInput } from "@/components/ui/attachment-field";
import { Divider, VStack } from "@seed-design/lynx-react";

const PICKED_FILE: NativeFile = {
  uri: "fixture://attachment-field/field.txt",
  name: "field.txt",
  type: "text/plain",
  size: 5,
};

export default function AttachmentFieldField() {
  return (
    <VStack gap="x8" width="100%">
      <AttachmentField
        maxFiles={3}
        label="첨부파일"
        labelWeight="bold"
        required
        showRequiredIndicator
        invalid
        errorMessage="필수 항목입니다."
      >
        <AttachmentInput />
      </AttachmentField>
      <Divider />
      <AttachmentField
        maxFiles={3}
        label="첨부파일"
        description="파일을 선택하거나 호스트 파일 선택기를 여세요."
        indicator="선택"
        onSelectFiles={() => [PICKED_FILE]}
      >
        <AttachmentInput />
      </AttachmentField>
    </VStack>
  );
}

import IconArrowClockwiseCircularFill from "@karrotmarket/lynx-monochrome-icon/IconArrowClockwiseCircularFill";
import IconXmarkFill from "@karrotmarket/lynx-monochrome-icon/IconXmarkFill";
import { AttachmentInput as SeedAttachmentInput, Icon, VStack } from "@seed-design/lynx-react";
import { ProgressCircle } from "@/components/ui/progress-circle";
import type {
  AttachmentFileEntry,
  AttachmentFileStatusDetails,
  NativeFile,
} from "@seed-design/lynx-react";
import { AttachmentField, AttachmentInput } from "@/components/ui/attachment-field";

const PICKED_FILE: NativeFile = {
  uri: "fixture://attachment-field/custom.png",
  name: "custom.png",
  type: "image/png",
  size: 8,
  previewUrl: "https://picsum.photos/seed/attachment-custom/200/200",
};

function CustomImageItem({
  fileEntry,
  isCover,
  onRetry,
}: {
  fileEntry: AttachmentFileEntry;
  isCover: boolean;
  onRetry?: () => void;
}) {
  return (
    <SeedAttachmentInput.Item fileEntry={fileEntry}>
      <SeedAttachmentInput.ItemSurface>
        <SeedAttachmentInput.ItemImage />
        {isCover ? <SeedAttachmentInput.ItemBadge>대표사진</SeedAttachmentInput.ItemBadge> : null}
        <SeedAttachmentInput.ItemBackdrop status="uploading">
          {(entry) => (
            <ProgressCircle
              size="24"
              tone="staticWhite"
              {...("progress" in entry ? { value: entry.progress } : {})}
            />
          )}
        </SeedAttachmentInput.ItemBackdrop>
        {onRetry ? (
          <SeedAttachmentInput.ItemBackdrop status="error">
            <SeedAttachmentInput.ItemActionButton bindtap={onRetry}>
              <Icon icon={<IconArrowClockwiseCircularFill />} />
              재시도
            </SeedAttachmentInput.ItemActionButton>
          </SeedAttachmentInput.ItemBackdrop>
        ) : null}
      </SeedAttachmentInput.ItemSurface>
      <SeedAttachmentInput.ItemRemoveButton accessibility-label="파일 제거">
        <Icon icon={<IconXmarkFill />} />
      </SeedAttachmentInput.ItemRemoveButton>
    </SeedAttachmentInput.Item>
  );
}

export default function AttachmentFieldCustomizingItems() {
  return (
    <VStack gap="x4" width="100%">
      <AttachmentField
        accept="image/*"
        maxFiles={10}
        label="이미지 업로드"
        description="첫 번째 이미지가 대표사진으로 설정됩니다"
        onSelectFiles={() => [PICKED_FILE]}
        onFileAccept={(entries, { updateFileEntryStatus }) => {
          for (const entry of entries) {
            updateFileEntryStatus(entry.id, { status: "uploading", progress: 0 });
            setTimeout(() => updateFileEntryStatus(entry.id, { status: "success" }), 500);
          }
        }}
      >
        <AttachmentInput>
          {({ acceptedFileEntries, updateFileEntryStatus }) =>
            acceptedFileEntries.map((fileEntry, index) => (
              <CustomImageItem
                key={fileEntry.id}
                fileEntry={fileEntry}
                isCover={index === 0}
                onRetry={() => {
                  updateFileEntryStatus(fileEntry.id, {
                    status: "uploading",
                    progress: 0,
                  } satisfies AttachmentFileStatusDetails);
                  setTimeout(() => updateFileEntryStatus(fileEntry.id, { status: "success" }), 500);
                }}
              />
            ))
          }
        </AttachmentInput>
      </AttachmentField>
    </VStack>
  );
}