디렉터리 페이지에서 파일 목록도 함께 표시하도록 구현 및 파일/디렉터리 이름이 너무 긴 경우 잘라서 표시하도록 개선

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

@@ -2,34 +2,42 @@
   import { goto } from "$app/navigation";
 
   import IconFolder from "~icons/material-symbols/folder";
+  import IconDraft from "~icons/material-symbols/draft";
   import IconMoreVert from "~icons/material-symbols/more-vert";
 
   interface Props {
     id: number;
     name: string;
+    type: "directory" | "file";
   }
 
-  let { id, name }: Props = $props();
+  let { id, name, type }: Props = $props();
 
-  const openDirectory = () => {
+  const open = () => {
     setTimeout(() => {
-      goto(`/directory/${id}`);
+      goto(`/${type}/${id}`);
     }, 100);
   };
 </script>
 
 <!-- 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-content" class="flex h-full items-center justify-between p-2 transition">
-    <div class="flex items-center gap-x-2">
-      <IconFolder class="text-lg" />
-      <p class="font-medium">{name}</p>
+<div id="button" onclick={open} class="h-12 w-full 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">
+      {#if type === "directory"}
+        <IconFolder />
+      {:else if type === "file"}
+        <IconDraft class="text-blue-400" />
+      {/if}
     </div>
+    <p title={name} class="flex-grow truncate font-medium">
+      {name}
+    </p>
     <button
       id="open-menu"
       onclick={(e) => e.stopPropagation()}
-      class="rounded-full p-1 active:bg-gray-100"
+      class="flex-shrink-0 rounded-full p-1 active:bg-gray-100"
     >
       <IconMoreVert class="text-lg transition active:scale-95" />
     </button>