File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
'use client';
import { FoxButton } from '@fox/core/components/fox-button';
import { FoxModal } from '@fox/core/components/fox-modal';
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 && (
<FoxModal
open
size="sm"
title={alert.title}
onClose={hideAlert}
actions={
alert.actions ?? (
<FoxButton
type="primary"
size="md"
label="확인"
onAction={hideAlert}
/>
)
}
>
{alert.message}
</FoxModal>
)}
{spinnerCount > 0 && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-scrim">
<Spinner size="lg" tone="inverse" />
</div>
)}
</>
);
}