디렉터리 페이지에 상위 디렉터리로 이동 버튼 추가

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

@@ -2,6 +2,7 @@
   import { onMount } from "svelte";
   import type { Writable } from "svelte/store";
   import { goto } from "$app/navigation";
+  import { page } from "$app/state";
   import { FloatingButton } from "$lib/components/atoms";
   import { TopBar } from "$lib/components/molecules";
   import { getDirectoryInfo, type DirectoryInfo } from "$lib/modules/filesystem";
@@ -42,6 +43,9 @@
   let isEntryRenameModalOpen = $state(false);
   let isEntryDeleteModalOpen = $state(false);
 
+  let isFromFilePage = $derived(page.url.searchParams.get("from") === "file");
+  let showTopBar = $derived(data.id !== "root" || isFromFilePage);
+
   const uploadFile = () => {
     const files = fileInput?.files;
     if (!files || files.length === 0) return;
@@ -86,11 +90,11 @@
 <input bind:this={fileInput} onchange={uploadFile} type="file" multiple class="hidden" />
 
 <div class="flex h-full flex-col">
-  {#if data.id !== "root"}
+  {#if showTopBar}
     <TopBar title={$info?.name} class="flex-shrink-0" />
   {/if}
   {#if $info}
-    <div class={["flex flex-grow flex-col px-4 pb-4", data.id === "root" && "pt-4"]}>
+    <div class={["flex flex-grow flex-col px-4 pb-4", !showTopBar && "pt-4"]}>
       <div class="flex gap-x-2">
         <UploadStatusCard onclick={() => goto("/file/uploads")} />
         <DownloadStatusCard onclick={() => goto("/file/downloads")} />
@@ -103,6 +107,13 @@
             context.selectedEntry = entry;
             isEntryMenuBottomSheetOpen = true;
           }}
+          showParentEntry={isFromFilePage && $info.parentId !== undefined}
+          onParentClick={() =>
+            goto(
+              $info.parentId === "root"
+                ? "/directory?from=file"
+                : `/directory/${$info.parentId}?from=file`,
+            )}
         />
       {/key}
     </div>

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

@@ -1,6 +1,8 @@
 <script lang="ts">
   import { untrack } from "svelte";
   import { get, type Writable } from "svelte/store";
+  import { ActionEntryButton } from "$lib/components/atoms";
+  import { DirectoryEntryLabel } from "$lib/components/molecules";
   import {
     getDirectoryInfo,
     getFileInfo,
@@ -23,10 +25,19 @@
     info: DirectoryInfo;
     onEntryClick: (entry: SelectedEntry) => void;
     onEntryMenuClick: (entry: SelectedEntry) => void;
+    onParentClick?: () => void;
+    showParentEntry?: boolean;
     sortBy?: SortBy;
   }
 
-  let { info, onEntryClick, onEntryMenuClick, sortBy = SortBy.NAME_ASC }: Props = $props();
+  let {
+    info,
+    onEntryClick,
+    onEntryMenuClick,
+    onParentClick,
+    showParentEntry = false,
+    sortBy = SortBy.NAME_ASC,
+  }: Props = $props();
 
   interface DirectoryEntry {
     name?: string;
@@ -106,8 +117,13 @@
   });
 </script>
 
-{#if subDirectories.length + files.length > 0}
+{#if subDirectories.length + files.length > 0 || showParentEntry}
   <div class="space-y-1 pb-[4.5rem]">
+    {#if showParentEntry}
+      <ActionEntryButton class="h-14" onclick={onParentClick}>
+        <DirectoryEntryLabel type="parent-directory" name=".." />
+      </ActionEntryButton>
+    {/if}
     {#each subDirectories as { info }}
       <SubDirectory {info} onclick={onEntryClick} onOpenMenuClick={onEntryMenuClick} />
     {/each}