여러 파일을 한 번에 업로드할 수 있도록 변경

src/routes/(main)/directory/[[id]]/+page.svelte

@@ -29,6 +29,7 @@
   let info: Writable<DirectoryInfo | null> | undefined = $state();
   let fileInput: HTMLInputElement | undefined = $state();
   let resolveForDuplicateFileModal: ((res: boolean) => void) | undefined = $state();
+  let duplicatedFile: File | undefined = $state();
   let selectedEntry: SelectedDirectoryEntry | undefined = $state();
 
   let isCreateBottomSheetOpen = $state(false);
@@ -46,14 +47,14 @@
   };
 
   const uploadFile = () => {
-    const file = fileInput?.files?.[0];
-    if (!file) return;
-
-    fileInput!.value = "";
+    const files = fileInput?.files;
+    if (!files || files.length === 0) return;
 
+    for (const file of files) {
       requestFileUpload(file, data.id, $hmacSecretStore?.get(1)!, $masterKeyStore?.get(1)!, () => {
         return new Promise((resolve) => {
           resolveForDuplicateFileModal = resolve;
+          duplicatedFile = file;
           isDuplicateFileModalOpen = true;
         });
       })
@@ -62,13 +63,16 @@
 
           // TODO: FIXME
           info = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!);
-        window.alert("파일이 업로드되었어요.");
+          window.alert(`'${file.name}' 파일이 업로드되었어요.`);
         })
         .catch((e: Error) => {
           // TODO: FIXME
           console.error(e);
-        window.alert(`파일 업로드에 실패했어요.\n${e.message}`);
+          window.alert(`'${file.name}' 파일 업로드에 실패했어요.\n${e.message}`);
         });
+    }
+
+    fileInput!.value = "";
   };
 
   onMount(async () => {
@@ -86,7 +90,7 @@
   <title>파일</title>
 </svelte:head>
 
-<input bind:this={fileInput} onchange={uploadFile} type="file" class="hidden" />
+<input bind:this={fileInput} onchange={uploadFile} type="file" multiple class="hidden" />
 
 <div class="flex min-h-full flex-col px-4">
   {#if data.id !== "root"}
@@ -129,14 +133,17 @@
 <CreateDirectoryModal bind:isOpen={isCreateDirectoryModalOpen} onCreateClick={createDirectory} />
 <DuplicateFileModal
   bind:isOpen={isDuplicateFileModalOpen}
+  file={duplicatedFile}
   onclose={() => {
     resolveForDuplicateFileModal?.(false);
     resolveForDuplicateFileModal = undefined;
+    duplicatedFile = undefined;
     isDuplicateFileModalOpen = false;
   }}
   onDuplicateClick={() => {
     resolveForDuplicateFileModal?.(true);
     resolveForDuplicateFileModal = undefined;
+    duplicatedFile = undefined;
     isDuplicateFileModalOpen = false;
   }}
 />

src/routes/(main)/directory/[[id]]/DuplicateFileModal.svelte

@@ -3,23 +3,28 @@
   import { Button } from "$lib/components/buttons";
 
   interface Props {
+    file: File | undefined;
     onclose: () => void;
     onDuplicateClick: () => void;
     isOpen: boolean;
   }
 
-  let { onclose, onDuplicateClick, isOpen = $bindable() }: Props = $props();
+  let { file, onclose, onDuplicateClick, isOpen = $bindable() }: Props = $props();
 </script>
 
 <Modal bind:isOpen {onclose}>
+  {#if file}
+    {@const { name } = file}
+    {@const nameShort = name.length > 20 ? `${name.slice(0, 20)}...` : name}
     <div class="space-y-4">
       <div class="space-y-2 break-keep">
-      <p class="text-xl font-bold">이미 업로드된 파일이에요.</p>
-      <p>그래도 업로드할까요?</p>
+        <p class="text-xl font-bold">'{nameShort}' 파일이 있어요.</p>
+        <p>예전에 이미 업로드된 파일이에요. 그래도 업로드할까요?</p>
       </div>
       <div class="flex gap-2">
         <Button color="gray" onclick={onclose}>아니요</Button>
         <Button onclick={onDuplicateClick}>업로드할게요</Button>
       </div>
     </div>
+  {/if}
 </Modal>