[QUEUE-221] SSE EventPolyfill로 변경

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "axios": "^1.9.0",
+    "event-source-polyfill": "^1.0.31",
     "lucide-react": "^0.513.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

src/components/enroll/CoursesList.jsx

@@ -1,41 +1,49 @@
 import CourseItem from "@/components/enroll/CourseItem";
+import { EventSourcePolyfill } from "event-source-polyfill";
 import { useState } from "react";
 import { useEffect } from "react";
+import { toast } from "react-toastify";
 
 const CoursesList = ({ courses, onEnrollSuccess }) => {
   const [capa, setCapa] = useState([]);
 
   useEffect(() => {
+    let eventSource;
+    // 기존 연결 닫기
+    if (eventSource) {
+      eventSource.close();
+    }
     if (!courses || courses.length === 0) return;
-
+    // 초기 capa 세팅
+    setCapa(
+      courses.map((c) => ({
+        courseId: c.courseId,
+        participant: c.participant ?? 0,
+      }))
+    );
     const courseIds = courses.map((c) => `courseIds=${c.courseId}`).join("&");
     const token = localStorage.getItem("accessToken");
-    console.log(token);
+    // console.log(token);
     if (!token) {
       console.error("Access token is missing!");
+      return;
     }
-
-    const sseUrl = `${import.meta.env.VITE_API_BASE_SECURE_SSE_URL}/api/v1/seats/subscribe?${courseIds}&token=${token}`;
+    const sseUrl = `${
+      import.meta.env.VITE_API_BASE_SECURE_SSE_URL
+    }/api/v1/seats/subscribe?${courseIds}`;
     // console.log("SSE URL:", sseUrl);
-    const eventSource = new EventSource(sseUrl);
+
+    eventSource = new EventSourcePolyfill(sseUrl, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
     if (!eventSource) return;
 
     eventSource.onopen = () => {
       console.log("SSE 연결");
     };
 
-    // eventSource.onerror = (e) => {
-    //   console.error("SSE Error:", e);
-    //   eventSource.close();
-    // };
-
-    // 오류 발생 시 SSE 종료
-    eventSource.onerror = (err) => {
-      console.error("EventSource 에러: ", err);
-      toast.error("연결에 문제가 발생했습니다. 다시 시도해주세요.");
-      eventSource.close();
-    };
-
     eventSource.addEventListener("seat", (event) => {
       const data = JSON.parse(event.data);
       console.log("seat 데이터: ", data);
@@ -48,6 +56,12 @@ const CoursesList = ({ courses, onEnrollSuccess }) => {
       );
     });
 
+    // 오류 발생 시 SSE 종료
+    eventSource.onerror = (err) => {
+      console.error("EventSource 에러: ", err);
+      toast.error("연결에 문제가 발생했습니다. 다시 시도해주세요.");
+      eventSource.close();
+    };
     return () => eventSource.close();
   }, [courses]);