From c2ea7d7eaaecf059fa46024579a0cf3358dda850 Mon Sep 17 00:00:00 2001
From: seongminn <berry9901@gmail.com>
Date: Wed, 22 Nov 2023 14:16:08 +0900
Subject: [PATCH 1/3] =?UTF-8?q?chore:=20api=20=EB=B3=80=EA=B2=BD=EC=97=90?=
 =?UTF-8?q?=20=EB=94=B0=EB=A5=B8=20=ED=83=80=EC=9E=85=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/game.ts | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/types/game.ts b/src/types/game.ts
index 6bad6d6..9d3744c 100644
--- a/src/types/game.ts
+++ b/src/types/game.ts
@@ -5,22 +5,26 @@ export type GameType = {
   startTime: string;
   firstTeamScore: number;
   secondTeamScore: number;
-  gameStatus: GameStatusType;
+  gameStatus: GameQuarterType;
   statusChangedAt: string;
   firstTeam: GameTeamType;
   secondTeam: GameTeamType;
 };
 
-export interface GameDetailType extends GameType {
-  records: GameRecordType[];
-  videoId: string;
+export interface GameDetailType {
+  gameTeams: GameTeamType[];
+  startTime: string;
+  videoId: number;
+  gameQuarter: GameQuarterType;
+  gameName: string;
 }
 
-export type GameTeamType = {
-  id: number;
-  name: string;
+export interface GameTeamType {
+  gameTeamId: number;
+  gameTeamName: string;
   logoImageUrl: string;
-};
+  score: number;
+}
 
 export type GameRecordType = {
   id: number;
@@ -37,7 +41,7 @@ export type GameCommentType = {
   isBlocked: boolean;
 };
 
-export type GameStatusType =
+export type GameQuarterType =
   | 'BEFORE'
   | 'FIRST_HALF'
   | 'BREAK_TIME'

From 453524c2eb4a9f801896a70e9ac64b45680d7ffa Mon Sep 17 00:00:00 2001
From: seongminn <berry9901@gmail.com>
Date: Wed, 22 Nov 2023 14:18:26 +0900
Subject: [PATCH 2/3] =?UTF-8?q?chore:=20=EA=B2=8C=EC=9E=84=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=EC=A1=B0=20=EB=B0=8F=20?=
 =?UTF-8?q?=ED=83=80=EC=9E=85=20=EB=B3=80=EA=B2=BD=EC=97=90=20=EB=94=B0?=
 =?UTF-8?q?=EB=A5=B8=20=EB=82=B4=EB=B6=80=20=EA=B5=AC=ED=98=84=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Game/index.ts                 | 12 ++++++------
 .../common/Game/{ => pieces}/GameWrapper.tsx        | 13 +++++++++----
 src/components/common/Game/{ => pieces}/Label.tsx   |  4 ++--
 src/components/common/Game/{ => pieces}/Score.tsx   | 10 ++++------
 src/components/common/Game/{ => pieces}/Status.tsx  |  5 ++---
 src/components/common/Game/{ => pieces}/Team.tsx    | 13 +++++++------
 src/hooks/useGameContext.ts                         |  2 +-
 7 files changed, 31 insertions(+), 28 deletions(-)
 rename src/components/common/Game/{ => pieces}/GameWrapper.tsx (59%)
 rename src/components/common/Game/{ => pieces}/Label.tsx (67%)
 rename src/components/common/Game/{ => pieces}/Score.tsx (53%)
 rename src/components/common/Game/{ => pieces}/Status.tsx (54%)
 rename src/components/common/Game/{ => pieces}/Team.tsx (59%)

diff --git a/src/components/common/Game/index.ts b/src/components/common/Game/index.ts
index 40da32f..232fc4a 100644
--- a/src/components/common/Game/index.ts
+++ b/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,
diff --git a/src/components/common/Game/GameWrapper.tsx b/src/components/common/Game/pieces/GameWrapper.tsx
similarity index 59%
rename from src/components/common/Game/GameWrapper.tsx
rename to src/components/common/Game/pieces/GameWrapper.tsx
index 34ab8cc..dcd2408 100644
--- a/src/components/common/Game/GameWrapper.tsx
+++ b/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>
   );
 }
diff --git a/src/components/common/Game/Label.tsx b/src/components/common/Game/pieces/Label.tsx
similarity index 67%
rename from src/components/common/Game/Label.tsx
rename to src/components/common/Game/pieces/Label.tsx
index d463ff8..25f1ce7 100644
--- a/src/components/common/Game/Label.tsx
+++ b/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>;
 }
diff --git a/src/components/common/Game/Score.tsx b/src/components/common/Game/pieces/Score.tsx
similarity index 53%
rename from src/components/common/Game/Score.tsx
rename to src/components/common/Game/pieces/Score.tsx
index dff2e63..e46a412 100644
--- a/src/components/common/Game/Score.tsx
+++ b/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>;
 }
diff --git a/src/components/common/Game/Status.tsx b/src/components/common/Game/pieces/Status.tsx
similarity index 54%
rename from src/components/common/Game/Status.tsx
rename to src/components/common/Game/pieces/Status.tsx
index 3e0fcff..a3c1739 100644
--- a/src/components/common/Game/Status.tsx
+++ b/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>;
 }
diff --git a/src/components/common/Game/Team.tsx b/src/components/common/Game/pieces/Team.tsx
similarity index 59%
rename from src/components/common/Game/Team.tsx
rename to src/components/common/Game/pieces/Team.tsx
index 0faad5f..c5ff67f 100644
--- a/src/components/common/Game/Team.tsx
+++ b/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>
   );
 }
diff --git a/src/hooks/useGameContext.ts b/src/hooks/useGameContext.ts
index 75498d6..f7ca8fa 100644
--- a/src/hooks/useGameContext.ts
+++ b/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;

From 325208e068a57153cb168b0f938864cb296abe61 Mon Sep 17 00:00:00 2001
From: seongminn <berry9901@gmail.com>
Date: Wed, 22 Nov 2023 14:25:36 +0900
Subject: [PATCH 3/3] =?UTF-8?q?chore:=20interface=20->=20type=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/game.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/types/game.ts b/src/types/game.ts
index 9d3744c..05a1b3a 100644
--- a/src/types/game.ts
+++ b/src/types/game.ts
@@ -11,20 +11,20 @@ export type GameType = {
   secondTeam: GameTeamType;
 };
 
-export interface GameDetailType {
+export type GameDetailType = {
   gameTeams: GameTeamType[];
   startTime: string;
   videoId: number;
   gameQuarter: GameQuarterType;
   gameName: string;
-}
+};
 
-export interface GameTeamType {
+export type GameTeamType = {
   gameTeamId: number;
   gameTeamName: string;
   logoImageUrl: string;
   score: number;
-}
+};
 
 export type GameRecordType = {
   id: number;