+ {children}
+
+
+
+
)
+ );
+})
+CarouselContent.displayName = "CarouselContent"
+
+const CarouselItem = React.forwardRef(({ className, ...props }, ref) => {
+ const { orientation } = useCarousel()
+
+ return (
+ ()
+ );
+})
+CarouselItem.displayName = "CarouselItem"
+
+const CarouselPrevious = React.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+ const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+ return (
+ ()
+ );
+})
+CarouselPrevious.displayName = "CarouselPrevious"
+
+const CarouselNext = React.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+ const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+ return (
+ ()
+ );
+})
+CarouselNext.displayName = "CarouselNext"
+
+export { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext };
diff --git a/frontend/src/components/ui/input.jsx b/frontend/src/components/ui/input.jsx
new file mode 100644
index 00000000..bc532cd0
--- /dev/null
+++ b/frontend/src/components/ui/input.jsx
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+const Input = React.forwardRef(({ className, type, ...props }, ref) => {
+ return (
+ ()
+ );
+})
+Input.displayName = "Input"
+
+export { Input }
diff --git a/frontend/src/components/ui/progress.jsx b/frontend/src/components/ui/progress.jsx
new file mode 100644
index 00000000..99b617db
--- /dev/null
+++ b/frontend/src/components/ui/progress.jsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "../../src/lib/utils"
+
+const Progress = React.forwardRef(({ className, value, ...props }, ref) => (
+
+ {title && {title} }
+ {description && (
+ {description}
+ )}
+
+ {action}
+ 
+
+ 울반 The QUIZ
+
+
+ 울반 The QUIZ
에 오신 걸 환영합니다!
+
+
+ 
+
)
+}
+
+
+export default MemberCard
\ No newline at end of file
diff --git a/frontend/src/page/WaitingMemberCarousel.jsx b/frontend/src/page/WaitingMemberCarousel.jsx
new file mode 100644
index 00000000..d72a7194
--- /dev/null
+++ b/frontend/src/page/WaitingMemberCarousel.jsx
@@ -0,0 +1,46 @@
+import * as React from "react"
+import Autoplay from "embla-carousel-autoplay"
+
+import { Card, CardContent } from "../components/ui/card"
+import {
+ Carousel,
+ CarouselContent,
+ CarouselItem,
+ CarouselNext,
+ CarouselPrevious,
+} from "../components/ui/carousel"
+import MemberCard from "./MemberCard"
+
+export function CarouselPlugin({waitingList}) {
+ const plugin = React.useRef(
+ Autoplay({ delay: 2000, stopOnInteraction: true })
+ )
+
+ return (
+ {index+1}등 {member.name}
+ 점수: {member.point}
+
+
+
+ {waitingList.map((member, index) => (
+
+
+ ))}
+
+
+
+ )
+}
diff --git a/frontend/src/page/WaitingRoomPage.jsx b/frontend/src/page/WaitingRoomPage.jsx
new file mode 100644
index 00000000..6030fc99
--- /dev/null
+++ b/frontend/src/page/WaitingRoomPage.jsx
@@ -0,0 +1,93 @@
+
+import React, { useEffect, useState } from 'react';
+import { CarouselPlugin } from './WaitingMemberCarousel';
+import Layout from '../components/Layout';
+import { useWebSocket } from '../utils/WebSocketProvider';
+import { useParams } from 'react-router-dom';
+import useUserStore from '../stores/member';
+import CountdownTimer from '../components/CountdownTime';
+import { useNavigate } from "react-router-dom";
+
+
+const WaitingRoomPage = () => {
+ const navigate = useNavigate();
+ const {Qid} = useParams();
+ const {stompClient} = useWebSocket();
+ const accessToken = useUserStore(state => state.accessToken);
+ const userInfo = useUserStore(state => state.userInfo);
+ const subUrl = `/subscribe/gamer/${Qid}`;
+ const pubUrl = `/publish/gamer`;
+ const [countDown, setCountDown] = useState(10);
+ const [waitingList, setWaitingList] = useState([])
+
+
+ // 타이머 종료 시 호출될 함수
+ const handleTimerEnd = () => {
+ navigate('/quiz/'+ parseInt(Qid));
+ };
+
+ useEffect(() => {
+ console.log("StompClient 준비상태:", stompClient)
+ if(stompClient){
+ const payload = {
+ id: userInfo.id,
+ quizGameId: Qid,
+ name: userInfo.name,
+ photo: userInfo.photo,
+ point: 0,
+ gamerStatus: 'ENTER'
+ };
+ // 대기열 입성
+ stompClient.subscribe(subUrl,onGamerReceived, {Authorization: accessToken, type: "quiz"});
+ stompClient.send(pubUrl, {Authorization: accessToken, type: "quiz"}, JSON.stringify(payload));
+ }
+ return () => {
+ const leave = {
+ id: userInfo.id,
+ quizGameId: Qid,
+ name: userInfo.name,
+ photo: userInfo.photo,
+ point: 0,
+ gamerStatus: 'LEAVE'
+ };
+
+ if(stompClient){
+ stompClient.send(pubUrl, {Authorization: accessToken, type: "quiz"},JSON.stringify(leave))
+ }
+ }
+
+ }, [stompClient, Qid, accessToken])
+
+ useEffect(() => {
+ console.log("waitingList has been updated:", waitingList);
+ }, [waitingList]); // waitingList 변화 감지
+
+
+ // 게이머 세팅
+ function onGamerReceived (payload) {
+ var gamer = JSON.parse(payload.body);
+ console.log("들어온 게이머:", gamer);
+ setWaitingList(()=>[...gamer]);
+ }
+
+
+ return(
+
+
+
+ {/* {index + 1} */}
+
+
+
+ 
+ 홍유준 선생님의 퀴즈방
+지금은 기다리는 중...{waitingList.length}/{waitingList.length}
+
+
+
+
+
+
+ 이번 게임 점수
+ {point}
+
+
+ 당신의 포인트: {answer.submit == answer.ans? point : "0"}
+
+
+ 다음 게임으로 고고!
+ Question {Qid}/5
+ {/* 진행 바 및 타이머 */}
+
+ {answers.map((answer, index) => (
+
+ ))}
+
+ {question}
+ 오늘의 퀴즈왕!
+
+ {users.map((user, index) => (
+
+
+ {user.id}
+ 
+ {user.name}
+ {user.point} pt
+
+ ))}
+ Question
+ {/* 시간 제한 */}
+
+
+
+
+
+
+
+
+ 홍유준 선생님
+구미 초등학교 3학년 1반
+
+
+
+
+
+
+ 홍유준 선생님
+구미 초등학교 3학년 1반
+
+
+
+
+