캐시 목록 페이지 추가

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Writable } from "svelte/store";
   import type { FileInfo } from "$lib/stores";
-  import { formatDate } from "./service";
+  import { formatDateTime } from "./service";
   import type { SelectedDirectoryEntry } from "../service";
 
   import IconDraft from "~icons/material-symbols/draft";
@@ -44,7 +44,9 @@
         <p title={$info.name} class="truncate font-medium">
           {$info.name}
         </p>
-        <p class="text-xs text-gray-800">{formatDate($info.createdAt ?? $info.lastModifiedAt)}</p>
+        <p class="text-xs text-gray-800">
+          {formatDateTime($info.createdAt ?? $info.lastModifiedAt)}
+        </p>
       </div>
       <button
         id="open-menu"

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

@@ -1,6 +1,8 @@
 import { get, type Writable } from "svelte/store";
 import type { DirectoryInfo, FileInfo } from "$lib/stores";
 
+export { formatDateTime } from "$lib/modules/util";
+
 export enum SortBy {
   NAME_ASC,
   NAME_DESC,
@@ -28,15 +30,3 @@ export const sortEntries = <T extends DirectoryInfo | FileInfo>(
 
   entries.sort((a, b) => sortFunc(get(a), get(b)));
 };
-
-const pad2 = (num: number) => num.toString().padStart(2, "0");
-
-export const formatDate = (date: Date) => {
-  const year = date.getFullYear();
-  const month = date.getMonth() + 1;
-  const day = date.getDate();
-  const hours = date.getHours();
-  const minutes = date.getMinutes();
-
-  return `${year}. ${month}. ${day}. ${pad2(hours)}:${pad2(minutes)}`;
-};

src/routes/(main)/menu/+page.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
-  import { EntryButton } from "$lib/components/buttons";
+  import MenuEntryButton from "./MenuEntryButton.svelte";
   import { requestLogout } from "./service.js";
 
+  import IconStorage from "~icons/material-symbols/storage";
   import IconPassword from "~icons/material-symbols/password";
   import IconLogout from "~icons/material-symbols/logout";
 
@@ -23,23 +24,27 @@
   <p class="font-semibold">{data.nickname}</p>
 </div>
 <div class="space-y-4 px-4 pb-4">
+  <div class="space-y-2">
+    <p class="font-semibold">설정</p>
+    <MenuEntryButton
+      onclick={() => goto("/setting/cache")}
+      icon={IconStorage}
+      iconColor="text-green-500"
+    >
+      캐시
+    </MenuEntryButton>
+  </div>
   <div class="space-y-2">
     <p class="font-semibold">보안</p>
-    <EntryButton onclick={() => goto("/auth/changePassword")}>
-      <div class="flex items-center gap-x-4">
-        <div class="rounded-lg bg-gray-200 p-1 text-blue-500">
-          <IconPassword />
-        </div>
-        <p class="font-medium">비밀번호 바꾸기</p>
-      </div>
-    </EntryButton>
-    <EntryButton onclick={logout}>
-      <div class="flex items-center gap-x-4">
-        <div class="rounded-lg bg-gray-200 p-1 text-red-500">
-          <IconLogout />
-        </div>
-        <p class="font-medium">로그아웃</p>
-      </div>
-    </EntryButton>
+    <MenuEntryButton
+      onclick={() => goto("/auth/changePassword")}
+      icon={IconPassword}
+      iconColor="text-blue-500"
+    >
+      비밀번호 바꾸기
+    </MenuEntryButton>
+    <MenuEntryButton onclick={logout} icon={IconLogout} iconColor="text-red-500">
+      로그아웃
+    </MenuEntryButton>
   </div>
 </div>

src/routes/(main)/menu/MenuEntryButton.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import type { Component, Snippet } from "svelte";
+  import { EntryButton } from "$lib/components/buttons";
+  import type { SvelteHTMLElements } from "svelte/elements";
+
+  interface Props {
+    children: Snippet;
+    icon: Component<SvelteHTMLElements["svg"]>;
+    iconColor: string;
+    onclick: () => void;
+  }
+
+  let { children, icon: Icon, iconColor, onclick }: Props = $props();
+</script>
+
+<EntryButton {onclick}>
+  <div class="flex items-center gap-x-4">
+    <div class="rounded-lg bg-gray-200 p-1 {iconColor}">
+      <Icon />
+    </div>
+    <p class="font-medium">
+      {@render children?.()}
+    </p>
+  </div>
+</EntryButton>