Merge pull request #20 from pepero-1/feature/#4

Feature/#4
KDT1-FE · Nov 10, 2023 · b4df1bb · b4df1bb
2 parents acbd5e6 + 7c9f6d8
commit b4df1bb
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 5 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/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,7 +1,27 @@
 import GameChat from "../../components/Game/GameChat";
-import { Container } from "@chakra-ui/react";
+import {
+  Button,
+  Card,
+  Center,
+  Container,
+  Flex,
+  Grid,
+  GridItem,
+  Spacer,
+  Text,
+} from "@chakra-ui/react";
 import useFireFetch from "../../hooks/useFireFetch";
 
+const ProfileCard = ({ userId }) => {
+  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);
@@ -12,10 +32,46 @@ const Game = () => {
   const gameData = fireFetch.useGetSome("game", "id", gameId as string);
 
   console.log(gameData.data);
+  if (gameData.data.length === 0) {
+    return <p>Loading...</p>;
+  }
+
   return (
-    <Container maxW="1200px">
-      <GameChat gameId={gameId} />
-    </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></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>
+    </>
   );
 };