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

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

@@ -4,13 +4,17 @@ 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 { 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);
+}