[QUEUE-224] 대기열 sse에서 polling으로 변경

src/pages/LoginPage.jsx

@@ -38,48 +38,54 @@ const LoginPage = () => {
       setErrorMessage("학번과 비밀번호를 모두 입력해주세요.");
       return;
     }
-    const uuid = uuidv4();
+    try {
+      const uuid = uuidv4();
 
-    // 1. 상태에 로그인 정보 저장
-    setCredentials(identifier, password);
+      // 1. 상태에 로그인 정보 저장
+      setCredentials(identifier, password);
 
-    // 3. 대기열 페이지로 이동
-    navigate(`/queue/${uuid}`, {
-      state: {
-        queueNumber: -1,
-      },
-    });
-
-    // try {
+      // 2. 대기열 진입 요청
+      const res = await joinQueue({ token: uuid });
+      const queueNumber = res.data?.queueNumber;
+      if (queueNumber === undefined) {
+        throw new Error("queueNumber가 응답에 없습니다.");
+      }
 
-    //   // 이전 로직
-    //   // const res = await login(identifier, password);
+      // 3. 대기열 페이지로 이동
+      navigate(`/queue/${uuid}`, {
+        state: {
+          queueNumber,
+        },
+      });
 
-    //   // if (res.code === "2000") {
-    //   //   setAccessToken(res.data.accessToken);
-    //   //   navigate("/enroll");
-    //   // } else {
-    //   //   setErrorMessage(res.message || "로그인에 실패했습니다.");
-    //   // }
-    // } catch (error) {
-    //   // console.error(error);
-    //   setErrorMessage("대기열 진입 중 문제가 발생했습니다. 다시 시도해주세요.");
+      //   // 이전 로직
+      //   // const res = await login(identifier, password);
 
-    //   // const status = error?.response?.status;
-    //   // const code = error?.response?.data?.code;
-    //   // if (status === 400 && code === "4000") {
-    //   //   // 학번, 비밀번호 형식 오류
-    //   //   setErrorMessage("학번과 비밀번호를 모두 입력해주세요.");
-    //   // } else if (status === 401 && code === "4010") {
-    //   //   // 비밀번호 미일치
-    //   //   setErrorMessage("비밀번호가 올바르지 않습니다. 다시 입력해주세요.");
-    //   // } else if (status === 404 && code === "4040") {
-    //   //   // 해당 학번 미존재
-    //   //   setErrorMessage("입력하신 학번으로 가입된 계정을 찾을 수 없습니다.");
-    //   // } else {
-    //   //   setErrorMessage("로그인 중 오류가 발생했습니다. 다시 시도해주세요.");
-    //   // }
-    // }
+      //   // if (res.code === "2000") {
+      //   //   setAccessToken(res.data.accessToken);
+      //   //   navigate("/enroll");
+      //   // } else {
+      //   //   setErrorMessage(res.message || "로그인에 실패했습니다.");
+      //   // }
+    } catch (error) {
+      //   // console.error(error);
+      setErrorMessage("대기열 진입 중 문제가 발생했습니다. 다시 시도해주세요.");
+
+      //   // const status = error?.response?.status;
+      //   // const code = error?.response?.data?.code;
+      //   // if (status === 400 && code === "4000") {
+      //   //   // 학번, 비밀번호 형식 오류
+      //   //   setErrorMessage("학번과 비밀번호를 모두 입력해주세요.");
+      //   // } else if (status === 401 && code === "4010") {
+      //   //   // 비밀번호 미일치
+      //   //   setErrorMessage("비밀번호가 올바르지 않습니다. 다시 입력해주세요.");
+      //   // } else if (status === 404 && code === "4040") {
+      //   //   // 해당 학번 미존재
+      //   //   setErrorMessage("입력하신 학번으로 가입된 계정을 찾을 수 없습니다.");
+      //   // } else {
+      //   //   setErrorMessage("로그인 중 오류가 발생했습니다. 다시 시도해주세요.");
+      //   // }
+    }
   };
 
   return (

src/pages/QueuePage.jsx

@@ -1,5 +1,6 @@
 import { useSSE } from "@/hooks/useSSE";
 import { login } from "@/services/auth";
+import { queueStatus } from "@/services/queue";
 import { useAuthStore } from "@/stores/authStore";
 import { useQueueStore } from "@/stores/queueStore";
 import React from "react";
@@ -23,6 +24,7 @@ import { toast } from "react-toastify";
 
 const QueuePage = () => {
   const [filledCount, setFilledCount] = useState(0);
+  coust[queueNumber, setQueueNumber] = useState(0);
 
   const { clearCredentials } = useQueueStore.getState();
   const { uuid } = useParams();
@@ -71,7 +73,30 @@ const QueuePage = () => {
     }
   };
 
-  const { queueNumber } = useSSE({ uuid, onAllowed: handleLogin });
+  // 5초 간격으로 대기 순서 서버에게 받아오기
+  useEffect(() => {
+    if (!uuid) return;
+
+    let polling = setInterval(async () => {
+      try {
+        const res = await queueStatus({ uuid });
+        console.log("queueStatus: ", res);
+
+        setQueueNumber(res.queueNumber);
+        console.log(res.queueStatus); // 디버깅용
+
+        // 상태가 ALLOWED라면 polling 정지 후 로그인 시도
+        if (res.queueStatus === "ALLOWED") {
+          clearInterval(polling);
+          handleLogin();
+        }
+      } catch (error) {
+        console.error(error);
+      }
+    }, 5000);
+
+    return () => clearInterval(polling);
+  }, []);
 
   // 첫 페이지 진입 시 캐싱된 정보가 없다면(url 조작으로 접속 시) 강제 리다이렉트
   useEffect(() => {

src/services/queue.js

@@ -17,7 +17,7 @@ export const joinQueue = async ({ token }) => {
  * 대기열 상태 조회
  */
 export const queueStatus = async ({ uuid }) => {
-  const response = await apiInterface("get", `/queue/${uuid}`, {}, {}, false, "queue");
+  const response = await apiInterface("get", `/queue/polling/${uuid}`, {}, {}, false, "queue");
 
   return response.data;
 }