실시간 알림: 토스트 + 벨 아이콘

pnpm add sonner

// src/app/layout.tsx
import { Toaster } from 'sonner'

<Toaster richColors position="top-right" />

// 사용
import { toast } from 'sonner'

toast.success('생성 완료!')
toast.error('실패: 잠시 후 재시도')
toast.loading('생성 중...')
toast.promise(saveData(), {
  loading: '저장 중...',
  success: '저장 완료',
  error: '저장 실패',
})

create table notifications (
  id uuid primary key default gen_random_uuid(),
  user_id uuid references users(id) on delete cascade,
  type text not null,  -- 'generation_done', 'subscription_renewed', etc.
  title text not null,
  body text,
  data jsonb,
  read_at timestamptz,
  created_at timestamptz default now()
);

create index idx_notif_user on notifications(user_id, read_at, created_at desc);

alter table notifications enable row level security;
create policy "users own" on notifications for all using (auth.uid() = user_id);

// src/components/notification-bell.tsx
'use client'
import { useEffect, useState } from 'react'
import { Bell } from 'lucide-react'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { createClient } from '@/lib/supabase/client'
import { formatDistanceToNow } from 'date-fns'
import { ko } from 'date-fns/locale'

export function NotificationBell() {
  const supabase = createClient()
  const [notifs, setNotifs] = useState<any[]>([])
  const unreadCount = notifs.filter(n => !n.read_at).length

  useEffect(() => {
    const load = async () => {
      const { data } = await supabase
        .from('notifications')
        .select('*')
        .order('created_at', { ascending: false })
        .limit(20)
      setNotifs(data ?? [])
    }
    load()

    // 실시간 구독
    const ch = supabase.channel('notifications')
      .on('postgres_changes',
        { event: 'INSERT', schema: 'public', table: 'notifications' },
        payload => setNotifs(prev => [payload.new, ...prev])
      )
      .subscribe()

    return () => { supabase.removeChannel(ch) }
  }, [])

  const markAllRead = async () => {
    await supabase.from('notifications').update({ read_at: new Date().toISOString() }).is('read_at', null)
    setNotifs(prev => prev.map(n => ({ ...n, read_at: new Date().toISOString() })))
  }

  return (
    <Popover>
      <PopoverTrigger className="relative">
        <Bell className="h-5 w-5" />
        {unreadCount > 0 && (
          <span className="absolute -top-1 -right-1 h-4 w-4 bg-red-500 text-white text-[10px] rounded-full flex items-center justify-center">
            {unreadCount}
          </span>
        )}
      </PopoverTrigger>
      <PopoverContent className="w-80 p-0">
        <div className="flex justify-between p-3 border-b">
          <h3 className="font-semibold">알림</h3>
          {unreadCount > 0 && (
            <button onClick={markAllRead} className="text-xs text-primary">모두 읽음</button>
          )}
        </div>
        <ul className="max-h-80 overflow-y-auto">
          {notifs.length === 0 ? (
            <li className="p-6 text-center text-sm text-muted-foreground">알림이 없습니다</li>
          ) : (
            notifs.map(n => (
              <li key={n.id} className={`p-3 border-b ${!n.read_at ? 'bg-primary/5' : ''}`}>
                <p className="font-medium text-sm">{n.title}</p>
                {n.body && <p className="text-xs text-muted-foreground mt-1">{n.body}</p>}
                <time className="text-[10px] text-muted-foreground">
                  {formatDistanceToNow(new Date(n.created_at), { locale: ko, addSuffix: true })}
                </time>
              </li>
            ))
          )}
        </ul>
      </PopoverContent>
    </Popover>
  )
}

// 생성 완료 시 알림
await supabase.from('notifications').insert({
  user_id: userId,
  type: 'generation_done',
  title: 'AI 카피 생성 완료',
  body: '결과를 확인해보세요',
  data: { generation_id: gen.id },
})

# 큰 서비스 단계
pnpm add web-push

# Service Worker 등록 → Push subscription 저장
# 백엔드에서 webpush.sendNotification()

// 큰 이벤트 (결제·구독 만료) 이메일
import { Resend } from 'resend'
const resend = new Resend(process.env.RESEND_API_KEY)

await resend.emails.send({
  from: 'My SaaS <noreply@mysaas.com>',
  to: user.email,
  subject: '구독이 갱신되었습니다',
  html: '<p>...</p>',
})