실시간 API: Supabase Realtime + WebSocket

1. Postgres Changes  — DB INSERT/UPDATE/DELETE 구독
2. Broadcast         — Client → Client 메시지 (WebSocket)
3. Presence          — 온라인·타이핑 상태

// src/components/notification-bell.tsx
'use client'
import { useEffect, useState } from 'react'
import { createClient } from '@/lib/supabase/client'

export function NotificationBell({ userId }: { userId: string }) {
  const supabase = createClient()
  const [notifs, setNotifs] = useState<any[]>([])

  useEffect(() => {
    // 초기 로드
    supabase.from('notifications').select('*').eq('user_id', userId)
      .order('created_at', { ascending: false }).limit(20)
      .then(({ data }) => setNotifs(data ?? []))

    // 실시간 구독
    const channel = supabase
      .channel(`notifications:${userId}`)
      .on(
        'postgres_changes',
        {
          event: 'INSERT',
          schema: 'public',
          table: 'notifications',
          filter: `user_id=eq.${userId}`,
        },
        payload => {
          setNotifs(prev => [payload.new as any, ...prev])
        }
      )
      .subscribe()

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

  return <ul>{notifs.map(n => <li key={n.id}>{n.title}</li>)}</ul>
}

-- Realtime publication에 테이블 추가
alter publication supabase_realtime add table notifications;
alter publication supabase_realtime add table generations;

-- RLS 적용 자동 (구독자가 본인 row만 받음)

// 채팅 룸 (실시간)
const channel = supabase.channel('room:lobby')
  .on('broadcast', { event: 'message' }, ({ payload }) => {
    console.log('받음:', payload)
  })
  .subscribe()

// 메시지 보내기
channel.send({
  type: 'broadcast',
  event: 'message',
  payload: { user: 'alice', text: 'hi' },
})

const channel = supabase.channel('presence:dashboard', {
  config: { presence: { key: userId } },
})

channel
  .on('presence', { event: 'sync' }, () => {
    const state = channel.presenceState()
    console.log('현재 접속자:', Object.keys(state))
  })
  .on('presence', { event: 'join' }, ({ key }) => {
    console.log(`${key} 접속`)
  })
  .on('presence', { event: 'leave' }, ({ key }) => {
    console.log(`${key} 떠남`)
  })
  .subscribe(async (status) => {
    if (status === 'SUBSCRIBED') {
      await channel.track({ online_at: new Date().toISOString() })
    }
  })

// 서버: AI 생성 중 progress 전송
const channel = supabase.channel(`gen:${gen.id}`)

await channel.send({
  type: 'broadcast',
  event: 'progress',
  payload: { progress: 50, status: 'generating' },
})

// 클라이언트
const channel = supabase.channel(`gen:${genId}`)
channel.on('broadcast', { event: 'progress' }, ({ payload }) => {
  setProgress(payload.progress)
}).subscribe()

useEffect(() => {
  const ch = supabase.channel('xxx').subscribe()
  return () => { supabase.removeChannel(ch) }  // 필수!
}, [])

[Realtime]
+ 즉시 (밀리초)
+ 효율 (변경 시만)
- 연결 유지 비용
- 모바일 배터리

[폴링]
+ 단순
+ HTTP 캐시 활용
- 1초~30초 지연
- 대부분 빈 응답

추천:
- 알림·채팅 → Realtime
- 대시보드 통계 → 5분마다 refetch