[jaqwe2301]

📄 PR 내용 요약

진행 중 나갔다가 다시 들어와도 진행 현황을 받을 수 있도록 서버와 연결하여 2가지 문제 해결하였습니다!

✅ 작업 내용 상세

• 타이밍 맞추기 게임에서 한 명이 타이밍 클릭 안 하거나 새로고침하면 다음 단계 진행이 안 됨
  • 게임 시작 전/후로 일정시간 무응답이면 설정한 가장 높은 시간(꼴찌값)을 서버로 전달합니다. 새로고침하였을 때 다시 정보를 받을 수 있도록 종현님께 요청 후, 반영하였습니다.
• 리더 게임 선택 화면에서 팀장이 새로고침 할 경우 다음 단계 진행 불가
  • 이 부분도 새로고침하였을 때 다시 정보를 받을 수 있도록 종현님께 요청 후, 반영하였습니다.

💬 참고 사항

다음은 추후 구현 사항입니다.

• 타이밍 게임 시작 후 새로고침을 하였을 때의 예외처리 (게임 시작 후 시간이 마음이 안 들어서 다시 새로고침, 결과 전송을 했지만 새로고침 후 결과가 불어오지 않음) -> 종현님과 상의 후 해결
• 타임아웃 후 UI 처리 -> 지금은 서버로 값만 보내기만 함

📝 체크리스트

• 기능이 정상 동작하는지 확인
• 로컬 빌드/테스트 통과
• 불필요한 코드/주석 제거

[gemini-code-assist]

Summary of Changes

Hello @jaqwe2301, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 PR은 리더 선정 및 타이밍 게임 기능의 견고성을 향상시키는 데 중점을 둡니다. 클라이언트 측 새로고침 또는 사용자 무응답 시 서버와의 상태 동기화를 구현하여 게임 진행이 중단되는 문제를 방지합니다. 이를 통해 모든 참가자가 일관된 게임 경험을 유지할 수 있도록 하며, 특히 중요한 게임 단계에서 사용자가 페이지를 새로고침하거나 비활성화되더라도 원활한 진행을 보장합니다.

Highlights

• 새로고침 및 무응답 시 게임 진행 상태 동기화: 사용자가 새로고침하거나 특정 게임 단계에서 무응답일 경우, 서버와 연결하여 현재 진행 상태를 다시 받아오도록 하여 게임 진행이 멈추는 문제를 해결했습니다.
• 타이밍 게임 타임아웃 처리: 타이밍 게임에서 사용자가 일정 시간(10초) 내에 클릭하지 않거나 새로고침할 경우, 자동으로 가장 높은 시간(꼴찌값)을 서버로 전송하고 다음 단계로 진행되도록 처리했습니다.
• 리더 게임 선택 화면 새로고침 처리: 팀장이 리더 게임 선택 화면에서 새로고침할 경우, 현재 게임 상태를 서버로부터 다시 받아와 올바른 단계로 복원되도록 구현했습니다.
• WebSocket 메시지 타입 확장: 새로운 ReloadPayload 및 ReloadMessage 인터페이스를 추가하여 새로고침 시 서버로부터 게임 상태를 효율적으로 전달받을 수 있도록 WebSocket 통신 타입을 확장했습니다.
• 클라이언트 측 상태 복원 로직 추가: SelectLeader 컴포넌트에서 RELOAD_SUCCESS 메시지를 처리하여, 새로고침 후에도 사용자의 역할 및 게임 단계를 (VOLUNTEER, GAME_SELECT, GAME_PLAYING) 정확하게 복원하도록 로직을 추가했습니다.

Changelog

• src/entities/leader-game/api/ws-types.ts
  • ReloadPayload 인터페이스를 추가하여 새로고침 요청 시 전송되는 데이터 구조를 정의했습니다.
  • UserJoinedMessage의 페이로드 타입을 Participants로 변경했습니다.
  • PhaseChangeMessage의 selectedGame 속성이 GameType | null을 허용하도록 업데이트했습니다.
  • 성공적인 새로고침 응답을 위한 ReloadMessage 인터페이스를 추가했습니다.
• src/features/leader-game/timing-game/model/useTimingGame.ts
  • onClickButton 함수가 선택적 isTimeOut 매개변수를 받도록 수정하여 타임아웃 처리 시 게임을 프로그래밍 방식으로 중지할 수 있도록 했습니다.
• src/features/leader-game/timing-game/ui/TimingGame.tsx
  • durationSeconds를 처리하고 기본값을 제공하는 duration 변수를 도입했습니다.
  • 타임아웃 조건에 대한 주석을 명확히 했습니다.
  • 컴포넌트 마운트 시 게임 종료 시간이 이미 지났다면 즉시 타임아웃을 처리하는 로직을 추가했습니다.
  • useEffect 훅의 의존성 배열을 durationSeconds 대신 duration을 사용하도록 업데이트했습니다.
  • TimerBar의 totalMs prop이 새로운 duration 변수를 사용하도록 업데이트했습니다.
• src/features/leader-game/ws/model/useLeaderGameSocket.ts
  • ReloadMessage 타입을 임포트했습니다.
  • onJoinResponse 콜백 타입이 VolunteerUpdatedMessage 외에 ReloadMessage도 허용하도록 업데이트했습니다.
  • wsDest에 reload 발행자 대상을 추가했습니다.
  • actions에 reload 액션을 추가하여 새로고침 요청을 발행할 수 있도록 했습니다.
  • 연결 시 상태 새로고침을 트리거하기 위해 useEffect 훅에 actions.reload() 호출을 추가했습니다.
• src/widgets/teamroom/leader-game/index.tsx
  • ReloadMessage 및 VolunteerUpdatedMessage 타입을 임포트했습니다.
  • getTeamRoomDetail API를 임포트했습니다.
  • useLeaderSelectionStore 훅에 setRole을 추가했습니다.
  • onRoomMessage를 async 함수로 수정했습니다.
  • onJoinResponse를 리팩토링하여 VOTE_UPDATED와 RELOAD_SUCCESS 메시지 모두를 처리하도록 했습니다.
  • RELOAD_SUCCESS 처리 로직 내에서 새로고침된 페이로드를 기반으로 올바른 게임 단계(VOLUNTEER, GAME_SELECT, GAME_PLAYING) 및 사용자 역할을 복원하는 로직을 구현했습니다.

Activity

• PR 작성자 jaqwe2301님이 이 PR을 생성했습니다.
• 이 PR은 타이밍 게임 및 리더 선택 과정에서 사용자 새로고침 또는 무응답으로 인해 게임 진행이 멈추는 문제를 해결합니다.
• 작성자는 '종현님'과 협력하여 새로고침 시나리오를 위한 서버 측 상태 동기화를 구현했습니다.
• 작성자는 기능이 정상적으로 동작하고, 로컬 빌드/테스트를 통과했으며, 불필요한 코드/주석이 제거되었음을 확인했습니다.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

안녕하세요! 팀장 정하기 서버 재연결 및 타이밍 게임 타임아웃 처리 추가를 위한 PR 잘 보았습니다. 새로고침 시에도 상태를 복구하는 로직과 타임아웃 예외처리를 추가하여 사용자 경험을 크게 개선한 점이 인상적입니다. 전반적으로 코드가 잘 작성되었으며, 코드의 안정성과 유지보수성을 더욱 높일 수 있는 몇 가지 제안 사항을 리뷰에 남겼습니다. alert 사용, 잠재적인 null 참조, 중복 조건문, 그리고 상수화가 필요한 매직 넘버에 대한 내용입니다. 확인 부탁드립니다!

[junye0l]

고생하셨습니다 ! 🔥🔥🔥