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

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

src/lib/components/atoms/BottomSheet.svelte

@@ -2,7 +2,7 @@
   import type { Snippet } from "svelte";
   import type { ClassValue } from "svelte/elements";
   import { fade, fly } from "svelte/transition";
-  import { AdaptiveDiv } from "$lib/components/atoms";
+  import { AdaptiveDiv } from "#lib/components/atoms/index.js";
 
   interface Props {
     children: Snippet;
@@ -21,17 +21,14 @@
     onclick={onclose || (() => (isOpen = false))}
     class="fixed inset-0 z-10 flex items-end justify-center"
   >
-    <div
-      class="absolute inset-0 bg-black bg-opacity-50"
-      transition:fade|global={{ duration: 100 }}
-    ></div>
+    <div class="absolute inset-0 bg-black/50" transition:fade|global={{ duration: 100 }}></div>
     <AdaptiveDiv class="z-10 w-full">
       <div
         onclick={(e) => e.stopPropagation()}
         class="flex max-h-[70vh] min-h-[30vh] flex-col rounded-t-2xl bg-white"
         transition:fly|global={{ y: 100, duration: 200 }}
       >
-        <div class={["flex-grow overflow-y-auto", className]}>
+        <div class={["grow overflow-y-auto", className]}>
           {@render children()}
         </div>
       </div>

src/lib/components/atoms/Modal.svelte

@@ -2,7 +2,7 @@
   import type { Snippet } from "svelte";
   import type { ClassValue } from "svelte/elements";
   import { fade } from "svelte/transition";
-  import { AdaptiveDiv } from "$lib/components/atoms";
+  import { AdaptiveDiv } from "#lib/components/atoms/index.js";
 
   interface Props {
     children: Snippet;
@@ -19,7 +19,7 @@
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
     onclick={onclose || (() => (isOpen = false))}
-    class="fixed inset-0 z-10 bg-black bg-opacity-50"
+    class="fixed inset-0 z-10 bg-black/50"
     transition:fade|global={{ duration: 100 }}
   >
     <AdaptiveDiv class="flex h-full items-center justify-center px-4">

src/lib/components/atoms/RowVirtualizer.svelte

@@ -55,7 +55,7 @@
   <div style:height="{$virtualizer.getTotalSize()}px">
     {#each $virtualizer.getVirtualItems() as virtualItem (virtualItem.key)}
       <div
-        class="absolute left-0 top-0 w-full"
+        class="absolute top-0 left-0 w-full"
         style:transform="translateY({virtualItem.start - scrollMargin}px)"
         data-index={virtualItem.index}
         use:measureItem

src/lib/components/atoms/buttons/ActionEntryButton.svelte

@@ -29,7 +29,7 @@
   class={["rounded-xl", className]}
 >
   <div id="children" class="flex h-full items-center gap-x-4 p-2 transition">
-    <div class="flex-grow overflow-x-hidden">
+    <div class="grow overflow-x-hidden">
       {@render children()}
     </div>
     {#if ActionButtonIcon}
@@ -41,7 +41,7 @@
             setTimeout(onActionButtonClick, 100);
           }
         }}
-        class={["flex-shrink-0 rounded-full p-1 text-lg active:bg-gray-100", actionButtonClassName]}
+        class={["shrink-0 rounded-full p-1 text-lg active:bg-gray-100", actionButtonClassName]}
       >
         <ActionButtonIcon />
       </button>
@@ -50,6 +50,8 @@
 </div>
 
 <style lang="postcss">
+  @reference "../../../../app.css";
+
   #container:active:not(:has(#action-button:active)) {
     @apply bg-gray-100;
   }

src/lib/components/atoms/buttons/EntryButton.svelte

@@ -18,9 +18,9 @@
   class={["rounded-xl active:bg-gray-100", className]}
 >
   <div class="flex h-full items-center gap-x-4 p-2 transition active:scale-95">
-    <div class="flex-grow">
+    <div class="grow">
       {@render children()}
     </div>
-    <IconChevronRight class="flex-shrink-0 text-xl text-gray-800" />
+    <IconChevronRight class="shrink-0 text-xl text-gray-800" />
   </div>
 </button>

src/lib/components/atoms/buttons/FileThumbnailButton.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { getFileThumbnail } from "$lib/modules/file";
-  import type { SummarizedFileInfo } from "$lib/modules/filesystem";
+  import { getFileThumbnail } from "#lib/modules/file/index.js";
+  import type { SummarizedFileInfo } from "#lib/modules/filesystem/index.js";
 
   import IconFavorite from "~icons/material-symbols/favorite";
 
@@ -16,15 +16,15 @@
 
 <button
   onclick={onclick && (() => setTimeout(() => onclick(info), 100))}
-  class="relative aspect-square overflow-hidden rounded transition active:scale-95 active:brightness-90"
+  class="relative aspect-square overflow-hidden rounded-sm transition active:scale-95 active:brightness-90"
 >
   {#if $thumbnail}
-    <img src={$thumbnail} alt={info.name} class="h-full w-full object-cover" />
+    <img src={$thumbnail} alt={info.name} class="size-full object-cover" />
   {:else}
-    <div class="h-full w-full bg-gray-100"></div>
+    <div class="size-full bg-gray-100"></div>
   {/if}
   {#if info.isFavorite}
-    <div class={["absolute bottom-0.5 right-0.5"]}>
+    <div class={["absolute right-0.5 bottom-0.5"]}>
       <IconFavorite
         class="text-sm text-red-500"
         style="filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)"

src/lib/components/atoms/buttons/FloatingButton.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Component } from "svelte";
   import type { ClassValue, SvelteHTMLElements } from "svelte/elements";
-  import { AdaptiveDiv } from "$lib/components/atoms";
+  import { AdaptiveDiv } from "#lib/components/atoms/index.js";
 
   interface Props {
     class: ClassValue;
@@ -17,7 +17,7 @@
     <button
       onclick={onclick && (() => setTimeout(onclick, 100))}
       class={[
-        "pointer-events-auto absolute flex h-14 w-14 items-center justify-center rounded-full bg-gray-300 text-xl shadow-lg transition active:scale-95 active:bg-gray-400",
+        "pointer-events-auto absolute flex size-14 items-center justify-center rounded-full bg-gray-300 text-xl shadow-lg transition active:scale-95 active:bg-gray-400",
         className,
       ]}
     >

src/lib/components/atoms/divs/AdaptiveDiv.svelte

@@ -10,6 +10,6 @@
   let { children, class: className }: Props = $props();
 </script>
 
-<div class={["mx-auto max-w-screen-md", className]}>
+<div class={["mx-auto max-w-(--breakpoint-md)", className]}>
   {@render children()}
 </div>

src/lib/components/atoms/divs/FullscreenDiv.svelte

@@ -10,6 +10,6 @@
   let { children, class: className }: Props = $props();
 </script>
 
-<div class={["flex flex-grow flex-col justify-between px-4", className]}>
+<div class={["flex grow flex-col justify-between px-4", className]}>
   {@render children()}
 </div>

src/lib/components/atoms/inputs/TextInput.svelte

@@ -17,11 +17,11 @@
       bind:value
       {type}
       placeholder=""
-      class="w-full border-b-2 border-gray-300 py-1 text-xl outline-none transition duration-300 ease-in-out"
+      class="w-full border-b-2 border-gray-300 py-1 text-xl outline-hidden transition duration-300 ease-in-out"
     />
     <!-- svelte-ignore a11y_label_has_associated_control -->
     <label
-      class="pointer-events-none absolute left-0 top-1/2 -translate-y-1/2 transform text-xl text-gray-400 transition-all duration-300 ease-in-out"
+      class="pointer-events-none absolute top-1/2 left-0 -translate-y-1/2 transform text-xl text-gray-400 transition-all duration-300 ease-in-out"
     >
       {placeholder}
     </label>
@@ -29,6 +29,8 @@
 </div>
 
 <style lang="postcss">
+  @reference "../../../../app.css";
+
   input:focus,
   input:not(:placeholder-shown) {
     @apply border-primary-300;

src/lib/components/molecules/ActionModal.svelte

@@ -4,7 +4,7 @@
 
 <script lang="ts">
   import type { Snippet } from "svelte";
-  import { Button, Modal } from "$lib/components/atoms";
+  import { Button, Modal } from "#lib/components/atoms/index.js";
 
   interface Props {
     cancelText?: string;

src/lib/components/molecules/Categories.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-  import type { DataKey } from "$lib/modules/filesystem";
+  import type { DataKey } from "#lib/modules/filesystem/index.js";
 
   export interface SelectedCategory {
     id: number;
@@ -11,10 +11,10 @@
 <script lang="ts">
   import type { Component } from "svelte";
   import type { SvelteHTMLElements } from "svelte/elements";
-  import { ActionEntryButton } from "$lib/components/atoms";
-  import { CategoryLabel } from "$lib/components/molecules";
-  import type { SubCategoryInfo } from "$lib/modules/filesystem";
-  import { sortEntries } from "$lib/utils";
+  import { ActionEntryButton } from "#lib/components/atoms/index.js";
+  import { CategoryLabel } from "#lib/components/molecules/index.js";
+  import type { SubCategoryInfo } from "#lib/modules/filesystem/index.js";
+  import { sortEntries } from "#lib/utils/index.js";
 
   interface Props {
     categories: SubCategoryInfo[];

src/lib/components/molecules/IconEntryButton.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import type { Component, Snippet } from "svelte";
   import type { ClassValue, SvelteHTMLElements } from "svelte/elements";
-  import { EntryButton } from "$lib/components/atoms";
-  import { IconLabel } from "$lib/components/molecules";
+  import { EntryButton } from "#lib/components/atoms/index.js";
+  import { IconLabel } from "#lib/components/molecules/index.js";
 
   interface Props {
     children: Snippet;

src/lib/components/molecules/SubCategories.svelte

@@ -1,8 +1,12 @@
 <script lang="ts">
   import type { Component } from "svelte";
   import type { ClassValue, SvelteHTMLElements } from "svelte/elements";
-  import { Categories, IconEntryButton, type SelectedCategory } from "$lib/components/molecules";
-  import type { CategoryInfo } from "$lib/modules/filesystem";
+  import {
+    Categories,
+    IconEntryButton,
+    type SelectedCategory,
+  } from "#lib/components/molecules/index.js";
+  import type { CategoryInfo } from "#lib/modules/filesystem/index.js";
 
   import IconAddCircle from "~icons/material-symbols/add-circle";
 

src/lib/components/molecules/TitledDiv.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Component, Snippet } from "svelte";
   import type { ClassValue, SvelteHTMLElements } from "svelte/elements";
-  import { TitleLabel } from "$lib/components/molecules";
+  import { TitleLabel } from "#lib/components/molecules/index.js";
 
   interface Props {
     children?: Snippet;

src/lib/components/molecules/TopBar.svelte

@@ -21,20 +21,20 @@
     className,
   ]}
 >
-  <div class="w-[2.3rem] flex-shrink-0">
+  <div class="w-[2.3rem] shrink-0">
     {#if showBackButton}
       <button
         onclick={onBackClick ?? (() => history.back())}
-        class="w-full rounded-full p-1 text-2xl active:bg-black active:bg-opacity-[0.04]"
+        class="w-full rounded-full p-1 text-2xl active:bg-black/4"
       >
         <IconArrowBack />
       </button>
     {/if}
   </div>
   {#if title}
-    <p class="flex-grow truncate text-center text-lg font-semibold">{title}</p>
+    <p class="grow truncate text-center text-lg font-semibold">{title}</p>
   {/if}
-  <div class="w-[2.3rem] flex-shrink-0">
+  <div class="w-[2.3rem] shrink-0">
     {#if children}
       {@render children()}
     {/if}

src/lib/components/molecules/labels/CategoryLabel.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { ClassValue } from "svelte/elements";
-  import { IconLabel } from "$lib/components/molecules";
+  import { IconLabel } from "#lib/components/molecules/index.js";
 
   import IconCategory from "~icons/material-symbols/category";
 

src/lib/components/molecules/labels/DirectoryEntryLabel.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { ClassValue } from "svelte/elements";
-  import { IconLabel } from "$lib/components/molecules";
+  import { IconLabel } from "#lib/components/molecules/index.js";
 
   import IconFolder from "~icons/material-symbols/folder";
   import IconDriveFolderUpload from "~icons/material-symbols/drive-folder-upload";
@@ -29,9 +29,14 @@
 </script>
 
 {#snippet iconSnippet()}
-  <div class="relative flex h-10 w-10 items-center justify-center text-xl">
+  <div class="relative flex size-10 items-center justify-center text-xl">
     {#if thumbnail}
-      <img src={thumbnail} alt={name} loading="lazy" class="aspect-square rounded object-cover" />
+      <img
+        src={thumbnail}
+        alt={name}
+        loading="lazy"
+        class="aspect-square rounded-sm object-cover"
+      />
     {:else if type === "directory"}
       <IconFolder />
     {:else if type === "parent-directory"}
@@ -40,7 +45,7 @@
       <IconDraft class="text-blue-400" />
     {/if}
     {#if isFavorite}
-      <div class={["absolute bottom-0 right-0", !thumbnail && "rounded-full bg-white p-0.5"]}>
+      <div class={["absolute right-0 bottom-0", !thumbnail && "rounded-full bg-white p-0.5"]}>
         <IconFavorite
           class="text-xs text-red-500"
           style="filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)"

src/lib/components/molecules/labels/IconLabel.svelte

@@ -25,15 +25,15 @@
 
 <div class={["flex items-center gap-x-4", className]}>
   {#if iconSnippet}
-    <div class={["flex-shrink-0", iconClassName]}>
+    <div class={["shrink-0", iconClassName]}>
       {@render iconSnippet()}
     </div>
   {:else if Icon}
-    <div class={["flex-shrink-0 text-lg", iconClassName]}>
+    <div class={["shrink-0 text-lg", iconClassName]}>
       <Icon />
     </div>
   {/if}
-  <div class="flex flex-grow flex-col overflow-x-hidden text-left">
+  <div class="flex grow flex-col overflow-x-hidden text-left">
     <p class={["truncate font-medium", textClassName]}>
       {@render children()}
     </p>

src/lib/components/organisms/modals/CategoryCreateModal.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/lib/components/organisms/modals/ForceLoginModal.svelte

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

src/lib/components/organisms/modals/RenameModal.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/lib/components/organisms/modals/TextInputModal.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { TextInput } from "$lib/components/atoms";
-  import { ActionModal, type ConfirmHandler } from "$lib/components/molecules";
+  import { TextInput } from "#lib/components/atoms/index.js";
+  import { ActionModal, type ConfirmHandler } from "#lib/components/molecules/index.js";
 
   interface Props {
     defaultValue?: string;