Merge pull request #16 from pepero-1/feature/#4

useInput 에 clear 추가 , ChatBubble 컴포넌트 생성, 게임 내 채팅 구현

src/components/Game/GameChat/index.tsx

@@ -1,5 +1,95 @@
-const GameChat = () => {
-  return <div>game chat</div>;
+import {
+  Button,
+  Card,
+  CardBody,
+  Input,
+  InputGroup,
+  InputRightElement,
+} from "@chakra-ui/react";
+import { useEffect, useState } from "react";
+import { io } from "socket.io-client";
+import useInput from "../../../hooks/useInput";
+import ChatBubble from "../../common/ChatBubble";
+
+interface Message {
+  id: string;
+  text: string;
+}
+const GameChat = ({ gameId }) => {
+  console.log(gameId);
+  const token = JSON.parse(localStorage.getItem("token") as string);
+
+  const socket = io(`https://fastcampus-chat.net/chat?chatId=${gameId}`, {
+    extraHeaders: {
+      Authorization: `Bearer ${token.accessToken}`,
+      serverId: import.meta.env.VITE_APP_SERVER_ID,
+    },
+  });
+
+  // 메세지 데이터
+  const [message, setMessage] = useState<Message>({
+    id: "",
+    text: "",
+  });
+  const [messages, setMessages]: any = useState([]);
+  const messageValue = useInput("");
+
+  useEffect(() => {
+    socket.on("message-to-client", (messageObject) => {
+      // 메시지 데이터, 작성 유저 상태 저장
+      const copy = { ...message };
+      copy.id = messageObject.userId;
+      copy.text = messageObject.text;
+      setMessage(copy);
+    });
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [socket]);
+
+  // 메시지 값 변화시(소켓 통신 시) 콘솔에 메시지 데이터 출력
+  useEffect(() => {
+    if (message.id !== "") {
+      console.log(message);
+      setMessages([...messages, message]);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [message.text]);
+
+  const submitMessage = () => {
+    socket.emit("message-to-server", messageValue.value);
+    messageValue.clear();
+  };
+
+  const handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "Enter") {
+      submitMessage();
+    }
+  };
+
+  return (
+    <Card>
+      <CardBody>
+        {messages.map((message, index) => (
+          <ChatBubble key={index} userId={message.id} text={message.text} />
+        ))}
+      </CardBody>
+      <InputGroup size="md">
+        <Input
+          pr="4.5rem"
+          type="text"
+          placeholder="채팅내용"
+          value={messageValue.value}
+          onChange={messageValue.onChange}
+          onKeyPress={handleKeyPress}
+        />
+        <InputRightElement width="4.5rem">
+          <Button h="1.75rem" size="sm" onClick={submitMessage}>
+            전송
+          </Button>
+        </InputRightElement>
+      </InputGroup>
+    </Card>
+  );
 };
 
 export default GameChat;

src/components/common/ChatBubble.tsx

@@ -0,0 +1,32 @@
+import { BoxProps, Container, Text } from "@chakra-ui/react";
+import React from "react";
+import styled from "styled-components";
+
+const Bubble = styled.div`
+  margin: 8px 0px 12px;
+  padding: 8px;
+  background-color: #e2e8f0;
+  width: fit-content;
+  max-width: 300px;
+  border-radius: 0 12px 12px 12px;
+`;
+
+interface ChatBubbleProps extends BoxProps {
+  userId?: string;
+  text: string;
+}
+
+const ChatBubble: React.FC<ChatBubbleProps> = ({ userId, text, ...rest }) => {
+  return (
+    <Container>
+      <Text fontWeight="bold" mb="0px">
+        {userId && `${userId}`}
+      </Text>
+      <Bubble>
+        <Text>{text}</Text>
+      </Bubble>
+    </Container>
+  );
+};
+
+export default ChatBubble;

src/hooks/useInput.ts

@@ -6,8 +6,11 @@ const useInput = (initValue: string) => {
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     setInputValue(e.target.value);
   };
+  const clear = () => {
+    setInputValue("");
+  };
 
-  return { value: inputValue, onChange: handleChange };
+  return { value: inputValue, onChange: handleChange, clear };
 };
 
 export default useInput;

src/pages/Example/index.tsx

@@ -70,7 +70,7 @@ const Example = () => {
     url: "https://fastcampus-chat.net/chat/leave",
     method: "PATCH",
     data: {
-      chatId: "0d9bb525-9766-40e2-bb11-9f10f9fe8839",
+      chatId: "e6d8fd5b-00e3-4598-b826-11366c8c4676",
     },
     start: false,
   });

src/pages/Game/index.tsx

@@ -1,3 +1,5 @@
+import GameChat from "../../components/Game/GameChat";
+import { Container } from "@chakra-ui/react";
 import useFireFetch from "../../hooks/useFireFetch";
 
 const Game = () => {
@@ -10,7 +12,11 @@ const Game = () => {
   const gameData = fireFetch.useGetSome("game", "id", gameId as string);
 
   console.log(gameData.data);
-  return <div>game page</div>;
+  return (
+    <Container maxW="1200px">
+      <GameChat gameId={gameId} />
+    </Container>
+  );
 };
 
 export default Game;