From fbc74114b0e7fbb27fc90530a20225c22e27aea0 Mon Sep 17 00:00:00 2001 From: jiyounglee Date: Wed, 11 Sep 2024 09:45:19 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20game=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/choice/Choice.jsx | 15 ++++++++ .../src/components/choice/Choice.styled.js | 36 +++++++++++++++++++ frontend/src/components/item/Item.jsx | 20 ++++++----- frontend/src/components/item/Item.styled.js | 2 +- frontend/src/mocks/data/game.json | 5 +++ frontend/src/mocks/handler.js | 6 ++++ frontend/src/pages/GamePage.jsx | 20 +++++++++++ frontend/src/router.jsx | 5 ++- 8 files changed, 98 insertions(+), 11 deletions(-) create mode 100644 frontend/src/components/choice/Choice.jsx create mode 100644 frontend/src/components/choice/Choice.styled.js create mode 100644 frontend/src/mocks/data/game.json create mode 100644 frontend/src/pages/GamePage.jsx diff --git a/frontend/src/components/choice/Choice.jsx b/frontend/src/components/choice/Choice.jsx new file mode 100644 index 0000000..efd1bfe --- /dev/null +++ b/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 ( + + {game.firstTitle} + {game.secondTitle} + + ); +} diff --git a/frontend/src/components/choice/Choice.styled.js b/frontend/src/components/choice/Choice.styled.js new file mode 100644 index 0000000..f5d1549 --- /dev/null +++ b/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}; +`; \ No newline at end of file diff --git a/frontend/src/components/item/Item.jsx b/frontend/src/components/item/Item.jsx index 0e8d5a7..21e306f 100644 --- a/frontend/src/components/item/Item.jsx +++ b/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 ( - {e.map((item) => { + {games.map((game) => { return ( -
- {item.firstTitle} - {item.secondTitle} -
+ + {game.firstTitle} + {game.secondTitle} + ); })} ); -} +} \ No newline at end of file diff --git a/frontend/src/components/item/Item.styled.js b/frontend/src/components/item/Item.styled.js index 4d3fbba..bdc6f47 100644 --- a/frontend/src/components/item/Item.styled.js +++ b/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; diff --git a/frontend/src/mocks/data/game.json b/frontend/src/mocks/data/game.json new file mode 100644 index 0000000..3055973 --- /dev/null +++ b/frontend/src/mocks/data/game.json @@ -0,0 +1,5 @@ +{ + "id": 1, + "firstTitle": "애인이 나 말고 연락하는 사람 한명도 없는 아싸", + "secondTitle": "애인이 나 아니어도 연락할 사람 너무 많은 인싸" +} \ No newline at end of file diff --git a/frontend/src/mocks/handler.js b/frontend/src/mocks/handler.js index ba36040..1e9bef1 100644 --- a/frontend/src/mocks/handler.js +++ b/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 }) + }) ]; diff --git a/frontend/src/pages/GamePage.jsx b/frontend/src/pages/GamePage.jsx new file mode 100644 index 0000000..5160241 --- /dev/null +++ b/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 (<> + + ) +} \ No newline at end of file diff --git a/frontend/src/router.jsx b/frontend/src/router.jsx index f066e57..5c7ee43 100644 --- a/frontend/src/router.jsx +++ b/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: , - children: [{ index: true, element: }], + children: [{ index: true, element: }, + { path: "/game/:id", element: } + ], }, ]);