[QUEUE-221] 수강목록 조회 sse 연결

src/components/enroll/CoursesList.jsx

@@ -1,6 +1,56 @@
 import CourseItem from "@/components/enroll/CourseItem";
+import { useState } from "react";
+import { useEffect } from "react";
+
+const CoursesList = ({ courses, onEnrollSuccess }) => {
+  const [capa, setCapa] = useState([]);
+
+  useEffect(() => {
+    if (!courses || courses.length === 0) return;
+
+    const courseIds = courses.map((c) => `courseIds=${c.courseId}`).join("&");
+    const token = localStorage.getItem("accessToken");
+    console.log(token);
+    if (!token) {
+      console.error("Access token is missing!");
+    }
+
+    const sseUrl = `${import.meta.env.VITE_API_BASE_SECURE_SSE_URL}/api/v1/seats/subscribe?${courseIds}&token=${token}`;
+    // console.log("SSE URL:", sseUrl);
+    const eventSource = new EventSource(sseUrl);
+    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);
+      setCapa((prevCapa) =>
+        prevCapa.map((capa) =>
+          capa.courseId === data.courseId
+            ? { ...capa, participant: data.remaining }
+            : capa
+        )
+      );
+    });
+
+    return () => eventSource.close();
+  }, [courses]);
 
-const CoursesList = ({ courses, capacities, onEnrollSuccess }) => {
   return (
     <div
       className="w-[814px] h-[607px] overflow-y-auto
@@ -11,9 +61,7 @@ const CoursesList = ({ courses, capacities, onEnrollSuccess }) => {
     >
       <div className="grid grid-cols-3 gap-x-2 gap-y-3">
         {courses?.map((course) => {
-          const current = capacities.find(
-            (c) => c.courseId === course.courseId
-          );
+          const current = capa.find((c) => c.courseId === course.courseId);
           return (
             <CourseItem
               key={course.courseId}

src/components/enroll/EnrollForm.jsx

@@ -40,8 +40,8 @@ const EnrollForm = () => {
       setGeneralCourses(courseRes.data);
 
       const ids = courseRes.data.map((c) => c.courseId);
-      const capaRes = await getCapacities(ids);
-      setCapacities(capaRes.data);
+      //const capaRes = await getCapacities(ids);
+      //setCapacities(capaRes.data);
     } catch (error) {
       console.error("수강 목록 조회 실패", error);
     }
@@ -109,7 +109,7 @@ const EnrollForm = () => {
           />
           <CoursesList
             courses={filteredCourses}
-            capacities={capacities}
+            //capacities={capacities}
             onEnrollSuccess={handleAfterAction}
           />
         </div>