디렉터리 페이지에서 하위 디렉터리도 가상 리스트로 표시하도록 개선

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
       >