diff --git a/ticketping/src/component/EnterQueue.js b/ticketping/src/component/EnterQueue.js index 074d567..8504bac 100644 --- a/ticketping/src/component/EnterQueue.js +++ b/ticketping/src/component/EnterQueue.js @@ -10,23 +10,46 @@ export const useEnterQueue = (setIsModalVisible) => { const headers = { Authorization: jwtToken }; const enterQueue = async (performanceId) => { - try { - const response = await axiosInstance.post(`/api/v1/waiting-queue?performanceId=${performanceId}`, {}, { headers }); - const tokenStatus = response.data.data.tokenStatus; - - if (tokenStatus === "WAITING") { - setIsModalVisible(true); - } else if (tokenStatus === "WORKING") { - navigate(`/performance/${performanceId}/schedule`); - } + try { + await axiosInstance.get(`/api/v1/waiting-queue?performanceId=${performanceId}`, { headers }); + + // 이미 대기열에 있는 인원 + setIsModalVisible(true); + } catch (error) { - if (error.response) { - notification.open({ - message: `대기열 진입 실패`, - description: error.response.data.message, - icon: , - }); + + // 대기열에 없는 인원 + if (error.response && error.response.status === 404) { + + try { + const response = await axiosInstance.post(`/api/v1/waiting-queue?performanceId=${performanceId}`, {}, { headers }); + const tokenStatus = response.data.data.tokenStatus; + + if (tokenStatus === "WAITING") { + setIsModalVisible(true); + } else if (tokenStatus === "WORKING") { + navigate(`/performance/${performanceId}/schedule`); + } + } catch (error) { + if (error.response) { + notification.open({ + message: `대기열 진입 실패`, + description: error.response.data.message, + icon: , + }); + } + } + + } else { + if (error.response) { + notification.open({ + message: `대기열 진입 실패`, + description: error.response.data.message, + icon: , + }); + } } + } }; diff --git a/ticketping/src/component/QueueInfoModal.js b/ticketping/src/component/QueueInfoModal.js index 808fc0d..e89a1d8 100644 --- a/ticketping/src/component/QueueInfoModal.js +++ b/ticketping/src/component/QueueInfoModal.js @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react'; -import { Modal, Button } from 'antd'; +import { Modal, Button, Progress } from 'antd'; import { useAppContext } from "../store"; import { axiosInstance } from "../api"; import { useNavigate } from "react-router-dom"; @@ -17,13 +17,14 @@ const QueueInfoModal = ({ visible, onClose, performanceId }) => { const fetchQueueInfo = async () => { try { const response = await axiosInstance.get(`/api/v1/waiting-queue?performanceId=${performanceId}`, { headers }); + + console.log(response); + setTokenStatus(response.data.data.tokenStatus); setPosition(response.data.data.position); setTotalUsers(response.data.data.totalUsers); - - console.log(response.data.data); - if (tokenStatus === "WORKING") { + if (response.data.data.tokenStatus === "WORKING") { navigate(`/performance/${performanceId}/schedule`); } } catch (error) { @@ -34,26 +35,37 @@ const QueueInfoModal = ({ visible, onClose, performanceId }) => { useEffect(() => { if (visible) { fetchQueueInfo(); + + const intervalId = setInterval(fetchQueueInfo, 3000); // 3초 주기 Polling + + return () => clearInterval(intervalId); } }, [visible]); - const progressPercentage = totalUsers > 0 ? (position / totalUsers) * 100 : 0; + const progressPercentage = totalUsers > 0 ? ((totalUsers - position) / totalUsers * 100).toFixed(1) : 0; return (

티켓 예매를 위해 접속 대기중입니다.

나의 대기 순번: {position}

-
+ -

현재 {totalUsers}명이 대기 중에 있습니다.

+

+ 현재 {totalUsers}명 중 {position}번째로 대기 중입니다. +

diff --git a/ticketping/src/style/QueueInfoModal.css b/ticketping/src/style/QueueInfoModal.css index b3c227d..f2fc933 100644 --- a/ticketping/src/style/QueueInfoModal.css +++ b/ticketping/src/style/QueueInfoModal.css @@ -23,6 +23,7 @@ background-color: rgba(255, 255, 255, 0.2); padding: 10px; border-radius: 5px; + color: #4A90E2; } .progress-bar { @@ -35,14 +36,15 @@ } .modal-divider { - width: 100%; + width: 120%; height: 1px; - background-color: #000; - margin: 10px 0; + background-color: #555555; + margin: 30px 10px; } .ant-btn { margin-top: 25px; + margin-bottom: -5px; width: auto; } \ No newline at end of file