자잘한 리팩토링 2 및 TopBar가 상단에 고정되지 않던 버그 수정

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

@@ -61,22 +61,23 @@
 <input bind:this={fileInput} onchange={uploadFile} type="file" class="hidden" />
 
 <div class="flex min-h-full flex-col px-4">
-  <div class="flex-shrink-0">
-    {#if data.id !== "root"}
-      <TopBar title={$info?.name} />
-    {/if}
-  </div>
+  {#if data.id !== "root"}
+    <TopBar title={$info?.name} />
+  {/if}
   {#if $info}
-    {#key $info}
-      <DirectoryEntries
-        info={$info}
-        onEntryClick={({ type, id }) => goto(`/${type}/${id}`)}
-        onEntryMenuClick={(entry) => {
-          selectedEntry = entry;
-          isDirectoryEntryMenuBottomSheetOpen = true;
-        }}
-      />
-    {/key}
+    {@const topMargin = data.id === "root" ? "mt-4" : ""}
+    <div class="mb-4 flex flex-grow flex-col {topMargin}">
+      {#key $info}
+        <DirectoryEntries
+          info={$info}
+          onEntryClick={({ type, id }) => goto(`/${type}/${id}`)}
+          onEntryMenuClick={(entry) => {
+            selectedEntry = entry;
+            isDirectoryEntryMenuBottomSheetOpen = true;
+          }}
+        />
+      {/key}
+    </div>
   {/if}
 </div>
 

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

@@ -42,7 +42,7 @@
 </script>
 
 {#if info.subDirectoryIds.length + info.fileIds.length > 0}
-  <div class="my-4 pb-[4.5rem]">
+  <div class="pb-[4.5rem]">
     {#each subDirectoryInfos as subDirectory}
       <SubDirectory info={subDirectory} onclick={onEntryClick} onOpenMenuClick={onEntryMenuClick} />
     {/each}
@@ -51,7 +51,7 @@
     {/each}
   </div>
 {:else}
-  <div class="my-4 flex flex-grow items-center justify-center">
+  <div class="flex flex-grow items-center justify-center">
     <p class="text-gray-500">폴더가 비어 있어요.</p>
   </div>
 {/if}

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

@@ -1,11 +1,5 @@
 import { callPostApi } from "$lib/hooks";
-import {
-  encodeToBase64,
-  generateDataKey,
-  wrapDataKey,
-  encryptData,
-  encryptString,
-} from "$lib/modules/crypto";
+import { generateDataKey, wrapDataKey, encryptData, encryptString } from "$lib/modules/crypto";
 import type {
   DirectoryRenameRequest,
   DirectoryCreateRequest,
@@ -28,42 +22,46 @@ export const requestDirectoryCreation = async (
   masterKey: MasterKey,
 ) => {
   const { dataKey, dataKeyVersion } = await generateDataKey();
-  const nameEncrypted = await encryptData(new TextEncoder().encode(name), dataKey);
+  const nameEncrypted = await encryptString(name, dataKey);
   await callPostApi<DirectoryCreateRequest>("/api/directory/create", {
     parentId,
     mekVersion: masterKey.version,
     dek: await wrapDataKey(dataKey, masterKey.key),
     dekVersion: dataKeyVersion.toISOString(),
-    name: encodeToBase64(nameEncrypted.ciphertext),
+    name: nameEncrypted.ciphertext,
     nameIv: nameEncrypted.iv,
   });
 };
 
-export const requestFileUpload = (file: File, parentId: "root" | number, masterKey: MasterKey) => {
-  return new Promise<void>(async (resolve, reject) => {
-    const { dataKey, dataKeyVersion } = await generateDataKey();
-    const fileEncrypted = await encryptData(await file.arrayBuffer(), dataKey);
-    const nameEncrypted = await encryptString(file.name, dataKey);
+export const requestFileUpload = async (
+  file: File,
+  parentId: "root" | number,
+  masterKey: MasterKey,
+) => {
+  const { dataKey, dataKeyVersion } = await generateDataKey();
+  const fileEncrypted = await encryptData(await file.arrayBuffer(), dataKey);
+  const nameEncrypted = await encryptString(file.name, dataKey);
 
-    const form = new FormData();
-    form.set(
-      "metadata",
-      JSON.stringify({
-        parentId,
-        mekVersion: masterKey.version,
-        dek: await wrapDataKey(dataKey, masterKey.key),
-        dekVersion: dataKeyVersion.toISOString(),
-        contentType: file.type,
-        contentIv: fileEncrypted.iv,
-        name: nameEncrypted.ciphertext,
-        nameIv: nameEncrypted.iv,
-      } satisfies FileUploadRequest),
-    );
-    form.set("content", new Blob([fileEncrypted.ciphertext]));
+  const form = new FormData();
+  form.set(
+    "metadata",
+    JSON.stringify({
+      parentId,
+      mekVersion: masterKey.version,
+      dek: await wrapDataKey(dataKey, masterKey.key),
+      dekVersion: dataKeyVersion.toISOString(),
+      contentType: file.type,
+      contentIv: fileEncrypted.iv,
+      name: nameEncrypted.ciphertext,
+      nameIv: nameEncrypted.iv,
+    } satisfies FileUploadRequest),
+  );
+  form.set("content", new Blob([fileEncrypted.ciphertext]));
 
+  return new Promise<void>((resolve, reject) => {
     // TODO: Progress, Scheduling, ...
-    const xhr = new XMLHttpRequest();
 
+    const xhr = new XMLHttpRequest();
     xhr.addEventListener("load", () => {
       if (xhr.status === 200) {
         resolve();