chore: 게임 컴포넌트 구조 및 타입 변경에 따른 내부 구현 변경

src/components/common/Game/index.ts

@@ -1,10 +1,10 @@
-import GameWrapper from './GameWrapper';
-import Label from './Label';
-import Score from './Score';
-import Status from './Status';
-import Team from './Team';
+import GameWrapper from './pieces/GameWrapper';
+import Label from './pieces/Label';
+import Score from './pieces/Score';
+import Status from './pieces/Status';
+import Team from './pieces/Team';
 
-export const Game = Object.assign(GameWrapper, {
+export const GameBanner = Object.assign(GameWrapper, {
   Label,
   Score,
   Status,

src/components/common/Game/GameWrapper.tsx → src/components/common/Game/pieces/GameWrapper.tsx

@@ -8,9 +8,7 @@ type GameProps = GameDetailType & {
   className?: string;
 };
 
-export const GameContext = createContext<null | GameDetailType>(
-  {} as GameDetailType,
-);
+export const GameContext = createContext<GameDetailType>({} as GameDetailType);
 
 export default function GameWrapper({
   className,
@@ -19,7 +17,14 @@ export default function GameWrapper({
 }: GameProps) {
   return (
     <GameContext.Provider value={props}>
-      <div className={$(className)}>{children}</div>
+      <div
+        className={$(
+          'relative h-full min-h-[200px] justify-center rounded-xl bg-gray-1 shadow-lg',
+          className,
+        )}
+      >
+        {children}
+      </div>
     </GameContext.Provider>
   );
 }

src/components/common/Game/Label.tsx → src/components/common/Game/pieces/Label.tsx

@@ -6,7 +6,7 @@ type LabelProps = {
 };
 
 export default function Label({ className }: LabelProps) {
-  const { name } = useGameContext();
+  const { gameName } = useGameContext();
 
-  return <div className={$(className)}>{name}</div>;
+  return <div className={$(className)}>{gameName}</div>;
 }

src/components/common/Game/Score.tsx → src/components/common/Game/pieces/Score.tsx

@@ -7,11 +7,9 @@ type ScoreProps = {
 };
 
 export default function Score({ teamIndex, className }: ScoreProps) {
-  const { firstTeamScore, secondTeamScore } = useGameContext();
+  const { gameTeams } = useGameContext();
 
-  return (
-    <span className={$(className)}>
-      {teamIndex === 1 ? firstTeamScore : secondTeamScore}
-    </span>
-  );
+  const [targetTeam] = gameTeams.filter(team => team.gameTeamId === teamIndex);
+
+  return <span className={$('text-3xl', className)}>{targetTeam.score}</span>;
 }

src/components/common/Game/Status.tsx → src/components/common/Game/pieces/Status.tsx

@@ -1,4 +1,3 @@
-import { GAME_STATUS } from '@/constants/gameStatus';
 import { useGameContext } from '@/hooks/useGameContext';
 import { $ } from '@/utils/core';
 
@@ -7,7 +6,7 @@ type StatusProps = {
 };
 
 export default function Status({ className }: StatusProps) {
-  const { gameStatus } = useGameContext();
+  const { gameQuarter } = useGameContext();
 
-  return <div className={$(className)}>{GAME_STATUS[gameStatus]}</div>;
+  return <div className={$('px-5', className)}>{gameQuarter}</div>;
 }

src/components/common/Game/Team.tsx → src/components/common/Game/pieces/Team.tsx

@@ -9,19 +9,20 @@ type TeamProps = {
 };
 
 export default function Team({ teamIndex, className }: TeamProps) {
-  const { firstTeam, secondTeam } = useGameContext();
+  const { gameTeams } = useGameContext();
 
-  const targetTeamInfo = teamIndex === 1 ? firstTeam : secondTeam;
+  const targetTeamInfo = gameTeams[teamIndex - 1];
 
   return (
     <div className={$(className)}>
       <Image
-        width="100"
-        height="100"
+        width="65"
+        height="65"
         src={targetTeamInfo.logoImageUrl}
-        alt={`${targetTeamInfo.name}팀 로고`}
+        alt={`${targetTeamInfo.gameTeamName}팀 로고`}
+        className="my-5"
       />
-      <span>{targetTeamInfo.name}</span>
+      <span>{targetTeamInfo.gameTeamName}</span>
     </div>
   );
 }

src/hooks/useGameContext.ts

@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 
-import { GameContext } from '@/components/common/Game/GameWrapper';
+import { GameContext } from '@/components/common/Game/pieces/GameWrapper';
 import { GameDetailType } from '@/types/game';
 
 type GameContextType = () => GameDetailType;