diff --git a/src/pages/GamesNearPage/GamesNearPage.styles.ts b/src/pages/GamesNearPage/GamesNearPage.styles.ts new file mode 100644 index 00000000..eec767bd --- /dev/null +++ b/src/pages/GamesNearPage/GamesNearPage.styles.ts @@ -0,0 +1,10 @@ +import styled from '@emotion/styled'; + +export const PageWrapper = styled.div` + margin: -50px -16px 0 -16px; + padding: 50px 16px 80px 16px; + background-color: ${({ theme }) => theme.PALETTE.GRAY_100}; + display: flex; + flex-direction: column; + gap: 16px; +`; diff --git a/src/pages/GamesNearPage/GamesNearPage.tsx b/src/pages/GamesNearPage/GamesNearPage.tsx new file mode 100644 index 00000000..2cf8a8d8 --- /dev/null +++ b/src/pages/GamesNearPage/GamesNearPage.tsx @@ -0,0 +1,47 @@ +import { Header } from '@components/shared/Header'; +import { MatchItem } from '@components/shared/MatchItem'; +import { Text } from '@components/shared/Text'; + +import { useHeaderTitle } from '@hooks/useHeaderTitle'; + +import { PageWrapper } from './GamesNearPage.styles'; + +export const GamesNearPage = () => { + const { entryRef, showHeaderTitle } = useHeaderTitle(); + + return ( + <> +
+ +
+ {showHeaderTitle || ( + + 내 근처 게스트 매치 + + )} +
+ {Array(20) + .fill(null) + .map((_, i) => ( + + ))} +
+ + ); +}; diff --git a/src/pages/GamesNearPage/index.ts b/src/pages/GamesNearPage/index.ts new file mode 100644 index 00000000..c1119503 --- /dev/null +++ b/src/pages/GamesNearPage/index.ts @@ -0,0 +1 @@ +export * from './GamesNearPage'; diff --git a/src/routes/router.tsx b/src/routes/router.tsx index ea60e09b..30e1f4d4 100644 --- a/src/routes/router.tsx +++ b/src/routes/router.tsx @@ -1,5 +1,6 @@ import { createBrowserRouter } from 'react-router-dom'; +import { GamesNearPage } from '@pages/GamesNearPage'; import { HomePage } from '@pages/HomePage'; import { Layout } from '@pages/Layout'; @@ -15,7 +16,7 @@ export const router = createBrowserRouter([ { path: 'players/:id', element:

players

}, { path: 'games/near', - element:

near

, + element: , }, { path: 'games/host',