Merge pull request #165 from ijun17/feature-fe-#15#16#31#41#162

[FE] feat#15#16#31#41#162 플레이어 닉네임 입력창 및 게임 대기방 레이아웃 개발

.github/pull_request_template.md

@@ -1,9 +1,7 @@
-- 제목 : feat(issue 번호): 기능명
-  ex) feat(17): pull request template 작성
+- 제목 : [BE/FE] feat#이슈번호 기능명
+  ex) [BE] feat#156 자동배포 구현
   (확인 후 지워주세요)
 
-▲ PR 제목 관련 추가 논의 후 수정  
-
 ## ➕ 이슈 번호
 
 - #이슈번호
@@ -22,14 +20,13 @@
 
 <br/>
 
-
-
-## 🎯 리뷰 요구사항
+## 🎯 리뷰 요구사항 (선택)
 
 - 특별히 봐줬으면 하는 부분이 있다면 적어주세요
 
 <br/>
 
 ## ✅ Check List
+
 - [ ] merge할 브랜치의 위치를 확인했나요?
 - [ ] Label을 지정했나요?

.github/workflows/deploy.yml

@@ -0,0 +1,86 @@
+name: Deploy To EC2
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+#    defaults:
+#      run:
+#        working-directory: ./BE  # BE 디렉토리를 작업 디렉토리로 설정
+
+    steps:
+      - name: Github Repository 파일 불러오기
+        uses: actions/checkout@v4
+
+      - name: Node 설치
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+
+      - name: BE 의존성 설치
+        working-directory: ./BE
+        run: npm ci
+
+      - name: FE 의존성 설치
+        working-directory: ./FE
+        run: npm ci
+
+      - name: .env 파일 만들기
+        run: |
+          echo '${{ secrets.ENV }}' > .env
+
+      - name: 테스트 코드 실행
+        run: npm run test
+
+      - name: 빌드
+        run: npm run build
+
+      - name: github-action 컴퓨터에서 압축하기
+        run: |
+          # 현재 위치 확인 (디버깅용)
+          pwd
+
+          # BE와 FE 모든 필요 파일들을 함께 압축
+          tar -czvf project.tar.gz \
+            BE/dist \
+            BE/package.json \
+            BE/package-lock.json \
+            BE/.env \
+            FE/build \
+            FE/package.json \
+            FE/package-lock.json \
+            FE/.env
+
+          # 압축 파일 내용 확인 (디버깅용)
+          echo "Created archive with contents:"
+          tar -tvf project.tar.gz
+
+      - name: SCP로 EC2에 빌드된 파일 전송하기
+        uses: appleboy/[email protected]
+        with:
+          host: ${{ secrets.EC2_HOST }}
+          username: ${{ secrets.EC2_USERNAME }}
+          key: ${{ secrets.EC2_PRIVATE_KEY }}
+          source: project.tar.gz
+          target: /root/nest-server/tobe
+
+      - name: SSH로 EC2에 접속하기
+        uses: appleboy/[email protected]
+        with:
+          host: ${{ secrets.EC2_HOST }}
+          username: ${{ secrets.EC2_USERNAME }}
+          key: ${{ secrets.EC2_PRIVATE_KEY }}
+          script_stop: true
+          script: |
+            rm -rf /root/nest-server/current
+            mkdir /root/nest-server/current
+            mv /root/nest-server/tobe/project.tar.gz /root/nest-server/current/project.tar.gz
+            cd /root/nest-server/current
+            tar -xvf project.tar.gz
+            npm i
+            pm2 kill
+            pm2 start dist/main.js --name "backend-server"

FE/package.json

@@ -22,6 +22,7 @@
   },
   "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,13 +1,15 @@
 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() {
   return (
     <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>

FE/src/api/socket.ts

@@ -1,26 +1,26 @@
 import { io, Socket } from 'socket.io-client';
 import SocketEvents from '../constants/socketEvents';
 
-type SocketEvent = (typeof SocketEvents)[keyof typeof SocketEvents];
+// type SocketEvent = (typeof SocketEvents)[keyof typeof SocketEvents];
 
-interface ChatMessage {
+type ChatMessage = {
   userId: string;
   message: string;
-}
+};
 
-interface CreateRoomPayload {
-  roomName: string;
-  maxPlayers: number;
+type CreateRoomPayload = {
+  title: string;
+  maxPlayerCount: number;
   gameMode: string;
   isPublic: boolean;
-}
+};
 
 // 이벤트의 데이터 타입을 정의
-interface SocketDataMap {
-  chatMessage: ChatMessage;
-  createRoom: CreateRoomPayload;
-  // 다른 이벤트의 데이터 타입을 추가
-}
+// type SocketDataMap = {
+//   [SocketEvents.CHAT_MESSAGE]: ChatMessage;
+//   [SocketEvents.CREATE_ROOM]: CreateRoomPayload;
+//   // 다른 이벤트의 데이터 타입을 추가
+// };
 
 class SocketService {
   private socket: Socket;
@@ -44,11 +44,11 @@ class SocketService {
   }
 
   // 이벤트 수신 메서드
-  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]) => void) {
+  //   this.socket.on(event, (data: SocketDataMap[T]) => {
+  //     callback(data);
+  //   });
+  // }
 
   // 메시지 전송 메서드
   sendChatMessage(message: ChatMessage) {
@@ -65,6 +65,14 @@ class SocketService {
   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('');

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>
+  );
+};