From 1e57941f4c2fbdab43b702150449f66133aeddb6 Mon Sep 17 00:00:00 2001
From: static <kmc7468@naver.com>
Date: Tue, 30 Dec 2025 18:44:46 +0900
Subject: [PATCH] =?UTF-8?q?=EB=94=94=EB=A0=89=ED=84=B0=EB=A6=AC=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=EC=84=9C=20=ED=95=98?=
 =?UTF-8?q?=EC=9C=84=20=EB=94=94=EB=A0=89=ED=84=B0=EB=A6=AC=EB=8F=84=20?=
 =?UTF-8?q?=EA=B0=80=EC=83=81=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=EB=A1=9C=20?=
 =?UTF-8?q?=ED=91=9C=EC=8B=9C=ED=95=98=EB=8F=84=EB=A1=9D=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/atoms/RowVirtualizer.svelte    | 18 ++++-
 .../(fullscreen)/file/[id]/+page.svelte       |  4 +-
 src/routes/(fullscreen)/gallery/+page.svelte  |  2 +-
 .../DirectoryEntries/DirectoryEntries.svelte  | 79 ++++++++++---------
 4 files changed, 60 insertions(+), 43 deletions(-)

diff --git a/src/lib/components/atoms/RowVirtualizer.svelte b/src/lib/components/atoms/RowVirtualizer.svelte
index 55dc7a1..cd7f35f 100644
--- a/src/lib/components/atoms/RowVirtualizer.svelte
+++ b/src/lib/components/atoms/RowVirtualizer.svelte
@@ -13,24 +13,38 @@
 
   let { class: className, count, item, itemHeight, placeholder }: Props = $props();
 
+  let element: HTMLElement | undefined = $state();
+  let scrollMargin = $state(0);
+
   const virtualizer = $derived(
     createWindowVirtualizer({
       count,
       estimateSize: itemHeight,
+      scrollMargin,
     }),
   );
 
   const measureItem = (node: HTMLElement) => {
     $effect(() => $virtualizer.measureElement(node));
   };
+
+  $effect(() => {
+    if (!element) return;
+
+    const observer = new ResizeObserver(() => {
+      scrollMargin = element!.getBoundingClientRect().top + window.scrollY;
+    });
+    observer.observe(element.parentElement!);
+    return () => observer.disconnect();
+  });
 </script>
 
-<div class={["relative", className]}>
+<div bind:this={element} class={["relative", className]}>
   <div style:height="{$virtualizer.getTotalSize()}px">
     {#each $virtualizer.getVirtualItems() as virtualItem (virtualItem.key)}
       <div
         class="absolute left-0 top-0 w-full"
-        style:transform="translateY({virtualItem.start}px)"
+        style:transform="translateY({virtualItem.start - scrollMargin}px)"
         data-index={virtualItem.index}
         use:measureItem
       >
diff --git a/src/routes/(fullscreen)/file/[id]/+page.svelte b/src/routes/(fullscreen)/file/[id]/+page.svelte
index 3249bf2..9e0ddc0 100644
--- a/src/routes/(fullscreen)/file/[id]/+page.svelte
+++ b/src/routes/(fullscreen)/file/[id]/+page.svelte
@@ -145,7 +145,9 @@
     </button>
     <TopBarMenu
       bind:isOpen={isMenuOpen}
-      directoryId={page.url.searchParams.get("from") === "category" ? $info?.parentId : undefined}
+      directoryId={["category", "gallery"].includes(page.url.searchParams.get("from") ?? "")
+        ? $info?.parentId
+        : undefined}
       {fileBlob}
       filename={$info?.name}
     />
diff --git a/src/routes/(fullscreen)/gallery/+page.svelte b/src/routes/(fullscreen)/gallery/+page.svelte
index 1826c47..b6f8239 100644
--- a/src/routes/(fullscreen)/gallery/+page.svelte
+++ b/src/routes/(fullscreen)/gallery/+page.svelte
@@ -22,5 +22,5 @@
 
 <TopBar title="사진 및 동영상" />
 <FullscreenDiv>
-  <Gallery {files} onFileClick={({ id }) => goto(`/file/${id}`)} />
+  <Gallery {files} onFileClick={({ id }) => goto(`/file/${id}?from=gallery`)} />
 </FullscreenDiv>
diff --git a/src/routes/(main)/directory/[[id]]/DirectoryEntries/DirectoryEntries.svelte b/src/routes/(main)/directory/[[id]]/DirectoryEntries/DirectoryEntries.svelte
index b761176..530cb97 100644
--- a/src/routes/(main)/directory/[[id]]/DirectoryEntries/DirectoryEntries.svelte
+++ b/src/routes/(main)/directory/[[id]]/DirectoryEntries/DirectoryEntries.svelte
@@ -25,56 +25,57 @@
     showParentEntry = false,
   }: Props = $props();
 
-  type FileEntry =
+  type Entry =
+    | { type: "parent" }
+    | { type: "directory"; name: string; details: (typeof info.subDirectories)[number] }
     | { type: "file"; name: string; details: (typeof info.files)[number] }
     | { type: "uploading-file"; name: string; details: LiveFileUploadState };
 
-  const toFileEntry =
-    <T extends FileEntry["type"]>(type: T) =>
-    (details: Extract<FileEntry, { type: T }>["details"]) => ({
+  const toEntry =
+    <T extends Exclude<Entry["type"], "parent">>(type: T) =>
+    (details: Extract<Entry, { type: T }>["details"]) => ({
       type,
       name: details.name,
       details,
     });
 
-  const subDirectories = $derived(
-    sortEntries(structuredClone($state.snapshot(info.subDirectories))),
-  );
-  const files = $derived(
-    sortEntries<FileEntry>([
-      ...info.files.map(toFileEntry("file")),
-      ...getUploadingFiles(info.id).map(toFileEntry("uploading-file")),
+  const entries = $derived([
+    ...(showParentEntry ? ([{ type: "parent" }] as const) : []),
+    ...sortEntries(info.subDirectories.map(toEntry("directory"))),
+    ...sortEntries([
+      ...info.files.map(toEntry("file")),
+      ...getUploadingFiles(info.id).map(toEntry("uploading-file")),
     ]),
-  );
+  ]);
 </script>
 
-{#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 subDirectory}
-      <SubDirectory info={subDirectory} onclick={onEntryClick} onOpenMenuClick={onEntryMenuClick} />
-    {/each}
-    {#if files.length > 0}
-      <RowVirtualizer
-        count={files.length}
-        itemHeight={(index) => 56 + (index + 1 < files.length ? 4 : 0)}
-      >
-        {#snippet item(index)}
-          {@const file = files[index]!}
-          <div class={index + 1 < files.length ? "pb-1" : ""}>
-            {#if file.type === "file"}
-              <File info={file.details} onclick={onEntryClick} onOpenMenuClick={onEntryMenuClick} />
-            {:else}
-              <UploadingFile state={file.details} />
-            {/if}
-          </div>
-        {/snippet}
-      </RowVirtualizer>
-    {/if}
+{#if entries.length > 0}
+  <div class="pb-[4.5rem]">
+    <RowVirtualizer
+      count={entries.length}
+      itemHeight={(index) => 56 + (index + 1 < entries.length ? 4 : 0)}
+    >
+      {#snippet item(index)}
+        {@const entry = entries[index]!}
+        <div class={index + 1 < entries.length ? "pb-1" : ""}>
+          {#if entry.type === "parent"}
+            <ActionEntryButton class="h-14" onclick={onParentClick}>
+              <DirectoryEntryLabel type="parent-directory" name=".." />
+            </ActionEntryButton>
+          {:else if entry.type === "directory"}
+            <SubDirectory
+              info={entry.details}
+              onclick={onEntryClick}
+              onOpenMenuClick={onEntryMenuClick}
+            />
+          {:else if entry.type === "file"}
+            <File info={entry.details} onclick={onEntryClick} onOpenMenuClick={onEntryMenuClick} />
+          {:else}
+            <UploadingFile state={entry.details} />
+          {/if}
+        </div>
+      {/snippet}
+    </RowVirtualizer>
   </div>
 {:else}
   <div class="flex flex-grow items-center justify-center">