File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
'use client';
import { Alert } from '@/components/ui/alert';
import { Spinner } from '@/components/ui/spinner';
import { Toast } from '@/components/ui/toast';
import { useFeedback } from '@/app/_hooks/use-feedback';
/**
* FeedbackProvider의 상태를 design 레인의 Toast·Alert·Spinner 비주얼에 연결만 하는 역할 —
* 위치·스택·표시 타이머 등 정책은 FeedbackProvider가 가지고, 이 컴포넌트는 마운트만 담당한다.
*/
export function FeedbackHost() {
const { toasts, alert, spinnerCount, hideAlert } = useFeedback();
return (
<>
{toasts.length > 0 && (
<div className="fixed inset-x-0 top-4 z-50 flex flex-col items-center gap-2 px-4">
{toasts.map((toast) => (
<Toast key={toast.id} variant={toast.variant}>
{toast.message}
</Toast>
))}
</div>
)}
{alert && (
<Alert
variant={alert.variant}
title={alert.title}
actions={
alert.actions ?? (
<button
type="button"
onClick={hideAlert}
className="rounded-md bg-primary px-4 py-2 text-body-md text-on-primary"
>
확인
</button>
)
}
>
{alert.message}
</Alert>
)}
{spinnerCount > 0 && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-scrim">
<Spinner size="lg" tone="inverse" />
</div>
)}
</>
);
}