From 4bd0a8da5624995f0e47e71a458f2ab5eb1f76bb Mon Sep 17 00:00:00 2001 From: Yonghun Date: Fri, 10 Nov 2023 14:37:22 +0900 Subject: [PATCH 1/4] Feat: Add useSocket hook --- src/hooks/useSocket.ts | 44 ++++++++++++++++ src/pages/Example/index.tsx | 102 ++++++++++++++++++++++-------------- 2 files changed, 108 insertions(+), 38 deletions(-) create mode 100644 src/hooks/useSocket.ts diff --git a/src/hooks/useSocket.ts b/src/hooks/useSocket.ts new file mode 100644 index 00000000..98ac3801 --- /dev/null +++ b/src/hooks/useSocket.ts @@ -0,0 +1,44 @@ +import { useEffect } from "react"; +import { io } from "socket.io-client"; + +interface Message { + id: string; + text: string; + userId: string; + createdAt: Date; +} + +const useSocket = ( + chatId: string, + callback?: (messageObject: Message) => void, +) => { + const token = JSON.parse(localStorage.getItem("token") as string); + + // 소켓 연결 + const socket = io(`https://fastcampus-chat.net/chat?chatId=${chatId}`, { + extraHeaders: { + Authorization: `Bearer ${token.accessToken}`, + serverId: import.meta.env.VITE_APP_SERVER_ID, + }, + }); + + // 변화 감지 + if (callback) { + useEffect(() => { + socket.on("message-to-client", (messageObject) => { + callback(messageObject); + }); + + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [socket]); + } + + // 메시지 보내기 + const sendMessage = (text: string) => { + socket.emit("message-to-server", text); + }; + + return sendMessage; +}; + +export default useSocket; diff --git a/src/pages/Example/index.tsx b/src/pages/Example/index.tsx index de732e54..e0e97698 100644 --- a/src/pages/Example/index.tsx +++ b/src/pages/Example/index.tsx @@ -1,12 +1,13 @@ import { Button, Input } from "@chakra-ui/react"; import { serverTimestamp } from "firebase/firestore"; import { useEffect, useState } from "react"; -import { io } from "socket.io-client"; +// import { io } from "socket.io-client"; import CreateGameModal from "../../components/Main/CreateGameModal"; import ToastNotice from "../../components/common/ToastNotice"; import useFetch from "../../hooks/useFetch"; import useFireFetch from "../../hooks/useFireFetch"; import useInput from "../../hooks/useInput"; +import useSocket from "../../hooks/useSocket"; const Example = () => { const token = JSON.parse(localStorage.getItem("token") as string); @@ -21,17 +22,42 @@ const Example = () => { start: true, }); - // 채팅 서버 연결 - const socket = io( - `https://fastcampus-chat.net/chat?chatId=9fe8a1af-9c60-4937-82dd-21d6da5b9cd9`, - { - extraHeaders: { - Authorization: `Bearer ${token.accessToken}`, - serverId: import.meta.env.VITE_APP_SERVER_ID, - }, + // 소켓 통신 + const sendMessage = useSocket( + "9fe8a1af-9c60-4937-82dd-21d6da5b9cd9", + (messageObject) => { + // 일반 채팅인지 초대 메시지인지 구별 + if (messageObject.text.slice(-5, -2) === "*&^") { + // 초대 상태 저장 + const usersArr = JSON.parse(messageObject.text); + const users = [...usersArr]; + users.pop(); + users.pop(); + const room = usersArr[usersArr.length - 2]; + + setToastUser(users); + setRoomData(room); + } else { + // 메시지 데이터, 작성 유저 상태 저장 + const copy = { ...message }; + copy.id = messageObject.userId; + copy.text = messageObject.text; + setMessage(copy); + } }, ); + // // 채팅 서버 연결 + // const socket = io( + // `https://fastcampus-chat.net/chat?chatId=9fe8a1af-9c60-4937-82dd-21d6da5b9cd9`, + // { + // extraHeaders: { + // Authorization: `Bearer ${token.accessToken}`, + // serverId: import.meta.env.VITE_APP_SERVER_ID, + // }, + // }, + // ); + // 메세지 데이터 const [message, setMessage] = useState({ id: "", @@ -78,34 +104,34 @@ const Example = () => { // 메시지 input value 저장 const messageValue = useInput(""); - // 소켓 통신 시 메시지 데이터 저장 - useEffect(() => { - socket.on("message-to-client", (messageObject) => { - // 일반 채팅인지 초대 메시지인지 구별 - - if (messageObject.text.slice(-5, -2) === "*&^") { - // 초대 상태 저장 - const usersArr = JSON.parse(messageObject.text); - const users = [...usersArr]; - users.pop(); - users.pop(); - const room = usersArr[usersArr.length - 2]; - - setToastUser(users); - setRoomData(room); - } else { - // 메시지 데이터, 작성 유저 상태 저장 - const copy = { ...message }; - copy.id = messageObject.userId; - copy.text = messageObject.text; - setMessage(copy); - } - - // console.log(messageObject); - }); - - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [socket]); + // // 소켓 통신 시 메시지 데이터 저장 + // useEffect(() => { + // socket.on("message-to-client", (messageObject) => { + // // 일반 채팅인지 초대 메시지인지 구별 + + // if (messageObject.text.slice(-5, -2) === "*&^") { + // // 초대 상태 저장 + // const usersArr = JSON.parse(messageObject.text); + // const users = [...usersArr]; + // users.pop(); + // users.pop(); + // const room = usersArr[usersArr.length - 2]; + + // setToastUser(users); + // setRoomData(room); + // } else { + // // 메시지 데이터, 작성 유저 상태 저장 + // const copy = { ...message }; + // copy.id = messageObject.userId; + // copy.text = messageObject.text; + // setMessage(copy); + // } + + // // console.log(messageObject); + // }); + + // // eslint-disable-next-line react-hooks/exhaustive-deps + // }, [socket]); // 메시지 값 변화시(소켓 통신 시) 콘솔에 메시지 데이터 출력 useEffect(() => { @@ -186,7 +212,7 @@ const Example = () => { // 메시지 보내는 함수 const submitMessage = () => { - socket.emit("message-to-server", messageValue.value); + sendMessage(messageValue.value); }; return ( From cf190b84c51a1983d6083fd4b3d79dc9e093b8ba Mon Sep 17 00:00:00 2001 From: Yonghun Date: Fri, 10 Nov 2023 14:41:19 +0900 Subject: [PATCH 2/4] Design: Change Toast UI --- src/components/common/ToastNotice/index.tsx | 13 +++++++++++-- src/components/common/UserCard/index.tsx | 12 ++++++++---- src/hooks/useFetch.ts | 3 +-- 3 files changed, 20 insertions(+), 8 deletions(-) diff --git a/src/components/common/ToastNotice/index.tsx b/src/components/common/ToastNotice/index.tsx index 98feddf0..d567e331 100644 --- a/src/components/common/ToastNotice/index.tsx +++ b/src/components/common/ToastNotice/index.tsx @@ -4,7 +4,7 @@ import styled from "styled-components"; import useFetch from "../../../hooks/useFetch"; const Toast = styled.div` - border-radius: 16px; + border-radius: 0.5rem; display: flex; justify-content: center; @@ -14,7 +14,8 @@ const Toast = styled.div` top: 2rem; left: 2rem; - background: #cdcdcd; + background-color: rgba(20, 20, 20, 0.8); + color: #fff; width: 400px; height: 150px; @@ -91,6 +92,10 @@ const ToastNotice: React.FC = ({ roomData, setToast }) => {