컴포넌트를 도메인과 무관한 UI 컴포넌트와 도메인 컴포넌트로 재구성하고 중복된 파일 목록 컴포넌트 통합 및 모듈 간 의존성 방향을 ESLint로 강제

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/lib/ui/layout/TopBar.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { ClassValue } from "svelte/elements";
+
+  import IconArrowBack from "~icons/material-symbols/arrow-back";
+
+  interface Props {
+    children?: Snippet;
+    class?: ClassValue;
+    onBackClick?: () => void;
+    showBackButton?: boolean;
+    title?: string;
+  }
+
+  let { children, class: className, onBackClick, showBackButton = true, title }: Props = $props();
+</script>
+
+<div
+  class={[
+    "sticky top-0 z-10 flex items-center justify-between gap-x-2 px-2 py-3 backdrop-blur-2xl",
+    className,
+  ]}
+>
+  <div class="w-[2.3rem] shrink-0">
+    {#if showBackButton}
+      <button
+        onclick={onBackClick ?? (() => history.back())}
+        class="w-full rounded-full p-1 text-2xl active:bg-black/4"
+      >
+        <IconArrowBack />
+      </button>
+    {/if}
+  </div>
+  {#if title}
+    <p class="grow truncate text-center text-lg font-semibold">{title}</p>
+  {/if}
+  <div class="w-[2.3rem] shrink-0">
+    {#if children}
+      {@render children()}
+    {/if}
+  </div>
+</div>