[feat] 폭탄 끝말잇기 미니게임 프론트엔드 구현 by theminjunchoi · Pull Request #1127 · woowacourse-teams/2025-zzol

theminjunchoi · 2026-03-16T16:42:06Z

✅ 체크리스트

merge 타겟 브랜치 잘 설정되었는지 확인하기 (fe/dev, be/dev)

🔥 연관 이슈

close [feat] 폭탄 끝말잇기 게임 구현 #1126

🚀 작업 내용

개요

폭탄 끝말잇기(BOMB_RELAY) 미니게임 프론트엔드를 구현합니다.

구현 내용

WebSocket 구독: state, progress, word-result 3개 채널
턴 기반 UI: 내 차례일 때만 입력 활성화, 상대 차례일 때 비활성
폭발 연출: ROUND_RESULT 상태 시 전체 화면 오버레이 (flash + shake + 💥 팝업 + "XXX 탈락!" 텍스트)
단어 피드백: 정답/오답 결과를 fade in/out 애니메이션으로 표시

컴포넌트 구성

컴포넌트	역할
CurrentWord	현재 단어 + "다음 글자: X" 표시
WordInput	텍스트 입력 + 전송 버튼 (내 차례 판별)
PlayerList	플레이어 칩 (💣 현재 턴 / 💥 탈락 / 생존)
RoundInfo	라운드 배지 + 턴 정보
WordFeedback	정답/오답 피드백 토스트
BombExplosionOverlay	폭발 오버레이 (4초간 표시)

화면 흐름

DESCRIPTION → 슬라이드 → PREPARE → PrepareOverlay → PLAYING → 턴 진행 → 폭탄 폭발 → BombExplosionOverlay(4초) → 다음 라운드 → ... → DONE → 오버레이(3.5초) → 결과 페이지

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

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

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

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

Copilot

Pull request overview

폭탄 끝말잇기(BOMB_RELAY) 미니게임의 프론트엔드 화면/상태관리(웹소켓 구독) 및 게임 UI 컴포넌트를 추가해, 기존 미니게임들과 동일한 흐름(Ready → Play → Result)으로 동작하도록 확장하는 PR입니다.

Changes:

미니게임 공통 설정(이름/설명/아이콘/게임 설정)에 BOMB_RELAY 타입 추가
BombRelay 전용 WebSocket 구독 Provider/Context 및 액션 훅 추가
플레이 화면(UI: 현재 단어, 입력, 플레이어 리스트, 라운드/턴 정보, 정답/오답 피드백, 폭발 오버레이) 구현

Reviewed changes

Copilot reviewed 21 out of 22 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
frontend/src/types/miniGame/common.ts	공통 미니게임 맵에 BOMB_RELAY 이름/설명/아이콘 추가
frontend/src/types/miniGame/bombRelayGame.ts	BombRelay 상태/진행/단어결과 수신 데이터 타입 정의 추가
frontend/src/features/miniGame/config/gameConfigs.tsx	GAME_CONFIGS에 BOMB_RELAY Provider/Ready/Play/슬라이드 구성 추가
frontend/src/features/miniGame/bombRelayGame/pages/BombRelayGameReadyPage.tsx	PREPARE 진입 시 play로 이동하는 Ready 페이지 추가
frontend/src/features/miniGame/bombRelayGame/pages/BombRelayGamePlayPage.tsx	턴 기반 입력/피드백/오버레이/결과 이동 포함 Play 페이지 추가
frontend/src/features/miniGame/bombRelayGame/pages/BombRelayGamePlayPage.styled.ts	Play 페이지 레이아웃 스타일 추가
frontend/src/features/miniGame/bombRelayGame/hooks/useBombRelayActions.ts	단어 전송 WebSocket 액션 훅 추가
frontend/src/features/miniGame/bombRelayGame/components/WordInput/WordInput.tsx	내 차례일 때만 입력/전송 가능한 입력 컴포넌트 추가
frontend/src/features/miniGame/bombRelayGame/components/WordInput/WordInput.styled.ts	입력/버튼 스타일 추가
frontend/src/features/miniGame/bombRelayGame/components/WordFeedback/WordFeedback.tsx	정답/오답 토스트 피드백 컴포넌트 추가
frontend/src/features/miniGame/bombRelayGame/components/WordFeedback/WordFeedback.styled.ts	피드백 fade in/out 애니메이션 스타일 추가
frontend/src/features/miniGame/bombRelayGame/components/RoundInfo/RoundInfo.tsx	라운드 배지/현재 턴 표시 컴포넌트 추가
frontend/src/features/miniGame/bombRelayGame/components/RoundInfo/RoundInfo.styled.ts	라운드/턴 표시 스타일 추가
frontend/src/features/miniGame/bombRelayGame/components/PlayerList/PlayerList.tsx	플레이어 칩(턴/탈락 표시) 리스트 컴포넌트 추가
frontend/src/features/miniGame/bombRelayGame/components/PlayerList/PlayerList.styled.ts	플레이어 칩 스타일/애니메이션 추가
frontend/src/features/miniGame/bombRelayGame/components/CurrentWord/CurrentWord.tsx	현재 단어 및 다음 글자 표시 컴포넌트 추가
frontend/src/features/miniGame/bombRelayGame/components/CurrentWord/CurrentWord.styled.ts	현재 단어 표시 스타일 추가
frontend/src/features/miniGame/bombRelayGame/components/BombExplosionOverlay/BombExplosionOverlay.tsx	라운드 결과 폭발 오버레이 컴포넌트 추가
frontend/src/features/miniGame/bombRelayGame/components/BombExplosionOverlay/BombExplosionOverlay.styled.ts	flash/shake/팝업 애니메이션 스타일 추가
frontend/src/contexts/BombRelayGame/BombRelayGameProvider.tsx	state/progress/word-result 웹소켓 구독 및 상태 보관 Provider 추가
frontend/src/contexts/BombRelayGame/BombRelayGameContext.ts	BombRelay game context + hook 추가
frontend/src/assets/bomb-relay-icon.svg	BombRelay 아이콘 에셋 추가

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

frontend/src/features/miniGame/bombRelayGame/pages/BombRelayGamePlayPage.tsx

frontend/src/contexts/BombRelayGame/BombRelayGameProvider.tsx

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

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

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

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

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

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

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

github-actions · 2026-03-19T09:26:48Z

🗑️ Branch fe/feat/1126-new-game has been automatically deleted after merge.

theminjunchoi added 4 commits March 17, 2026 01:39

theminjunchoi requested a review from Copilot March 16, 2026 16:42

theminjunchoi self-assigned this Mar 16, 2026

theminjunchoi added this to 2025-zzol Mar 16, 2026

theminjunchoi added FE 프론트앤드의 업무 라벨 ✨feat 새로운 기능 또는 요구사항을 추가 labels Mar 16, 2026

Copilot started reviewing on behalf of theminjunchoi March 16, 2026 16:42 View session

Copilot AI reviewed Mar 16, 2026

View reviewed changes

theminjunchoi added 6 commits March 17, 2026 01:59

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

df65dcf

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

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

b239c8d

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

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

d409de0

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

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

feb6cba

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

kiwoook approved these changes Mar 19, 2026

View reviewed changes

theminjunchoi merged commit 00e4978 into fe/dev Mar 19, 2026
2 checks passed

github-project-automation bot moved this to Done in 2025-zzol Mar 19, 2026

github-actions bot deleted the fe/feat/1126-new-game branch March 19, 2026 09:26

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

[feat] 폭탄 끝말잇기 미니게임 프론트엔드 구현#1127
theminjunchoi merged 10 commits intofe/devfrom
fe/feat/1126-new-game

theminjunchoi commented Mar 16, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Mar 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

theminjunchoi commented Mar 16, 2026

✅ 체크리스트

🔥 연관 이슈

🚀 작업 내용

개요

구현 내용

컴포넌트 구성

화면 흐름

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Mar 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants