Feat: 채팅 기능 추가

src/components/RoundCheckIn/CallAdminChat.tsx

@@ -1,25 +1,73 @@
-import { MatchPlayerScoreInfos } from '@components/RoundCheckIn';
+import { MatchMessages, MatchPlayerScoreInfos } from '@components/RoundCheckIn';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
+import Image from 'next/image';
 import { Client } from '@stomp/stompjs';
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState, ChangeEvent } from 'react';
+import { useRouter } from 'next/router';
 
 interface CallAdminChatProps {
   client: Client | undefined;
   matchId: string;
   players: MatchPlayerScoreInfos[];
+  matchMessage: MatchMessages[];
+  requestUser: number;
 }
 
-interface Chat {
-  channelId: number;
-  content: string;
-  matchId: number;
-  participantId: number;
-  type: string;
-}
+const CallAdminChat = ({
+  client,
+  matchId,
+  players,
+  matchMessage,
+  requestUser,
+}: CallAdminChatProps) => {
+  const [chats, setChats] = useState<MatchMessages[]>([]);
+  const [inputMessage, setInputMessage] = useState('');
+  const router = useRouter();
+  const { channelLink } = router.query;
+
+  const handleInputMessage = (e: ChangeEvent<HTMLInputElement>) => {
+    setInputMessage(e.target.value);
+  };
+
+  const handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      sendMessage();
+    }
+  };
+
+  const sendMessage = () => {
+    if (!client || inputMessage.length === 0) return;
+    const requestUserParticipantId = players.find(
+      (player) => player.matchPlayerId === requestUser,
+    )?.participantId;
+
+    const newMessage = {
+      channelId: channelLink,
+      content: inputMessage,
+      matchId,
+      participantId: requestUserParticipantId,
+      type: 'TEXT',
+    };
+    client.publish({
+      destination: `/app/match/chat`,
+      body: JSON.stringify(newMessage),
+    });
+    setInputMessage('');
+  };
+
+  const findUserIMG = (playerMatchId: number): string => {
+    const user = players.find((player) => player.matchPlayerId === playerMatchId);
+    if (!user) return '';
+    return user.profileSrc;
+  };
 
-const CallAdminChat = ({ client, matchId, players }: CallAdminChatProps) => {
-  const [chats, setChats] = useState<Chat[]>([]);
+  const findUserName = (playerMatchId: number): string => {
+    const user = players.find((player) => player.matchPlayerId === playerMatchId);
+    if (!user) return '';
+    return user.gameId;
+  };
 
   useEffect(() => {
     if (!client) return;
@@ -31,20 +79,53 @@ const CallAdminChat = ({ client, matchId, players }: CallAdminChatProps) => {
       subscription.unsubscribe();
     };
   }, [client]);
+
+  useEffect(() => {
+    if (matchMessage.length === 0) return;
+    setChats(matchMessage);
+  }, [matchMessage]);
+
   return (
     <Container>
       <Header>
         <div>Chat</div>
         <CallAdminButton>Call Admin</CallAdminButton>
       </Header>
-      <ChattingWrapper></ChattingWrapper>
+      <ChattingWrapper>
+        {chats.length !== 0 &&
+          chats.map((message, idx) => (
+            <ChattingInfo key={idx}>
+              <ChattingContent>
+                <ImageWrapper>
+                  <Image
+                    src={findUserIMG(message.matchId)}
+                    alt='프로필사진'
+                    width={45}
+                    height={45}
+                  />
+                </ImageWrapper>
+                <ContentWrapper>
+                  <ContentName>{findUserName(message.matchId)}</ContentName>
+                  <ContentText>{message.content}</ContentText>
+                </ContentWrapper>
+              </ChattingContent>
+            </ChattingInfo>
+          ))}
+      </ChattingWrapper>
       <div
         css={css`
           position: relative;
         `}
       >
-        <InputChat />
-        <SubmitButton>입력</SubmitButton>
+        <InputChat
+          type='text'
+          placeholder='메세지를 입력해주세요'
+          onChange={handleInputMessage}
+          onKeyUp={handleKeyPress}
+        />
+        <SubmitButton onClick={sendMessage} disabled={inputMessage.length === 0}>
+          입력
+        </SubmitButton>
       </div>
     </Container>
   );
@@ -53,7 +134,7 @@ const CallAdminChat = ({ client, matchId, players }: CallAdminChatProps) => {
 export default CallAdminChat;
 
 const Container = styled.div`
-  height: 40rem;
+  height: 50rem;
   background: #fff;
   border-radius: 0.5rem;
 `;
@@ -76,10 +157,42 @@ const CallAdminButton = styled.button`
 `;
 
 const ChattingWrapper = styled.div`
-  height: 30rem;
+  height: 40rem;
   overflow: scroll;
 `;
 
+const ImageWrapper = styled.div`
+  border-radius: 0.3rem;
+`;
+
+const ContentWrapper = styled.div`
+  margin-left: 0.5rem;
+`;
+
+const ContentName = styled.div`
+  padding-top: 0.2rem;
+`;
+
+const ContentText = styled.div`
+  padding: 0.5rem;
+  border: 1px solid black;
+  border-radius: 0 1rem 1rem 1rem;
+  display: flex;
+  align-items: center;
+  font-size: 1.3rem;
+`;
+
+const ChattingInfo = styled.div`
+  min-height: 5rem;
+  display: flex;
+  align-items: center;
+  margin: 0.4rem;
+`;
+
+const ChattingContent = styled.div`
+  display: flex;
+`;
+
 const InputChat = styled.input`
   width: 90%;
   height: 4rem;