feat: GamesNearPage 작성

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;
+`;

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<HTMLDivElement>();
+
+  return (
+    <>
+      <Header title={showHeaderTitle ? '내 근처 게스트 매치' : ''} />
+      <PageWrapper>
+        <div ref={entryRef}>
+          {showHeaderTitle || (
+            <Text size={20} weight={700}>
+              내 근처 게스트 매치
+            </Text>
+          )}
+        </div>
+        {Array(20)
+          .fill(null)
+          .map((_, i) => (
+            <MatchItem
+              key={i}
+              matchId="1"
+              startTime={new Date()}
+              timeMinutes={60}
+              mainAddress="서울특별시 송파구 송파나루길 206"
+              memberCount={6}
+              maxMemberCount={10}
+              membersProfileImageUrls={[
+                'https://picsum.photos/500',
+                'https://picsum.photos/500',
+                'https://picsum.photos/500',
+                'https://picsum.photos/500',
+                'https://picsum.photos/500',
+                'https://picsum.photos/500',
+              ]}
+            />
+          ))}
+      </PageWrapper>
+    </>
+  );
+};

src/pages/GamesNearPage/index.ts

@@ -0,0 +1 @@
+export * from './GamesNearPage';

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: <h1>players</h1> },
       {
         path: 'games/near',
-        element: <h2>near</h2>,
+        element: <GamesNearPage />,
       },
       {
         path: 'games/host',