diff --git a/dpbr_front/app/src/lib/components/Header.svelte b/dpbr_front/app/src/lib/components/Header.svelte index e4352a8..df609d8 100644 --- a/dpbr_front/app/src/lib/components/Header.svelte +++ b/dpbr_front/app/src/lib/components/Header.svelte @@ -1,4 +1,6 @@ {#if variant === "main"} @@ -38,12 +73,19 @@ draggable="false" /> - 단풍바람 + import { toast } from "$lib/stores/toast"; import { fade, slide } from "svelte/transition"; + + let defaultToasts = $derived($toast.filter((t) => t.type !== "center")); + let centerToasts = $derived($toast.filter((t) => t.type === "center")); +
- {#each $toast as { id, message } (id)} + {#each defaultToasts as { id, message } (id)}
+ {message} +
+ {/each} +
+ + +
+ {#each centerToasts as { id, message } (id)} +
{message}
diff --git a/dpbr_front/app/src/lib/stores/toast.ts b/dpbr_front/app/src/lib/stores/toast.ts index 618f55a..a0f3774 100644 --- a/dpbr_front/app/src/lib/stores/toast.ts +++ b/dpbr_front/app/src/lib/stores/toast.ts @@ -3,6 +3,7 @@ import { writable } from 'svelte/store'; export interface ToastMessage { id: number; message: string; + type?: 'default' | 'center'; } function createToastStore() { @@ -12,9 +13,9 @@ function createToastStore() { return { subscribe, - show: (message: string, duration = 3000) => { + show: (message: string, duration = 3000, type: 'default' | 'center' = 'default') => { const id = nextId++; - update((toasts) => [...toasts, { id, message }]); + update((toasts) => [...toasts, { id, message, type }]); setTimeout(() => { update((toasts) => toasts.filter((t) => t.id !== id)); diff --git a/dpbr_front/app/src/routes/+page.svelte b/dpbr_front/app/src/routes/+page.svelte index 4f552d3..bdba938 100644 --- a/dpbr_front/app/src/routes/+page.svelte +++ b/dpbr_front/app/src/routes/+page.svelte @@ -1,10 +1,11 @@