Merge branch 'develop' into feature/#3

src/components/Main/CreateGameModal/index.tsx

@@ -204,13 +204,11 @@ const CreateGameModal = ({ setModal }: Props) => {
         id: createGame.result.id,
         host: token.id,
         createdAt: serverTimestamp(),
-      };
-
-      fireFetch.usePostData("game", createGame.result.id, {
-        ...newData,
         bg: "⭐",
         status: "대기중",
-      });
+      };
+
+      fireFetch.usePostData("game", createGame.result.id, newData);
 
       // const roomText = [...JSON.stringify(newData)];
 

src/components/common/ToastNotice/index.tsx

@@ -1,5 +1,115 @@
-const ToastNotice = () => {
-  return <div>toast notice</div>;
+import { Button } from "@chakra-ui/react";
+import { useNavigate } from "react-router-dom";
+import styled from "styled-components";
+import useFetch from "../../../hooks/useFetch";
+
+const Toast = styled.div`
+  border-radius: 16px;
+
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+
+  position: absolute;
+  top: 2rem;
+  left: 2rem;
+
+  background: #cdcdcd;
+
+  width: 400px;
+  height: 150px;
+  padding: 1.5rem;
+
+  & > div:first-child {
+    display: flex;
+  }
+  & > div:last-child {
+    display: flex;
+  }
+`;
+
+const Image = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  font-size: 3rem;
+`;
+
+const Title = styled.div`
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+
+  & > div:first-child {
+    font-weight: bold;
+  }
+  & > div:last-child {
+    font-size: 0.8rem;
+  }
+`;
+
+const ButtonWrap = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+interface Props {
+  roomData: {
+    id: string;
+    name: string;
+    host: string;
+    bg: string;
+    users: string[];
+  };
+  setToast: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const ToastNotice: React.FC<Props> = ({ roomData, setToast }) => {
+  const navigate = useNavigate();
+
+  const live = useFetch({
+    url: "https://fastcampus-chat.net/chat/leave",
+    method: "PATCH",
+    data: {
+      chatId: roomData.id,
+    },
+    start: false,
+  });
+
+  return (
+    <Toast>
+      <div>
+        <Image>{roomData.bg}</Image>
+        <Title>
+          <div>{roomData.host} 님이 초대하였습니다.</div>
+          <div>{roomData.name}</div>
+        </Title>
+      </div>
+      <ButtonWrap>
+        <Button
+          marginRight="2rem"
+          width="50%"
+          onClick={() => {
+            live.refresh();
+            setToast(false);
+          }}
+        >
+          거절
+        </Button>
+        <Button
+          marginRight="2rem"
+          width="50%"
+          onClick={() => {
+            navigate(`/game?gameId=${roomData.id}`);
+          }}
+        >
+          수락
+        </Button>
+      </ButtonWrap>
+    </Toast>
+  );
 };
 
 export default ToastNotice;

src/pages/Example/index.tsx

@@ -2,25 +2,12 @@ import { Button, Input } from "@chakra-ui/react";
 import { serverTimestamp } from "firebase/firestore";
 import { useEffect, useState } from "react";
 import { io } from "socket.io-client";
-import styled from "styled-components";
 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";
 
-const Toast = styled.div`
-  border-radius: 16px;
-
-  position: absolute;
-  top: 2rem;
-  left: 2rem;
-
-  background: #cdcdcd;
-
-  width: 400px;
-  height: 150px;
-`;
-
 const Example = () => {
   const token = JSON.parse(localStorage.getItem("token") as string);
 
@@ -55,6 +42,7 @@ const Example = () => {
     id: "",
     name: "",
     host: "",
+    bg: "",
     users: [""],
   });
 
@@ -82,7 +70,7 @@ const Example = () => {
     url: "https://fastcampus-chat.net/chat/leave",
     method: "PATCH",
     data: {
-      chatId: "1598e7f6-ab51-43f8-b70a-67f7c57dce00",
+      chatId: "0d9bb525-9766-40e2-bb11-9f10f9fe8839",
     },
     start: false,
   });
@@ -235,16 +223,7 @@ const Example = () => {
       </Button>
       {modal ? <CreateGameModal setModal={setModal} /> : null}
       {toast && roomData ? (
-        <Toast>
-          <div>
-            <div>{roomData.host}님이 초대하였습니다.</div>
-            <div>{roomData.name}</div>
-          </div>
-          <div>
-            <Button>거절</Button>
-            <Button>수락</Button>
-          </div>
-        </Toast>
+        <ToastNotice roomData={roomData} setToast={setToast} />
       ) : null}
     </>
   );