프론트엔드에서의 파일 업로드 전 중복 검사 구현

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

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { Modal } from "$lib/components";
+  import { Button } from "$lib/components/buttons";
+
+  interface Props {
+    onclose: () => void;
+    onDuplicateClick: () => void;
+    isOpen: boolean;
+  }
+
+  let { 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>
+    </div>
+    <div class="flex gap-2">
+      <Button
+        color="gray"
+        onclick={() => {
+          isOpen = false;
+        }}
+      >
+        아니요
+      </Button>
+      <Button onclick={onDuplicateClick}>업로드할게요</Button>
+    </div>
+  </div>
+</Modal>