Merge branch develop into feature/#3

KDT1-FE · Nov 10, 2023 · 8d0631f · 8d0631f
2 parents 26aa540 + b4df1bb
commit 8d0631f
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 14 deletions.
diff --git a/src/components/Game/GameChat/index.tsx b/src/components/Game/GameChat/index.tsx
@@ -67,7 +67,7 @@ const GameChat = ({ gameId }) => {
   };
 
   return (
-    <Card>
+    <Card p={3} h="100%" mb="20px">
       <CardBody>
         {messages.map((message, index) => (
           <ChatBubble key={index} userId={message.id} text={message.text} />

diff --git a/src/components/Game/Keyword/index.tsx b/src/components/Game/Keyword/index.tsx
@@ -9,7 +9,6 @@ import {
   useDisclosure,
 } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
-import styled from "styled-components";
 import data from "../../../data/category.json";
 
 interface Categories {
@@ -18,10 +17,6 @@ interface Categories {
 }
 [];
 
-const Div = styled.div`
-  margin: 20rem;
-`;
-
 const Keyword = ({ status, updateStatus }: any) => {
   const categories = data.CategoryList;
   const [category, setCategory] = useState<Categories | null>(null);
@@ -83,7 +78,7 @@ const Keyword = ({ status, updateStatus }: any) => {
   };
 
   return (
-    <Div>
+    <>
       {status === "대기중" && <Button onClick={handleStart}>게임시작</Button>}
       <Modal isOpen={isOpen} onClose={onClose}>
         <ModalOverlay />
@@ -118,7 +113,7 @@ const Keyword = ({ status, updateStatus }: any) => {
           </>
         )}
       </Box>
-    </Div>
+    </>
   );
 };
 

diff --git a/src/index.css b/src/index.css
@@ -1,4 +1,5 @@
 #root {
   max-width: 1200px;
   margin: 0 auto;
+  /* background-color: #ecedee; */
 }
diff --git a/src/pages/Game/index.tsx b/src/pages/Game/index.tsx
@@ -1,9 +1,19 @@
+import { Button, Card, Center, Grid, GridItem, Text } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
-import Keyword from "../../components/Game/Keyword";
 import GameChat from "../../components/Game/GameChat";
-import { Container } from "@chakra-ui/react";
+import Keyword from "../../components/Game/Keyword";
 import useFireFetch from "../../hooks/useFireFetch";
 
+const ProfileCard = ({ userId }: any) => {
+  return (
+    <Card w="200px" h="200px" justify="center" mb="20px">
+      <Center>
+        <Text fontWeight="bold">{userId}</Text>
+      </Center>
+    </Card>
+  );
+};
+
 const Game = () => {
   const queryString = window.location.search;
   const searchParams = new URLSearchParams(queryString);
@@ -29,11 +39,48 @@ const Game = () => {
 
   console.log(gameData.data);
 
+  if (gameData.data.length === 0) {
+    return <p>Loading...</p>;
+  }
+
   return (
-    <Container maxW="1200px">
-      <GameChat gameId={gameId} />
-      <Keyword status={status} updateStatus={updateStatus} />
-    </Container>
+    <>
+      <Grid
+        templateColumns="200px 1fr 200px"
+        templateRows="60px 1fr"
+        gap="20px"
+        mt="50px"
+      >
+        <GridItem>
+          <Button w="200px" mr="20px">
+            뒤로가기
+          </Button>
+        </GridItem>
+        <GridItem>
+          <Card h="100%" justifyContent="center">
+            <Center fontWeight="bold">
+              주제는 “동물” 입니다. 당신이 라이어입니다.
+            </Center>{" "}
+          </Card>
+        </GridItem>
+        <GridItem>
+          <Keyword status={status} updateStatus={updateStatus} />
+        </GridItem>
+        <GridItem>
+          <ProfileCard userId={gameData.data[0].host}></ProfileCard>
+          <ProfileCard userId={gameData.data[0].users[0]}></ProfileCard>
+          <ProfileCard userId={gameData.data[0].users[1]}></ProfileCard>
+        </GridItem>
+        <GridItem>
+          <GameChat gameId={gameId} />
+        </GridItem>
+        <GridItem>
+          <ProfileCard userId={gameData.data[0].users[2]}></ProfileCard>
+          <ProfileCard userId={gameData.data[0].users[3]}></ProfileCard>
+          <ProfileCard userId={gameData.data[0].users[4]}></ProfileCard>
+        </GridItem>
+      </Grid>
+    </>
   );
 };