merge: 사용자 피드백을 반영하여 게임 화면에서 멤버별 투표 현황 보여주기 #427

[FEAT] 사용자 피드백을 반영하여 게임 화면에서 멤버별 투표 현황 보여주기

frontend/src/apis/balanceContent.ts

@@ -21,6 +21,8 @@ interface myGameStatusParams {
 
 interface VoteIsFinished {
   isFinished: boolean;
+  memberCount: number;
+  voteCount: number;
 }
 
 interface MatchingResultParams {

frontend/src/constants/url.ts

@@ -1,5 +1,3 @@
-import { getUserInfo } from '@/apis/room';
-
 const BASE_URL = process.env.API_BASE_URL;
 
 export const API_URL = {

frontend/src/pages/GamePage/components/SelectContainer/GameVoteStatusContainer/GameVoteStatusContainer.styled.ts

@@ -0,0 +1,24 @@
+import { css } from '@emotion/react';
+import type { Theme } from '@emotion/react';
+
+export const gameVoteStatusLayout = css`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1.2rem;
+  height: 4rem;
+`;
+
+export const voteStatusMessage = (theme: Theme, isPending: boolean) => css`
+  font-weight: bold;
+  font-size: 1.6rem;
+  opacity: ${isPending ? theme.opacity.invisible : theme.opacity.default};
+  transition: 1s;
+`;
+
+export const voteAnnounceMessage = (theme: Theme) => css`
+  color: ${theme.color.gray500};
+  font-weight: bold;
+  font-size: 1.2rem;
+`;

frontend/src/pages/GamePage/components/SelectContainer/GameVoteStatusContainer/GameVoteStatusContainer.tsx

@@ -0,0 +1,29 @@
+import {
+  gameVoteStatusLayout,
+  voteStatusMessage,
+  voteAnnounceMessage,
+} from './GameVoteStatusContainer.styled';
+import useVoteIsFinished from '../hooks/useVoteIsFinished';
+
+interface GameVoteStatusContainerProps {
+  contentId: number;
+  isFetching: boolean;
+}
+
+const GameVoteStatusContainer = ({ contentId, isFetching }: GameVoteStatusContainerProps) => {
+  const { voteCount, memberCount, isPending } = useVoteIsFinished({
+    contentId,
+    isFetching,
+  });
+
+  const voteStatusText = `${memberCount ?? 0}명 중 ${voteCount ?? 0}명이 투표했어요!`;
+
+  return (
+    <div css={gameVoteStatusLayout}>
+      <span css={(theme) => voteStatusMessage(theme, isPending)}>{voteStatusText}</span>
+      <span css={voteAnnounceMessage}>“모두 선택하면 빠르게 결과를 확인할 수 있어요”</span>
+    </div>
+  );
+};
+
+export default GameVoteStatusContainer;

frontend/src/pages/GamePage/components/SelectContainer/SelectContainer.tsx

@@ -1,5 +1,6 @@
 import { useParams } from 'react-router-dom';
 
+import GameVoteStatusContainer from './GameVoteStatusContainer/GameVoteStatusContainer';
 import useSelectOption from './hooks/useSelectOption';
 import { selectContainerLayout, selectSection } from './SelectContainer.styled';
 import SelectOption from './SelectOption/SelectOption';
@@ -10,7 +11,7 @@ import useBalanceContentQuery from '@/hooks/useBalanceContentQuery';
 
 const SelectContainer = () => {
   const { roomId } = useParams();
-  const { balanceContent } = useBalanceContentQuery(Number(roomId));
+  const { balanceContent, isFetching } = useBalanceContentQuery(Number(roomId));
   const { selectedOption, handleClickOption, completeSelection, cancelSelection } =
     useSelectOption();
 
@@ -34,6 +35,7 @@ const SelectContainer = () => {
           handleClickOption={handleClickOption}
         />
       </section>
+      <GameVoteStatusContainer contentId={balanceContent.contentId} isFetching={isFetching} />
       <SelectButton
         contentId={balanceContent.contentId}
         selectedOption={selectedOption}

frontend/src/pages/GamePage/components/SelectContainer/hooks/useVoteIsFinished.ts

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
-import useRoundIsFinishedQuery from './useVoteIsFinishedQuery';
+import useVoteIsFinishedQuery from './useVoteIsFinishedQuery';
 
 import { ROUTES } from '@/constants/routes';
 
@@ -13,7 +13,7 @@ interface UseRoundIsFinishedProps {
 const useVoteIsFinished = ({ contentId, isFetching }: UseRoundIsFinishedProps) => {
   const navigate = useNavigate();
   const { roomId } = useParams();
-  const { isFinished } = useRoundIsFinishedQuery({
+  const { isFinished, memberCount, voteCount, isPending } = useVoteIsFinishedQuery({
     contentId,
     enabled: !!contentId && !isFetching,
   });
@@ -24,7 +24,7 @@ const useVoteIsFinished = ({ contentId, isFetching }: UseRoundIsFinishedProps) =
     }
   }, [isFinished, navigate, roomId, isFetching]);
 
-  return { isFinished };
+  return { memberCount, voteCount, isPending };
 };
 
 export default useVoteIsFinished;

frontend/src/pages/GamePage/components/SelectContainer/hooks/useVoteIsFinishedQuery.ts

@@ -33,7 +33,12 @@ const useVoteIsFinishedQuery = ({ contentId, enabled }: UseVoteIsFinishedQueryPr
     gcTime: 0,
   });
 
-  return { ...voteIsFinishedQuery, isFinished: voteIsFinishedQuery.data?.isFinished };
+  return {
+    ...voteIsFinishedQuery,
+    isFinished: voteIsFinishedQuery.data?.isFinished,
+    memberCount: voteIsFinishedQuery.data?.memberCount,
+    voteCount: voteIsFinishedQuery.data?.voteCount,
+  };
 };
 
 export default useVoteIsFinishedQuery;

frontend/src/pages/ReadyPage/components/StartButtonContainer/hooks/useCountdown.ts

@@ -17,7 +17,7 @@ const useCountdown = ({ isGameStart }: UseCountdownProps) => {
   };
 
   const goToGame = () => {
-    navigate(ROUTES.game(Number(roomId)));
+    navigate(ROUTES.game(Number(roomId)), { replace: true });
   };
 
   useEffect(() => {

frontend/src/styles/Theme.ts

@@ -61,7 +61,7 @@ const opacity = {
   invisible: 0,
   disabled: 0.6,
   default: 1,
-};
+} as const;
 
 export const Theme = {
   color,

frontend/src/styles/emotion.d.ts

@@ -1,7 +1,8 @@
 import '@emotion/react';
+import { Theme } from './Theme';
+
+type ExtendedTheme = typeof Theme;
 
 declare module '@emotion/react' {
-  export interface Theme {
-    color: { [key: string]: string };
-  }
+  export interface Theme extends ExtendedTheme {}
 }