사소한 리팩토링 2

src/lib/components/organisms/modals/ForceLoginModal.svelte

@@ -3,7 +3,7 @@
 
   interface Props {
     isOpen: boolean;
-    oncancel: () => void;
+    oncancel?: () => void;
     onLoginClick: () => void;
   }
 

src/lib/components/organisms/modals/index.ts

@@ -1,3 +1,4 @@
 export { default as CategoryCreateModal } from "./CategoryCreateModal.svelte";
+export { default as ForceLoginModal } from "./ForceLoginModal.svelte";
 export { default as RenameModal } from "./RenameModal.svelte";
 export { default as TextInputModal } from "./TextInputModal.svelte";

src/lib/services/file.ts

@@ -11,7 +11,11 @@ import {
   downloadFile,
 } from "$lib/modules/file";
 import { getThumbnailUrl } from "$lib/modules/thumbnail";
-import type { FileThumbnailInfoResponse, FileListResponse } from "$lib/server/schemas";
+import type {
+  FileThumbnailInfoResponse,
+  FileThumbnailUploadRequest,
+  FileListResponse,
+} from "$lib/server/schemas";
 
 export const requestFileDownload = async (
   fileId: number,
@@ -26,6 +30,24 @@ export const requestFileDownload = async (
   return fileBuffer;
 };
 
+export const requestFileThumbnailUpload = async (
+  fileId: number,
+  dataKeyVersion: Date,
+  thumbnailEncrypted: { ciphertext: ArrayBuffer; iv: string },
+) => {
+  const form = new FormData();
+  form.set(
+    "metadata",
+    JSON.stringify({
+      dekVersion: dataKeyVersion.toISOString(),
+      contentIv: thumbnailEncrypted.iv,
+    } satisfies FileThumbnailUploadRequest),
+  );
+  form.set("content", new Blob([thumbnailEncrypted.ciphertext]));
+
+  return await fetch(`/api/file/${fileId}/thumbnail/upload`, { method: "POST", body: form });
+};
+
 export const requestFileThumbnailDownload = async (fileId: number, dataKey: CryptoKey) => {
   const cache = await getFileThumbnailCache(fileId);
   if (cache) return cache;

src/routes/(fullscreen)/auth/login/+page.svelte

@@ -2,8 +2,8 @@
   import { goto } from "$app/navigation";
   import { BottomDiv, Button, FullscreenDiv, TextButton, TextInput } from "$lib/components/atoms";
   import { TitledDiv } from "$lib/components/molecules";
+  import { ForceLoginModal } from "$lib/components/organisms";
   import { clientKeyStore, masterKeyStore } from "$lib/stores";
-  import ForceLoginModal from "./ForceLoginModal.svelte";
   import {
     requestLogout,
     requestLogin,

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

@@ -1,7 +1,8 @@
 import { callPostApi } from "$lib/hooks";
 import { encryptData } from "$lib/modules/crypto";
 import { storeFileThumbnailCache } from "$lib/modules/file";
-import type { CategoryFileAddRequest, FileThumbnailUploadRequest } from "$lib/server/schemas";
+import type { CategoryFileAddRequest } from "$lib/server/schemas";
+import { requestFileThumbnailUpload } from "$lib/services/file";
 
 export { requestCategoryCreation, requestFileRemovalFromCategory } from "$lib/services/category";
 export { requestFileDownload } from "$lib/services/file";
@@ -14,18 +15,7 @@ export const requestThumbnailUpload = async (
 ) => {
   const thumbnailBuffer = await thumbnail.arrayBuffer();
   const thumbnailEncrypted = await encryptData(thumbnailBuffer, dataKey);
-
+  const res = await requestFileThumbnailUpload(fileId, dataKeyVersion, thumbnailEncrypted);
-  const form = new FormData();
-  form.set(
-    "metadata",
-    JSON.stringify({
-      dekVersion: dataKeyVersion.toISOString(),
-      contentIv: thumbnailEncrypted.iv,
-    } satisfies FileThumbnailUploadRequest),
-  );
-  form.set("content", new Blob([thumbnailEncrypted.ciphertext]));
-
-  const res = await fetch(`/api/file/${fileId}/thumbnail/upload`, { method: "POST", body: form });
   if (!res.ok) return false;
 
   storeFileThumbnailCache(fileId, thumbnailBuffer); // Intended

src/routes/(fullscreen)/key/generate/+page.svelte

@@ -3,10 +3,10 @@
   import { goto } from "$app/navigation";
   import { BottomDiv, Button, FullscreenDiv, TextButton } from "$lib/components/atoms";
   import { TitledDiv } from "$lib/components/molecules";
+  import { ForceLoginModal } from "$lib/components/organisms";
   import { gotoStateful } from "$lib/hooks";
   import { storeClientKeys } from "$lib/modules/key";
   import { clientKeyStore } from "$lib/stores";
-  import ForceLoginModal from "./ForceLoginModal.svelte";
   import Order from "./Order.svelte";
   import {
     generateClientKeys,

src/routes/(fullscreen)/key/generate/ForceLoginModal.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-  import { ActionModal } from "$lib/components/molecules";
-
-  interface Props {
-    isOpen: boolean;
-    onLoginClick: () => void;
-  }
-
-  let { isOpen = $bindable(), onLoginClick }: Props = $props();
-</script>
-
-<ActionModal
-  bind:isOpen
-  title="다른 디바이스에 이미 로그인되어 있어요."
-  cancelText="아니요"
-  confirmText="네"
-  onConfirmClick={onLoginClick}
->
-  <p>다른 디바이스에서는 로그아웃하고, 이 디바이스에서 로그인할까요?</p>
-</ActionModal>

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

@@ -4,8 +4,7 @@ import { encryptData } from "$lib/modules/crypto";
 import { storeFileThumbnailCache } from "$lib/modules/file";
 import type { FileInfo } from "$lib/modules/filesystem";
 import { generateThumbnail as doGenerateThumbnail } from "$lib/modules/thumbnail";
-import type { FileThumbnailUploadRequest } from "$lib/server/schemas";
+import { requestFileDownload, requestFileThumbnailUpload } from "$lib/services/file";
-import { requestFileDownload } from "$lib/services/file";
 
 export type GenerationStatus =
   | "queued"
@@ -68,17 +67,7 @@ const requestThumbnailUpload = limitFunction(
   ) => {
     status.set("uploading");
 
-    const form = new FormData();
+    const res = await requestFileThumbnailUpload(fileId, dataKeyVersion, thumbnail);
-    form.set(
-      "metadata",
-      JSON.stringify({
-        dekVersion: dataKeyVersion.toISOString(),
-        contentIv: thumbnail.iv,
-      } satisfies FileThumbnailUploadRequest),
-    );
-    form.set("content", new Blob([thumbnail.ciphertext]));
-
-    const res = await fetch(`/api/file/${fileId}/thumbnail/upload`, { method: "POST", body: form });
     if (!res.ok) return false;
 
     status.set("uploaded");