[feat] 폭탄 끝말잇기 미니게임 프론트엔드 구현 (#1127)

* feat: 폭탄 릴레이 미니게임 추가

- BombRelayGameContext 및 BombRelayGameProvider 생성
- 폭탄 릴레이 게임 상태 및 진행 데이터 타입 정의
- WebSocket 구독을 통해 폭탄 릴레이 게임 상태 및 진행 데이터 관리 로직 구현
- 폭탄 릴레이 미니게임을 위한 구조 설계 및 기본 로직 추가

* feat: 폭탄 릴레이 게임 UI 컴포넌트 추가

- BombExplosionOverlay, CurrentWord, PlayerList, RoundInfo, WordFeedback, WordInput 컴포넌트 구현
- styled-components를 활용한 스타일 정의
- 게임 진행 상황, 플레이어 정보, 단어 입력 및 피드백 UI 요소 설계 및 애니메이션 추가

* feat: 폭탄 릴레이 게임 플레이 및 준비 페이지 추가

- BombRelayGamePlayPage, BombRelayGameReadyPage 구현
- 게임 상태에 따른 준비 및 플레이 로직 추가
- useBombRelayActions 훅 구현, WebSocket 사용 단어 전달 기능 추가
- BombRelayGamePlayPage 스타일 컴포넌트 구성 및 레이아웃 설계

* feat: 폭탄 릴레이 미니게임 설정 및 아이콘 추가

- BombRelay 아이콘(svg) 추가
- MINI_GAME_NAME_MAP, MINI_GAME_ICON_MAP에 BombRelay 항목 추가
- BombRelay 소개 슬라이드 구성 및 텍스트 추가
- 게임 설정(config)에 BombRelay 관련 Provider, ReadyPage, PlayPage 항목 구성

* feat: 폭탄 릴레이 미니게임 설정 및 아이콘 추가

- BombRelay 아이콘(svg) 추가
- MINI_GAME_NAME_MAP, MINI_GAME_ICON_MAP에 BombRelay 항목 추가
- BombRelay 소개 슬라이드 구성 및 텍스트 추가
- 게임 설정(config)에 BombRelay 관련 Provider, ReadyPage, PlayPage 항목 구성

* style: 폭탄 릴레이 미니게임 스타일 코드 개선

- 애니메이션 속성 줄 바꿈 및 코드 가독성 향상
- 불필요한 중첩 및 인라인 스타일 정리
- React import 방식 명시적으로 변경 (React import 추가)

* style: 폭탄 릴레이 미니게임 스타일 개선 및 UI 디테일 업데이트

- 컴포넌트 레이아웃 조정 및 스타일 속성 변경 (gap, padding, border 등)
- 애니메이션 키프레임 및 효과 최적화 (플로트, 바운스 등 추가)
- WordInput, CurrentWord 등 UI 요소 개선으로 가독성 및 사용자 경험 향상
- RoundInfo, PlayerList, WordFeedback 등 컴포넌트 스타일 수정 및 불필요한 속성 제거
- 모든 스타일 컴포넌트의 코드 유지보수성 및 일관성 증가

* style: BombRelayGamePlayPage 레이아웃 padding 속성 수정

- Layout 컴포넌트에 `padding="0"` 속성 추가하여 여백 제거 및 스타일 일관성 유지

* fix: BombExplosionOverlay에 non-null 단언 연산자 적용

- `eliminatedPlayerName`에 non-null 단언 연산자(`!`) 적용하여 타입 에러 방지 및 안정성 강화

* fix: WordFeedback 컴포넌트 rejectReason 처리 로직 수정

- rejectReason이 없는 경우 빈 문자열 반환하도록 조건부 로직 추가
- 문자열 처리 안정성 및 가독성 향상

Author: theminjunchoi

frontend/src/assets/bomb-relay-icon.svg

@@ -0,0 +1,27 @@
+import {
+  BombRelayGameState,
+  BombRelayProgressData,
+  BombRelayWordResult,
+} from '@/types/miniGame/bombRelayGame';
+import { createContext, useContext } from 'react';
+
+type BombRelayGameContextType = {
+  gameState: BombRelayGameState;
+  currentRound: number;
+  maxRounds: number;
+  currentWord: string;
+  currentTurnPlayerName: string;
+  eliminatedPlayerName: string | null;
+  progressData: BombRelayProgressData;
+  lastWordResult: BombRelayWordResult | null;
+};
+
+export const BombRelayGameContext = createContext<BombRelayGameContextType | null>(null);
+
+export const useBombRelayGame = () => {
+  const context = useContext(BombRelayGameContext);
+  if (!context) {
+    throw new Error('useBombRelayGame은 BombRelayGameProvider 안에서 사용해야 합니다.');
+  }
+  return context;
+};

frontend/src/contexts/BombRelayGame/BombRelayGameContext.ts

@@ -0,0 +1,74 @@
+import { useWebSocketSubscription } from '@/apis/websocket/hooks/useWebSocketSubscription';
+import { PropsWithChildren, useCallback, useState } from 'react';
+import { useIdentifier } from '../Identifier/IdentifierContext';
+import { BombRelayGameContext } from './BombRelayGameContext';
+import {
+  BombRelayGameState,
+  BombRelayProgressData,
+  BombRelayStateData,
+  BombRelayWordResult,
+} from '@/types/miniGame/bombRelayGame';
+
+const BombRelayGameProvider = ({ children }: PropsWithChildren) => {
+  const [gameState, setGameState] = useState<BombRelayGameState>('DESCRIPTION');
+  const [currentRound, setCurrentRound] = useState(0);
+  const [maxRounds, setMaxRounds] = useState(0);
+  const [currentWord, setCurrentWord] = useState('');
+  const [currentTurnPlayerName, setCurrentTurnPlayerName] = useState('');
+  const [eliminatedPlayerName, setEliminatedPlayerName] = useState<string | null>(null);
+  const [progressData, setProgressData] = useState<BombRelayProgressData>({
+    currentWord: '',
+    currentTurnPlayerName: '',
+    currentRound: 0,
+    players: [],
+  });
+  const [lastWordResult, setLastWordResult] = useState<BombRelayWordResult | null>(null);
+  const { joinCode } = useIdentifier();
+
+  const handleStateChange = useCallback((data: BombRelayStateData) => {
+    setGameState(data.state);
+    setCurrentRound(data.currentRound);
+    setMaxRounds(data.maxRounds);
+    setEliminatedPlayerName(data.eliminatedPlayerName);
+    if (data.currentWord) {
+      setCurrentWord(data.currentWord);
+    }
+    if (data.currentTurnPlayerName) {
+      setCurrentTurnPlayerName(data.currentTurnPlayerName);
+    }
+  }, []);
+
+  const handleProgressUpdate = useCallback((data: BombRelayProgressData) => {
+    setProgressData(data);
+    setCurrentWord(data.currentWord);
+    setCurrentTurnPlayerName(data.currentTurnPlayerName);
+    setCurrentRound(data.currentRound);
+  }, []);
+
+  const handleWordResult = useCallback((data: BombRelayWordResult) => {
+    setLastWordResult(data);
+  }, []);
+
+  useWebSocketSubscription(`/room/${joinCode}/bomb-relay/state`, handleStateChange);
+  useWebSocketSubscription(`/room/${joinCode}/bomb-relay/progress`, handleProgressUpdate);
+  useWebSocketSubscription(`/room/${joinCode}/bomb-relay/word-result`, handleWordResult);
+
+  return (
+    <BombRelayGameContext.Provider
+      value={{
+        gameState,
+        currentRound,
+        maxRounds,
+        currentWord,
+        currentTurnPlayerName,
+        eliminatedPlayerName,
+        progressData,
+        lastWordResult,
+      }}
+    >
+      {children}
+    </BombRelayGameContext.Provider>
+  );
+};
+
+export default BombRelayGameProvider;

frontend/src/contexts/BombRelayGame/BombRelayGameProvider.tsx

@@ -0,0 +1,88 @@
+import styled from '@emotion/styled';
+import { keyframes } from '@emotion/react';
+
+const flashBg = keyframes`
+  0% { background-color: rgba(255, 60, 60, 0.9); }
+  30% { background-color: rgba(255, 120, 50, 0.85); }
+  60% { background-color: rgba(255, 60, 60, 0.8); }
+  100% { background-color: rgba(0, 0, 0, 0.75); }
+`;
+
+const shakeScreen = keyframes`
+  0%, 100% { transform: translate(0, 0); }
+  10% { transform: translate(-8px, -6px); }
+  20% { transform: translate(8px, 4px); }
+  30% { transform: translate(-6px, 8px); }
+  40% { transform: translate(6px, -4px); }
+  50% { transform: translate(-4px, 6px); }
+  60% { transform: translate(4px, -8px); }
+  70% { transform: translate(-8px, 4px); }
+  80% { transform: translate(6px, 6px); }
+  90% { transform: translate(-4px, -6px); }
+`;
+
+const bombPop = keyframes`
+  0% { transform: scale(0); opacity: 0; }
+  40% { transform: scale(1.4); opacity: 1; }
+  60% { transform: scale(0.9); }
+  80% { transform: scale(1.1); }
+  100% { transform: scale(1); }
+`;
+
+const textSlideUp = keyframes`
+  0% { transform: translateY(30px); opacity: 0; }
+  100% { transform: translateY(0); opacity: 1; }
+`;
+
+const particleExplode = keyframes`
+  0% { transform: scale(0); opacity: 1; }
+  50% { transform: scale(1.5); opacity: 0.7; }
+  100% { transform: scale(2.5); opacity: 0; }
+`;
+
+export const Overlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  animation:
+    ${flashBg} 0.8s ease forwards,
+    ${shakeScreen} 0.5s ease;
+`;
+
+export const BombEmoji = styled.div`
+  font-size: 5rem;
+  animation: ${bombPop} 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+`;
+
+export const ExplosionRing = styled.div`
+  position: absolute;
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  border: 4px solid rgba(255, 200, 50, 0.6);
+  animation: ${particleExplode} 1s ease-out forwards;
+`;
+
+export const EliminatedText = styled.div`
+  font-size: 1.8rem;
+  font-weight: 800;
+  color: white;
+  text-align: center;
+  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
+  animation: ${textSlideUp} 0.5s ease 0.4s both;
+`;
+
+export const SubText = styled.div`
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.8);
+  animation: ${textSlideUp} 0.5s ease 0.6s both;
+`;

frontend/src/features/miniGame/bombRelayGame/components/BombExplosionOverlay/BombExplosionOverlay.styled.ts

@@ -0,0 +1,20 @@
+import * as S from './BombExplosionOverlay.styled';
+
+type Props = {
+  eliminatedPlayerName: string;
+  currentRound: number;
+  isGameOver: boolean;
+};
+
+const BombExplosionOverlay = ({ eliminatedPlayerName, currentRound, isGameOver }: Props) => {
+  return (
+    <S.Overlay>
+      <S.ExplosionRing />
+      <S.BombEmoji>💥</S.BombEmoji>
+      <S.EliminatedText>{eliminatedPlayerName} 탈락!</S.EliminatedText>
+      <S.SubText>{isGameOver ? '게임 종료!' : `${currentRound}라운드 종료`}</S.SubText>
+    </S.Overlay>
+  );
+};
+
+export default BombExplosionOverlay;

frontend/src/features/miniGame/bombRelayGame/components/BombExplosionOverlay/BombExplosionOverlay.tsx

@@ -0,0 +1,66 @@
+import styled from '@emotion/styled';
+import { keyframes } from '@emotion/react';
+
+const float = keyframes`
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-4px); }
+`;
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+`;
+
+export const WordCard = styled.div`
+  background: white;
+  border-radius: 24px;
+  padding: 24px 48px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+`;
+
+export const Word = styled.span`
+  font-size: 2.5rem;
+  font-weight: 800;
+  color: #1a1a1a;
+  letter-spacing: 2px;
+`;
+
+export const Label = styled.span`
+  font-size: 0.75rem;
+  color: #bbb;
+  font-weight: 500;
+`;
+
+export const NextCharContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  animation: ${float} 2s ease-in-out infinite;
+`;
+
+export const NextCharLabel = styled.span`
+  font-size: 0.7rem;
+  color: #999;
+  font-weight: 600;
+`;
+
+export const NextChar = styled.span`
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #ff6b6b, #ff8e53);
+  color: white;
+  font-size: 1.5rem;
+  font-weight: 800;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.35);
+`;

frontend/src/features/miniGame/bombRelayGame/components/CurrentWord/CurrentWord.styled.ts

@@ -0,0 +1,24 @@
+import * as S from './CurrentWord.styled';
+
+type Props = {
+  currentWord: string;
+};
+
+const CurrentWord = ({ currentWord }: Props) => {
+  const lastChar = currentWord.charAt(currentWord.length - 1);
+
+  return (
+    <S.Container>
+      <S.WordCard>
+        <S.Label>현재 단어</S.Label>
+        <S.Word>{currentWord}</S.Word>
+      </S.WordCard>
+      <S.NextCharContainer>
+        <S.NextCharLabel>다음 글자</S.NextCharLabel>
+        <S.NextChar>{lastChar}</S.NextChar>
+      </S.NextCharContainer>
+    </S.Container>
+  );
+};
+
+export default CurrentWord;