From 41f013f5c8c13fc74fb8a4cc622cd92d4a72aaba Mon Sep 17 00:00:00 2001 From: joanShim Date: Thu, 9 Nov 2023 13:25:43 +0900 Subject: [PATCH 1/5] =?UTF-8?q?Feat:=20GameChat=20=EC=B9=B4=EB=93=9C=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 3 +++ src/components/Game/GameChat/index.tsx | 9 ++++++++- src/components/common/ChatBubble.tsx | 5 +++++ src/index.css | 2 -- src/pages/Game/index.tsx | 8 +++++++- 5 files changed, 23 insertions(+), 4 deletions(-) create mode 100644 src/components/common/ChatBubble.tsx diff --git a/src/App.tsx b/src/App.tsx index f2717be4..9053e034 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,6 +2,7 @@ import { Routes, Route } from "react-router-dom"; import AdminMain from "./pages/Main/user"; import Login from "./pages/Login"; import Example from "./pages/Example"; +import Game from "./pages/Game"; const App = () => { return ( @@ -10,6 +11,8 @@ const App = () => { } /> } /> } /> + {/* Game 임시라우팅입니다 */} + } /> ); diff --git a/src/components/Game/GameChat/index.tsx b/src/components/Game/GameChat/index.tsx index 8cd19f3e..7ac710d6 100644 --- a/src/components/Game/GameChat/index.tsx +++ b/src/components/Game/GameChat/index.tsx @@ -1,5 +1,12 @@ +import { Card, CardHeader, CardBody, CardFooter, Text } from "@chakra-ui/react"; const GameChat = () => { - return
game chat
; + return ( + + + View a summary of all your customers over the last month. + + + ); }; export default GameChat; diff --git a/src/components/common/ChatBubble.tsx b/src/components/common/ChatBubble.tsx new file mode 100644 index 00000000..88730dbe --- /dev/null +++ b/src/components/common/ChatBubble.tsx @@ -0,0 +1,5 @@ +const ChatBubble = () => { + return
Chat Bubble
; +}; + +export default ChatBubble; diff --git a/src/index.css b/src/index.css index 902778b7..a6b34155 100644 --- a/src/index.css +++ b/src/index.css @@ -1,6 +1,4 @@ #root { max-width: 1280px; margin: 0 auto; - padding: 2rem; - text-align: center; } diff --git a/src/pages/Game/index.tsx b/src/pages/Game/index.tsx index c30cce21..8f4dc375 100644 --- a/src/pages/Game/index.tsx +++ b/src/pages/Game/index.tsx @@ -1,5 +1,11 @@ +import GameChat from "../../components/Game/GameChat"; +import { Container } from "@chakra-ui/react"; const Game = () => { - return
game page
; + return ( + + + + ); }; export default Game; From acb30b0a7d47bcb40d98f9b17be5e4c002c71dff Mon Sep 17 00:00:00 2001 From: joanShim Date: Thu, 9 Nov 2023 18:10:03 +0900 Subject: [PATCH 2/5] =?UTF-8?q?Feat:=20=EC=B1=84=ED=8C=85=20=EB=82=B4?= =?UTF-8?q?=EC=9A=A9=20=EB=A0=8C=EB=8D=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Game/GameChat/index.tsx | 86 +++++++++++++++++++++++++- src/components/common/ChatBubble.tsx | 15 ++++- src/hooks/useInput.ts | 5 +- 3 files changed, 101 insertions(+), 5 deletions(-) diff --git a/src/components/Game/GameChat/index.tsx b/src/components/Game/GameChat/index.tsx index 7ac710d6..4bf7fc0d 100644 --- a/src/components/Game/GameChat/index.tsx +++ b/src/components/Game/GameChat/index.tsx @@ -1,10 +1,92 @@ -import { Card, CardHeader, CardBody, CardFooter, Text } from "@chakra-ui/react"; +import { + Card, + CardHeader, + CardBody, + CardFooter, + Text, + InputGroup, + Input, + InputRightElement, + Button, +} from "@chakra-ui/react"; +import ChatBubble from "../../common/ChatBubble"; +import useFetch from "../../../hooks/useFetch"; +import { useEffect, useState } from "react"; +import { io } from "socket.io-client"; +import useInput from "../../../hooks/useInput"; + +interface Message { + id: string; + text: string; +} + const GameChat = () => { + const token = JSON.parse(localStorage.getItem("token") as string); + const socket = io( + `https://fastcampus-chat.net/chat?chatId=e3e9184e-ea74-41e1-b398-3be8d8d84d17`, + { + extraHeaders: { + Authorization: `Bearer ${token.accessToken}`, + serverId: import.meta.env.VITE_APP_SERVER_ID, + }, + }, + ); + + // 메세지 데이터 + const [message, setMessage] = useState({ + 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(); + }; + return ( - View a summary of all your customers over the last month. + {messages.map((message, index) => ( + + ))} + + + + + + ); }; diff --git a/src/components/common/ChatBubble.tsx b/src/components/common/ChatBubble.tsx index 88730dbe..18a98183 100644 --- a/src/components/common/ChatBubble.tsx +++ b/src/components/common/ChatBubble.tsx @@ -1,5 +1,16 @@ -const ChatBubble = () => { - return
Chat Bubble
; +import React from "react"; +import { Box, Text, BoxProps } from "@chakra-ui/react"; + +interface ChatBubbleProps extends BoxProps { + text: string; +} + +const ChatBubble: React.FC = ({ text, ...rest }) => { + return ( + + {text} + + ); }; export default ChatBubble; diff --git a/src/hooks/useInput.ts b/src/hooks/useInput.ts index ee21ffeb..bd25a87b 100644 --- a/src/hooks/useInput.ts +++ b/src/hooks/useInput.ts @@ -6,8 +6,11 @@ const useInput = (initValue: string) => { const handleChange = (e: ChangeEvent) => { setInputValue(e.target.value); }; + const clear = () => { + setInputValue(""); + }; - return { value: inputValue, onChange: handleChange }; + return { value: inputValue, onChange: handleChange, clear }; }; export default useInput; From ea8a88c79b67f8e49cae2c114b3cf8e00c979fed Mon Sep 17 00:00:00 2001 From: joanShim Date: Thu, 9 Nov 2023 19:05:27 +0900 Subject: [PATCH 3/5] =?UTF-8?q?Feat:=20ChatBubble=20=EC=9D=B4=EB=A6=84?= =?UTF-8?q?=ED=91=9C=EC=8B=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Game/GameChat/index.tsx | 4 ++-- src/components/common/ChatBubble.tsx | 21 ++++++++++++++++----- src/pages/Example/index.tsx | 2 +- 3 files changed, 19 insertions(+), 8 deletions(-) diff --git a/src/components/Game/GameChat/index.tsx b/src/components/Game/GameChat/index.tsx index 4bf7fc0d..85c69e34 100644 --- a/src/components/Game/GameChat/index.tsx +++ b/src/components/Game/GameChat/index.tsx @@ -20,7 +20,7 @@ interface Message { text: string; } -const GameChat = () => { +const GameChat = (gameId) => { const token = JSON.parse(localStorage.getItem("token") as string); const socket = io( `https://fastcampus-chat.net/chat?chatId=e3e9184e-ea74-41e1-b398-3be8d8d84d17`, @@ -70,7 +70,7 @@ const GameChat = () => { {messages.map((message, index) => ( - + ))} diff --git a/src/components/common/ChatBubble.tsx b/src/components/common/ChatBubble.tsx index 18a98183..7c3cc1e8 100644 --- a/src/components/common/ChatBubble.tsx +++ b/src/components/common/ChatBubble.tsx @@ -1,15 +1,26 @@ import React from "react"; -import { Box, Text, BoxProps } from "@chakra-ui/react"; +import { Box, Text, BoxProps, Container } from "@chakra-ui/react"; interface ChatBubbleProps extends BoxProps { + userId?: string; text: string; } -const ChatBubble: React.FC = ({ text, ...rest }) => { +const ChatBubble: React.FC = ({ userId, text, ...rest }) => { return ( - - {text} - + + {userId && `${userId}`} + + {text} + + ); }; diff --git a/src/pages/Example/index.tsx b/src/pages/Example/index.tsx index f4a500cf..8ff3b282 100644 --- a/src/pages/Example/index.tsx +++ b/src/pages/Example/index.tsx @@ -82,7 +82,7 @@ const Example = () => { url: "https://fastcampus-chat.net/chat/leave", method: "PATCH", data: { - chatId: "1598e7f6-ab51-43f8-b70a-67f7c57dce00", + chatId: "e3e9184e-ea74-41e1-b398-3be8d8d84d17", }, start: false, }); From 0ce28abf5a9dbe1ab4c417895420f644a3b21565 Mon Sep 17 00:00:00 2001 From: joanShim Date: Thu, 9 Nov 2023 23:39:37 +0900 Subject: [PATCH 4/5] =?UTF-8?q?Style:=20ChatBubble=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Game/GameChat/index.tsx | 43 ++++++++++---------------- src/components/common/ChatBubble.tsx | 27 +++++++++------- 2 files changed, 33 insertions(+), 37 deletions(-) diff --git a/src/components/Game/GameChat/index.tsx b/src/components/Game/GameChat/index.tsx index 4bc06a58..391e9a12 100644 --- a/src/components/Game/GameChat/index.tsx +++ b/src/components/Game/GameChat/index.tsx @@ -1,49 +1,33 @@ import { + Button, Card, - CardHeader, CardBody, - CardFooter, - Text, - InputGroup, Input, + InputGroup, InputRightElement, - Button, } from "@chakra-ui/react"; -import ChatBubble from "../../common/ChatBubble"; -import useFetch from "../../../hooks/useFetch"; 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) => { +const GameChat = ({ gameId }) => { + console.log(gameId); const token = JSON.parse(localStorage.getItem("token") as string); - useFetch({ - url: "https://fastcampus-chat.net/chat/participate", - method: "PATCH", - data: { - chatId: "0cac625d-d479-4da3-8f4e-78b3a3ca9635", + const socket = io(`https://fastcampus-chat.net/chat?chatId=${gameId}`, { + extraHeaders: { + Authorization: `Bearer ${token.accessToken}`, + serverId: import.meta.env.VITE_APP_SERVER_ID, }, - start: true, }); - const socket = io( - `https://fastcampus-chat.net/chat?chatId=0cac625d-d479-4da3-8f4e-78b3a3ca9635`, - { - extraHeaders: { - Authorization: `Bearer ${token.accessToken}`, - serverId: import.meta.env.VITE_APP_SERVER_ID, - }, - }, - ); - // 메세지 데이터 - const [message, setMessage] = useState({ + const [message, setMessage] = useState({ id: "", text: "", }); @@ -76,6 +60,12 @@ const GameChat = (gameId) => { messageValue.clear(); }; + const handleKeyPress = (event: React.KeyboardEvent) => { + if (event.key === "Enter") { + submitMessage(); + } + }; + return ( @@ -90,6 +80,7 @@ const GameChat = (gameId) => { placeholder="채팅내용" value={messageValue.value} onChange={messageValue.onChange} + onKeyPress={handleKeyPress} />