React로 토스트 알림 시스템 구현

const { useState, createContext, useContext, useCallback } = React;
  const ToastCtx = createContext();

  function ToastProvider({ children }) {
    const [toasts, setToasts] = useState([]);
    const add = useCallback((msg, type='info') => {
      const id = Date.now();
      setToasts(prev => [...prev, { id, msg, type }]);
      setTimeout(() => setToasts(prev => prev.filter(t => t.id !== id)), 3000);
    }, []);
    return (
      <ToastCtx.Provider value={{ add }}>
        {children}
        <div style={{position:'fixed', top:'16px', right:'16px', display:'flex', flexDirection:'column', gap:'8px'}}>
          {toasts.map(t => <div key={t.id} style={{background:'#0a0a0a', border:`1px solid ${t.type==='error'?'#10b981':'#22c55e'}`, padding:'8px 12px', fontFamily:'monospace', fontSize:'11px', color: t.type==='error'?'#10b981':'#22c55e', minWidth:'200px'}}>{t.msg}</div>)}
        </div>
      </ToastCtx.Provider>
    );
  }

  function Demo() {
    const { add } = useContext(ToastCtx);
    return (
      <div style={{display:'flex', gap:'8px'}}>
        <button onClick={() => add('[T-800] 임무 완료', 'success')} style={{background:'#22c55e', color:'#080808', border:'none', padding:'8px', cursor:'pointer', fontFamily:'monospace', fontSize:'10px'}}>SUCCESS</button>
        <button onClick={() => add('[SKYNET] 시스템 오류', 'error')} style={{background:'#10b981', color:'#080808', border:'none', padding:'8px', cursor:'pointer', fontFamily:'monospace', fontSize:'10px'}}>ERROR</button>
      </div>
    );
  }

  ReactDOM.createRoot(document.getElementById('root')).render(<ToastProvider><Demo /></ToastProvider>);