refactor: SSE 에러 개선

Author: wannabeing

Dockerfile

@@ -22,6 +22,7 @@ ENV NODE_ENV=$NODE_ENV
 
 # Vite로 빌드
 RUN echo "VITE_API_URL=$VITE_API_URL"
+RUN echo "NODE_ENV=$NODE_ENV"
 RUN npm run build
 
 # 2단계: 프로덕션 스테이지

src/components/sections/TodayQuizSection.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
 import { quizAPI } from '../../utils/api';
@@ -76,10 +76,21 @@ const TodayQuizSection: React.FC = () => {
   const [resultChars, setResultChars] = useState<string[]>([]);
   const [feedbackChars, setFeedbackChars] = useState<string[]>([]);
   const { openModal } = useModal();
+  const sseConnectionRef = useRef<{ close: () => void } | null>(null);
 
   const subscriptionId = searchParams.get('subscriptionId');
   const quizId = searchParams.get('quizId');
 
+  // SSE 연결 정리 - 컴포넌트 언마운트 시
+  useEffect(() => {
+    return () => {
+      if (sseConnectionRef.current) {
+        sseConnectionRef.current.close();
+        sseConnectionRef.current = null;
+      }
+    };
+  }, []);
+
   // 결과 텍스트를 글자별로 분리하고 애니메이션 적용
   React.useEffect(() => {
     if (!feedbackResult) {
@@ -286,7 +297,13 @@ const TodayQuizSection: React.FC = () => {
             setResultChars([]);
             setFeedbackChars([]);
 
-            quizAPI.streamAiFeedback(
+            // 기존 연결이 있다면 먼저 정리
+            if (sseConnectionRef.current) {
+              sseConnectionRef.current.close();
+              sseConnectionRef.current = null;
+            }
+
+            const sseConnection = quizAPI.streamAiFeedback(
               answerId,
               // onData: 스트리밍 데이터 수신
               (data: string) => {
@@ -363,7 +380,8 @@ const TodayQuizSection: React.FC = () => {
               }
             );
 
-            // SSE 연결은 자동으로 완료되거나 에러 시 닫힘
+            // SSE 연결을 ref에 저장하여 나중에 정리할 수 있도록 함
+            sseConnectionRef.current = sseConnection;
           } catch (feedbackError) {
             console.error('AI 피드백 요청 실패:', feedbackError);
 

src/utils/api.ts

@@ -156,23 +156,61 @@ export const quizAPI = {
 
   // AI 피드백 SSE 스트리밍 (주관식)
   streamAiFeedback: (answerId: string, onData: (data: string) => void, onComplete: () => void, onError: (error: Event) => void) => {
-    const eventSource = new EventSource(`${apiUrl}/quizzes/answers/${answerId}/feedback-sentence`, { withCredentials: true });
+    let isCompleted = false;
+    
+    const eventSource = new EventSource(`${apiUrl}/quizzes/${answerId}/feedback`, { 
+      withCredentials: true
+      // EventSource는 자동으로 Accept: text/event-stream 헤더 설정
+    });
 
     eventSource.onmessage = (event) => {
+      if (isCompleted) return;
+      
+      // [종료] 메시지를 받으면 정상 종료
+      if (event.data === '[종료]' || event.data === '[완료]' || event.data === 'END') {
+        isCompleted = true;
+        eventSource.close();
+        onComplete();
+        return;
+      }
+      
       onData(event.data);
     };
 
     eventSource.onerror = (error) => {
+      if (isCompleted) return; // 이미 정상 완료된 경우 에러 무시
+      
+      console.log('SSE 연결 에러:', error);
       eventSource.close();
       onError(error);
     };
 
     eventSource.addEventListener('complete', () => {
-      eventSource.close();
-      onComplete();
+      if (!isCompleted) {
+        isCompleted = true;
+        eventSource.close();
+        onComplete();
+      }
     });
 
-    return eventSource;
+    // 타임아웃 설정 (선택사항 - 너무 오래 걸리면 자동 종료)
+    const timeout = setTimeout(() => {
+      if (!isCompleted) {
+        console.log('SSE 스트리밍 타임아웃');
+        isCompleted = true;
+        eventSource.close();
+        onError(new Event('timeout'));
+      }
+    }, 60000); // 60초 타임아웃
+    
+    // 정리 함수 반환
+    return {
+      close: () => {
+        isCompleted = true;
+        clearTimeout(timeout);
+        eventSource.close();
+      }
+    };
   },
 };