hotfix: 대기방 나가기, ON/OFF 기능 추가

boostcampwm-2024 · Dec 4, 2024 · bc2f143 · bc2f143
1 parent 3ea04e8
commit bc2f143
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 8 deletions.
diff --git a/packages/client/src/pages/main/index.tsx b/packages/client/src/pages/main/index.tsx
@@ -4,7 +4,7 @@ import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import FloatingSquare from './ui/FloatingSquare';
 import FloatingQuestion from './ui/FloatingQuestion';
-import { getCookie } from '@/shared/utils/cookie';
+import { getCookie, deleteCookie } from '@/shared/utils/cookie';
 
 const mappingGameStatus = (status: string, pinCode: string) => {
   switch (status) {
@@ -39,10 +39,20 @@ export default function MainPage() {
         const response = await checkPincodeStatus(pinCode, sid);
         if (response.isPossible) {
           const status = response.gameStatus;
-          const path = mappingGameStatus(status, pinCode);
-          navigate(path);
+          if (!status) {
+            deleteCookie('sid');
+            navigate(`/nickname/${pinCode}`);
+          } else {
+            const path = mappingGameStatus(status, pinCode);
+            navigate(path);
+          }
         } else {
-          toast.info('게임이 종료되었습니다.');
+          if (response.message) {
+            toast.info(response.message);
+          } else {
+            toast.info('게임이 종료되었습니다.');
+          }
+          deleteCookie('sid');
         }
       } else {
         const checkResponse = await checkPincodePossible(pinCode);

diff --git a/packages/client/src/pages/quiz-wait/index.lazy.tsx b/packages/client/src/pages/quiz-wait/index.lazy.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { Copy, Users, PlayCircle } from 'lucide-react';
+import { Copy, Users, PlayCircle, LogOut } from 'lucide-react';
 
 import { getQuizSocket } from '@/shared/utils/socket';
 import { getCookie } from '@/shared/utils/cookie';
@@ -12,11 +12,14 @@ import MasterChat from './ui/MasterChat';
 import { clearLocalStorage } from '@/shared/utils/clearLocalStorage';
 import { GUEST_LOCAL_STORAGE_KEYS } from '@/shared/constants/guestLocalStorageKey';
 import { MASTER_LOCAL_STORAGE_KEYS } from '@/shared/constants/masterLocalStorageKey';
+import Modal from '@/shared/ui/modal';
+import ExitModal from './ui/ExitModal';
 
 export interface Guest {
   nickname: string;
   character: number;
   position: number;
+  connection: string;
 }
 
 export default function QuizWaitLazyPage() {
@@ -27,6 +30,7 @@ export default function QuizWaitLazyPage() {
     refetch,
   } = useNickname(socket, pinCode ?? '', getCookie('sid') ?? '');
   const [userType, setUserType] = useState<string>('');
+  const [openModal, setOpenModal] = useState(false);
 
   const guestLink = `${import.meta.env.VITE_CLIENT_URL}/nickname/${pinCode}`;
   const toast = toastController();
@@ -109,7 +113,7 @@ export default function QuizWaitLazyPage() {
           </div>
           <UserGridView guests={participantList} myPosition={myPosition} />
         </div>
-        {userType === 'master' && (
+        {userType === 'master' ? (
           <div className="relative flex justify-end min-w-full">
             <MasterChat pinCode={pinCode ?? ''} />
             <button
@@ -120,6 +124,28 @@ export default function QuizWaitLazyPage() {
               퀴즈 시작하기
             </button>
           </div>
+        ) : (
+          <div className="flex justify-end min-w-full">
+            <button
+              className="flex items-center px-4 py-2 text-lg font-medium text-gray-600 
+                  bg-white border border-gray-200 rounded-xl shadow-sm hover:bg-gray-50 
+                   hover:text-gray-900 hover:border-gray-300 transition-all duration-200 ease-in-out
+                   focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-300"
+              onClick={() => setOpenModal(true)}
+            >
+              <LogOut className="h-4 w-4 mr-2" />
+              나가기
+            </button>
+          </div>
+        )}
+        {openModal && (
+          <Modal onClose={() => setOpenModal(false)}>
+            <ExitModal
+              onClose={() => setOpenModal(false)}
+              pinCode={pinCode ?? ''}
+              socket={socket}
+            />
+          </Modal>
         )}
       </div>
     </div>

diff --git a/packages/client/src/pages/quiz-wait/ui/ExitModal.tsx b/packages/client/src/pages/quiz-wait/ui/ExitModal.tsx
@@ -0,0 +1,57 @@
+import { useNavigate } from 'react-router-dom';
+import { useQueryClient } from '@tanstack/react-query';
+
+import { deleteCookie, getCookie } from '@/shared/utils/cookie';
+import { Socket } from 'socket.io-client';
+
+interface ExitModalProps {
+  onClose: () => void;
+  pinCode: string;
+  socket: Socket;
+}
+
+export default function ExitModal({ onClose, pinCode, socket }: ExitModalProps) {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  const handleLeaveRoom = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    socket.emit('leave room', { pinCode, sid: getCookie('sid') });
+    queryClient.removeQueries({ queryKey: ['participant info', pinCode] });
+    deleteCookie('sid');
+    onClose();
+    navigate('/');
+  };
+
+  const handleModalClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+  };
+  return (
+    <div
+      className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-20"
+      onClick={onClose}
+    >
+      <div
+        className="bg-white w-96 h-46 p-6 rounded-lg shadow-lg text-center"
+        onClick={handleModalClick}
+      >
+        <p className="text-xl text-gray-600 font-medium">정말로 나가시겠습니까?</p>
+        <span className="text-md text-gray-400">퀴즈가 대기 중이면 다시 참가할 수 있어요.</span>
+        <div className="mt-9 flex justify-center space-x-4">
+          <button
+            className="bg-slate-400 text-white w-24 rounded hover:bg-slate-600"
+            onClick={handleLeaveRoom}
+          >
+            예
+          </button>
+          <button
+            className="bg-blue-500 text-white w-24 py-2 rounded hover:bg-blue-600"
+            onClick={onClose}
+          >
+            아니오
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/client/src/pages/quiz-wait/ui/UserGridItem.tsx b/packages/client/src/pages/quiz-wait/ui/UserGridItem.tsx
@@ -28,7 +28,6 @@ const randomColor = [
 ];
 
 export default function UserGridItem({ participant, isMine, otherMessage }: UserGridItemProps) {
-  // 내 메시지, 상대방들 메시지
   const [message, setMessage] = useState('');
   const [myMessage, setMyMessage] = useState('');
   const [isFocused, setIsFocused] = useState(false);
@@ -129,7 +128,13 @@ export default function UserGridItem({ participant, isMine, otherMessage }: User
         )}
       </div>
       <div className="flex justify-center items-center gap-2 w-full mt-2">
-        <div className="w-[10px] h-[10px] rounded-full bg-green-500 animate-blink" />
+        {isMine && <div className="w-[10px] h-[10px] rounded-full bg-green-500 animate-blink" />}
+        {!isMine &&
+          (participant.connection === 'ON' ? (
+            <div className="w-[10px] h-[10px] rounded-full bg-green-500 animate-blink" />
+          ) : (
+            <div className="w-[10px] h-[10px] rounded-full bg-gray-300" />
+          ))}
         <div className="text-sm text-center truncate font-bold">{participant.nickname}</div>
       </div>
     </div>