feat: 방 세팅, 방 채팅, 방 입장, 방 퇴장, 플레이어 리스트 구현

Author: tech-kms-jake

package-lock.json

@@ -13,6 +13,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@hello-pangea/dnd": "^17.0.0",
+    "@stomp/stompjs": "^7.1.1",
     "@tanstack/react-table": "^8.21.2",
     "@tosspayments/payment-sdk": "^1.9.1",
     "apexcharts": "^4.3.0",
@@ -52,6 +53,7 @@
     "recoil": "^0.7.7",
     "sass": "^1.81.0",
     "showdown": "^2.1.0",
+    "sockjs-client": "^1.6.1",
     "styled-components": "^6.1.11",
     "swiper": "^11.2.1",
     "yet-another-react-lightbox": "^3.23.1"

package.json

@@ -2,7 +2,7 @@ const express = require('express');
 const path = require('path');
 
 const app = express();
-const PORT = process.env.PORT || 8080;
+const PORT = process.env.PORT || 3000;
 
 // 정적 파일 제공 (build 디렉토리)
 app.use(express.static(path.join(__dirname, 'build')));

server.js

@@ -0,0 +1,62 @@
+import { useEffect, useRef } from "react";
+import { Client } from "@stomp/stompjs";
+
+export default function useStompClient(roomId, onMessage) {
+    const stompClientRef = useRef(null);
+    const hasSubscribedRef = useRef(false);
+    useEffect(() => {
+        const stompClient = new Client({
+            brokerURL: `wss://brainrace.duckdns.org:7080/ws/game-room`,
+            reconnectDelay: 5000,
+            onConnect: () => {
+                console.log("🔌 STOMP connected");
+                // 구독
+                if (!hasSubscribedRef.current) {
+                    hasSubscribedRef.current = true;
+                    stompClient.subscribe(`/sub/room/${roomId}`, (message) => {
+                        const payload = JSON.parse(message.body);
+                        console.log("📥 메시지 수신:", payload);
+
+                        // 👉 외부에서 전달한 콜백 실행
+                        if (onMessage) onMessage(payload);
+                    });
+
+                    // ✅ 자동으로 방 입장 메시지 퍼블리시
+                    stompClient.publish({
+                        destination: `/pub/room/initializeRoomSocket/${roomId}`,
+                        body: "", // 빈 body 명시적 전달
+                    });
+                } //if (!hasSubscribedRef.current) { end
+            }, //onConnect end
+            onStompError: (frame) => {
+                console.error("❌ STOMP error", frame);
+            },
+        });
+
+        stompClient.activate();
+        stompClientRef.current = stompClient;
+
+        return () => {
+            if (stompClientRef.current?.connected) {
+                stompClientRef.current.deactivate();
+                console.log("🔌 STOMP disconnected");
+            }
+            hasSubscribedRef.current = false;
+        };
+    }, [roomId, onMessage]);
+
+    // ✅ 메시지 전송 함수 반환
+    const sendMessage = (destination, body) => {
+        console.log("sendMessage: ", destination, body, stompClientRef.current?.connected)
+        if (stompClientRef.current?.connected) {
+            stompClientRef.current.publish({
+                destination,
+                body,
+            });
+        } else {
+            console.warn("STOMP 연결되지 않음");
+        }
+    };
+
+    return {sendMessage};
+}

src/hooks/useStompClient.js

@@ -1,7 +1,84 @@
-import {Outlet} from "react-router-dom";
+import {Outlet, useNavigate, useParams} from "react-router-dom";
 import Sidebar from "./Sidebar";
+import {useSetRecoilState} from "recoil";
+import {
+    chatAtom,
+    gameSettingAtom,
+    playerListAtom,
+    roomSettingAtom, stompSendMessageAtom, systemNoticeAtom
+} from "../../state/atoms";
+import useStompClient from "../../hooks/useStompClient";
+import {useCallback, useEffect} from "react";
+
+const PLAYER_COLORS = [
+    "text-red-600",
+    "text-blue-600",
+    "text-red-500",
+    "text-orange-500",
+    "text-cyan-500",
+    "text-green-600",
+    "text-purple-600",
+    "text-pink-600",
+];
 
 const GameLayout = () => {
+    const { id: roomId } = useParams();
+    const setPlayerList = useSetRecoilState(playerListAtom);
+    const setRoomSetting = useSetRecoilState(roomSettingAtom);
+    const setGameSetting = useSetRecoilState(gameSettingAtom);
+    const setChat = useSetRecoilState(chatAtom);
+    const setSystemNotice = useSetRecoilState(systemNoticeAtom);
+    const setSendMessage = useSetRecoilState(stompSendMessageAtom);
+    const navigate = useNavigate();
+
+    // 메시지를 처리하는 콜백
+    const handleStompMessage = useCallback((payload) => {
+        switch (payload.type) {
+            case "PLAYER_LIST":
+                const { host, players } = payload.message;
+                const processedPlayers = players.map((player, index) => {
+                    let status = "waiting";
+                    if (player.nickname === host) {
+                        status = "host";
+                    } else if (player.ready) {
+                        status = "ready";
+                    }
+                    return {
+                        ...player,
+                        status,
+                        color: PLAYER_COLORS[index] || "text-gray-500",
+                    };
+                });
+                setPlayerList(processedPlayers);
+                break;
+            case "ROOM_SETTING":
+                setRoomSetting(payload.message);
+                break;
+            case "GAME_SETTING":
+                setGameSetting(payload.message);
+                break;
+            case "SYSTEM_NOTICE":
+                setSystemNotice(payload.message);
+                break;
+            case "CHAT":
+                setChat(payload.message);
+                break;
+            default:
+                console.warn("알 수 없는 메시지", payload);
+        }
+    }, [setPlayerList, setRoomSetting, setGameSetting, setChat]);
+
+    const { sendMessage } = useStompClient(roomId, handleStompMessage);
+    useEffect(() => {
+        setSendMessage(() => sendMessage);
+    }, [sendMessage]);
+
+    useEffect(() => {
+        if (sendMessage) {
+            sendMessage(`/pub/room/initializeRoomSocket/${roomId}`, "");
+        }
+    }, [sendMessage, roomId]);
+
     return (
         <div className="d-flex flex-column vh-100">
             <div className="d-flex flex-grow-1">

src/layout/game/GameLayout.js

@@ -12,34 +12,16 @@ const leaderboardData = [
     { rank: 6, name: "Fernando Alonso", score: 7, color: "text-green-600" },
     { rank: 7, name: "Oscar Piastri", score: 6, color: "text-purple-600" },
     { rank: 8, name: "Carlos Sainz", score: 5, color: "text-pink-600" },
-]
-
-const participants = [
-    { id: "1", name: "Lewis Hamilton", status: "host", color: "text-red-600" },
-    { id: "2", name: "Max Verstappen", status: "ready", color: "text-blue-600" },
-    { id: "3", name: "Charles Leclerc", status: "ready", color: "text-red-500" },
-    { id: "4", name: "Lando Norris", status: "waiting", color: "text-orange-500" },
-    { id: "5", name: "George Russell", status: "ready", color: "text-cyan-500" },
-    { id: "6", name: "Fernando Alonso", status: "ready", color: "text-green-600" },
-    { id: "7", name: "Oscar Piastri", status: "waiting", color: "text-purple-600" },
-    { id: "8", name: "Carlos Sainz", status: "ready", color: "text-pink-600" },
-]
-
-const chatMessages = [
-    { id: "1", user: "Lewis Hamilton", message: "Great question! 🏎️", color: "text-red-600" },
-    { id: "2", user: "Max Verstappen", message: "This is getting intense!", color: "text-blue-600" },
-    { id: "3", user: "Charles Leclerc", message: "Close race for first place", color: "text-red-500" },
-    { id: "4", user: "Lando Norris", message: "Good luck everyone! 🏁", color: "text-orange-500" },
-]
+];
 
 function Sidebar() {
-    const location = useLocation()
-    const isGamePlay = location.pathname.includes("/play")
+    const location = useLocation();
+    const isGamePlay = location.pathname.includes("/play");
 
     return (
         <aside className="w-96 bg-white border-r border-gray-200 flex flex-col">
-            {isGamePlay ? <LiveLeaderboard entries={leaderboardData} /> : <ParticipantsList participants={participants} />}
-            <ChatSection messages={chatMessages} />
+            {isGamePlay ? <LiveLeaderboard entries={leaderboardData} /> : <ParticipantsList />}
+            <ChatSection />
         </aside>
     )
 }