Merge pull request #87 from ijun17/feature/#86

Feature/#86 패널티 받으면 토스트 메시지 띄우기

client/src/hooks/socket/useGameSocket.ts

@@ -24,6 +24,7 @@ import { checkTimerDifference } from '@/utils/checkTimerDifference';
 import { playerIdStorageUtils } from '@/utils/playerIdStorage';
 import { SOUND_IDS, SoundManager } from '@/utils/soundManager';
 import { gameSocketConnect, gameSocketDisconnect, offGameEvent, onGameEvent } from '@/stores/socket/gameWorker.ts';
+import { useToastStore } from '@/stores/toast.store';
 
 /**
  * 게임 진행에 필요한 소켓 연결과 상태를 관리하는 Hook입니다.
@@ -217,6 +218,18 @@ export const useGameSocket = () => {
         gameActions.updateGameTerminateType(terminationType);
         navigate(`/game/${roomId}/result`, { replace: true });
       },
+
+      penaltyMessage: async (response: { playerId: string; paneltyWords: string[] }[]) => {
+        for (const { playerId, paneltyWords } of response) {
+          const playerName = useGameSocketStore.getState().players.find((e) => e.playerId === playerId)?.nickname;
+          if (!playerName) continue;
+          useToastStore.getState().actions.addToast({
+            title: '앗! 패널티 💥',
+            description: `${playerName}님, 연관 단어(${paneltyWords.map((e) => `"${e}"`).join(', ')}) 작성으로 패널티 당첨! 다음엔 조심하세요! 😆`,
+          });
+          await new Promise((res) => setTimeout(res, 50));
+        }
+      },
     };
 
     // 이벤트 리스너 등록

core/crdt/test/drawing-text.spec.ts

@@ -138,7 +138,7 @@ test.describe('Game Room Drawing Test', () => {
       drawEventData(drawers[2].page, eventData3);
 
       // 드로잉 종료 대기: 드로잉 시간 35초 + OCR 시간 넉넉하게 15초
-      await new Promise((resolve) => setTimeout(resolve, 50000));
+      await new Promise((resolve) => setTimeout(resolve, 70000));
 
       // 테스트 종료
       await Promise.all(clients.map((e) => e.context.close()));

server/src/game/game.gateway.ts

@@ -156,6 +156,8 @@ export class GameGateway implements OnGatewayDisconnect {
     });
 
     const timerPromise = this.runTimer(roomId, 10000, TimerType.OCR);
+
+    const paneltyList = [];
     const processingTimerPromise = (async () => {
       // drawing 시간이 종료되면, 이미지를 base64로 변환
       const canvasImages = await this.canvasService.getImagesByBase64(roomId);
@@ -168,8 +170,10 @@ export class GameGateway implements OnGatewayDisconnect {
           if (boundaries.length > 0) {
             // 인식된 단어만 추출
             const inferTexts = ocrResult.images[0].fields.map((field) => field.inferText);
-            if (await this.isRelatedWord(currentWord, inferTexts)) {
+            const paneltyWords = await this.filterRelatedWord(currentWord, inferTexts);
+            if (paneltyWords.length > 0) {
               await this.gameService.applyPenalty(roomId, playerId);
+              paneltyList.push({ playerId, paneltyWords });
             }
 
             await this.eraseMessage(roomId, playerId, boundaries);
@@ -189,6 +193,10 @@ export class GameGateway implements OnGatewayDisconnect {
     const result = await this.gameService.handleGuessingTimeout(roomId);
     this.server.to(roomId).emit('roundEnded', result);
 
+    if (paneltyList.length > 0) {
+      this.server.to(roomId).emit('penaltyMessage', paneltyList);
+    }
+
     // 라운드가 종료되면 가상 room 제거 및 구독 해제
     this.canvasService.removeRoom(roomId);
     await this.redisService.unsubscribe(`drawing:${roomId}`);
@@ -340,14 +348,12 @@ export class GameGateway implements OnGatewayDisconnect {
     );
   }
 
-  // 캔버스 내 인식된 단어 중 하나라도 제시어와 연관되어 있다면 true 리턴
-  private async isRelatedWord(suggestedWord: string, inferTexts: string[]) {
-    for (const inferText of inferTexts) {
-      if (await this.clovaStudio.isRelatedWord(suggestedWord, inferText)) {
-        return true;
-      }
-    }
-    return false;
+  // 캔버스 내 인식된 단어 중 제시어와 연관된 단어들을 배열로 반환.
+  private async filterRelatedWord(suggestedWord: string, inferTexts: string[]) {
+    const isRelatedList = await Promise.all(
+      inferTexts.map((word) => this.clovaStudio.isRelatedWord(suggestedWord, word)),
+    );
+    return inferTexts.filter((_, i) => isRelatedList[i]);
   }
 }