파일/폴더 삭제 및 이름 변경 레이아웃 구현

2025-12-12 21:08:46 +00:00 · 2025-01-05 22:59:11 +09:00
parent c580556740
commit 14d1adc416
7 changed files with 243 additions and 24 deletions
--- a/src/lib/components/BottomSheet.svelte
+++ b/src/lib/components/BottomSheet.svelte
@@ -5,21 +5,24 @@

  interface Props {
    children: Snippet;
+    onclose?: () => void;
    isOpen: boolean;
  }

-  let { children, isOpen = $bindable() }: Props = $props();
+  let { children, onclose, isOpen = $bindable() }: Props = $props();
+
+  const closeBottomSheet = $derived(
+    onclose ||
+      (() => {
+        isOpen = false;
+      }),
+  );
 </script>

 {#if isOpen}
  <!-- svelte-ignore a11y_click_events_have_key_events -->
  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <div
-    onclick={() => {
-      isOpen = false;
-    }}
-    class="fixed inset-0 z-10 flex items-end justify-center"
-  >
+  <div onclick={closeBottomSheet} class="fixed inset-0 z-10 flex items-end justify-center">
    <div class="absolute inset-0 bg-black bg-opacity-50" transition:fade={{ duration: 100 }}></div>
    <div class="z-20 w-full">
      <AdaptiveDiv>
--- a/src/routes/(main)/directory/[[id]]/+page.svelte
+++ b/src/routes/(main)/directory/[[id]]/+page.svelte
@@ -1,10 +1,22 @@
+<script module lang="ts">
+  export interface SelectedDiretoryEntry {
+    type: "directory" | "file";
+    id: number;
+    name: string;
+  }
+</script>
+
 <script lang="ts">
+  import { goto } from "$app/navigation";
  import { TopBar } from "$lib/components";
  import { FloatingButton } from "$lib/components/buttons";
  import { clientKeyStore, masterKeyStore } from "$lib/stores";
  import CreateBottomSheet from "./CreateBottomSheet.svelte";
  import CreateDirectoryModal from "./CreateDirectoryModal.svelte";
+  import DeleteDirectoryEntryModal from "./DeleteDirectoryEntryModal.svelte";
  import DirectoryEntry from "./DirectoryEntry.svelte";
+  import DirectoryEntryMenuBottomSheet from "./DirectoryEntryMenuBottomSheet.svelte";
+  import RenameDirectoryEntryModal from "./RenameDirectoryEntryModal.svelte";
  import {
    decryptDirectroyMetadata,
    decryptFileMetadata,
@@ -17,10 +29,15 @@
  let { data } = $props();

  let fileInput: HTMLInputElement | undefined = $state();
+  let selectedEntry: SelectedDiretoryEntry | undefined = $state();

  let isCreateBottomSheetOpen = $state(false);
  let isCreateDirectoryModalOpen = $state(false);

+  let isDirectoryEntryMenuBottomSheetOpen = $state(false);
+  let isRenameDirectoryEntryModalOpen = $state(false);
+  let isDeleteDirectoryEntryModalOpen = $state(false);
+
  // TODO: FIX ME
  const metadata = $derived.by(() => {
    const { metadata } = data;
@@ -103,14 +120,30 @@
    {#if subDirectories}
      {#await subDirectories then subDirectories}
        {#each subDirectories as { id, name }}
-          <DirectoryEntry {id} {name} type="directory" />
+          <DirectoryEntry
+            {name}
+            onclick={() => goto(`/directory/${id}`)}
+            onOpenMenuClick={() => {
+              selectedEntry = { type: "directory", id, name };
+              isDirectoryEntryMenuBottomSheetOpen = true;
+            }}
+            type="directory"
+          />
        {/each}
      {/await}
    {/if}
    {#if files}
      {#await files then files}
        {#each files as { id, name }}
-          <DirectoryEntry {id} {name} type="file" />
+          <DirectoryEntry
+            {name}
+            onclick={() => goto(`/file/${id}`)}
+            onOpenMenuClick={() => {
+              selectedEntry = { type: "file", id, name };
+              isDirectoryEntryMenuBottomSheetOpen = true;
+            }}
+            type="file"
+          />
        {/each}
      {/await}
    {/if}
@@ -126,13 +159,28 @@

 <CreateBottomSheet
  bind:isOpen={isCreateBottomSheetOpen}
-  onDirectoryCreate={() => {
+  onDirectoryCreateClick={() => {
    isCreateBottomSheetOpen = false;
    isCreateDirectoryModalOpen = true;
  }}
-  onFileUpload={() => {
+  onFileUploadClick={() => {
    isCreateBottomSheetOpen = false;
    fileInput?.click();
  }}
 />
 <CreateDirectoryModal bind:isOpen={isCreateDirectoryModalOpen} onCreateClick={createDirectory} />
+
+<DirectoryEntryMenuBottomSheet
+  bind:isOpen={isDirectoryEntryMenuBottomSheetOpen}
+  bind:selectedEntry
+  onRenameClick={() => {
+    isDirectoryEntryMenuBottomSheetOpen = false;
+    isRenameDirectoryEntryModalOpen = true;
+  }}
+  onDeleteClick={() => {
+    isDirectoryEntryMenuBottomSheetOpen = false;
+    isDeleteDirectoryEntryModalOpen = true;
+  }}
+/>
+<RenameDirectoryEntryModal bind:isOpen={isRenameDirectoryEntryModalOpen} bind:selectedEntry />
+<DeleteDirectoryEntryModal bind:isOpen={isDeleteDirectoryEntryModalOpen} bind:selectedEntry />
--- a/src/routes/(main)/directory/[[id]]/CreateBottomSheet.svelte
+++ b/src/routes/(main)/directory/[[id]]/CreateBottomSheet.svelte
@@ -6,23 +6,23 @@
  import IconUploadFile from "~icons/material-symbols/upload-file";

  interface Props {
-    onDirectoryCreate: () => void;
-    onFileUpload: () => void;
+    onDirectoryCreateClick: () => void;
+    onFileUploadClick: () => void;
    isOpen: boolean;
  }

-  let { onDirectoryCreate, onFileUpload, isOpen = $bindable() }: Props = $props();
+  let { onDirectoryCreateClick, onFileUploadClick, isOpen = $bindable() }: Props = $props();
 </script>

 <BottomSheet bind:isOpen>
  <div class="flex w-full flex-col py-4">
-    <EntryButton onclick={onDirectoryCreate}>
+    <EntryButton onclick={onDirectoryCreateClick}>
      <div class="flex h-12 items-center justify-center gap-x-4">
        <IconCreateNewFolder class="text-2xl text-yellow-500" />
        <p class="font-medium">폴더 만들기</p>
      </div>
    </EntryButton>
-    <EntryButton onclick={onFileUpload}>
+    <EntryButton onclick={onFileUploadClick}>
      <div class="flex h-12 items-center justify-center gap-x-4">
        <IconUploadFile class="text-2xl text-blue-400" />
        <p class="font-medium">파일 업로드</p>
--- a/src/routes/(main)/directory/[[id]]/DeleteDirectoryEntryModal.svelte
+++ b/src/routes/(main)/directory/[[id]]/DeleteDirectoryEntryModal.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { Modal } from "$lib/components";
+  import { Button } from "$lib/components/buttons";
+  import type { SelectedDiretoryEntry } from "./+page.svelte";
+
+  interface Props {
+    isOpen: boolean;
+    selectedEntry: SelectedDiretoryEntry | undefined;
+  }
+
+  let { isOpen = $bindable(), selectedEntry = $bindable() }: Props = $props();
+
+  const closeModal = () => {
+    isOpen = false;
+    selectedEntry = undefined;
+  };
+
+  const deleteEntry = () => {
+    // TODO
+
+    closeModal();
+  };
+</script>
+
+<Modal bind:isOpen onclose={closeModal}>
+  {#if selectedEntry}
+    {@const { type, name } = selectedEntry}
+    {@const nameShort = name.length > 20 ? `${name.slice(0, 20)}...` : name}
+    <div class="space-y-4">
+      <div class="space-y-2">
+        <p class="break-keep text-xl font-bold">
+          {#if type === "directory"}
+            '{nameShort}' 폴더를 삭제할까요?
+          {:else}
+            '{nameShort}' 파일을 삭제할까요?
+          {/if}
+        </p>
+        <p class="break-keep">
+          {#if type === "directory"}
+            삭제한 폴더는 복구할 수 없어요. <br />
+            폴더 안의 모든 파일과 폴더도 함께 삭제돼요.
+          {:else}
+            삭제한 파일은 복구할 수 없어요.
+          {/if}
+        </p>
+      </div>
+      <div class="flex gap-2">
+        <Button
+          color="gray"
+          onclick={() => {
+            isOpen = false;
+          }}
+        >
+          아니요
+        </Button>
+        <Button onclick={deleteEntry}>삭제할게요</Button>
+      </div>
+    </div>
+  {/if}
+</Modal>
--- a/src/routes/(main)/directory/[[id]]/DirectoryEntry.svelte
+++ b/src/routes/(main)/directory/[[id]]/DirectoryEntry.svelte
@@ -1,28 +1,28 @@
 <script lang="ts">
-  import { goto } from "$app/navigation";
-
  import IconFolder from "~icons/material-symbols/folder";
  import IconDraft from "~icons/material-symbols/draft";
  import IconMoreVert from "~icons/material-symbols/more-vert";

  interface Props {
-    id: number;
    name: string;
+    onclick: () => void;
+    onOpenMenuClick: () => void;
    type: "directory" | "file";
  }

-  let { id, name, type }: Props = $props();
+  let { name, onclick, onOpenMenuClick, type }: Props = $props();

-  const open = () => {
+  const openMenu = (e: Event) => {
+    e.stopPropagation();
    setTimeout(() => {
-      goto(`/${type}/${id}`);
+      onOpenMenuClick();
    }, 100);
  };
 </script>

 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <!-- svelte-ignore a11y_click_events_have_key_events -->
-<div id="button" onclick={open} class="h-12 w-full rounded-xl">
+<div id="button" onclick={() => setTimeout(onclick, 100)} class="h-12 w-full rounded-xl">
  <div id="button-content" class="flex h-full items-center gap-x-4 p-2 transition">
    <div class="flex-shrink-0 text-lg">
      {#if type === "directory"}
@@ -36,7 +36,7 @@
    </p>
    <button
      id="open-menu"
-      onclick={(e) => e.stopPropagation()}
+      onclick={openMenu}
      class="flex-shrink-0 rounded-full p-1 active:bg-gray-100"
    >
      <IconMoreVert class="text-lg transition active:scale-95" />
--- a/src/routes/(main)/directory/[[id]]/DirectoryEntryMenuBottomSheet.svelte
+++ b/src/routes/(main)/directory/[[id]]/DirectoryEntryMenuBottomSheet.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+  import { BottomSheet } from "$lib/components";
+  import { EntryButton } from "$lib/components/buttons";
+  import type { SelectedDiretoryEntry } from "./+page.svelte";
+
+  import IconFolder from "~icons/material-symbols/folder";
+  import IconDraft from "~icons/material-symbols/draft";
+  import IconEdit from "~icons/material-symbols/edit";
+  import IconDelete from "~icons/material-symbols/delete";
+
+  interface Props {
+    onRenameClick: () => void;
+    onDeleteClick: () => void;
+    isOpen: boolean;
+    selectedEntry: SelectedDiretoryEntry | undefined;
+  }
+
+  let {
+    onRenameClick,
+    onDeleteClick,
+    isOpen = $bindable(),
+    selectedEntry = $bindable(),
+  }: Props = $props();
+
+  const closeBottomSheet = () => {
+    isOpen = false;
+    selectedEntry = undefined;
+  };
+</script>
+
+<BottomSheet bind:isOpen onclose={closeBottomSheet}>
+  <div class="flex w-full flex-col py-4">
+    {#if selectedEntry}
+      {@const { type, name } = selectedEntry}
+      <div class="flex h-12 items-center gap-x-4 p-2">
+        <div class="flex-shrink-0 text-lg">
+          {#if type === "directory"}
+            <IconFolder />
+          {:else if type === "file"}
+            <IconDraft class="text-blue-400" />
+          {/if}
+        </div>
+        <p title={name} class="flex-grow truncate font-semibold">
+          {name}
+        </p>
+      </div>
+      <div class="my-2 h-px w-full bg-gray-200"></div>
+    {/if}
+    <EntryButton onclick={onRenameClick}>
+      <div class="flex h-8 items-center justify-center gap-x-4">
+        <IconEdit class="text-lg" />
+        <p class="font-medium">이름 바꾸기</p>
+      </div>
+    </EntryButton>
+    <EntryButton onclick={onDeleteClick}>
+      <div class="flex h-8 items-center justify-center gap-x-4 text-red-500">
+        <IconDelete class="text-lg" />
+        <p class="font-medium">삭제하기</p>
+      </div>
+    </EntryButton>
+  </div>
+</BottomSheet>
--- a/src/routes/(main)/directory/[[id]]/RenameDirectoryEntryModal.svelte
+++ b/src/routes/(main)/directory/[[id]]/RenameDirectoryEntryModal.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { Modal } from "$lib/components";
+  import { Button } from "$lib/components/buttons";
+  import { TextInput } from "$lib/components/inputs";
+  import type { SelectedDiretoryEntry } from "./+page.svelte";
+
+  interface Props {
+    isOpen: boolean;
+    selectedEntry: SelectedDiretoryEntry | undefined;
+  }
+
+  let { isOpen = $bindable(), selectedEntry = $bindable() }: Props = $props();
+
+  let name = $state("");
+
+  const closeModal = () => {
+    name = "";
+    isOpen = false;
+    selectedEntry = undefined;
+  };
+
+  const renameEntry = () => {
+    // TODO
+
+    closeModal();
+  };
+
+  $effect(() => {
+    if (selectedEntry) {
+      name = selectedEntry.name;
+    }
+  });
+</script>
+
+<Modal bind:isOpen onclose={closeModal}>
+  <div class="flex flex-col px-1">
+    <p class="text-xl font-bold">이름 바꾸기</p>
+    <div class="my-4 flex w-full">
+      <TextInput bind:value={name} placeholder="이름" />
+    </div>
+    <div class="mt-5 flex gap-2">
+      <Button color="gray" onclick={closeModal}>닫기</Button>
+      <Button onclick={renameEntry}>바꾸기</Button>
+    </div>
+  </div>
+</Modal>