[공통] - 채팅 기능 구현 (#138)

* refactor: 그리드 아이템 컴포넌트로 분리 * fix: type 변경 - isMine 추가 * feat: 그리드 아이템 컴포넌트 분리, 유저 입력 로직 추가 - '/' 키 입력 시 말풍선 등장 - 'enter' 키 입력 시 말풍선 제거 * feat: 퀴즈 대기 페이지 채팅 기능 추가 * feat: my position 이벤트 추가 - myPosition 상태를 통해 본인의 위치를 파악 * feat: 채팅 이벤트 추가 및 닉네임 이벤트 수정 * fix: 햄스터 캐릭터 png 수정 * style: 그리드 뷰 스타일 수정 * feat: 새로고침 시 connect 될 때 my position 이벤트 emit --------- Co-authored-by: byeong <[email protected]>
boostcampwm-2024 · Nov 28, 2024 · 13577f7 · 13577f7
1 parent 27c86d0
commit 13577f7
Show file tree

Hide file tree

Showing 5 changed files with 183 additions and 54 deletions.
diff --git a/packages/client/src/pages/quiz-wait/index.tsx b/packages/client/src/pages/quiz-wait/index.tsx
@@ -9,17 +9,17 @@ import LoadingSpinner from '@/shared/assets/icons/loading-alt-loop.svg?react';
 import { apiClient } from '@/shared/api';
 import UserGridView from './ui/UserGridView';
 
-interface Guest {
+export interface Guest {
   nickname: string;
   character: number;
-  message: string;
   position: number;
 }
 
 export default function QuizWait() {
   const { pinCode } = useParams();
   const [userType, setUserType] = useState<string>('');
   const [guests, setGuests] = useState<Guest[]>([]);
+  const [myPosition, setMyPosition] = useState<number>(0);
 
   const guestLink = `${import.meta.env.VITE_CLIENT_URL}/nickname/${pinCode}`;
   const socket = getQuizSocket();
@@ -28,9 +28,20 @@ export default function QuizWait() {
   const navigate = useNavigate();
 
   useEffect(() => {
-    socket.on('nickname', (response) => {
-      setGuests([...response]);
-    });
+    const handleMyPosition = (response: any) => {
+      const { participantList, myPosition } = response;
+      setGuests(participantList);
+      setMyPosition(myPosition);
+    };
+
+    socket.on('my position', handleMyPosition);
+
+    const handleNickname = (response: any) => {
+      const { participantList } = response;
+      setGuests(participantList);
+    };
+
+    socket.on('nickname', handleNickname);
 
     const fetchUserType = async () => {
       const response = await apiClient.get(`/games/${pinCode}/sid/${getCookie('sid')}`);
@@ -43,6 +54,10 @@ export default function QuizWait() {
     });
 
     fetchUserType();
+
+    return () => {
+      socket.off('nickname', handleNickname);
+    };
   }, []);
 
   const handleCopyLink = () => {
@@ -90,7 +105,7 @@ export default function QuizWait() {
               {guests.length === 0 ? 'no' : guests.length} participants
             </p>
           </div>
-          <UserGridView guests={guests} />
+          <UserGridView guests={guests} myPosition={myPosition} />
         </div>
         {userType === 'master' && (
           <div className="flex justify-end min-w-full">

diff --git a/packages/client/src/pages/quiz-wait/ui/UserGridItem.tsx b/packages/client/src/pages/quiz-wait/ui/UserGridItem.tsx
@@ -0,0 +1,121 @@
+import { useRef, useEffect, useState } from 'react';
+
+import { Guest } from '../index';
+import { getQuizSocket } from '@/shared/utils/socket';
+import { useParams } from 'react-router-dom';
+
+interface UserGridItemProps {
+  participant: Guest;
+  isMine: boolean;
+  otherMessage: string | undefined;
+}
+
+const characterNames = ['강아지', '고양이', '돼지', '토끼', '펭귄', '햄스터'];
+
+const randomColor = [
+  'bg-gradient-to-br from-blue-400/80 to-blue-500/80 text-white',
+  'bg-gradient-to-br from-pink-300/80 to-pink-400/80',
+  'bg-gradient-to-br from-yellow-300/80 to-yellow-400/80',
+];
+
+export default function UserGridItem({ participant, isMine, otherMessage }: UserGridItemProps) {
+  // 내 메시지, 상대방들 메시지
+  const [message, setMessage] = useState('');
+  const [isFocused, setIsFocused] = useState(false);
+  const socket = getQuizSocket();
+  const { pinCode } = useParams();
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleMessageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setMessage(e.target.value);
+    socket.emit('message', { pinCode, message: e.target.value, position: participant.position });
+  };
+
+  const handleEnterKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      //메세지 전송
+      setIsFocused(false);
+
+      setTimeout(() => {
+        socket.emit('message', {
+          pinCode,
+          message: '',
+          position: participant.position,
+        });
+        setMessage('');
+      }, 1500);
+    }
+  };
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === '/') {
+        setIsFocused(true);
+        setTimeout(() => {
+          if (inputRef.current) {
+            inputRef.current.focus();
+          }
+        }, 100);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+
+  return (
+    <div key={participant.position} className="relative w-full h-24 flex flex-col items-center">
+      {isMine && isFocused && (
+        <>
+          <input
+            ref={inputRef}
+            value={message}
+            onChange={handleMessageChange}
+            onKeyDown={handleEnterKeyDown}
+            className="absolute -top-7 rounded-md shadow-sm outline-none px-2 w-40 h-6 text-sm"
+          />
+          <div
+            className="absolute inset-0 -top-1 left-12 w-0 h-0
+              border-l-[8px] border-l-transparent
+              border-t-[10px] border-t-white
+              border-r-[8px] border-r-transparent
+              drop-shadow-[0_0.7px_0.7px_rgba(0,0,0,0.1)]
+              "
+          />
+        </>
+      )}
+      {!isFocused && message && (
+        <div
+          className={`flex items-center absolute -top-7 left-1/2 transform -translate-x-1/2 ${randomColor[participant.position % 3]} px-2 h-6 rounded-lg shadow-sm text-sm font-bold whitespace-nowrap`}
+        >
+          {message}
+        </div>
+      )}
+      <div
+        className={`relative w-20 h-20 rounded-full aspect-square flex items-center justify-center shadow-sm hover:shadow transition-shadow ${
+          isMine ? 'bg-blue-500' : 'bg-white'
+        }`}
+      >
+        <img
+          src={`/src/shared/assets/characters/${characterNames[participant.character]}.png`}
+          alt={`${characterNames[participant.character]}character`}
+          className="w-20 h-20 rounded-full"
+        />
+        {!isMine && otherMessage && (
+          <div
+            className={`flex items-center absolute -top-7 left-1/2 transform -translate-x-1/2 ${randomColor[participant.position % 3]} px-2 h-6 rounded-lg shadow-sm text-sm font-semibold whitespace-nowrap`}
+          >
+            {otherMessage}
+          </div>
+        )}
+      </div>
+      <div className="flex justify-center items-center gap-2 w-full mt-2">
+        <div className="w-[10px] h-[10px] rounded-full bg-green-500 animate-blink" />
+        <div className="text-sm text-center truncate font-bold">{participant.nickname}</div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/client/src/pages/quiz-wait/ui/UserGridView.tsx b/packages/client/src/pages/quiz-wait/ui/UserGridView.tsx
@@ -1,55 +1,48 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 
-interface Guest {
-  nickname: string;
-  character: number;
-  message: string;
-  position: number;
-}
+import { Guest } from '../index';
+import UserGridItem from './UserGridItem';
+import { getQuizSocket } from '@/shared/utils/socket';
 
 interface UserGridViewProps {
   guests: Guest[];
+  myPosition: number;
 }
 
-const characterNames = ['강아지', '고양이', '돼지', '토끼', '펭귄', '햄스터'];
+export default function UserGridView({ guests, myPosition }: UserGridViewProps) {
+  const [otherMessage, setOtherMessage] = useState<Map<number, string>>(new Map<number, string>());
+
+  const socket = getQuizSocket();
 
-export default function UserGridView({ guests }: UserGridViewProps) {
-  const [message, setMessage] = useState('');
+  useEffect(() => {
+    socket.on('message', (response) => {
+      setOtherMessage((prevMap) => {
+        const newMap = new Map(prevMap);
+        newMap.set(response.position, response.message);
+        return newMap;
+      });
+    });
+  }, []);
 
   return (
     <div className="w-full bg-blue-50 rounded-xl shadow-md">
-      <div className="grid grid-cols-6 gap-4 p-8">
-        {Array.from({ length: 30 }).map((_, index) => {
+      <div className="grid grid-cols-7 gap-16 p-8">
+        {Array.from({ length: 28 }).map((_, index) => {
           if (index >= guests.length) {
             return (
-              <div key={index} className="flex flex-col items-center">
-                <div className="w-20 h-20 rounded-full bg-gray-200"></div>
+              <div key={index} className={`flex flex-col items-center`}>
+                <div className="w-20 h-20 bg-gray-200 rounded-full"></div>
                 <div className="w-16 h-4 bg-gray-200 rounded-md mt-2"></div>
               </div>
             );
           }
           const participant = guests[index];
           return (
-            <div className="w-full flex flex-col items-center">
-              <div className="relative w-20 h-20 aspect-square bg-white rounded-full flex items-center justify-center shadow-sm hover:shadow transition-shadow">
-                <img
-                  src={`/src/shared/assets/characters/${characterNames[participant.character]}.png`}
-                  alt={`${characterNames[participant.character]}character`}
-                  className="w-20 h-20 rounded-full"
-                />
-                {participant.message && (
-                  <input
-                    className="absolute -top-12 left-1/2 transform -translate-x-1/2 bg-white p-2 rounded-lg shadow-sm text-sm whitespace-nowrap"
-                    onChange={(e) => setMessage(e.target.value)}
-                    value={message}
-                  />
-                )}
-              </div>
-              <div className="flex justify-center items-center gap-2 w-full mt-2">
-                <div className="w-[10px] h-[10px] rounded-full bg-green-500 animate-blink" />
-                <div className="text-sm text-center truncate">{participant.nickname}</div>
-              </div>
-            </div>
+            <UserGridItem
+              participant={participant}
+              isMine={myPosition === participant.position}
+              otherMessage={otherMessage.get(index)}
+            />
           );
         })}
       </div>

diff --git a/packages/client/src/shared/assets/characters/햄스터.png b/packages/client/src/shared/assets/characters/햄스터.png
diff --git a/packages/server/src/module/game/games/game.gateway.ts b/packages/server/src/module/game/games/game.gateway.ts
@@ -54,9 +54,11 @@ export class GameGateway implements OnGatewayConnection, OnGatewayDisconnect {
         const gameInfo = JSON.parse(gameInfoJson);
         const nicknameEventData = {
           participantList: gameInfo.participantList,
-          myPosition: position,
         };
-        client.emit('nickname', nicknameEventData);
+        client.emit('my position', {
+          participantList: gameInfo.participantList,
+          myPosition: position,
+        });
       }
     }
   }
@@ -129,19 +131,11 @@ export class GameGateway implements OnGatewayConnection, OnGatewayDisconnect {
     gameInfo.participantList.push(pariticipantInfo);
     await this.redisService.set(`gameId=${pinCode}`, JSON.stringify(gameInfo));
 
-    const nicknameEventData = { participantList: gameInfo.participantList, myPosition: position };
-    this.server.to(pinCode).emit('nickname', nicknameEventData);
-  }
-
-  //이거 사용하는 이벤트 맞는지 확인/////////////////
-  // @SubscribeMessage('nickname')
-  // async handleNickname(client: Socket, payload: any) {
-  //   const { pinCode } = payload;
+    const nicknameEventData = { participantList: gameInfo.participantList };
 
-  //   const gameInfo = JSON.parse(await this.redisService.get(`gameId=${pinCode}`));
-
-  //   this.server.to(pinCode).emit('nickname', gameInfo.participantList);
-  // }
+    client.emit('my position', { participantList: gameInfo.participantList, myPosition: position });
+    client.to(pinCode).emit('nickname', nicknameEventData);
+  }
 
   @SubscribeMessage('show quiz')
   async handleShowQuiz(client: Socket, payload: any) {
@@ -394,4 +388,10 @@ export class GameGateway implements OnGatewayConnection, OnGatewayDisconnect {
 
     return equals(selectedAnswer, correctAnswers);
   }
+
+  @SubscribeMessage('message')
+  async handleMessage(client: Socket, payload: any) {
+    const { pinCode, message, position } = payload;
+    this.server.to(pinCode).emit('message', { message, position });
+  }
 }