FullscreenDiv 컴포넌트 추가 및 TopBar 컴포넌트 리팩토링

src/lib/components/TopBar.svelte

@@ -1,35 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from "svelte";
-
-  import IconArrowBack from "~icons/material-symbols/arrow-back";
-
-  interface Props {
-    children?: Snippet;
-    onback?: () => void;
-    title?: string;
-    xPadding?: boolean;
-  }
-
-  let { children, onback, title, xPadding = false }: Props = $props();
-
-  const back = $derived(() => {
-    setTimeout(onback || (() => history.back()), 100);
-  });
-</script>
-
-<div
-  class="sticky top-0 z-10 flex flex-shrink-0 items-center justify-between bg-white py-4
-  {xPadding ? 'px-4' : ''}"
->
-  <button onclick={back} class="w-[2.3rem] flex-shrink-0 rounded-full p-1 active:bg-gray-100">
-    <IconArrowBack class="text-2xl" />
-  </button>
-  {#if title}
-    <p class="flex-grow truncate px-2 text-center text-lg font-semibold">{title}</p>
-  {/if}
-  <div class="w-[2.3rem] flex-shrink-0">
-    {#if children}
-      {@render children?.()}
-    {/if}
-  </div>
-</div>

src/lib/components/atoms/divs/AdaptiveDiv.svelte

@@ -10,6 +10,6 @@
   let { children, ...props }: Props = $props();
 </script>
 
-<div class={["mx-auto w-full max-w-screen-md", props.class]}>
+<div class={["mx-auto max-w-screen-md", props.class]}>
   {@render children?.()}
 </div>

src/lib/components/atoms/divs/FullscreenDiv.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  let { children } = $props();
+</script>
+
+<div class="flex flex-grow flex-col justify-between px-4">
+  {@render children?.()}
+</div>

src/lib/components/atoms/divs/index.ts

@@ -1,2 +1,3 @@
 export { default as AdaptiveDiv } from "./AdaptiveDiv.svelte";
 export { default as BottomDiv } from "./BottomDiv.svelte";
+export { default as FullscreenDiv } from "./FullscreenDiv.svelte";

src/lib/components/index.ts

@@ -1,2 +1 @@
 export { default as BottomSheet } from "./BottomSheet.svelte";
-export { default as TopBar } from "./TopBar.svelte";

src/lib/components/molecules/TopBar.svelte

@@ -0,0 +1,37 @@
+<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;
+    title?: string;
+  }
+
+  let { children, onBackClick, title, ...props }: 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",
+    props.class,
+  ]}
+>
+  <button
+    onclick={onBackClick || (() => history.back())}
+    class="w-[2.3rem] flex-shrink-0 rounded-full p-1 active:bg-black active:bg-opacity-[0.04]"
+  >
+    <IconArrowBack class="text-2xl" />
+  </button>
+  {#if title}
+    <p class="flex-grow truncate text-center text-lg font-semibold">{title}</p>
+  {/if}
+  <div class="w-[2.3rem] flex-shrink-0">
+    {#if children}
+      {@render children?.()}
+    {/if}
+  </div>
+</div>

src/lib/components/molecules/index.ts

@@ -1,2 +1,3 @@
 export * from "./ActionModal.svelte";
 export { default as ActionModal } from "./ActionModal.svelte";
+export { default as TopBar } from "./TopBar.svelte";