feat: game페이지 추가

frontend/src/components/choice/Choice.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import * as S from './Choice.styled';
+import { useEffect, useState } from 'react';
+
+
+export default function Choice(props) {
+    const { game } = props
+    console.log(game)
+    return (
+        <S.ItemContainer>
+            <S.ItemList>{game.firstTitle}</S.ItemList>
+            <S.ItemList2>{game.secondTitle}</S.ItemList2>
+        </S.ItemContainer>
+    );
+}

frontend/src/components/choice/Choice.styled.js

@@ -0,0 +1,36 @@
+import styled from 'styled-components';
+
+export const ItemContainer = styled.div`
+    font-family:"HSSantokki2-Regular";
+    margin-top: 3.2rem;
+    display: grid; /* Grid 레이아웃 사용 */
+    grid-template-columns: repeat(3, 1fr); /* 3개의 열 생성 */
+`;
+
+export const ItemList = styled.div`
+    padding: 5rem;
+    text-align:center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 2rem;
+    font-size: 3.4rem;
+    width: 60.7rem;
+    height: 34.2rem;
+    border: 0.2rem solid ${(props) => props.theme.colors.black};
+    background-color: ${(props) => props.theme.colors.gray200};
+`;
+
+export const ItemList2 = styled.div`
+    padding: 5rem;
+    text-align:center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 2rem;
+    font-size: 3.4rem;
+    width: 60.7rem;
+    height: 34.2rem;
+    border: 0.2rem solid ${(props) => props.theme.colors.black};
+    background-color: ${(props) => props.theme.colors.primaryGreen};
+`;

frontend/src/components/item/Item.jsx

@@ -1,28 +1,30 @@
 import { useEffect, useState } from 'react';
 import * as S from './Item.styled';
+import { Link } from 'react-router-dom';
 
-export default function Item() {
-  const [e, setE] = useState([]);
+export default function Game() {
+  const [games, setGames] = useState([]);
   useEffect(() => {
     const a = async () => {
       const res = await fetch('http://localhost:5173/api/item');
       const data = await res.json();
       console.log(data.data);
-      setE(data.data);
+      setGames(data.data);
     };
     a();
   }, []);
 
+
   return (
     <S.ItemContainer>
-      {e.map((item) => {
+      {games.map((game) => {
         return (
-          <div key={item.id}>
-            <S.ItemList>{item.firstTitle}</S.ItemList>
-            <S.ItemList2>{item.secondTitle}</S.ItemList2>
-          </div>
+          <Link key={game.id} to={`/game/${game.id}`} style={{ textDecoration: 'none', color: 'inherit' }}>
+            <S.ItemList>{game.firstTitle}</S.ItemList>
+            <S.ItemList2>{game.secondTitle}</S.ItemList2>
+          </Link>
         );
       })}
     </S.ItemContainer>
   );
-}
+}

frontend/src/components/item/Item.styled.js

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 export const ItemContainer = styled.div`
     font-family:"HSSantokki2-Regular";
-    margin-top: 12.9rem;
+    margin-top: 3.2rem;
     display: grid; /* Grid 레이아웃 사용 */
     grid-template-columns: repeat(3, 1fr); /* 3개의 열 생성 */
     gap: 3.2rem;

frontend/src/mocks/data/game.json

@@ -0,0 +1,5 @@
+{
+    "id": 1,
+    "firstTitle": "애인이 나 말고 연락하는 사람 한명도 없는 아싸",
+    "secondTitle": "애인이 나 아니어도 연락할 사람 너무 많은 인싸"
+}

frontend/src/mocks/handler.js

@@ -1,6 +1,8 @@
 import { http, HttpResponse } from 'msw';
 import data from './data/data.json';
 import item from './data/item.json';
+import game from './data/game.json';
+
 export const handlers = [
   http.get('/api/user', () => {
     return HttpResponse.json({ data });
@@ -9,4 +11,8 @@ export const handlers = [
   http.get('/api/item', () => {
     return HttpResponse.json({ data: item });
   }),
+
+  http.get("/api/game/1", () => {
+    return HttpResponse.json({ data: game })
+  })
 ];

frontend/src/pages/GamePage.jsx

@@ -0,0 +1,20 @@
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import Choice from '../components/choice/Choice';
+
+export default function GamePage() {
+    const [gameData, setGameData] = useState([])
+    const { id } = useParams()
+    useEffect(() => {
+        const a = async () => {
+            const res = await fetch(`http://localhost:5173/api/game/${id}`);
+            const data = await res.json();
+            console.log(data.data);
+            setGameData(data.data);
+        };
+        a();
+    }, []);
+    return (<>
+        <Choice game={gameData} />
+    </>)
+}

frontend/src/router.jsx

@@ -1,11 +1,14 @@
 import { createBrowserRouter } from "react-router-dom";
 import GlobalLayout from "./layout/GlobalLayout";
 import MainPage from "./pages/MainPage";
+import GamePage from "./pages/GamePage";
 
 export const router = createBrowserRouter([
   {
     path: "/",
     element: <GlobalLayout />,
-    children: [{ index: true, element: <MainPage /> }],
+    children: [{ index: true, element: <MainPage /> },
+    { path: "/game/:id", element: <GamePage /> }
+    ],
   },
 ]);