-
Notifications
You must be signed in to change notification settings - Fork 1
선착순 밸런스 게임 최종 결과 계산에 대한 고민 (08.14)
선착순 밸런스 게임 최종 결과 계산하는 과정에서 고민이 있었다. 우선 백엔드에서 받은 데이터는 아래와 같았다.
export interface GetRushResultResponse {
leftOption: number;
rightOption: number;
rank: number;
totalParticipants: number;
winnerCount: number;
}
- leftOption: 왼쪽 옵션을 선택한 총 참여자 수
- rightOption: 오른쪽 옵션을 선택한 총 참여자 수
- rank: 본 참여자가 선택한 옵션에 대한 참여자의 선착순 등수
- totalParticipants: 본 참여자가 선택한 옵션에 대하여 동일한 옵션을 선택한 총 참여자 수
- winnerCount: 선착순 밸런스 게임에 당첨될 총 인원 수
위와 같은 데이터를 받고 있는데, leftOption, rightOption은 마지막 FinalResult 페이지에서 프로그래스바 비율을 최종적으로 반영하기 위해서 필요했고, rank와 totalParticipants는 메인 위치에 두 값을 바로 넣어주어야해서 필요했다.
여기서 winnerCount가 추가로 필요했는데, 그 이유는 본 참여자에 대하여 선착순 당첨 여부를 계산해야 했기 때문이다. 당첨 여부를 계산해야 메인 타이틀에서 “축하해요”, “아쉽네요”와 같은 멘트를 통해 참여자에게 당첨 여부를 보여줄 수가 있다.
원래의 목적은 참여자가 선택한 옵션의 비율이 더 클 경우, 그 안에서 참여자의 rank가 winnerCount보다 작거나 같은지 계산해서 당첨 여부를 판단하려고 했다. 하지만 구현하려고 보니 동점일 경우를 고려하지 못했다는 것을 깨달았다.
만약 leftOption === rightOption 인 경우, 즉 두 옵션을 선택한 총 참여자 수가 동일할 경우, 두 옵션을 선택한 인원 수를 합친 전체 참여자 수(totalParticipants)를 받아야하고, 전체 참여자 수에 대한 해당 참여자의 선착순 등수(rank)를 받아야 한다. 즉, rank와 totalParticipants를 전체 인원수 기준으로 받아야 했다.
하지만 이 과정에서 팀원들과 상의하면서 아예 선착순 등수 계산하는 과정을 다 백엔드에서 처리하는 것이 어떻겠냐는 의견이 나왔다. winnerCount를 받지 말고, 아예 해당 참여자가 선착순 등수 안에 들었는지에 대한 여부를 boolean 값으로 받아서 그 값으로만 클라이언트 측에서 처리하는 것으로 변경하였다.
결론적으로 데이터 구조가 다음과 같이 변경되었다.
export interface GetRushResultResponse {
isWinner: boolean; // winnerCount 삭제 후 isWinner 추가
leftOption: number;
rightOption: number;
rank: number;
totalParticipants: number;
}
백엔드 팀원도 오히려 알고리즘 문제 푸는 것 같아서 신난다고 좋아해서 다행이었다! :)
- 페이지가 렌더링 된 후 스크롤을 최상단으로 올리기
- DOM을 이미지로 저장하기
- Context API에서 불필요한 리렌더링을 줄이는 방법
- 무한 Transition 애니메이션
- Github Action 워크플로우 정의하기
- 무한 Transition 애니메이션 최적화하기
- 무한 Transition 애니메이션 최적화하기 2
- 무한 Transition 애니메이션 최적화하기 3
- fetch timeout 구현하기
- ErrorBoundary 구현하기
- 뒤로가기 confirm 로직 구현하기
- 선착순 밸런스 게임 상태 관리
- Modal 내부 컴포넌트에서 무한 스크롤이 제대로 동작 안되는 문제
- useToggleContents 훅 기본값 설정 및 조건부 사용법
- 폰트 굵기 적용 이슈
- SVG 내부 stroke 속성 값 제어를 위한 SVGIcon Util 함수 및 SVGR 사용 과정
- tailwindCSS의 @apply를 cva로 바꾸기
- 스크롤 내려갈 때 해당 섹션의 요소들 인터렉션 동작
- 공통 컴포넌트 내부에 애니메이션을 넣는 것에 대한 고민
- 특정 컴포넌트 위치에서 헤더 스타일 다르게 적용하는 방법
- 스크롤 거꾸로 올릴 때 IntersectionObserver가 뷰포트 감지 못하는 현상
- 선착순 밸런스 게임 최종 결과 계산에 대한 고민 (08.14)
- 프로그래스바 공통 컴포넌트로 분리
- (08.23 기준) 선착순 서버 시간 연동 문제
- 게임 종료된 상태에서 사용자 게임 참여 여부에 따른 FinalResult 분기 처리
- FinalResult 컴포넌트의 “당신의 선택” 카테고리 설정 이슈
- 게임 접속 시 게임 현재 진행 상태 초기화 및 카운트 다운 설정
- 선착순 밸런스 게임 UX 개선