POST 기반 SSE 스트리밍과 Zustand 스토어 분리로 설계한 실시간 채팅 아키텍처

// 브라우저 표준 EventSource — GET만 가능
const es = new EventSource('/api/messages?content=hello');
// ❌ body를 보낼 수 없다
// ❌ 커스텀 헤더(Authorization)를 설정할 수 없다

// lib/sse.ts — POST 기반 SSE 클라이언트
export function sendMessageSSE(
  sessionId: string,
  content: string,
  onEvent: SSECallback,
  mentionedCharacter?: string,
): AbortController {
  const controller = new AbortController();
  const apiUrl = process.env.NEXT_PUBLIC_API_URL;

  (async () => {
    // Clerk 토큰을 헤더에 주입
    const headers: Record<string, string> = { 'Content-Type': 'application/json' };
    const tokenGetter = getTokenGetter();
    if (tokenGetter) {
      const token = await tokenGetter();
      if (token) headers['Authorization'] = `Bearer ${token}`;
    }

    // POST 요청 — body에 메시지를 담는다
    const res = await fetch(`${apiUrl}/sessions/${sessionId}/messages`, {
      method: 'POST',
      headers,
      body: JSON.stringify({ content, mentionedCharacter }),
      signal: controller.signal, // 취소 지원
    });

    if (!res.ok || !res.body) return;

    // ReadableStream을 수동으로 읽는다
    const reader = res.body.getReader();
    const decoder = new TextDecoder();
    let buffer = '';

    while (true) {
      const { done, value } = await reader.read();
      if (done) break;

      buffer += decoder.decode(value, { stream: true });
      const lines = buffer.split('\n');
      buffer = lines.pop() || ''; // 마지막 불완전한 라인은 버퍼에 보관

      // SSE 프로토콜 수동 파싱
      let currentEvent = 'message';
      for (const line of lines) {
        if (line.startsWith('event: ')) {
          currentEvent = line.slice(7).trim();
        } else if (line.startsWith('data: ')) {
          try {
            const data = JSON.parse(line.slice(6));
            onEvent(currentEvent, data);
          } catch { /* 형식이 잘못된 데이터 건너뜀 */ }
        }
      }
    }
  })();

  return controller; // 호출자가 스트림을 취소할 수 있도록 반환
}

// 프론트엔드·백엔드 공통 이벤트 상수
export const SSE_EVENTS = {
  NARRATION: 'narration',   // 나레이션 텍스트
  DIALOGUE: 'dialogue',     // 캐릭터 대사 + 화자 이름
  EMOTION: 'emotion',       // 캐릭터 감정 상태 (happy, shy, angry 등)
  DONE: 'done',             // 스트림 종료 + 메타데이터 일괄 전달
  ERROR: 'error',           // 에러 (코드 + 환불 정보)
} as const;

// chatStore.ts — emotion 이벤트 핸들러
} else if (event === SSE_EVENTS.EMOTION) {
  const e = data as { character: string; emotion: string };
  set((state) => {
    const msgs = [...state.messages];
    // 역순 탐색으로 해당 캐릭터의 마지막 대사를 찾는다
    for (let i = msgs.length - 1; i >= 0; i--) {
      if (msgs[i].type === 'dialogue' && msgs[i].character === e.character) {
        msgs[i] = { ...msgs[i], emotion: e.emotion };
        break;
      }
    }
    return { messages: msgs };
  });
}

chatStore       — 비즈니스 로직: 메시지 배열, SSE 생명주기, 호감도, 에피소드 상태
chatUIStore     — 순수 UI: 사이드바 토글, 스크롤 위치, 되감기 타겟, 설정 모달

// chatStore.ts — 비즈니스 상태 인터페이스 (핵심 부분)
interface ChatState {
  sessionId: string;
  messages: DisplayMessage[];
  isLoading: boolean;
  affinities: AffinityScore[];
  affinityDeltas: Record<string, number>;
  respondingCharacter: string | null;
  isEpisodeEnded: boolean;

  // 내부 레퍼런스 — React 구독 대상이 아님
  _abortController: AbortController | null;
  _currentUserMsgId: string | null;
  _deltaClearTimer: ReturnType<typeof setTimeout> | null;

  sendMessage: (content: string) => void;
  rewind: (messageId: string) => Promise<string>;
  cancel: () => void;
}

// chatUIStore.ts — UI 전용 상태 (순수 setter)
interface ChatUIState {
  sidebarOpen: boolean;
  rewindTargetId: string | null;
  selectedCharacter: Character | null;
  displayMode: 'messenger' | 'visual-novel';
  insufficientGemsOpen: boolean;

  openSidebar: () => void;
  closeSidebar: () => void;
  setRewindTargetId: (id: string | null) => void;
  // ... 모두 단순 set() 호출
}

// chatStore.ts — 모듈 레벨 카운터
let msgIdCounter = 0;
function nextId(prefix: string) {
  return `${prefix}-${Date.now()}-${++msgIdCounter}`;
}

// chatStore.ts — _processDone에서 캐시 무효화
import { queryClient } from '@/lib/queryClient';
import { queryKeys } from '@/lib/queries';

// done 이벤트 수신 시:
queryClient.invalidateQueries({ queryKey: queryKeys.history(sessionId) });
queryClient.invalidateQueries({ queryKey: queryKeys.affinity(sessionId) });
if (doneData.memoryCreated) {
  queryClient.invalidateQueries({ queryKey: queryKeys.memories(sessionId) });
}

// lib/queries.ts — 쿼리 키 팩토리
export const queryKeys = {
  history: (sessionId: string) => ['history', sessionId] as const,
  affinity: (sessionId: string) => ['affinity', sessionId] as const,
  memories: (sessionId: string) => ['memories', sessionId] as const,
  energy: { balance: ['energy', 'balance'] as const },
  gems: { balance: ['gems', 'balance'] as const },
  // ...
};

// done 이벤트에서 행동력 잔액을 즉시 갱신
if (doneData.energy != null) {
  queryClient.setQueryData(queryKeys.energy.balance, {
    balance: doneData.energy,
    nextResetAt: queryClient.getQueryData<{ nextResetAt?: string }>(
      queryKeys.energy.balance,
    )?.nextResetAt,
  });
}

// chatStore.ts — 취소와 정리
cancel: () => {
  get()._abortController?.abort();
  set({ isLoading: false, _abortController: null });
},

reset: () => {
  const { _deltaClearTimer, _abortController } = get();
  if (_deltaClearTimer) clearTimeout(_deltaClearTimer);
  _abortController?.abort(); // 진행 중인 스트림 정리
  set({ /* 모든 상태 초기화 */ });
},

// chatStore.ts — 에러 코드별 처리 분기
if (errorData.code === 'INSUFFICIENT_GEMS') {
  // 젬 부족 → 전용 모달 표시
  import('@/stores/chatUIStore').then(({ useChatUIStore }) => {
    useChatUIStore.getState().showInsufficientGems({
      required: errorData.required ?? 0,
      current: errorData.current ?? 0,
    });
  });
  // 사용자 메시지를 채팅에서 제거 (전송되지 않은 것처럼)
  set((state) => ({
    messages: state.messages.filter((m) => m.id !== state._currentUserMsgId),
  }));
  return;
}

if (errorData.code === 'INPUT_FILTER_BLOCKED') {
  // 입력 필터 차단 → 토스트 + 행동력 환불 알림
  import('sonner').then(({ toast }) => {
    toast.error('부적절한 내용이 포함되어 있어 전송할 수 없습니다.');
  });
  return;
}

if (errorData.code === 'AI_GENERATION_FAILED') {
  // AI 생성 실패 → 사용자 메시지 + 부분 응답 모두 제거 + 환불 알림
  set((state) => ({
    messages: state.messages.filter((m) => {
      if (m.id === state._currentUserMsgId) return false;
      if (m.id.startsWith('narr-') || m.id.startsWith('dial-')) return false;
      return true;
    }),
  }));
  return;
}