diff --git a/packages/client/src/app/routes/Router.tsx b/packages/client/src/app/routes/Router.tsx index b20fba99..3b3363c9 100644 --- a/packages/client/src/app/routes/Router.tsx +++ b/packages/client/src/app/routes/Router.tsx @@ -30,7 +30,7 @@ export default function Router() { } /> } /> - } /> + } /> } /> ); diff --git a/packages/client/src/pages/quiz-list/index.tsx b/packages/client/src/pages/quiz-list/index.tsx index 63e0e807..fa63f99b 100644 --- a/packages/client/src/pages/quiz-list/index.tsx +++ b/packages/client/src/pages/quiz-list/index.tsx @@ -68,7 +68,7 @@ export default function QuizList() { setCookie('sid', sid); const pinCode = await waitForSocketEvent('pincode', socket); - setCookie('pincode', pinCode); + setCookie('pinCode', pinCode); navigate(`/quiz/wait/${pinCode}`); }; diff --git a/packages/client/src/pages/quiz-wait/index.tsx b/packages/client/src/pages/quiz-wait/index.tsx index d0b31d81..857d63be 100644 --- a/packages/client/src/pages/quiz-wait/index.tsx +++ b/packages/client/src/pages/quiz-wait/index.tsx @@ -6,8 +6,9 @@ import { useNavigate, useParams } from 'react-router-dom'; import { getQuizSocket } from '@/shared/utils/socket'; import { getCookie } from '@/shared/utils/cookie'; import { toastController } from '@/features/toast/model/toastController'; +import LoadingSpinner from '@/shared/assets/icons/loading-alt-loop.svg?react'; -const GUEST_DISPLAY_SIZE = { width: 1020, height: 576 }; +const GUEST_DISPLAY_SIZE = { width: 940, height: 568 }; const SPACING = 10; const BUTTON_SIZE = { width: 74, height: 44 }; @@ -16,7 +17,7 @@ const to = { x: GUEST_DISPLAY_SIZE.width - SPACING, y: GUEST_DISPLAY_SIZE.height export default function QuizWait() { const { pinCode } = useParams(); - const guestLink = `${import.meta.env.VITE_CLIENT_URL}/${pinCode}`; + const guestLink = `${import.meta.env.VITE_CLIENT_URL}/nickname/${pinCode}`; const buttonRefs = useRef([]); const [buttonSize, setButtonSize] = useState(BUTTON_SIZE); const [guests, setGuests] = useState([]); @@ -29,6 +30,7 @@ export default function QuizWait() { socket.on('nickname', (response) => { setGuests([...response]); }); + socket.emit('nickname', { pinCode }); }, []); useLayoutEffect(() => { @@ -61,7 +63,7 @@ export default function QuizWait() { return (
-
+
{/* TODO: Suspense를 통해 loading 시 fallback 컴포넌트 */}
-

참가 대기 중 ...

-
- {randomPositions.map((position, index) => ( -
{ - if (element) { - buttonRefs.current[index] = element; - } - }} - > - -
- ))} +
+
+

+ 참가 대기 중 +

+

+ + {guests.length === 0 ? 'no' : guests.length} participants +

+
+
+ {randomPositions.map((position, index) => ( +
{ + if (element) { + buttonRefs.current[index] = element; + } + }} + > +
+ {/* TODO: connect 여부에 따른 색상 수정 */} +
+ {guests[index]} +
+
+ ))} +
+ + +