Merge pull request #172 from ijun17/feature-fe#16#20

[FE] feat#16#20

FE/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview"
@@ -40,4 +40,4 @@
     "typescript-eslint": "^8.11.0",
     "vite": "^5.4.10"
   }
-}
+}

FE/src/App.tsx

@@ -9,7 +9,7 @@ function App() {
       <Routes>
         <Route path="/" element={<MainPage />} />
         <Route path="/game/setup" element={<GameSetupPage />} />
-        <Route path="/game/:id" element={<GamePage />} />
+        <Route path="/game/:gameId" element={<GamePage />} />
         <Route path="*" element={<div>not found</div>} />
       </Routes>
     </Router>

FE/src/api/socket.ts

@@ -1,78 +1,66 @@
 import { io, Socket } from 'socket.io-client';
 import SocketEvents from '../constants/socketEvents';
+import { SocketDataMap } from './socketEventTypes';
 
-// type SocketEvent = (typeof SocketEvents)[keyof typeof SocketEvents];
-
-type ChatMessage = {
-  userId: string;
-  message: string;
-};
-
-type CreateRoomPayload = {
-  title: string;
-  maxPlayerCount: number;
-  gameMode: string;
-  isPublic: boolean;
-};
-
-// 이벤트의 데이터 타입을 정의
-// type SocketDataMap = {
-//   [SocketEvents.CHAT_MESSAGE]: ChatMessage;
-//   [SocketEvents.CREATE_ROOM]: CreateRoomPayload;
-//   // 다른 이벤트의 데이터 타입을 추가
-// };
+type SocketEvent = keyof SocketDataMap;
 
 class SocketService {
   private socket: Socket;
   private url: string;
+  private handlers: (() => void)[];
 
   constructor(url: string) {
     this.socket = io();
     this.url = url;
+    this.handlers = [];
   }
 
-  connect() {
+  async connect() {
+    if (this.isActive()) return;
     this.socket = io(this.url);
-    return new Promise((resolve, reject) => {
-      this.socket.on('connect', () => resolve(null));
+    await new Promise<void>((resolve, reject) => {
+      this.socket.on('connect', () => resolve());
       this.socket.on('error', () => reject());
     });
+    this.handlers.forEach((h) => h());
+    return;
+  }
+
+  disconnect() {
+    this.socket.disconnect();
   }
 
   isActive() {
-    return this.socket && this.socket.active;
+    return this.socket && this.socket.connected;
   }
 
-  // 이벤트 수신 메서드
-  // on<T extends SocketEvent>(event: T, callback: (data: SocketDataMap[T]) => void) {
-  //   this.socket.on(event, (data: SocketDataMap[T]) => {
-  //     callback(data);
-  //   });
-  // }
+  on<T extends SocketEvent>(event: T, callback: (data: SocketDataMap[T]['response']) => void) {
+    const handler = () => this.socket.on(event as string, callback);
+    this.handlers.push(handler);
+    if (this.isActive()) handler();
+  }
 
-  // 메시지 전송 메서드
-  sendChatMessage(message: ChatMessage) {
-    this.socket.emit(SocketEvents.CHAT_MESSAGE, message);
+  emit<T extends SocketEvent>(event: T, data: SocketDataMap[T]['request']) {
+    this.socket.emit(event, data);
   }
 
-  // 방 생성 메서드
-  async createRoom(payload: CreateRoomPayload) {
-    await this.connect();
-    this.socket.emit(SocketEvents.CREATE_ROOM, payload);
+  sendChatMessage(message: SocketDataMap[typeof SocketEvents.CHAT_MESSAGE]['request']) {
+    this.emit(SocketEvents.CHAT_MESSAGE, message);
   }
 
-  // 연결 종료 메서드
-  disconnect() {
-    this.socket.disconnect();
+  async createRoom(payload: SocketDataMap['createRoom']['request']) {
+    await this.connect();
+    this.socket.emit(SocketEvents.CREATE_ROOM, payload);
   }
 
-  joinRoom(gameId: string, playerName: string) {
-    this.socket.send(SocketEvents.JOIN_ROOM, { gameId, playerName });
+  async joinRoom(gameId: string, playerName: string) {
+    if (!this.isActive()) await this.connect();
+    this.socket.emit(SocketEvents.JOIN_ROOM, { gameId, playerName });
   }
 
   chatMessage(gameId: string, message: string) {
-    this.socket.send(SocketEvents.CHAT_MESSAGE, { gameId, message });
+    this.socket.emit(SocketEvents.CHAT_MESSAGE, { gameId, message });
   }
 }
 
-export const socketService = new SocketService('http://quizground.duckdns.org:3000/game');
+export const socketService = new SocketService('http://' + window.location.hostname + ':3000/game');

FE/src/api/socketEventTypes.ts

@@ -0,0 +1,165 @@
+// 채팅 메시지 전달 타입
+type ChatMessageRequest = {
+  gameId: string; // PIN
+  message: string;
+};
+
+type ChatMessageResponse = {
+  playerId: string; // socketId
+  playerName: string;
+  message: string;
+  timestamp: Date;
+};
+
+// 플레이어 위치 업데이트 타입
+type UpdatePositionRequest = {
+  newPosition: [number, number];
+};
+
+type UpdatePositionResponse = {
+  playerId: string; // socketId
+  playerPosition: [number, number];
+};
+
+// 게임방 생성 타입
+type CreateRoomRequest = {
+  title: string;
+  gameMode: 'RANKING' | 'SURVIVAL';
+  maxPlayerCount: number;
+  isPublic: boolean;
+};
+
+type CreateRoomResponse = {
+  gameId: string; // PIN
+};
+
+// 게임방 옵션 수정 타입
+type UpdateRoomOptionRequest = {
+  gameId: string;
+  title: string;
+  gameMode: 'RANKING' | 'SURVIVAL';
+  maxPlayerCount: number;
+  isPublic: boolean;
+};
+
+type UpdateRoomOptionResponse = {
+  title: string;
+  gameMode: 'RANKING' | 'SURVIVAL';
+  maxPlayerCount: number;
+  isPublic: boolean;
+};
+
+// 게임방 퀴즈셋 수정 타입
+type UpdateRoomQuizsetRequest = {
+  quizsetId: number;
+  quizCount: number;
+};
+
+type UpdateRoomQuizsetResponse = {
+  quizsetId: number;
+  quizCount: number;
+};
+
+// 게임방 입장 타입
+type JoinRoomRequest = {
+  gameId: string;
+  playerName: string;
+};
+
+type JoinRoomResponse = {
+  players: Array<{
+    playerId: string; // socketId
+    playerName: string;
+    playerPosition: [number, number];
+  }>;
+};
+
+// 게임 시작 타입
+type StartGameRequest = {
+  gameId: string;
+};
+
+type StartGameResponse = Record<string, never>; // 빈 객체
+
+// 게임 정지 타입
+type StopGameRequest = {
+  gameId: string;
+};
+
+type StopGameResponse = {
+  status: string;
+};
+
+// 퀴즈 시간 종료 타입
+type EndQuizTimeEvent = {
+  gameId: string;
+};
+
+// 퀴즈 시작 타입
+type StartQuizTimeEvent = {
+  quiz: string;
+  options: string[];
+  quizEndTime: Date;
+};
+
+// 게임 점수 업데이트 타입
+type UpdateScoreEvent = {
+  scores: Map<string, number>; // Map<playerId, score>
+};
+
+// 게임방 퇴장 타입
+type ExitRoomEvent = {
+  playerId: string;
+};
+
+// 전체 소켓 이벤트 타입 맵
+export type SocketDataMap = {
+  chatMessage: {
+    request: ChatMessageRequest;
+    response: ChatMessageResponse;
+  };
+  updatePosition: {
+    request: UpdatePositionRequest;
+    response: UpdatePositionResponse;
+  };
+  createRoom: {
+    request: CreateRoomRequest;
+    response: CreateRoomResponse;
+  };
+  updateRoomOption: {
+    request: UpdateRoomOptionRequest;
+    response: UpdateRoomOptionResponse;
+  };
+  updateRoomQuizset: {
+    request: UpdateRoomQuizsetRequest;
+    response: UpdateRoomQuizsetResponse;
+  };
+  joinRoom: {
+    request: JoinRoomRequest;
+    response: JoinRoomResponse;
+  };
+  startGame: {
+    request: StartGameRequest;
+    response: StartGameResponse;
+  };
+  stopGame: {
+    request: StopGameRequest;
+    response: StopGameResponse;
+  };
+  endQuizTime: {
+    request: null;
+    response: EndQuizTimeEvent;
+  };
+  startQuizTime: {
+    request: null;
+    response: StartQuizTimeEvent;
+  };
+  updateScore: {
+    request: null;
+    response: UpdateScoreEvent;
+  };
+  exitRoom: {
+    request: null;
+    response: ExitRoomEvent;
+  };
+};

FE/src/components/Chat.tsx

@@ -1,44 +1,33 @@
 import { socketService } from '@/api/socket';
-import { useEffect, useState } from 'react';
-
-const sampleChat = Array(100)
-  .fill(null)
-  .map((_, i) => ({ name: 'user' + i, message: 'messagemessagemessagemessagemessagemessage' }));
+import { useChatStore } from '@/store/useChatStore';
+import { useRoomStore } from '@/store/useRoomStore';
+import { useState } from 'react';
 
 const Chat = () => {
-  const [messages, setMessages] = useState<Array<{ name: string; message: string }>>([]);
+  const gameId = useRoomStore((state) => state.gameId);
+  const messages = useChatStore((state) => state.messages);
   const [inputValue, setInputValue] = useState('');
 
-  useEffect(() => {
-    setMessages(sampleChat); //TODO 나중에 고쳐야 함
-    // 서버에서 메시지를 받을 때
-    // socket.on('chat message', (message) => {
-    //   setMessages((prevMessages) => [...prevMessages, message]);
-    // });
-    // return () => {
-    //   socket.off('chat message');
-    // };
-  }, []);
-
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue(e.target.value);
   };
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    if (inputValue.trim()) {
-      socketService.chatMessage('1234', inputValue);
+    if (inputValue.trim() && gameId) {
+      socketService.chatMessage(gameId, inputValue);
       setInputValue('');
     }
   };
+
   return (
     <div className="component-default h-[100%]">
       <div className="border-b border-default center h-[2.5rem]">메시지</div>
       <div className="p-2 h-[calc(100%-6rem)] overflow-y-scroll">
         {messages.map((e, i) => (
           <div className="break-words leading-5 mt-3" key={i}>
-            <span className="font-bold mr-2">{e.name}</span>
+            <span className="font-bold mr-2">{e.playerName}</span>
             <span>{e.message}</span>
           </div>
         ))}

FE/src/components/GameHeader.tsx

@@ -1,19 +1,20 @@
 import { ClipboardCopy } from './ClipboardCopy';
 import Card from '@mui/material/Card';
 import { QuizPreview } from './QuizView';
+import { useParams } from 'react-router-dom';
 
 export const GameHeader = () => {
-  // 임시값
-  const pinNum = '123456';
-  const linkURL = 'naver.com';
+  const { gameId } = useParams<{ gameId: string }>();
+  const pinNum = String(gameId);
+  const linkURL = window.location.hostname + `/game/${gameId}`;
   return (
     <Card className="p-4 border border-blue-600 shadow-xl rounded-md h-[280px] w-[1000px] bg-gradient-to-b from-blue-500 to-blue-700 text-white">
       <div className="flex justify-center mb-4">
         <ClipboardCopy valueToCopy={pinNum} message={`PIN: ${pinNum} 복사`} />
         <ClipboardCopy valueToCopy={linkURL} message="공유 링크 복사" />
       </div>
       <div className="flex flex-col items-center justify-center text-center space-y-2">
-        <span className="text-xl font-semibold">퀴즈이름22</span>
+        <span className="text-xl font-semibold">퀴즈이름</span>
       </div>
       <QuizPreview title="title" description="퀴즈퀴즈퀴ㅣ즈" />
       <div className="flex space-x-4 justify-center">