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

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}>
-  <div class="space-y-4">
-    <div class="space-y-2 break-keep">
-      <p class="text-xl font-bold">이미 업로드된 파일이에요.</p>
-      <p>그래도 업로드할까요?</p>
+  {#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">'{nameShort}' 파일이 있어요.</p>
+        <p>예전에 이미 업로드된 파일이에요. 그래도 업로드할까요?</p>
+      </div>
+      <div class="flex gap-2">
+        <Button color="gray" onclick={onclose}>아니요</Button>
+        <Button onclick={onDuplicateClick}>업로드할게요</Button>
+      </div>
     </div>
-    <div class="flex gap-2">
-      <Button color="gray" onclick={onclose}>아니요</Button>
-      <Button onclick={onDuplicateClick}>업로드할게요</Button>
-    </div>
-  </div>
+  {/if}
 </Modal>