불필요하게 분리된 컴포넌트 삭제

2026-02-04 16:16:55 +00:00 · 2026-01-06 07:17:58 +09:00
parent 1d3704bfad
commit 4997b1f38c
11 changed files with 171 additions and 220 deletions
--- a/src/routes/(fullscreen)/gallery/+page.svelte
+++ b/src/routes/(fullscreen)/gallery/+page.svelte
@@ -1,15 +1,53 @@
 <script lang="ts">
  import { onMount } from "svelte";
  import { goto } from "$app/navigation";
-  import { FullscreenDiv } from "$lib/components/atoms";
+  import { FileThumbnailButton, FullscreenDiv, RowVirtualizer } from "$lib/components/atoms";
  import { TopBar } from "$lib/components/molecules";
-  import { Gallery } from "$lib/components/organisms";
-  import { bulkGetFileInfo, type MaybeFileInfo } from "$lib/modules/filesystem";
+  import {
+    bulkGetFileInfo,
+    type MaybeFileInfo,
+    type SummarizedFileInfo,
+  } from "$lib/modules/filesystem";
  import { masterKeyStore } from "$lib/stores";
+  import { formatDate, formatDateSortable, SortBy, sortEntries } from "$lib/utils";

  let { data } = $props();

+  type Row =
+    | { type: "header"; label: string }
+    | { type: "items"; files: SummarizedFileInfo[]; isLast: boolean };
+
  let files: MaybeFileInfo[] = $state([]);
+  let rows: Row[] = $derived.by(() => {
+    const groups = Map.groupBy(
+      files
+        .filter((file) => file.exists)
+        .filter(
+          (file) => file.contentType.startsWith("image/") || file.contentType.startsWith("video/"),
+        ),
+      (file) => formatDateSortable(file.createdAt ?? file.lastModifiedAt),
+    );
+    return Array.from(groups.entries())
+      .sort(([dateA], [dateB]) => dateB.localeCompare(dateA))
+      .flatMap(([, entries]) => {
+        const sortedEntries = sortEntries([...entries], SortBy.DATE_DESC);
+        return [
+          {
+            type: "header",
+            label: formatDate(sortedEntries[0]!.createdAt ?? sortedEntries[0]!.lastModifiedAt),
+          },
+          ...Array.from({ length: Math.ceil(sortedEntries.length / 4) }, (_, i) => {
+            const start = i * 4;
+            const end = start + 4;
+            return {
+              type: "items" as const,
+              files: sortedEntries.slice(start, end),
+              isLast: end >= sortedEntries.length,
+            };
+          }),
+        ];
+      });
+  });

  onMount(async () => {
    files = Array.from((await bulkGetFileInfo(data.files, $masterKeyStore?.get(1)?.key!)).values());
@@ -22,8 +60,37 @@

 <TopBar title="사진 및 동영상" />
 <FullscreenDiv>
-  <Gallery
-    files={files.filter((file) => file?.exists)}
-    onFileClick={({ id }) => goto(`/file/${id}?from=gallery`)}
-  />
+  <RowVirtualizer
+    count={rows.length}
+    itemHeight={(index) =>
+      rows[index]!.type === "header" ? 28 : 181 + (rows[index]!.isLast ? 16 : 4)}
+    class="flex flex-grow flex-col"
+  >
+    {#snippet item(index)}
+      {@const row = rows[index]!}
+      {#if row.type === "header"}
+        <p class="pb-2 text-sm font-medium">{row.label}</p>
+      {:else}
+        <div class={["grid grid-cols-4 gap-x-1", row.isLast ? "pb-4" : "pb-1"]}>
+          {#each row.files as file (file.id)}
+            <FileThumbnailButton
+              info={file}
+              onclick={() => goto(`/file/${file.id}?from=gallery`)}
+            />
+          {/each}
+        </div>
+      {/if}
+    {/snippet}
+    {#snippet placeholder()}
+      <div class="flex h-full flex-grow items-center justify-center">
+        <p class="text-gray-500">
+          {#if files.length === 0}
+            업로드된 파일이 없어요.
+          {:else}
+            사진 또는 동영상이 없어요.
+          {/if}
+        </p>
+      </div>
+    {/snippet}
+  </RowVirtualizer>
 </FullscreenDiv>
--- a/src/routes/(main)/category/[[id]]/+page.svelte
+++ b/src/routes/(main)/category/[[id]]/+page.svelte
@@ -1,13 +1,16 @@
 <script lang="ts">
  import { goto } from "$app/navigation";
-  import { TopBar } from "$lib/components/molecules";
-  import { Category, CategoryCreateModal } from "$lib/components/organisms";
+  import { CheckBox, RowVirtualizer } from "$lib/components/atoms";
+  import { SubCategories, TopBar } from "$lib/components/molecules";
+  import { CategoryCreateModal } from "$lib/components/organisms";
+  import { updateCategoryInfo } from "$lib/indexedDB";
  import { getCategoryInfo, type MaybeCategoryInfo } from "$lib/modules/filesystem";
  import { masterKeyStore } from "$lib/stores";
-  import { HybridPromise } from "$lib/utils";
+  import { HybridPromise, sortEntries } from "$lib/utils";
  import CategoryDeleteModal from "./CategoryDeleteModal.svelte";
  import CategoryMenuBottomSheet from "./CategoryMenuBottomSheet.svelte";
  import CategoryRenameModal from "./CategoryRenameModal.svelte";
+  import File from "./File.svelte";
  import {
    createContext,
    requestCategoryCreation,
@@ -16,6 +19,8 @@
    requestCategoryDeletion,
  } from "./service.svelte";

+  import IconMoreVert from "~icons/material-symbols/more-vert";
+
  let { data } = $props();
  let context = createContext();

@@ -26,6 +31,30 @@
  let isCategoryRenameModalOpen = $state(false);
  let isCategoryDeleteModalOpen = $state(false);

+  let lastCategoryId: CategoryId | undefined = $state();
+  let lastIsFileRecursive: boolean | undefined = $state();
+
+  let files = $derived(
+    sortEntries(
+      info?.files
+        ?.map((file) => ({ name: file.name, details: file }))
+        .filter(({ details }) => info?.isFileRecursive || !details.isRecursive) ?? [],
+    ),
+  );
+
+  $effect(() => {
+    if (!info || info.id === "root" || info.isFileRecursive === undefined) return;
+    if (lastCategoryId !== info.id) {
+      lastCategoryId = info.id;
+      lastIsFileRecursive = info.isFileRecursive;
+      return;
+    }
+    if (lastIsFileRecursive === info.isFileRecursive) return;
+
+    lastIsFileRecursive = info.isFileRecursive;
+    void updateCategoryInfo(info.id, { isFileRecursive: info.isFileRecursive });
+  });
+
  $effect(() => {
    HybridPromise.resolve(getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!)).then(
      (result) => {
@@ -41,28 +70,58 @@
  <title>카테고리</title>
 </svelte:head>

-{#if info?.exists}
-  {#if info.id !== "root"}
-    <TopBar title={info.name} />
-  {/if}
-  <div class="min-h-full bg-gray-100 pb-[5.5em]">
-    <Category
-      bind:isFileRecursive={info.isFileRecursive}
-      {info}
-      onFileClick={({ id }) => goto(`/file/${id}?from=category`)}
-      onFileRemoveClick={async ({ id }) => {
-        await requestFileRemovalFromCategory(id, data.id as number);
-        void getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
-      }}
-      onSubCategoryClick={({ id }) => goto(`/category/${id}`)}
-      onSubCategoryCreateClick={() => (isCategoryCreateModalOpen = true)}
-      onSubCategoryMenuClick={(subCategory) => {
-        context.selectedCategory = subCategory;
-        isCategoryMenuBottomSheetOpen = true;
-      }}
-    />
-  </div>
+{#if info?.id !== "root"}
+  <TopBar title={info?.name} />
 {/if}
+<div class="min-h-full bg-gray-100 pb-[5.5em]">
+  {#if info?.exists}
+    <div class="space-y-4">
+      <div class="space-y-4 bg-white p-4">
+        {#if info.id !== "root"}
+          <p class="text-lg font-bold text-gray-800">하위 카테고리</p>
+        {/if}
+        <SubCategories
+          {info}
+          onSubCategoryClick={({ id }) => goto(`/category/${id}`)}
+          onSubCategoryCreateClick={() => (isCategoryCreateModalOpen = true)}
+          onSubCategoryMenuClick={(subCategory) => {
+            context.selectedCategory = subCategory;
+            isCategoryMenuBottomSheetOpen = true;
+          }}
+          subCategoryMenuIcon={IconMoreVert}
+        />
+      </div>
+      {#if info.id !== "root"}
+        <div class="space-y-4 bg-white p-4">
+          <div class="flex items-center justify-between">
+            <p class="text-lg font-bold text-gray-800">파일</p>
+            <CheckBox bind:checked={info.isFileRecursive}>
+              <p class="font-medium">하위 카테고리의 파일</p>
+            </CheckBox>
+          </div>
+          <RowVirtualizer count={files.length} itemHeight={() => 48} itemGap={4}>
+            {#snippet item(index)}
+              {@const { details } = files[index]!}
+              <File
+                info={details}
+                onclick={({ id }) => goto(`/file/${id}?from=category`)}
+                onRemoveClick={!details.isRecursive
+                  ? async ({ id }) => {
+                      await requestFileRemovalFromCategory(id, data.id as number);
+                      void getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+                    }
+                  : undefined}
+              />
+            {/snippet}
+            {#snippet placeholder()}
+              <p class="text-center text-gray-500">이 카테고리에 추가된 파일이 없어요.</p>
+            {/snippet}
+          </RowVirtualizer>
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>

 <CategoryCreateModal
  bind:isOpen={isCategoryCreateModalOpen}
--- a/src/routes/(main)/category/[[id]]/File.svelte
+++ b/src/routes/(main)/category/[[id]]/File.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { ActionEntryButton } from "$lib/components/atoms";
+  import { DirectoryEntryLabel } from "$lib/components/molecules";
+  import { getFileThumbnail } from "$lib/modules/file";
+  import type { CategoryFileInfo } from "$lib/modules/filesystem";
+  import type { SelectedFile } from "./service.svelte";
+
+  import IconClose from "~icons/material-symbols/close";
+
+  interface Props {
+    info: CategoryFileInfo;
+    onclick: (file: SelectedFile) => void;
+    onRemoveClick?: (file: SelectedFile) => void;
+  }
+
+  let { info, onclick, onRemoveClick }: Props = $props();
+
+  let thumbnail = $derived(getFileThumbnail(info));
+</script>
+
+<ActionEntryButton
+  class="h-12"
+  onclick={() => onclick(info)}
+  actionButtonIcon={onRemoveClick && IconClose}
+  onActionButtonClick={() => onRemoveClick?.(info)}
+>
+  <DirectoryEntryLabel type="file" thumbnail={$thumbnail} name={info.name} />
+</ActionEntryButton>
--- a/src/routes/(main)/category/[[id]]/service.svelte.ts
+++ b/src/routes/(main)/category/[[id]]/service.svelte.ts
@@ -5,6 +5,11 @@ import { trpc } from "$trpc/client";

 export { requestCategoryCreation, requestFileRemovalFromCategory } from "$lib/services/category";

+export interface SelectedFile {
+  id: number;
+  name: string;
+}
+
 export const createContext = () => {
  const context = $state({
    selectedCategory: undefined as SelectedCategory | undefined,
--- a/src/routes/(main)/directory/[[id]]/+page.svelte
+++ b/src/routes/(main)/directory/[[id]]/+page.svelte
@@ -95,11 +95,11 @@

 <input bind:this={fileInput} onchange={uploadFile} type="file" multiple class="hidden" />

-{#if info?.exists}
-  <div class="flex h-full flex-col">
-    {#if showTopBar}
-      <TopBar title={info.name} class="flex-shrink-0" />
-    {/if}
+<div class="flex h-full flex-col">
+  {#if showTopBar}
+    <TopBar title={info?.name} class="flex-shrink-0" />
+  {/if}
+  {#if info?.exists}
    <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")} />
@@ -123,8 +123,8 @@
        />
      {/key}
    </div>
-  </div>
-{/if}
+  {/if}
+</div>

 <FloatingButton
  icon={IconAdd}