[FE] - 퀴즈 대기 페이지 UI 수정 및 작은 에러 수정 (#98)

* fix: 잘못 작성한 navigate 수정

- copy 시 잘못된 url 수정
- quiz/session url 수정
- cookie 이름 수정

* feat: 로딩 스피너 추가

* feat: 퀴즈 대기 장소 UI 변경

* feat: socket에서 auth에 sid 추가

packages/client/src/app/routes/Router.tsx

@@ -30,7 +30,7 @@ export default function Router() {
         <Route path="/guest/questions" element={<GuestQnA />} />
       </Route>
       <Route path="/quiz/question" element={<QuizQuestion />} />
-      <Route path="quiz/session/host/:pinCode/:id" element={<QuizMasterSession />} />
+      <Route path="/quiz/session/host/:pinCode/:id" element={<QuizMasterSession />} />
       <Route path={'*'} element={<NotFound />} />
     </Routes>
   );

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}`);
   };

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<HTMLDivElement[]>([]);
   const [buttonSize, setButtonSize] = useState(BUTTON_SIZE);
   const [guests, setGuests] = useState<string[]>([]);
@@ -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 (
     <div className="flex gap-6 min-w-[980px] px-64 pt-16">
-      <div className="flex flex-col gap-16 w-80 h-[676px] bg-white p-14">
+      <div className="flex flex-col gap-16 w-80 h-96 bg-white p-14 rounded-xl shadow-md">
         {/* TODO: Suspense를 통해 loading 시 fallback 컴포넌트  */}
         <QRCodeSVG value={guestLink} />
         <CustomButton
@@ -73,22 +75,36 @@ export default function QuizWait() {
         />
       </div>
       <div className="flex flex-col gap-16 justify-center items-center">
-        <p className="font-bold text-3xl">참가 대기 중 ...</p>
-        <div className={`relative w-[1020px] h-[576px] bg-white`}>
-          {randomPositions.map((position, index) => (
-            <div
-              key={`${position.x} + ${position.y}`}
-              className="absolute flex items-center justify-center"
-              style={{ left: position.x, top: position.y }}
-              ref={(element) => {
-                if (element) {
-                  buttonRefs.current[index] = element;
-                }
-              }}
-            >
-              <CustomButton type="full" color="light" label={guests[index]} size="md" />
-            </div>
-          ))}
+        <div className="w-[1020px] h-[700px] bg-white rounded-xl shadow-md p-10">
+          <div className="relative flex items-center mb-4">
+            <p className="font-bold text-2xl absolute inset-0 flex items-center justify-center">
+              참가 대기 중
+            </p>
+            <p className="flex items-center gap-2 font-bold text-lg ml-auto">
+              <LoadingSpinner className="animate-spin" />
+              {guests.length === 0 ? 'no' : guests.length} participants
+            </p>
+          </div>
+          <div className="relative w-full h-[568px] bg-blue-50 rounded-xl shadow-md">
+            {randomPositions.map((position, index) => (
+              <div
+                key={`${position.x} + ${position.y}`}
+                className="absolute flex items-center justify-center bg-white rounded-xl shadow-md animate-bounce"
+                style={{ left: position.x, top: position.y }}
+                ref={(element) => {
+                  if (element) {
+                    buttonRefs.current[index] = element;
+                  }
+                }}
+              >
+                <div className="flex justify-center items-center gap-3 min-w-20 h-11 p-2">
+                  {/* TODO: connect 여부에 따른 색상 수정 */}
+                  <div className="w-3 h-3 rounded-full bg-green-500"></div>
+                  {guests[index]}
+                </div>
+              </div>
+            ))}
+          </div>
         </div>
         <div className="flex justify-end min-w-full">
           <CustomButton