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

frontend/src/contexts/BombRelayGame/BombRelayGameContext.ts

@@ -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/BombRelayGameProvider.tsx

@@ -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/features/miniGame/bombRelayGame/components/BombExplosionOverlay/BombExplosionOverlay.styled.ts

@@ -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.tsx

@@ -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/CurrentWord/CurrentWord.styled.ts

@@ -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.tsx

@@ -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;