refactor: SSE 응답 수정

Author: wannabeing

src/components/quiz/TodayQuiz/hooks/useQuizSubmission.ts

@@ -1,4 +1,4 @@
-import { useState, useRef, createElement } from 'react';
+import { useState, useRef, createElement, useCallback } from 'react';
 import { quizAPI } from '../../../../utils/api';
 import { QuizData, AnswerResult } from '../types';
 import DuplicateAnswerModal from '../../../common/DuplicateAnswerModal';
@@ -271,6 +271,8 @@ export const useQuizSubmission = () => {
             // onError: 에러 처리
             (error: Event) => {
               console.error('AI 피드백 스트리밍 실패:', error);
+              console.error('에러 타입:', error.type);
+              console.error('에러 대상:', error.target);
 
               const errorResult: AnswerResult = {
                 isCorrect: false,
@@ -308,12 +310,12 @@ export const useQuizSubmission = () => {
     }
   };
 
-  const cleanup = () => {
-    if (sseConnectionRef.current) {
+  const cleanup = useCallback(() => {
+    if (sseConnectionRef.current) {;
       sseConnectionRef.current.close();
       sseConnectionRef.current = null;
     }
-  };
+  }, []);
 
   return {
     isSubmitted,

src/components/quiz/TodayQuiz/index.tsx

@@ -66,10 +66,17 @@ const TodayQuizSection: React.FC = () => {
 
   // SSE 연결 정리 - 컴포넌트 언마운트 시
   useEffect(() => {
+    const handleBeforeUnload = () => {
+      cleanup();
+    };
+
+    window.addEventListener('beforeunload', handleBeforeUnload);
+    
     return () => {
+      window.removeEventListener('beforeunload', handleBeforeUnload);
       cleanup();
     };
-  }, [cleanup]);
+  }, [cleanup]); // cleanup을 다시 dependency로 추가 (이제 useCallback으로 메모이제이션됨)
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();

src/components/sections/HeroSection.tsx

@@ -44,7 +44,7 @@ const HeroSection: React.FC<HeroSectionProps> = ({ onSubscribeClick }) => {
                 <div className="w-6 h-6 sm:w-8 sm:h-8 bg-gradient-to-r from-navy-400 to-navy-500 rounded-full border-2 border-white"></div>
                 <div className="w-6 h-6 sm:w-8 sm:h-8 bg-gradient-to-r from-brand-500 to-navy-500 rounded-full border-2 border-white"></div>
               </div>
-              <span className="text-center sm:text-left">이미 <strong className="text-gray-800">1,000+</strong> 취준생이 사용 중</span>
+              <span className="text-center sm:text-left">이미 <strong className="text-gray-800">10+</strong> 취준생이 사용 중</span>
             </div>
           </div>
         </div>

src/utils/api.ts

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