패키지 버전 업데이트 및 SvelteKit 3, Tailwind CSS 4로 마이그레이션

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

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

@@ -2,11 +2,11 @@
   import { onMount } from "svelte";
   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 MaybeDirectoryInfo } from "$lib/modules/filesystem";
-  import { masterKeyStore, hmacSecretStore } from "$lib/stores";
-  import { HybridPromise } from "$lib/utils";
+  import { FloatingButton } from "#lib/components/atoms/index.js";
+  import { TopBar } from "#lib/components/molecules/index.js";
+  import { getDirectoryInfo, type MaybeDirectoryInfo } from "#lib/modules/filesystem/index.js";
+  import { masterKeyStore, hmacSecretStore } from "#lib/stores/index.js";
+  import { HybridPromise } from "#lib/utils/index.js";
   import DirectoryCreateModal from "./DirectoryCreateModal.svelte";
   import DirectoryEntries from "./DirectoryEntries";
   import DownloadStatusCard from "./DownloadStatusCard.svelte";
@@ -109,16 +109,13 @@
 <input bind:this={fileInput} onchange={uploadFile} type="file" multiple class="hidden" />
 
 <div class="flex h-full flex-col">
-  <TopBar title={info?.name ?? "내 파일"} {showBackButton} class="flex-shrink-0">
-    <button
-      onclick={onSearchClick}
-      class="w-[2.3rem] flex-shrink-0 rounded-full p-1 active:bg-black active:bg-opacity-[0.04]"
-    >
+  <TopBar title={info?.name ?? "내 파일"} {showBackButton} class="shrink-0">
+    <button onclick={onSearchClick} class="w-[2.3rem] shrink-0 rounded-full p-1 active:bg-black/4">
       <IconSearch class="text-2xl" />
     </button>
   </TopBar>
   {#if info?.exists}
-    <div class="flex flex-grow flex-col px-4 pb-4">
+    <div class="flex grow flex-col px-4 pb-4">
       <div class="flex gap-x-2">
         <UploadStatusCard onclick={() => goto("/file/uploads")} />
         <DownloadStatusCard onclick={() => goto("/file/downloads")} />
@@ -149,7 +146,7 @@
   onclick={() => {
     isEntryCreateBottomSheetOpen = true;
   }}
-  class="bottom-24 right-4"
+  class="right-4 bottom-24"
 />
 <EntryCreateBottomSheet
   bind:isOpen={isEntryCreateBottomSheetOpen}

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { TextInputModal } from "$lib/components/organisms";
+  import { TextInputModal } from "#lib/components/organisms/index.js";
 
   interface Props {
     isOpen: boolean;

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

@@ -1,9 +1,9 @@
 <script lang="ts">
-  import { ActionEntryButton, RowVirtualizer } from "$lib/components/atoms";
-  import { DirectoryEntryLabel } from "$lib/components/molecules";
-  import { getUploadingFiles, type LiveFileUploadState } from "$lib/modules/file";
-  import type { DirectoryInfo } from "$lib/modules/filesystem";
-  import { sortEntries } from "$lib/utils";
+  import { ActionEntryButton, RowVirtualizer } from "#lib/components/atoms/index.js";
+  import { DirectoryEntryLabel } from "#lib/components/molecules/index.js";
+  import { getUploadingFiles, type LiveFileUploadState } from "#lib/modules/file/index.js";
+  import type { DirectoryInfo } from "#lib/modules/filesystem/index.js";
+  import { sortEntries } from "#lib/utils/index.js";
   import File from "./File.svelte";
   import SubDirectory from "./SubDirectory.svelte";
   import UploadingFile from "./UploadingFile.svelte";
@@ -54,7 +54,7 @@
         : entries[index]!.type!}
     estimateItemHeight={() => 56}
     itemGap={4}
-    class="pb-[4.5rem]"
+    class="pb-18"
   >
     {#snippet item(index)}
       {@const entry = entries[index]!}
@@ -76,7 +76,7 @@
     {/snippet}
   </RowVirtualizer>
 {:else}
-  <div class="flex flex-grow items-center justify-center">
+  <div class="flex grow items-center justify-center">
     <p class="text-gray-500">폴더가 비어 있어요.</p>
   </div>
 {/if}

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

@@ -1,9 +1,9 @@
 <script lang="ts">
-  import { ActionEntryButton } from "$lib/components/atoms";
-  import { DirectoryEntryLabel } from "$lib/components/molecules";
-  import { getFileThumbnail } from "$lib/modules/file";
-  import type { SummarizedFileInfo } from "$lib/modules/filesystem";
-  import { formatDateTime } from "$lib/utils";
+  import { ActionEntryButton } from "#lib/components/atoms/index.js";
+  import { DirectoryEntryLabel } from "#lib/components/molecules/index.js";
+  import { getFileThumbnail } from "#lib/modules/file/index.js";
+  import type { SummarizedFileInfo } from "#lib/modules/filesystem/index.js";
+  import { formatDateTime } from "#lib/utils/index.js";
   import type { SelectedEntry } from "../service.svelte";
 
   import IconMoreVert from "~icons/material-symbols/more-vert";

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

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { ActionEntryButton } from "$lib/components/atoms";
-  import { DirectoryEntryLabel } from "$lib/components/molecules";
-  import type { SubDirectoryInfo } from "$lib/modules/filesystem";
+  import { ActionEntryButton } from "#lib/components/atoms/index.js";
+  import { DirectoryEntryLabel } from "#lib/components/molecules/index.js";
+  import type { SubDirectoryInfo } from "#lib/modules/filesystem/index.js";
   import type { SelectedEntry } from "../service.svelte";
 
   import IconMoreVert from "~icons/material-symbols/more-vert";

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import type { LiveFileUploadState } from "$lib/modules/file";
-  import { formatNetworkSpeed } from "$lib/utils";
+  import type { LiveFileUploadState } from "#lib/modules/file/index.js";
+  import { formatNetworkSpeed } from "#lib/utils/index.js";
 
   import IconDraft from "~icons/material-symbols/draft";
 
@@ -12,10 +12,10 @@
 </script>
 
 <div class="flex h-14 gap-x-4 p-2">
-  <div class="flex h-10 w-10 flex-shrink-0 items-center justify-center text-xl">
+  <div class="flex size-10 shrink-0 items-center justify-center text-xl">
     <IconDraft class="text-gray-600" />
   </div>
-  <div class="flex flex-grow flex-col overflow-hidden text-gray-800">
+  <div class="flex grow flex-col overflow-hidden text-gray-800">
     <p title={state.name} class="truncate font-medium">
       {state.name}
     </p>

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getDownloadingFiles } from "$lib/modules/file";
+  import { getDownloadingFiles } from "#lib/modules/file/index.js";
 
   interface Props {
     onclick: () => void;

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { ActionModal } from "$lib/components/molecules";
-  import { truncateString } from "$lib/utils";
+  import { ActionModal } from "#lib/components/molecules/index.js";
+  import { truncateString } from "#lib/utils/index.js";
 
   interface Props {
     file: File | undefined;

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { BottomSheet } from "$lib/components/atoms";
-  import { IconEntryButton } from "$lib/components/molecules";
+  import { BottomSheet } from "#lib/components/atoms/index.js";
+  import { IconEntryButton } from "#lib/components/molecules/index.js";
 
   import IconCreateNewFolder from "~icons/material-symbols/create-new-folder";
   import IconUploadFile from "~icons/material-symbols/upload-file";
@@ -19,7 +19,7 @@
     icon={IconCreateNewFolder}
     onclick={onDirectoryCreateClick}
     class="h-16 w-full"
-    iconClass="!text-2xl text-yellow-500"
+    iconClass="text-2xl! text-yellow-500"
   >
     폴더 만들기
   </IconEntryButton>
@@ -27,7 +27,7 @@
     icon={IconUploadFile}
     onclick={onFileUploadClick}
     class="h-16 w-full"
-    iconClass="!text-2xl text-blue-400"
+    iconClass="text-2xl! text-blue-400"
   >
     파일 업로드
   </IconEntryButton>

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { ActionModal } from "$lib/components/molecules";
-  import { truncateString } from "$lib/utils";
+  import { ActionModal } from "#lib/components/molecules/index.js";
+  import { truncateString } from "#lib/utils/index.js";
   import { useContext } from "./service.svelte";
 
   interface Props {

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { BottomSheet } from "$lib/components/atoms";
-  import { DirectoryEntryLabel, IconEntryButton } from "$lib/components/molecules";
+  import { BottomSheet } from "#lib/components/atoms/index.js";
+  import { DirectoryEntryLabel, IconEntryButton } from "#lib/components/molecules/index.js";
   import { useContext } from "./service.svelte";
 
   import IconFavorite from "~icons/material-symbols/favorite";
@@ -22,7 +22,7 @@
 {#if context.selectedEntry}
   {@const { name, type, isFavorite } = context.selectedEntry}
   <BottomSheet bind:isOpen class="p-4">
-    <DirectoryEntryLabel {type} {name} class="h-12 p-2" textClass="!font-semibold" />
+    <DirectoryEntryLabel {type} {name} class="h-12 p-2" textClass="font-semibold!" />
     <div class="my-2 h-px w-full bg-gray-200"></div>
     <IconEntryButton
       icon={isFavorite ? IconFavorite : IconFavoriteBorder}

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { RenameModal } from "$lib/components/organisms";
+  import { RenameModal } from "#lib/components/organisms/index.js";
   import { useContext } from "./service.svelte";
 
   interface Props {

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getUploadingFiles } from "$lib/modules/file";
+  import { getUploadingFiles } from "#lib/modules/file/index.js";
 
   interface Props {
     onclick: () => void;

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

@@ -1,16 +1,21 @@
 import { getContext, setContext } from "svelte";
-import { storeHmacSecrets } from "$lib/indexedDB";
-import { generateDataKey, wrapDataKey, unwrapHmacSecret, encryptString } from "$lib/modules/crypto";
+import { storeHmacSecrets } from "#lib/indexedDB/index.js";
+import {
+  generateDataKey,
+  wrapDataKey,
+  unwrapHmacSecret,
+  encryptString,
+} from "#lib/modules/crypto/index.js";
 import {
   storeFileCache,
   deleteFileCache,
   storeFileThumbnailCache,
   deleteFileThumbnailCache,
   uploadFile,
-} from "$lib/modules/file";
-import type { DataKey } from "$lib/modules/filesystem";
-import { hmacSecretStore, type MasterKey, type HmacSecret } from "$lib/stores";
-import { trpc } from "$trpc/client";
+} from "#lib/modules/file/index.js";
+import type { DataKey } from "#lib/modules/filesystem/index.js";
+import { hmacSecretStore, type MasterKey, type HmacSecret } from "#lib/stores/index.js";
+import { trpc } from "#trpc/client.js";
 
 export interface SelectedEntry {
   type: "directory" | "file";