Merge pull request #213 from boostcampwm-2024/feature/#207

[Feat] 게임페이지에서 나가기 버튼 클릭 시 경고 팝업 띄우도록 수정

packages/frontend/src/components/gamePage/leftSection/MainDisplay.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { useRoomStore } from '@/states/store/roomStore';
+import { useRoomStore } from '@/store/roomStore';
 import StartButton from './GameButtons/StartButton';
 import ReadyButton from './GameButtons/ReadyButton';
 import { GAME_PHASE, GamePhase } from '@/constants';
@@ -9,15 +9,15 @@ import { useGameSocket } from '@/hooks/useGameSocket';
 import useGuessing from '@/hooks/useGuessing';
 import useEnding from '@/hooks/useEnding';
 import useVoteResult from '@/hooks/useVoteResult';
-import { useAuthStore } from '@/states/store/authStore';
+import { useAuthStore } from '@/store/authStore';
 import Countdown from './Countdown';
 import WordDisplay from './WordDisplay';
 import Voting from './GamePhases/Voting';
 import VoteResult from './GamePhases/VoteResult';
 import EndingResult from './GamePhases/EndingResult';
-import { usePeerConnectionStore } from '@/states/store/peerConnectionStore';
+import { usePeerConnectionStore } from '@/store/peerConnectionStore';
 import VideoStream from '@/components/gamePage/stream/VideoStream';
-import { useLocalStreamStore } from '@/states/store/localStreamStore';
+import { useLocalStreamStore } from '@/store/localStreamStore';
 import { useSpeakingControl } from '@/hooks/useSpeakingControl';
 
 export default function MainDisplay() {

packages/frontend/src/components/gamePage/leftSection/VideoFeed.tsx

@@ -1,8 +1,8 @@
 import { useRef, useEffect } from 'react';
 import VideoStream from '@/components/gamePage/stream/VideoStream';
-import { useAuthStore } from '@/states/store/authStore';
-import { useLocalStreamStore } from '@/states/store/localStreamStore';
-import { usePeerConnectionStore } from '@/states/store/peerConnectionStore';
+import { useAuthStore } from '@/store/authStore';
+import { useLocalStreamStore } from '@/store/localStreamStore';
+import { usePeerConnectionStore } from '@/store/peerConnectionStore';
 import { useReadyStatus } from '@/hooks/useReadyStatus';
 
 export default function VideoFeed() {

packages/frontend/src/components/gamePage/rightSection/ChatSection.tsx

@@ -1,8 +1,8 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { useParams } from 'react-router-dom';
 import { useChatSocket } from '@/hooks/useChatSocket';
-import { useAuthStore } from '@/states/store/authStore';
-import { useChatStore } from '@/states/store/chatStore';
+import { useAuthStore } from '@/store/authStore';
+import { useChatStore } from '@/store/chatStore';
 import { ChatType } from '@/constants/chatState';
 import ArrowDownIcon from '@/assets/images/ArrowDownIcon.svg?react';
 

packages/frontend/src/components/gamePage/rightSection/LeaveButton.tsx

@@ -1,16 +1,20 @@
 import Leave from '@/assets/images/Leave.svg?react';
 import { useNavigate } from 'react-router-dom';
-import { useSocketStore } from '@/states/store/socketStore';
-import { useChatStore } from '@/states/store/chatStore';
-import { useRoomStore } from '@/states/store/roomStore';
-import { useSignalingSocketStore } from '@/states/store/signalingSocketStore';
+import { useSocketStore } from '@/store/socketStore';
+import { useChatStore } from '@/store/chatStore';
+import { useRoomStore } from '@/store/roomStore';
+import { useSignalingSocketStore } from '@/store/signalingSocketStore';
+import { useState } from 'react';
+import LeaveConfirmModal from './LeaveConfirmModal';
 
 export default function LeaveButton() {
+  const [showModal, setShowModal] = useState(false);
   const navigate = useNavigate();
   const socket = useSocketStore((state) => state.socket);
   const setChatHistory = useChatStore((state) => state.setChatHistory);
   const setRoomData = useRoomStore((state) => state.setRoomData);
   const signalingSocket = useSignalingSocketStore((state) => state.signalingSocket);
+
   function handleLeave() {
     if (!socket || !signalingSocket) return;
     socket.emit('leave_room');
@@ -19,13 +23,20 @@ export default function LeaveButton() {
     setRoomData(null, false, false);
     navigate('/lobby');
   }
+
   return (
-    <button
-      className="w-[120px] px-4 py-4 bg-transparent rounded-lg flex flex-col items-center justify-center gap-2"
-      onClick={handleLeave}
-    >
-      <Leave className="text-white-default pr-2" />
-      <p className="text-white-default text-lg">방 나가기</p>
-    </button>
+    <>
+      <button
+        className="w-[120px] px-4 py-4 bg-transparent rounded-lg flex flex-col items-center justify-center gap-2"
+        onClick={() => setShowModal(true)}
+      >
+        <Leave className="pr-2 text-white-default" />
+        <p className="text-lg text-white-default">방 나가기</p>
+      </button>
+
+      {showModal && (
+        <LeaveConfirmModal onConfirm={handleLeave} onClose={() => setShowModal(false)} />
+      )}
+    </>
   );
 }

packages/frontend/src/components/gamePage/rightSection/LeaveConfirmModal.tsx

@@ -0,0 +1,34 @@
+import ReactDOM from 'react-dom';
+
+interface ILeaveConfirmModalProps {
+  onConfirm: () => void;
+  onClose: () => void;
+}
+
+export default function LeaveConfirmModal({ onConfirm, onClose }: ILeaveConfirmModalProps) {
+  const modalContent = (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+      <div className="max-w-lg p-8 bg-white shadow-lg rounded-2xl w-96">
+        <h2 className="mb-4 text-xl font-semibold text-center text-gray-900">
+          게임을 나가시겠습니까?
+        </h2>
+        <div className="flex justify-center gap-4 mt-4">
+          <button
+            onClick={onClose}
+            className="w-32 py-2 text-black border border-black rounded-lg hover:bg-gray-100"
+          >
+            취소
+          </button>
+          <button
+            onClick={onConfirm}
+            className="w-32 py-2 bg-black rounded-lg text-white-default hover:bg-gray-800"
+          >
+            확인
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+
+  return ReactDOM.createPortal(modalContent, document.getElementById('portal-root') as HTMLElement);
+}

packages/frontend/src/components/gamePage/stream/CameraSettingButton.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import CameraOn from '@/assets/images/CameraOn.svg?react';
 import CameraOff from '@/assets/images/CameraOff.svg?react';
-import { useLocalStreamStore } from '@/states/store/localStreamStore';
+import { useLocalStreamStore } from '@/store/localStreamStore';
 
 export default function CameraSettingButton({ iconColor }: { iconColor: string }) {
   const { localStream } = useLocalStreamStore();

packages/frontend/src/components/gamePage/stream/MikeSettingButton.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import MikeOn from '@/assets/images/MikeOn.svg?react';
 import MikeOff from '@/assets/images/MikeOff.svg?react';
-import { useLocalStreamStore } from '@/states/store/localStreamStore';
+import { useLocalStreamStore } from '@/store/localStreamStore';
 
 export default function MikeSettingButton({ iconColor }: { iconColor: string }) {
   const { localStream } = useLocalStreamStore();

packages/frontend/src/components/landingPage/GuestLoginButton.tsx

@@ -3,9 +3,9 @@ import Button from '@/components/common/Button';
 import NicknameModal from './NicknameModal';
 import { useNavigate } from 'react-router-dom';
 import { getGuestLogin } from '@/apis/login';
-import { useAuthStore } from '@/states/store/authStore';
-import { useSocketStore } from '@/states/store/socketStore';
-import { useSignalingSocketStore } from '@/states/store/signalingSocketStore';
+import { useAuthStore } from '@/store/authStore';
+import { useSocketStore } from '@/store/socketStore';
+import { useSignalingSocketStore } from '@/store/signalingSocketStore';
 
 export default function GuestLoginButton() {
   const navigate = useNavigate();

packages/frontend/src/components/lobbyPage/VideoAudioTestModal.tsx

@@ -1,5 +1,5 @@
 import VideoStream from '@/components/gamePage/stream/VideoStream';
-import { useLocalStreamStore } from '@/states/store/localStreamStore';
+import { useLocalStreamStore } from '@/store/localStreamStore';
 import CameraSettingButton from '@/components/gamePage/stream/CameraSettingButton';
 import MikeSettingButton from '@/components/gamePage/stream/MikeSettingButton';
 

packages/frontend/src/hooks/useChatSocket.ts

@@ -1,9 +1,9 @@
 import { useEffect } from 'react';
-import { useChatStore } from '@/states/store/chatStore';
-import { useSocketStore } from '@/states/store/socketStore';
-import { useRoomStore } from '@/states/store/roomStore';
+import { useChatStore } from '@/store/chatStore';
+import { useSocketStore } from '@/store/socketStore';
+import { useRoomStore } from '@/store/roomStore';
 import { ChatType } from '@/constants/chatState';
-import { useAuthStore } from '@/states/store/authStore';
+import { useAuthStore } from '@/store/authStore';
 
 interface IChatEntry {
   userId: string;

packages/frontend/src/hooks/useCreateRoom.ts

@@ -1,8 +1,8 @@
 import { useNavigate } from 'react-router-dom';
-import { useAuthStore } from '@/states/store/authStore';
-import { useRoomStore } from '@/states/store/roomStore';
-import { useSocketStore } from '@/states/store/socketStore';
-import { useSignalingSocketStore } from '@/states/store/signalingSocketStore';
+import { useAuthStore } from '@/store/authStore';
+import { useRoomStore } from '@/store/roomStore';
+import { useSocketStore } from '@/store/socketStore';
+import { useSignalingSocketStore } from '@/store/signalingSocketStore';
 
 export default function useCreateRoom() {
   const navigate = useNavigate();

packages/frontend/src/hooks/useEnding.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useSocketStore } from '@/states/store/socketStore';
+import { useSocketStore } from '@/store/socketStore';
 import { GAME_PHASE, GamePhase } from '@/constants';
 
 interface IEndingResult {

packages/frontend/src/hooks/useGameSocket.ts

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
-import { useSocketStore } from '@/states/store/socketStore';
-import { useRoomStore } from '@/states/store/roomStore';
+import { useSocketStore } from '@/store/socketStore';
+import { useRoomStore } from '@/store/roomStore';
 import { GAME_PHASE, GamePhase } from '@/constants';
 
 interface IReadyUsers {

packages/frontend/src/hooks/useGuessing.ts

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { useSocketStore } from '@/states/store/socketStore';
+import { useSocketStore } from '@/store/socketStore';
 import { GAME_PHASE, GamePhase } from '@/constants';
 
 export default function useGuessing(isPinoco: boolean, setGamePhase: (phase: GamePhase) => void) {

packages/frontend/src/hooks/useJoinRoom.ts

@@ -1,8 +1,8 @@
 import { useNavigate } from 'react-router-dom';
-import { useAuthStore } from '@/states/store/authStore';
-import { useRoomStore } from '@/states/store/roomStore';
-import { useSocketStore } from '@/states/store/socketStore';
-import { useSignalingSocketStore } from '@/states/store/signalingSocketStore';
+import { useAuthStore } from '@/store/authStore';
+import { useRoomStore } from '@/store/roomStore';
+import { useSocketStore } from '@/store/socketStore';
+import { useSignalingSocketStore } from '@/store/signalingSocketStore';
 
 export default function useJoinRoom() {
   const navigate = useNavigate();

packages/frontend/src/hooks/useSpeakingControl.ts

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { useSocketStore } from '@/states/store/socketStore';
+import { useSocketStore } from '@/store/socketStore';
 
 export const useSpeakingControl = (currentSpeaker: string | null, userId: string | null) => {
   const socket = useSocketStore((state) => state.socket);

packages/frontend/src/hooks/useVoteResult.ts

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
-import { useSocketStore } from '@/states/store/socketStore';
+import { useSocketStore } from '@/store/socketStore';
 import { GAME_PHASE, GamePhase } from '@/constants';
-import { useRoomStore } from '@/states/store/roomStore';
+import { useRoomStore } from '@/store/roomStore';
 
 interface IVoteResult {
   voteResult: Record<string, number>;

packages/frontend/src/pages/gamePage/index.tsx

@@ -4,8 +4,8 @@ import LeftGameSection from '@/components/gamePage/leftSection/LeftGameSection';
 import RightGameSection from '@/components/gamePage/rightSection/RightGameSection';
 import Header from '@/components/layout/Header';
 import GameManual from '@/components/gamePage/GameManual';
-import { useSocketStore } from '@/states/store/socketStore';
-import { useRoomStore } from '@/states/store/roomStore';
+import { useSocketStore } from '@/store/socketStore';
+import { useRoomStore } from '@/store/roomStore';
 
 export default function GamePage() {
   const { socket } = useSocketStore();

packages/frontend/src/pages/landingPage/index.tsx

@@ -1,7 +1,7 @@
 import GuestLoginButton from '@/components/landingPage/GuestLoginButton';
 import BackgroundImage from '@/components/layout/BackgroundImage';
 import MainLogo from '@/assets/images/MainLogo.svg?react';
-import { useSocketStore } from '@/states/store/socketStore';
+import { useSocketStore } from '@/store/socketStore';
 
 export default function LandingPage() {
   const { socket } = useSocketStore();

packages/frontend/src/pages/lobbyPage/index.tsx

@@ -1,14 +1,14 @@
 import { useEffect } from 'react';
-import { useSocketStore } from '@/states/store/socketStore';
+import { useSocketStore } from '@/store/socketStore';
 import BackgroundImage from '@/components/layout/BackgroundImage';
 import MainLogo from '@/assets/images/MainLogo.svg?react';
 import RoomCreationButton from '@/components/lobbyPage/RoomCreationButton';
 import RoomJoinButton from '@/components/lobbyPage/RoomJoinButton';
 import VideoAudioTestButton from '@/components/lobbyPage/VideoAudioTestButton';
 import Header from '@/components/layout/Header';
-import { useRoomStore } from '@/states/store/roomStore';
-import { useChatStore } from '@/states/store/chatStore';
-import { useLocalStreamStore } from '@/states/store/localStreamStore';
+import { useRoomStore } from '@/store/roomStore';
+import { useChatStore } from '@/store/chatStore';
+import { useLocalStreamStore } from '@/store/localStreamStore';
 import { getVideoStream } from '@/utils/videoStreamUtils';
 
 export default function LobbyPage() {

packages/frontend/src/states/store/signalingSocketStore.ts → packages/frontend/src/store/signalingSocketStore.ts

@@ -1,7 +1,7 @@
 import { create } from 'zustand';
 import { Socket, io } from 'socket.io-client';
-import { useLocalStreamStore } from '@/states/store/localStreamStore';
-import { usePeerConnectionStore } from '@/states/store/peerConnectionStore';
+import { useLocalStreamStore } from '@/store/localStreamStore';
+import { usePeerConnectionStore } from '@/store/peerConnectionStore';
 import { getVideoStream } from '@/utils/videoStreamUtils';
 
 interface ISignalingSocketStore {

packages/frontend/src/utils/videoStreamUtils.ts

@@ -1,4 +1,4 @@
-import { useLocalStreamStore } from '@/states/store/localStreamStore';
+import { useLocalStreamStore } from '@/store/localStreamStore';
 
 export async function getVideoStream() {
   const videoConfig = {