자잘한 리팩토링

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

@@ -15,15 +15,15 @@
 </script>
 
 <BottomSheet bind:isOpen>
-  <div class="flex w-full flex-col py-4">
+  <div class="w-full py-4">
     <EntryButton onclick={onDirectoryCreateClick}>
-      <div class="flex h-12 items-center justify-center gap-x-4">
+      <div class="flex h-12 items-center gap-x-4">
         <IconCreateNewFolder class="text-2xl text-yellow-500" />
         <p class="font-medium">폴더 만들기</p>
       </div>
     </EntryButton>
     <EntryButton onclick={onFileUploadClick}>
-      <div class="flex h-12 items-center justify-center gap-x-4">
+      <div class="flex h-12 items-center gap-x-4">
         <IconUploadFile class="text-2xl text-blue-400" />
         <p class="font-medium">파일 업로드</p>
       </div>

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

@@ -19,14 +19,12 @@
 </script>
 
 <Modal bind:isOpen onclose={closeModal}>
-  <div class="flex flex-col px-1">
-    <p class="text-xl font-bold">새 폴더</p>
-    <div class="my-4 flex w-full">
-      <TextInput bind:value={name} placeholder="폴더 이름" />
-    </div>
-    <div class="mt-5 flex gap-2">
-      <Button color="gray" onclick={closeModal}>닫기</Button>
-      <Button onclick={() => onCreateClick(name)}>만들기</Button>
-    </div>
+  <p class="text-xl font-bold">새 폴더</p>
+  <div class="mt-2 flex w-full">
+    <TextInput bind:value={name} placeholder="폴더 이름" />
+  </div>
+  <div class="mt-7 flex gap-2">
+    <Button color="gray" onclick={closeModal}>닫기</Button>
+    <Button onclick={() => onCreateClick(name)}>만들기</Button>
   </div>
 </Modal>

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

@@ -30,15 +30,15 @@
     {@const { type, name } = selectedEntry}
     {@const nameShort = name.length > 20 ? `${name.slice(0, 20)}...` : name}
     <div class="space-y-4">
-      <div class="space-y-2">
-        <p class="break-keep text-xl font-bold">
+      <div class="space-y-2 break-keep">
+        <p class="text-xl font-bold">
           {#if type === "directory"}
             '{nameShort}' 폴더를 삭제할까요?
           {:else}
             '{nameShort}' 파일을 삭제할까요?
           {/if}
         </p>
-        <p class="break-keep">
+        <p>
           {#if type === "directory"}
             삭제한 폴더는 복구할 수 없어요. <br />
             폴더 안의 모든 파일과 폴더도 함께 삭제돼요.

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

@@ -34,7 +34,7 @@
 {#if $info}
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <div id="button" onclick={openFile} class="h-12 w-full rounded-xl">
+  <div id="button" onclick={openFile} class="h-12 rounded-xl">
     <div id="button-content" class="flex h-full items-center gap-x-4 p-2 transition">
       <div class="flex-shrink-0 text-lg">
         <IconDraft class="text-blue-400" />
@@ -47,7 +47,7 @@
         onclick={openMenu}
         class="flex-shrink-0 rounded-full p-1 active:bg-gray-100"
       >
-        <IconMoreVert class="text-lg transition active:scale-95" />
+        <IconMoreVert class="text-lg" />
       </button>
     </div>
   </div>

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

@@ -36,7 +36,7 @@
 {#if $info}
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <div id="button" onclick={openDirectory} class="h-12 w-full rounded-xl">
+  <div id="button" onclick={openDirectory} class="h-12 rounded-xl">
     <div id="button-content" class="flex h-full items-center gap-x-4 p-2 transition">
       <div class="flex-shrink-0 text-lg">
         <IconFolder />
@@ -49,7 +49,7 @@
         onclick={openMenu}
         class="flex-shrink-0 rounded-full p-1 active:bg-gray-100"
       >
-        <IconMoreVert class="text-lg transition active:scale-95" />
+        <IconMoreVert class="text-lg" />
       </button>
     </div>
   </div>

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

@@ -29,14 +29,14 @@
 </script>
 
 <BottomSheet bind:isOpen onclose={closeBottomSheet}>
-  <div class="flex w-full flex-col py-4">
+  <div class="w-full py-4">
     {#if selectedEntry}
       {@const { type, name } = selectedEntry}
       <div class="flex h-12 items-center gap-x-4 p-2">
         <div class="flex-shrink-0 text-lg">
           {#if type === "directory"}
             <IconFolder />
-          {:else if type === "file"}
+          {:else}
             <IconDraft class="text-blue-400" />
           {/if}
         </div>
@@ -47,13 +47,13 @@
       <div class="my-2 h-px w-full bg-gray-200"></div>
     {/if}
     <EntryButton onclick={onRenameClick}>
-      <div class="flex h-8 items-center justify-center gap-x-4">
+      <div class="flex h-8 items-center gap-x-4">
         <IconEdit class="text-lg" />
         <p class="font-medium">이름 바꾸기</p>
       </div>
     </EntryButton>
     <EntryButton onclick={onDeleteClick}>
-      <div class="flex h-8 items-center justify-center gap-x-4 text-red-500">
+      <div class="flex h-8 items-center gap-x-4 text-red-500">
         <IconDelete class="text-lg" />
         <p class="font-medium">삭제하기</p>
       </div>

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

@@ -36,14 +36,12 @@
 </script>
 
 <Modal bind:isOpen onclose={closeModal}>
-  <div class="flex flex-col px-1">
-    <p class="text-xl font-bold">이름 바꾸기</p>
-    <div class="my-4 flex w-full">
-      <TextInput bind:value={name} placeholder="이름" />
-    </div>
-    <div class="mt-5 flex gap-2">
-      <Button color="gray" onclick={closeModal}>닫기</Button>
-      <Button onclick={renameEntry}>바꾸기</Button>
-    </div>
+  <p class="text-xl font-bold">이름 바꾸기</p>
+  <div class="mt-2 flex w-full">
+    <TextInput bind:value={name} placeholder="이름" />
+  </div>
+  <div class="mt-7 flex gap-2">
+    <Button color="gray" onclick={closeModal}>닫기</Button>
+    <Button onclick={renameEntry}>바꾸기</Button>
   </div>
 </Modal>