사소한 리팩토링

src/lib/components/atoms/Chip.svelte

@@ -9,8 +9,8 @@
     class?: ClassValue;
     onclick?: () => void;
     onRemoveClick?: () => void;
-    selected?: boolean;
     removable?: boolean;
+    selected?: boolean;
   }
 
   let {
@@ -38,7 +38,7 @@
   <span>
     {@render children()}
   </span>
-  {#if selected && removable}
+  {#if removable && selected}
     <button
       onclick={(e) => {
         e.stopPropagation();

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

@@ -24,7 +24,7 @@
     <div class="h-full w-full bg-gray-100"></div>
   {/if}
   {#if info.isFavorite}
-    <div class={["absolute bottom-0.5 right-0.5", !thumbnail && "rounded-full bg-white p-0.5"]}>
+    <div class={["absolute bottom-0.5 right-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/molecules/TopBar.svelte

@@ -25,9 +25,9 @@
     {#if showBackButton}
       <button
         onclick={onBackClick ?? (() => history.back())}
-        class="w-[2.3rem] flex-shrink-0 rounded-full p-1 active:bg-black active:bg-opacity-[0.04]"
+        class="w-full rounded-full p-1 text-2xl active:bg-black active:bg-opacity-[0.04]"
       >
-        <IconArrowBack class="text-2xl" />
+        <IconArrowBack />
       </button>
     {/if}
   </div>

src/routes/(fullscreen)/file/[id]/+page.svelte

@@ -77,12 +77,8 @@
   };
 
   const toggleFavorite = async () => {
-    if (!info?.exists) return;
-    const isFavorite = !!info.isFavorite;
-    const success = await requestFavoriteToggle(data.id, isFavorite);
-    if (success) {
-      info.isFavorite = !isFavorite;
-    }
+    await requestFavoriteToggle(data.id, !!info?.isFavorite);
+    void getFileInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
   };
 
   $effect(() => {
@@ -154,9 +150,9 @@
   <div onclick={(e) => e.stopPropagation()}>
     <button
       onclick={() => (isMenuOpen = !isMenuOpen)}
-      class="w-[2.3rem] flex-shrink-0 rounded-full p-1 active:bg-black active:bg-opacity-[0.04]"
+      class="w-full rounded-full p-1 text-2xl active:bg-black active:bg-opacity-[0.04]"
     >
-      <IconMoreVert class="text-2xl" />
+      <IconMoreVert />
     </button>
     <TopBarMenu
       bind:isOpen={isMenuOpen}

src/routes/(fullscreen)/file/[id]/TopBarMenu.svelte

@@ -46,7 +46,7 @@
 
 {#if isOpen && (directoryId || downloadUrl || fileBlob)}
   <div
-    class="absolute right-2 top-full z-20 min-w-44 space-y-1 rounded-lg bg-white px-1 py-2 shadow-2xl"
+    class="absolute right-2 top-full z-20 min-w-40 space-y-1 rounded-lg bg-white px-1 py-2 shadow-2xl"
     transition:fly={{ y: -8, duration: 200 }}
   >
     <p class="px-3 pt-2 text-sm font-semibold text-gray-600">더보기</p>
@@ -57,16 +57,14 @@
         onclick: () => void,
       )}
         <button {onclick} class="rounded-xl active:bg-gray-100">
-          <div
-            class="flex items-center gap-x-3 px-3 py-2 text-lg text-gray-700 transition active:scale-95"
-          >
+          <div class="flex items-center gap-x-3 px-3 py-2 text-gray-700 transition active:scale-95">
             <Icon />
             <p class="font-medium">{text}</p>
           </div>
         </button>
       {/snippet}
 
-      {#if typeof isFavorite === "boolean"}
+      {#if isFavorite !== undefined}
         {@render menuButton(
           isFavorite ? IconFavorite : IconFavoriteOutline,
           isFavorite ? "즐겨찾기 해제" : "즐겨찾기",

src/routes/(fullscreen)/file/[id]/service.ts

@@ -58,6 +58,7 @@ export const requestFavoriteToggle = async (fileId: number, isFavorite: boolean)
     }
     return true;
   } catch {
+    // TODO: Error Handling
     return false;
   }
 };

src/routes/(fullscreen)/settings/migration/service.svelte.ts

@@ -56,8 +56,7 @@ export const requestLegacyFiles = async (
       ),
     ),
   );
-
-  return files as MaybeFileInfo[];
+  return files;
 };
 
 const createState = (status: MigrationStatus): MigrationState => {

src/routes/(fullscreen)/settings/thumbnail/service.ts

@@ -61,8 +61,7 @@ export const requestMissingThumbnailFiles = async (
       ),
     ),
   );
-
-  return files as MaybeFileInfo[];
+  return files;
 };
 
 const requestThumbnailUpload = limitFunction(

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

@@ -24,7 +24,7 @@
       id: info.id,
       dataKey: info.dataKey,
       name: info.name,
-      isFavorite: info.isFavorite ?? false,
+      isFavorite: info.isFavorite,
     });
   };
 </script>

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

@@ -20,7 +20,7 @@
       id: info.id,
       dataKey: info.dataKey,
       name: info.name,
-      isFavorite: info.isFavorite ?? false,
+      isFavorite: info.isFavorite,
     });
   };
 </script>