Merge pull request #17 from pepero-1/feature/#1

소켓 통신 useSocket 추가, 토스트 알람 UI 일부 수정
KDT1-FE · Nov 10, 2023 · acbd5e6 · acbd5e6
2 parents 31d678e + ae71beb
commit acbd5e6
Show file tree

Hide file tree

Showing 6 changed files with 149 additions and 74 deletions.
diff --git a/src/components/Main/CreateGameModal/index.tsx b/src/components/Main/CreateGameModal/index.tsx
@@ -2,12 +2,13 @@ import { Button, Input } from "@chakra-ui/react";
 import { serverTimestamp } from "firebase/firestore";
 import { ChangeEvent, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { io } from "socket.io-client";
+// import { io } from "socket.io-client";
 import styled from "styled-components";
 import useFetch from "../../../hooks/useFetch";
 import useFireFetch from "../../../hooks/useFireFetch";
 import useInput from "../../../hooks/useInput";
 import UserCard from "../../common/UserCard";
+import useSocket from "../../../hooks/useSocket";
 
 const Container = styled.div`
   position: absolute;
@@ -31,10 +32,10 @@ const Wrap = styled.div`
   width: 45rem;
   height: 30rem;
 
-  background-color: #fff;
-
   display: flex;
 
+  background-color: #fff;
+
   & > div:first-child {
     padding: 3rem 1.5rem 3rem 5rem;
   }
@@ -149,15 +150,7 @@ const CreateGameModal = ({ setModal }: Props) => {
   const token = JSON.parse(localStorage.getItem("token") as string);
 
   // 소켓 연결
-  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");
 
   // 게임 데이터
   const [roomData, setRoomData] = useState<ChatRoom>({
@@ -266,7 +259,7 @@ const CreateGameModal = ({ setModal }: Props) => {
       const text = JSON.stringify(inviteUser);
 
       // 초대 메시지 전달
-      socket.emit("message-to-server", text);
+      sendMessage(text);
 
       // 해당 게임방으로 이동
       navigate(`/game?gameId=${createGame.result.id}`);
@@ -297,7 +290,7 @@ const CreateGameModal = ({ setModal }: Props) => {
                   id="1"
                   name="drone"
                   value="1"
-                  // checked={roomData.num === 1}
+                  checked={roomData.num === 1}
                   onChange={handleRadioChange}
                 />
                 <label htmlFor="1">1</label>
@@ -308,7 +301,7 @@ const CreateGameModal = ({ setModal }: Props) => {
                   id="2"
                   name="drone"
                   value="2"
-                  // checked={roomData.num === 2}
+                  checked={roomData.num === 2}
                   onChange={handleRadioChange}
                 />
                 <label htmlFor="2">2</label>
@@ -319,7 +312,7 @@ const CreateGameModal = ({ setModal }: Props) => {
                   id="3"
                   name="drone"
                   value="3"
-                  // checked={roomData.num === 3}
+                  checked={roomData.num === 3}
                   onChange={handleRadioChange}
                 />
                 <label htmlFor="3">3</label>
@@ -330,7 +323,7 @@ const CreateGameModal = ({ setModal }: Props) => {
                   id="4"
                   name="drone"
                   value="4"
-                  // checked={roomData.num === 4}
+                  checked={roomData.num === 4}
                   onChange={handleRadioChange}
                 />
                 <label htmlFor="4">4</label>
@@ -341,7 +334,7 @@ const CreateGameModal = ({ setModal }: Props) => {
                   id="5"
                   name="drone"
                   value="5"
-                  // checked={roomData.num === 5}
+                  checked={roomData.num === 5}
                   onChange={handleRadioChange}
                 />
                 <label htmlFor="5">5</label>
@@ -352,7 +345,7 @@ const CreateGameModal = ({ setModal }: Props) => {
                   id="6"
                   name="drone"
                   value="6"
-                  checked
+                  checked={roomData.num === 6}
                   onChange={handleRadioChange}
                 />
                 <label htmlFor="6">6</label>
@@ -377,15 +370,17 @@ const CreateGameModal = ({ setModal }: Props) => {
         </Section>
         <Section>
           <div style={{ overflow: "auto" }}>
-            <Input
-              border="1px solid #c6c6c6"
-              placeholder="검색"
-              textAlign="center"
-              marginBottom="1rem"
-              height="2rem"
-              value={searchInput.value}
-              onChange={searchInput.onChange}
-            />
+            <div>
+              <Input
+                border="1px solid #c6c6c6"
+                placeholder="검색"
+                textAlign="center"
+                marginBottom="1rem"
+                height="2rem"
+                value={searchInput.value}
+                onChange={searchInput.onChange}
+              />
+            </div>
             {users.result &&
               userList.map((value: UserType) => {
                 return (

diff --git 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<Props> = ({ roomData, setToast }) => {
         <Button
           marginRight="2rem"
           width="50%"
+          variant="outline"
+          borderColor="#eee"
+          color="#eee"
+          colorScheme="whiteAlpha"
           onClick={() => {
             live.refresh();
             setToast(false);
@@ -101,6 +106,10 @@ const ToastNotice: React.FC<Props> = ({ roomData, setToast }) => {
         <Button
           marginRight="2rem"
           width="50%"
+          variant="outline"
+          borderColor="#eee"
+          color="#eee"
+          colorScheme="whiteAlpha"
           onClick={() => {
             navigate(`/game?gameId=${roomData.id}`);
           }}

diff --git a/src/components/common/UserCard/index.tsx b/src/components/common/UserCard/index.tsx
@@ -19,13 +19,19 @@ const Profile = styled.div`
   }
 `;
 
-const ImageWrap = styled.div`
+const ImageWrap = styled.div<{ $bg?: string }>`
   border-radius: 50%;
 
   width: 30px;
+  height: 30px;
 
   overflow: hidden;
 
+  background-image: url(${(props) => props.$bg});
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+
   margin-right: 1rem;
 `;
 
@@ -63,9 +69,7 @@ const UserCard = ({ id, name, picture, roomData, setRoomData }: Props) => {
 
   return (
     <Profile>
-      <ImageWrap>
-        <img src={picture} alt="profile" />
-      </ImageWrap>
+      <ImageWrap $bg={picture}></ImageWrap>
       <span>{name}</span>
       <Empty />
       {status ? (

diff --git a/src/hooks/useFetch.ts b/src/hooks/useFetch.ts
@@ -62,7 +62,6 @@ const useFetch = ({ url, method, data, start }: Props): Return => {
         });
 
         setCode(response.status);
-
         setResult(response.data);
       } catch (error) {
         setError(error);
@@ -88,8 +87,8 @@ const useFetch = ({ url, method, data, start }: Props): Return => {
         const response = await axios.patch(url, data, {
           headers: headers,
         });
-        setCode(response.status);
 
+        setCode(response.status);
         setResult(response.data);
       } catch (error) {
         setError(error);

diff --git a/src/hooks/useSocket.ts b/src/hooks/useSocket.ts
@@ -0,0 +1,42 @@
+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,
+    },
+  });
+
+  // 변화 감지
+  useEffect(() => {
+    if (callback) {
+      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;