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

[FE] Dev fe -> release
boostcampwm-2024 · Nov 28, 2024 · 1a01a5e · 1a01a5e
2 parents 0eb1fec + 5bbb8c3
commit 1a01a5e
Show file tree

Hide file tree

Showing 70 changed files with 2,237 additions and 1,585 deletions.
diff --git a/FE/public/cursor.png b/FE/public/cursor.png
diff --git a/FE/src/App.tsx b/FE/src/App.tsx
@@ -1,12 +1,10 @@
 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';
-import { QuizSetupPage } from './pages/QuizSetupPage';
-import { GameLobbyPage } from './pages/GameLobbyPage';
-import { LoginPage } from './pages/LoginPage';
-import { MyPage } from './pages/MyPage';
-import { PinPage } from './pages/PinPage';
+import { GameSetupPage, GamePage, PinPage } from './features/game';
+import { QuizSetupPage } from './features/quiz';
+import { GameLobbyPage } from './features/lobby';
+import { LoginPage } from './features/auth';
+import { MyPage } from './features/user';
 
 function App() {
   return (

diff --git a/FE/src/api/socket/mocks/SocketMock.ts b/FE/src/api/socket/mocks/SocketMock.ts
@@ -6,8 +6,27 @@ type SocketEvent = keyof SocketDataMap;
 export class SocketMock {
   private listenerSet: Record<string, ((...args: unknown[]) => void)[]> = {};
   private onAnyListenerList: ((event: string, ...args: unknown[]) => void)[] = [];
+  initialrized: Promise<void>;
   constructor() {
-    console.log(`Mock WebSocket 연결`);
+    console.log(`%c Mock WebSocket 연결`, 'color:yellow; font-weight:bold;');
+    this.initialrized = new Promise((resolve) => {
+      this.delay(0).then(() => {
+        resolve();
+      });
+    });
+    this.initialrized.then(() => {
+      const currentPlayer = {
+        playerId: this.id,
+        playerName: 'Me',
+        playerPosition: [0.5, 0.5] as [number, number]
+      };
+      this.emitServer('joinRoom', { players: [currentPlayer] });
+      this.addPlayers([currentPlayer]);
+      this.emitServer('getSelfId', { playerId: this.id });
+      this.emitServer('setPlayerName', { playerId: this.id, playerName: 'Me' });
+    });
+
+    // }
   }
 
   /**
@@ -28,12 +47,10 @@ export class SocketMock {
     this.onAnyListenerList.push(listener);
   }
   emit<T extends SocketEvent>(event: T, data: SocketDataMap[T]['request']) {
-    //여기서 서버에 데이터 전송
+    console.log(`%c SERVER_SOCKET[${event}]`, 'background:blue; color:white', data);
     switch (event) {
       case SocketEvents.CHAT_MESSAGE:
         return this.handleChat(data as SocketDataMap[typeof SocketEvents.CHAT_MESSAGE]['request']);
-      case SocketEvents.JOIN_ROOM:
-        return this.handleJoin(data as SocketDataMap[typeof SocketEvents.JOIN_ROOM]['request']);
       case SocketEvents.UPDATE_POSITION:
         return this.handlePosition(
           data as SocketDataMap[typeof SocketEvents.UPDATE_POSITION]['request']
@@ -119,18 +136,6 @@ export class SocketMock {
     await this.delay(0.1);
     this.chatMessage(this.id, data.message);
   }
-  private async handleJoin(data: SocketDataMap[typeof SocketEvents.JOIN_ROOM]['request']) {
-    if (this.getPlayer(this.id)) return;
-    await this.delay(0.1);
-    const currentPlayer: (typeof this.players)[string] = {
-      playerId: this.id,
-      playerName: data.playerName,
-      playerPosition: [0.5, 0.5]
-    };
-    this.emitServer(SocketEvents.JOIN_ROOM, { players: this.getPlayerList() });
-    this.emitServer(SocketEvents.JOIN_ROOM, { players: [currentPlayer] });
-    this.addPlayers([currentPlayer]);
-  }
   private async handlePosition(
     data: SocketDataMap[typeof SocketEvents.UPDATE_POSITION]['request']
   ) {
@@ -159,7 +164,10 @@ export class SocketMock {
    * calculate()
    * progressQuiz()
    * updatePlayerPosition()
-   * chatMessage
+   * chatMessage()
+   * createDummyPlayer()
+   * chatRandom()
+   * moveRandom()
    */
   getPlayer(id: string) {
     return this.players[id];
@@ -169,6 +177,7 @@ export class SocketMock {
   }
   addPlayers(players: Array<SocketMock['players'][keyof SocketMock['players']]>) {
     players.forEach((p) => (this.players[p.playerId] = p));
+    this.emitServer('joinRoom', { players });
   }
   setQuiz(quiz: string, quizSecond: number, choiceList: string[]) {
     const COUNT_DOWN_TIME = 3000;
@@ -221,4 +230,50 @@ export class SocketMock {
       timestamp: 0
     });
   }
+
+  async createDummyPlayer(count: number) {
+    await this.initialrized;
+    const playerCount = Object.keys(this.players).length;
+    this.addPlayers(
+      Array(count)
+        .fill(null)
+        .map((_, i) => ({
+          playerId: String(playerCount + i + 1),
+          playerName: 'player' + (playerCount + i),
+          playerPosition: [this.random(), this.random()]
+        }))
+    );
+  }
+
+  async chatRandom(testSec: number, chatPerSecPerPlyaer: number = 1) {
+    await this.initialrized;
+    const playerCount = this.getPlayerList().length;
+    for (let j = 0; j < testSec; j++) {
+      for (const player of this.getPlayerList()) {
+        if (player.playerId === this.id) continue;
+        await this.delay(1 / playerCount / chatPerSecPerPlyaer);
+        this.chatMessage(player.playerId, 'message' + player.playerId);
+      }
+    }
+  }
+
+  async moveRandom(testSec: number, movePerSecPerPlyaer: number = 1) {
+    await this.initialrized;
+    const playerCount = this.getPlayerList().length;
+    for (let j = 0; j < testSec; j++) {
+      for (const player of this.getPlayerList()) {
+        if (player.playerId === this.id) continue;
+        await this.delay(1 / playerCount / movePerSecPerPlyaer);
+        this.updatePlayerPosition(player.playerId, [this.random(), this.random()]);
+      }
+    }
+  }
+
+  async performenceTest(fnList: unknown[]) {
+    const start = performance.now();
+    Promise.all(fnList).then(() => {
+      const end = performance.now();
+      this.log(`PERFORMENCE: ${((end - start) / 1000).toFixed(2)}s`);
+    });
+  }
 }
diff --git a/FE/src/api/socket/mocks/socketMocks/SocketMockChat.ts b/FE/src/api/socket/mocks/socketMocks/SocketMockChat.ts
@@ -3,26 +3,8 @@ import { SocketMock } from '../SocketMock';
 export default class SocketMockChat extends SocketMock {
   constructor() {
     super();
-    this.addPlayers(
-      Array(10)
-        .fill(null)
-        .map((_, i) => ({
-          playerId: String(i + 1),
-          playerName: 'player' + i,
-          playerPosition: [i / 10, i / 10]
-        }))
-    );
-    this.testChat();
-  }
-  // 10명의 유저가 채팅을 보냄
-  async testChat() {
-    const playerCount = this.getPlayerList().length;
-    const testTime = 5;
-    for (let j = 0; j < testTime; j++) {
-      for (const player of this.getPlayerList()) {
-        await this.delay(1 / playerCount);
-        this.chatMessage(player.playerId, 'message' + player.playerId);
-      }
-    }
+    this.createDummyPlayer(10);
+
+    this.performenceTest([this.chatRandom(5, 1)]);
   }
 }
diff --git a/FE/src/api/socket/mocks/socketMocks/SocketMockLoadTest.ts b/FE/src/api/socket/mocks/socketMocks/SocketMockLoadTest.ts
@@ -3,38 +3,7 @@ import { SocketMock } from '../SocketMock';
 export default class SocketMockLoadTest extends SocketMock {
   constructor() {
     super();
-    this.addPlayers(
-      Array(100)
-        .fill(null)
-        .map((_, i) => ({
-          playerId: String(i + 1),
-          playerName: 'player' + i,
-          playerPosition: [i / 10, i / 10]
-        }))
-    );
-    this.testChat();
-    this.testMove();
-  }
-
-  async testChat() {
-    const playerCount = this.getPlayerList().length;
-    const testTime = 10;
-    for (let j = 0; j < testTime; j++) {
-      for (const player of this.getPlayerList()) {
-        await this.delay(1 / playerCount);
-        this.chatMessage(player.playerId, 'message' + player.playerId);
-      }
-    }
-  }
-
-  async testMove() {
-    const playerCount = this.getPlayerList().length;
-    const testTime = 10;
-    for (let j = 0; j < testTime; j++) {
-      for (const player of this.getPlayerList()) {
-        await this.delay(1 / playerCount);
-        this.updatePlayerPosition(player.playerId, [this.random(), this.random()]);
-      }
-    }
+    this.createDummyPlayer(100);
+    this.performenceTest([this.chatRandom(5, 1), this.moveRandom(5, 1)]);
   }
 }
diff --git a/FE/src/api/socket/mocks/socketMocks/SocketMockLoadTestOnlyMove.ts b/FE/src/api/socket/mocks/socketMocks/SocketMockLoadTestOnlyMove.ts
@@ -0,0 +1,9 @@
+import { SocketMock } from '../SocketMock';
+
+export default class SocketMockLoadTestOnlyMove extends SocketMock {
+  constructor() {
+    super();
+    this.createDummyPlayer(200);
+    this.performenceTest([this.moveRandom(5, 1)]);
+  }
+}
diff --git a/FE/src/api/socket/mocks/socketMocks/SocketMockLoadTestWithQuiz.ts b/FE/src/api/socket/mocks/socketMocks/SocketMockLoadTestWithQuiz.ts
@@ -3,40 +3,8 @@ import { SocketMock } from '../SocketMock';
 export default class SocketMockLoadTestWithQuiz extends SocketMock {
   constructor() {
     super();
-    this.addPlayers(
-      Array(100)
-        .fill(null)
-        .map((_, i) => ({
-          playerId: String(i + 1),
-          playerName: 'player' + i,
-          playerPosition: [i / 10, i / 10]
-        }))
-    );
-    this.testChat();
-    this.testMove();
-    this.testQuiz();
-  }
-
-  async testChat() {
-    const playerCount = this.getPlayerList().length;
-    const testTime = 10;
-    for (let j = 0; j < testTime; j++) {
-      for (const player of this.getPlayerList()) {
-        await this.delay(1 / playerCount);
-        this.chatMessage(player.playerId, 'message' + player.playerId);
-      }
-    }
-  }
-
-  async testMove() {
-    const playerCount = this.getPlayerList().length;
-    const testTime = 10;
-    for (let j = 0; j < testTime; j++) {
-      for (const player of this.getPlayerList()) {
-        await this.delay(1 / playerCount);
-        this.updatePlayerPosition(player.playerId, [this.random(), this.random()]);
-      }
-    }
+    this.createDummyPlayer(100);
+    this.performenceTest([this.chatRandom(10, 1), this.moveRandom(10, 1), this.testQuiz()]);
   }
 
   async testQuiz() {

diff --git a/FE/src/api/socket/mocks/socketMocks/SocketMockNextQuiz.ts b/FE/src/api/socket/mocks/socketMocks/SocketMockNextQuiz.ts
@@ -3,15 +3,7 @@ import { SocketMock } from '../SocketMock';
 export default class SocketMockNextQuiz extends SocketMock {
   constructor() {
     super();
-    this.addPlayers(
-      Array(10)
-        .fill(null)
-        .map((_, i) => ({
-          playerId: String(i + 1),
-          playerName: 'player' + i,
-          playerPosition: [i / 10, i / 10]
-        }))
-    );
+    this.createDummyPlayer(10);
     this.test();
   }
 

diff --git a/FE/src/api/socket/mocks/socketMocks/SocketMockStartEnd.ts b/FE/src/api/socket/mocks/socketMocks/SocketMockStartEnd.ts
@@ -3,15 +3,7 @@ import { SocketMock } from '../SocketMock';
 export default class SocketMockStartEnd extends SocketMock {
   constructor() {
     super();
-    this.addPlayers(
-      Array(10)
-        .fill(null)
-        .map((_, i) => ({
-          playerId: String(i + 1),
-          playerName: 'player' + i,
-          playerPosition: [i / 10, i / 10]
-        }))
-    );
+    this.createDummyPlayer(10);
     this.test();
   }
 

diff --git a/FE/src/api/socket/mocks/socketMocks/SocketMockStartGame.ts b/FE/src/api/socket/mocks/socketMocks/SocketMockStartGame.ts
@@ -3,15 +3,7 @@ import { SocketMock } from '../SocketMock';
 export default class SocketMockStartGame extends SocketMock {
   constructor() {
     super();
-    this.addPlayers(
-      Array(10)
-        .fill(null)
-        .map((_, i) => ({
-          playerId: String(i + 1),
-          playerName: 'player' + i,
-          playerPosition: [i / 10, i / 10]
-        }))
-    );
+    this.createDummyPlayer(10);
     this.test();
   }
 

diff --git a/FE/src/api/socket/mocks/socketMocks/index.ts b/FE/src/api/socket/mocks/socketMocks/index.ts
@@ -1,5 +1,6 @@
 import SocketMockChat from './SocketMockChat';
 import SocketMockLoadTest from './SocketMockLoadTest';
+import SocketMockLoadTestOnlyMove from './SocketMockLoadTestOnlyMove';
 import SocketMockLoadTestWithQuiz from './SocketMockLoadTestWithQuiz';
 import SocketMockNextQuiz from './SocketMockNextQuiz';
 import SocketMockStartEnd from './SocketMockStartEnd';
@@ -11,7 +12,8 @@ const mockMap = {
   'test-next-quiz': SocketMockNextQuiz,
   'test-load': SocketMockLoadTest,
   'test-load-with-quiz': SocketMockLoadTestWithQuiz,
-  'test-start-end': SocketMockStartEnd
+  'test-start-end': SocketMockStartEnd,
+  'test-load-only-move': SocketMockLoadTestOnlyMove
 } as const;
 
 export default mockMap;