Merge pull request #167 from boostcampwm-2024/dev-fe

[FE] 배포 테스트

FE/package.json

@@ -10,14 +10,19 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/material": "^6.1.6",
     "@tanstack/react-query": "^5.59.19",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^6.27.0",
     "socket.io-client": "^4.8.1",
     "zustand": "^5.0.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
+    "@types/node": "^22.9.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",

FE/src/App.tsx

@@ -1,35 +1,19 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import { MainPage } from './pages/MainPage';
+import { GameSetupPage } from './pages/GameSetupPage';
+import { GamePage } from './pages/GamePage';
 
 function App() {
-  const [count, setCount] = useState(0)
-
   return (
-    <>
-      <div>
-        <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
-  )
+    <Router>
+      <Routes>
+        <Route path="/" element={<MainPage />} />
+        <Route path="/game/setup" element={<GameSetupPage />} />
+        <Route path="/game/:id" element={<GamePage />} />
+        <Route path="*" element={<div>not found</div>} />
+      </Routes>
+    </Router>
+  );
 }
 
-export default App
+export default App;

FE/src/api/socket.ts

@@ -0,0 +1,78 @@
+import { io, Socket } from 'socket.io-client';
+import SocketEvents from '../constants/socketEvents';
+
+// 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;
+//   // 다른 이벤트의 데이터 타입을 추가
+// };
+
+class SocketService {
+  private socket: Socket;
+  private url: string;
+
+  constructor(url: string) {
+    this.socket = io();
+    this.url = url;
+  }
+
+  connect() {
+    this.socket = io(this.url);
+    return new Promise((resolve, reject) => {
+      this.socket.on('connect', () => resolve(null));
+      this.socket.on('error', () => reject());
+    });
+  }
+
+  isActive() {
+    return this.socket && this.socket.active;
+  }
+
+  // 이벤트 수신 메서드
+  // on<T extends SocketEvent>(event: T, callback: (data: SocketDataMap[T]) => void) {
+  //   this.socket.on(event, (data: SocketDataMap[T]) => {
+  //     callback(data);
+  //   });
+  // }
+
+  // 메시지 전송 메서드
+  sendChatMessage(message: ChatMessage) {
+    this.socket.emit(SocketEvents.CHAT_MESSAGE, message);
+  }
+
+  // 방 생성 메서드
+  async createRoom(payload: CreateRoomPayload) {
+    await this.connect();
+    this.socket.emit(SocketEvents.CREATE_ROOM, payload);
+  }
+
+  // 연결 종료 메서드
+  disconnect() {
+    this.socket.disconnect();
+  }
+
+  joinRoom(gameId: string, playerName: string) {
+    this.socket.send(SocketEvents.JOIN_ROOM, { gameId, playerName });
+  }
+
+  chatMessage(gameId: string, message: string) {
+    this.socket.send(SocketEvents.CHAT_MESSAGE, { gameId, message });
+  }
+}
+
+export const socketService = new SocketService('http://quizground.duckdns.org:3000/game');

FE/src/components/Chat.tsx

@@ -0,0 +1,61 @@
+import { socketService } from '@/api/socket';
+import { useEffect, useState } from 'react';
+
+const sampleChat = Array(100)
+  .fill(null)
+  .map((_, i) => ({ name: 'user' + i, message: 'messagemessagemessagemessagemessagemessage' }));
+
+const Chat = () => {
+  const [messages, setMessages] = useState<Array<{ name: string; message: string }>>([]);
+  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);
+      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>{e.message}</span>
+          </div>
+        ))}
+      </div>
+      <div className="center border-t border-default h-[3.5rem] p-2">
+        <form onSubmit={handleSubmit} className="w-full h-full">
+          <input
+            className="bg-[#0001] w-[100%] h-[100%] rounded-m p-2"
+            type="text"
+            placeholder="메시지"
+            value={inputValue}
+            onChange={handleInputChange}
+          />
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default Chat;

FE/src/components/ClipboardCopy.tsx

@@ -0,0 +1,26 @@
+import { Button } from '@mui/material';
+
+type ClipboardCopyProps = {
+  valueToCopy: string;
+  message: string;
+  className?: string;
+};
+
+export const ClipboardCopy: React.FC<ClipboardCopyProps> = ({ valueToCopy, message }) => {
+  const handleCopyToClipboard = (): void => {
+    navigator.clipboard
+      .writeText(valueToCopy)
+      .then(() => {
+        alert('클립보드에 복사되었습니다: ');
+      })
+      .catch((err) => {
+        console.error('복사 실패:', err);
+      });
+  };
+
+  return (
+    <div>
+      <Button onClick={handleCopyToClipboard}>{message}</Button>
+    </div>
+  );
+};

FE/src/components/GameHeader.tsx

@@ -0,0 +1,29 @@
+import { ClipboardCopy } from './ClipboardCopy';
+import Card from '@mui/material/Card';
+import { QuizPreview } from './QuizView';
+
+export const GameHeader = () => {
+  // 임시값
+  const pinNum = '123456';
+  const linkURL = 'naver.com';
+  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>
+      </div>
+      <QuizPreview title="title" description="퀴즈퀴즈퀴ㅣ즈" />
+      <div className="flex space-x-4 justify-center">
+        <button className="bg-yellow-400 text-black font-bold py-2 px-4 rounded-md shadow-lg transform hover:translate-y-[-2px] hover:shadow-xl active:translate-y-1 active:shadow-sm transition">
+          퀴즈 설정
+        </button>
+        <button className="bg-blue-500 text-white font-bold py-2 px-4 rounded-md shadow-lg transform hover:translate-y-[-2px] hover:shadow-xl active:translate-y-1 active:shadow-sm transition">
+          게임 시작
+        </button>
+      </div>
+    </Card>
+  );
+};

FE/src/components/HeaderBar.tsx

@@ -0,0 +1,7 @@
+export const HeaderBar = () => {
+  return (
+    <header className="h-[100px] text-l leading-[100px] pl-8 font-bold bg-main text-white">
+      QuizGround
+    </header>
+  );
+};

FE/src/components/Modal.tsx

@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+
+type ModalProps = {
+  isOpen: boolean;
+  title: string;
+  placeholder?: string;
+  initialValue?: string;
+  onClose: () => void;
+  onSubmit: (value: string) => void;
+};
+
+export const Modal: React.FC<ModalProps> = ({
+  isOpen,
+  title,
+  placeholder,
+  initialValue = '',
+  onClose,
+  onSubmit
+}) => {
+  const [inputValue, setInputValue] = useState(initialValue);
+
+  if (!isOpen) return null;
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value);
+  };
+
+  const handleSubmit = () => {
+    onSubmit(inputValue);
+    setInputValue(''); // 입력값 초기화
+  };
+
+  return (
+    <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
+      <div className="bg-white rounded-lg shadow-lg p-6 max-w-sm w-full">
+        <h2 className="text-xl font-semibold mb-4">{title}</h2>
+        <input
+          type="text"
+          placeholder={placeholder}
+          value={inputValue}
+          onChange={handleInputChange}
+          className="border border-gray-300 rounded-md p-2 mb-4 w-full"
+        />
+        <div className="flex justify-end">
+          <button
+            onClick={handleSubmit}
+            className="bg-blue-500 text-white rounded-md px-4 py-2 mr-2 hover:bg-blue-600"
+          >
+            등록
+          </button>
+          {/* 닉네임 등록 모달에서 취소버튼은 없어야할것같은데 일단 넣어둠 */}
+          <button
+            onClick={onClose}
+            className="bg-gray-300 text-gray-700 rounded-md px-4 py-2 hover:bg-gray-400"
+          >
+            취소
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};