[feature] 동아리 클릭 배틀 게임 페이지

frontend/docs/features/game/game-page-layout.md

@@ -0,0 +1,32 @@
+# GamePage 레이아웃 및 DotTextEffect 인터랙션 개선
+
+## 레이아웃 구조
+
+`TopRow`를 3-column grid(`1fr auto 1fr`)로 구성하여 타이틀을 절대 중앙에 고정하고 순위표를 오른쪽 끝에 배치.
+DotTextEffect는 전체 너비 가운데, 클릭 버튼은 하단(`marginTop: 40px`)에 위치.
+
+```
+┌─────────────────────────────────────────────┐
+│  [빈 공간]   동아리 클릭 배틀   [실시간 순위] │
+│                                             │
+│           [  개 발 팀  (DotText) ]          │
+│                                             │
+│                 [클릭! 버튼]                │
+└─────────────────────────────────────────────┘
+```
+
+## DotTextEffect 색상 Ripple
+
+마우스 커서 주변 `colorRadius(= hoverRadius * 1.8)` 범위 내 dot들이 거리 비례로 색상이 물드는 효과.
+
+- 파워 커브 `Math.pow(dist / colorRadius, 2.5)` 적용 → 중심만 진하고 바깥은 급격히 회색으로
+- 각 dot에 `charColors` 중 랜덤 색상 미리 배정 (글자 단위 → dot 단위 랜덤)
+- `hoverRadius: 18`, `dotR: 1.8` (겹침 방지)
+
+## 관련 코드
+
+- `src/pages/GamePage/GamePage.tsx` — 레이아웃 구조 (TopRow, DotTextEffect 중앙, 버튼 하단)
+- `src/pages/GamePage/GamePage.styles.ts` — TopRow grid 스타일
+- `src/pages/GamePage/components/DotTextEffect/DotTextEffect.tsx` — 색상 ripple 및 랜덤 색상 로직
+- `src/pages/GamePage/components/RankingBoard/RankingBoard.styles.ts` — Header column 방향 변경
+- `src/pages/GamePage/components/ClickButton/ClickButton.styles.ts` — ClubLabel 말줄임 처리

frontend/src/App.tsx

@@ -24,6 +24,7 @@ import {
 import LegacyClubDetailPage from './pages/ClubDetailPage/LegacyClubDetailPage';
 import ErrorTestPage from './pages/ErrorTestPage/ErrorTestPage';
 import IntroductionPage from './pages/FestivalPage/IntroductionPage/IntroductionPage';
+import GamePage from './pages/GamePage/GamePage';
 import PromotionDetailPage from './pages/PromotionPage/PromotionDetailPage';
 import PromotionListPage from './pages/PromotionPage/PromotionListPage';
 
@@ -201,6 +202,14 @@ const App = () => {
                     </ContentErrorBoundary>
                   }
                 />
+                <Route
+                  path='/game'
+                  element={
+                    <ContentErrorBoundary>
+                      <GamePage />
+                    </ContentErrorBoundary>
+                  }
+                />
                 {/* 개발 환경에서만 사용 가능한 에러 테스트 페이지 */}
                 {import.meta.env.DEV && (
                   <Route path='/error-test' element={<ErrorTestPage />} />

frontend/src/apis/game.ts

@@ -0,0 +1,27 @@
+import API_BASE_URL from '@/constants/api';
+import { GameClickResponse, GameRankingResponse } from '@/types/game';
+import { handleResponse } from './utils/apiHelpers';
+
+export const postGameClick = async (
+  clubName: string,
+): Promise<GameClickResponse> => {
+  const response = await fetch(`${API_BASE_URL}/api/game/click`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ clubName, ctAt: new Date().toISOString() }),
+  });
+  const data = await handleResponse<GameClickResponse>(
+    response,
+    '클릭 요청에 실패했습니다.',
+  );
+  return data!;
+};
+
+export const getGameRanking = async (): Promise<GameRankingResponse> => {
+  const response = await fetch(`${API_BASE_URL}/api/game/ranking`);
+  const data = await handleResponse<GameRankingResponse>(
+    response,
+    '랭킹을 불러오는데 실패했습니다.',
+  );
+  return data!;
+};

frontend/src/constants/queryKeys.ts

@@ -36,4 +36,8 @@ export const queryKeys = {
     list: (type: 'WEB' | 'APP_HOME' | 'WEB_MOBILE') =>
       ['banner', type] as const,
   },
+  game: {
+    all: ['game'] as const,
+    ranking: () => ['game', 'ranking'] as const,
+  },
 } as const;

frontend/src/hooks/Queries/useGame.ts

@@ -0,0 +1,18 @@
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { getGameRanking, postGameClick } from '@/apis/game';
+import { queryKeys } from '@/constants/queryKeys';
+
+export const useGameRanking = () => {
+  return useQuery({
+    queryKey: queryKeys.game.ranking(),
+    queryFn: getGameRanking,
+    refetchInterval: 2000,
+    staleTime: 0,
+  });
+};
+
+export const useClickGame = () => {
+  return useMutation({
+    mutationFn: (clubName: string) => postGameClick(clubName),
+  });
+};

frontend/src/mocks/handlers/index.ts

@@ -1,7 +1,4 @@
 import { promotionHandlers } from './promotion';
 
 // 모든 MSW 핸들러를 여기에 통합
-export const handlers = [
-  ...promotionHandlers,
-  // 다른 핸들러들을 여기에 추가
-];
+export const handlers = [...promotionHandlers];

frontend/src/pages/GamePage/GamePage.styles.ts

@@ -0,0 +1,98 @@
+import styled from 'styled-components';
+import { media } from '@/styles/mediaQuery';
+
+export const PageContainer = styled.div`
+  position: relative;
+  overflow: hidden;
+  min-height: 100vh;
+  background: ${({ theme }) => theme.colors.gray[100]};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 48px 20px 80px;
+
+  ${media.mobile} {
+    padding: 32px 16px 60px;
+  }
+`;
+
+export const Blob = styled.div<{
+  $size: number;
+  $top: string;
+  $left: string;
+  $color: string;
+}>`
+  position: absolute;
+  width: ${({ $size }) => $size}px;
+  height: ${({ $size }) => $size}px;
+  top: ${({ $top }) => $top};
+  left: ${({ $left }) => $left};
+  background: ${({ $color }) => $color};
+  border-radius: 50%;
+  filter: blur(60px);
+  pointer-events: none;
+  z-index: 0;
+`;
+
+export const Content = styled.div`
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  max-width: 1400px;
+`;
+
+export const PageTitle = styled.h1`
+  font-size: 1.75rem;
+  font-weight: 800;
+  color: ${({ theme }) => theme.colors.gray[900]};
+  margin-bottom: 4px;
+
+  ${media.mobile} {
+    font-size: 1.4rem;
+  }
+`;
+
+export const PageDescription = styled.p`
+  font-size: 0.95rem;
+  color: ${({ theme }) => theme.colors.gray[600]};
+  margin-top: 4px;
+`;
+
+export const DesktopOnly = styled.div`
+  position: absolute;
+  right: 0;
+  top: 0;
+
+  ${media.tablet} {
+    display: none;
+  }
+`;
+
+export const MobileOnly = styled.div`
+  display: none;
+  width: 100%;
+  margin-top: 32px;
+
+  ${media.tablet} {
+    display: block;
+  }
+`;
+
+export const TopRow = styled.div`
+  position: relative;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin-bottom: 16px;
+
+  & > *:first-child {
+    text-align: center;
+  }
+
+  ${media.tablet} {
+    margin-bottom: 32px;
+  }
+`;