Merge pull request #10 from Polynomeer/feature/6/game-view

Feature/6/game view

FE/baseball/src/App.js

@@ -1,5 +1,5 @@
-import Router from '@/Routes/Router';
-import GlobalStyles from '@/Styles/GlobalStyles';
+import GlobalStyles from "@/Styles/GlobalStyles"
+import Router from "@/Routes/Router"
 
 const App = () => {
   return (
@@ -10,4 +10,4 @@ const App = () => {
   );
 };
 
-export default App;
+export default App;

FE/baseball/src/Components/Game/Game.jsx

@@ -0,0 +1,20 @@
+import GameHeader from "./GameHeader/GameHeader";
+import GamePlayground from "./GamePlayground/GamePlayground";
+import GamePlayLog from "./GamePlayLog/GamePlayLog";
+import { Game as S } from "@/Components/Game/GameStyles";
+
+const Game = () => {
+  return (
+    <S.Game>
+      <S.GameLeftSection>
+        <GameHeader />
+        <GamePlayground />
+      </S.GameLeftSection>
+      <S.GameRightSection>
+        <GamePlayLog />
+      </S.GameRightSection>
+    </S.Game>
+  );
+};
+
+export { Game };

FE/baseball/src/Components/Game/GameHeader/GameHeader.jsx

@@ -0,0 +1,14 @@
+import GameTitle from "./GameTitle";
+import GameProgress from "./GameProgress/GameProgress";
+import { GameHeader as S } from "@/Components/Game/GameStyles";
+
+const GameHeader = () => {
+  return (
+    <S.GameHeader>
+      <GameTitle />
+      <GameProgress />
+    </S.GameHeader>
+  );
+};
+
+export default GameHeader;

FE/baseball/src/Components/Game/GameHeader/GameProgress/CurrentPlayerTag.jsx

@@ -0,0 +1,9 @@
+import { GameHeader as S } from "@/Components/Game/GameStyles";
+
+const CurrentPlayerTag = () => {
+  return (
+    <S.GameProgress.CurrentPlayerTag>Player</S.GameProgress.CurrentPlayerTag>
+  );
+};
+
+export default CurrentPlayerTag;

FE/baseball/src/Components/Game/GameHeader/GameProgress/GameProgress.jsx

@@ -0,0 +1,18 @@
+import Score from "./Score";
+import TeamName from "./TeamName";
+import VS from "./VS";
+import { GameHeader as S } from "@/Components/Game/GameStyles";
+
+const GameProgress = () => {
+  return (
+    <S.GameProgress.GameProgress>
+      <TeamName teamName={"Swing"} isCurrentPlayer={true} />
+      <Score score={1} />
+      <VS />
+      <Score score={5} />
+      <TeamName teamName={"Raccoon"} isCurrentPlayer={false} />
+    </S.GameProgress.GameProgress>
+  );
+};
+
+export default GameProgress;

FE/baseball/src/Components/Game/GameHeader/GameProgress/Score.jsx

@@ -0,0 +1,7 @@
+import { GameHeader as S } from "@/Components/Game/GameStyles";
+
+const Score = ({ score }) => {
+  return <S.GameProgress.Score>{score}</S.GameProgress.Score>;
+};
+
+export default Score;

FE/baseball/src/Components/Game/GameHeader/GameProgress/TeamName.jsx

@@ -0,0 +1,13 @@
+import CurrentPlayerTag from "./CurrentPlayerTag";
+import { GameHeader as S } from "@/Components/Game/GameStyles";
+
+const TeamName = ({ teamName, isCurrentPlayer }) => {
+  return (
+    <S.GameProgress.TeamNameWrapper>
+      <S.GameProgress.TeamName>{teamName}</S.GameProgress.TeamName>
+      {isCurrentPlayer ? <CurrentPlayerTag /> : null}
+    </S.GameProgress.TeamNameWrapper>
+  );
+};
+
+export default TeamName;

FE/baseball/src/Components/Game/GameHeader/GameProgress/VS.jsx

@@ -0,0 +1,7 @@
+import { GameHeader as S } from "@/Components/Game/GameStyles";
+
+const VS = () => {
+  return <S.GameProgress.VS>VS</S.GameProgress.VS>;
+};
+
+export default VS;

FE/baseball/src/Components/Game/GameHeader/GameTitle.jsx

@@ -0,0 +1,7 @@
+import { GameHeader as S } from "@/Components/Game/GameStyles";
+
+const GameTitle = () => {
+  return <S.GameTitle>Team illy'swing BASEBALL</S.GameTitle>;
+};
+
+export default GameTitle;

FE/baseball/src/Components/Game/GamePlayLog/CurrentPlayer/CurrentPlayer.jsx

@@ -0,0 +1,14 @@
+import PlayerBox from "./PlayerBox";
+import { GamePlayLog as S } from "@/Components/Game/GameStyles";
+
+const CurrentPlayer = ({ currentPlayer }) => {
+  return (
+    <S.CurrentPlayer.CurrentPlayer>
+      {/* playerBox에는 선수이름,포지션,투구갯수 or 타석/안타 정보가 props로 내려질 예정입니다.*/}
+      <PlayerBox />
+      <PlayerBox />
+    </S.CurrentPlayer.CurrentPlayer>
+  );
+};
+
+export default CurrentPlayer;

FE/baseball/src/Components/Game/GamePlayLog/CurrentPlayer/PlayerBox.jsx

@@ -0,0 +1,15 @@
+import Position from "./Position";
+import PlayerName from "./PlayerName";
+import PlayerDescription from "./PlayerDescription";
+
+const PlayerBox = () => {
+  return (
+    <div>
+      <Position />
+      <PlayerName />
+      <PlayerDescription />
+    </div>
+  );
+};
+
+export default PlayerBox;

FE/baseball/src/Components/Game/GamePlayLog/CurrentPlayer/PlayerDescription.jsx

@@ -0,0 +1,9 @@
+import { GamePlayLog as S } from "@/Components/Game/GameStyles";
+
+const PlayerDescription = ({ playerDescription }) => {
+  return (
+    <S.CurrentPlayer.PlayerDescription>#38</S.CurrentPlayer.PlayerDescription>
+  );
+};
+
+export default PlayerDescription;

FE/baseball/src/Components/Game/GamePlayLog/CurrentPlayer/PlayerName.jsx

@@ -0,0 +1,7 @@
+import { GamePlayLog as S } from "@/Components/Game/GameStyles";
+
+const PlayerName = ({ playerName }) => {
+  return <S.CurrentPlayer.PlayerName>최동원</S.CurrentPlayer.PlayerName>;
+};
+
+export default PlayerName;

FE/baseball/src/Components/Game/GamePlayLog/CurrentPlayer/Position.jsx

@@ -0,0 +1,7 @@
+import { GamePlayLog as S } from "@/Components/Game/GameStyles";
+
+const Position = ({ position }) => {
+  return <S.CurrentPlayer.Position>투수</S.CurrentPlayer.Position>;
+};
+
+export default Position;

FE/baseball/src/Components/Game/GamePlayLog/GamePlayLog.jsx

@@ -0,0 +1,14 @@
+import CurrentPlayer from "./CurrentPlayer/CurrentPlayer";
+import PlayerLog from "./PlayerLog/PlayerLog";
+import { GamePlayLog as S } from "@/Components/Game/GameStyles";
+
+const GamePlayLog = () => {
+  return (
+    <S.GamePlayLog>
+      <CurrentPlayer />
+      <PlayerLog />
+    </S.GamePlayLog>
+  );
+};
+
+export default GamePlayLog;

FE/baseball/src/Components/Game/GamePlayLog/PlayerLog/Log.jsx

@@ -0,0 +1,16 @@
+import LogRow from "./LogRow/LogRow";
+import { GamePlayLog as S } from "@/Components/Game/GameStyles";
+
+const Log = () => {
+  return (
+    <S.PlayerLog.Log>
+      <LogRow />
+      <LogRow />
+      <LogRow />
+      <LogRow />
+      <LogRow />
+    </S.PlayerLog.Log>
+  );
+};
+
+export default Log;

FE/baseball/src/Components/Game/GamePlayLog/PlayerLog/LogBox.jsx

@@ -0,0 +1,13 @@
+import LogTitle from "./LogTitle";
+import Log from "./Log";
+
+const LogBox = () => {
+  return (
+    <>
+      <LogTitle />
+      <Log />
+    </>
+  );
+};
+
+export default LogBox;

FE/baseball/src/Components/Game/GamePlayLog/PlayerLog/LogRow/LogRow.jsx

@@ -0,0 +1,16 @@
+import LogRowNumber from "./LogRowNumber";
+import LogRowAction from "./LogRowAction";
+import LogRowBallCount from "./LogRowBallCount";
+import { GamePlayLog as S } from "@/Components/Game/GameStyles";
+
+const Log = () => {
+  return (
+    <S.PlayerLog.LogRow>
+      <LogRowNumber />
+      <LogRowAction />
+      <LogRowBallCount />
+    </S.PlayerLog.LogRow>
+  );
+};
+
+export default Log;

FE/baseball/src/Components/Game/GamePlayLog/PlayerLog/LogRow/LogRowAction.jsx

@@ -0,0 +1,17 @@
+import { GamePlayLog as S } from "@/Components/Game/GameStyles";
+
+const LogRowAction = ({ action }) => {
+  // let isEndAction;
+  // if (action === "안타" || action === "아웃" || action === "홈런") {
+  //   isEndAction = true;
+  // } else {
+  //   isEndAction = false;
+  // }
+  return (
+    <S.PlayerLog.LogRowAction isEndAction={true}>
+      스트라이크
+    </S.PlayerLog.LogRowAction>
+  );
+};
+
+export default LogRowAction;

FE/baseball/src/Components/Game/GamePlayLog/PlayerLog/LogRow/LogRowBallCount.jsx

@@ -0,0 +1,7 @@
+import { GamePlayLog as S } from "@/Components/Game/GameStyles";
+
+const LogRowBallCount = ({ ballCount }) => {
+  return <S.PlayerLog.LogRowBallCount>S1 B2</S.PlayerLog.LogRowBallCount>;
+};
+
+export default LogRowBallCount;

FE/baseball/src/Components/Game/GamePlayLog/PlayerLog/LogRow/LogRowNumber.jsx

@@ -0,0 +1,7 @@
+import { GamePlayLog as S } from "@/Components/Game/GameStyles";
+
+const LogRowNumber = ({ logNumber }) => {
+  return <S.PlayerLog.LogRowNumber>1</S.PlayerLog.LogRowNumber>;
+};
+
+export default LogRowNumber;

FE/baseball/src/Components/Game/GamePlayLog/PlayerLog/LogTitle.jsx

@@ -0,0 +1,11 @@
+import { GamePlayLog as S } from "@/Components/Game/GameStyles";
+
+const LogTitle = ({ isCurrentPlayer }) => {
+  return (
+    <S.PlayerLog.LogTitle isCurrentPlayer={true}>
+      4번 타자 이준석
+    </S.PlayerLog.LogTitle>
+  );
+};
+
+export default LogTitle;

FE/baseball/src/Components/Game/GamePlayLog/PlayerLog/PlayerLog.jsx

@@ -0,0 +1,15 @@
+import LogBox from "./LogBox";
+import { GamePlayLog as S } from "@/Components/Game/GameStyles";
+
+const PlayerLog = () => {
+  return (
+    <S.PlayerLog.PlayerLog>
+      <LogBox />
+      <LogBox />
+      <LogBox />
+      <LogBox />
+    </S.PlayerLog.PlayerLog>
+  );
+};
+
+export default PlayerLog;

FE/baseball/src/Components/Game/GamePlayground/BallCountBoard/BallCount.jsx

@@ -0,0 +1,7 @@
+import { GamePlayground as S } from "@/Components/Game/GameStyles";
+
+const BallCount = ({ type }) => {
+  return <S.BallCountBoard.BallCount type={type} />;
+};
+
+export default BallCount;

FE/baseball/src/Components/Game/GamePlayground/BallCountBoard/BallCountBoard.jsx

@@ -0,0 +1,28 @@
+import BallJudgement from "./BallJudgement";
+import BallCount from "./BallCount";
+import { GamePlayground as S } from "@/Components/Game/GameStyles";
+import * as CS from "@/Styles/CommonStyles";
+
+const BallCountBoard = () => {
+  // 나중엔 ballcountrow쯤으로 관리하고 type이랑 count props를 내려주는 방향으로 리펙토링
+  return (
+    <S.BallCountBoard.BallCountBoard>
+      <CS.BOX.FLEX_ROW_CENTER_BOX>
+        <BallJudgement type={"S"} />
+        <BallCount type={"STRIKE"} />
+        <BallCount type={"STRIKE"} />
+      </CS.BOX.FLEX_ROW_CENTER_BOX>
+      <CS.BOX.FLEX_ROW_CENTER_BOX>
+        <BallJudgement type={"B"} />
+        <BallCount type={"BALL"} />
+        <BallCount type={"BALL"} />
+      </CS.BOX.FLEX_ROW_CENTER_BOX>
+      <CS.BOX.FLEX_ROW_CENTER_BOX>
+        <BallJudgement type={"O"} />
+        <BallCount type={"OUT"} />
+      </CS.BOX.FLEX_ROW_CENTER_BOX>
+    </S.BallCountBoard.BallCountBoard>
+  );
+};
+
+export default BallCountBoard;

FE/baseball/src/Components/Game/GamePlayground/BallCountBoard/BallJudgement.jsx

@@ -0,0 +1,9 @@
+import { GamePlayground as S } from "@/Components/Game/GameStyles";
+
+const BallJudgement = ({ type }) => {
+  return (
+    <S.BallCountBoard.BallJudgement>{type}</S.BallCountBoard.BallJudgement>
+  );
+};
+
+export default BallJudgement;

FE/baseball/src/Components/Game/GamePlayground/GameDisplay/GameDisplay.jsx

@@ -0,0 +1,7 @@
+import { GamePlayground as S } from "@/Components/Game/GameStyles";
+
+const GameDisplay = () => {
+  return <S.GameDisplay>GameDisplay</S.GameDisplay>;
+};
+
+export default GameDisplay;

FE/baseball/src/Components/Game/GamePlayground/GamePlayground.jsx

@@ -0,0 +1,21 @@
+import InningInfo from "./InningInfo";
+import PitchButton from "./PitchButton";
+import GameDisplay from "./GameDisplay/GameDisplay";
+import BallCountBoard from "./BallCountBoard/BallCountBoard";
+import { GamePlayground as S } from "@/Components/Game/GameStyles";
+
+const GamePlayground = () => {
+  const backgroundUrl =
+    "https://upload.wikimedia.org/wikipedia/commons/8/80/Munhak_baseball_stadium_2012.png";
+  return (
+    <S.GamePlayground>
+      <S.Background src={backgroundUrl} />
+      <BallCountBoard />
+      <InningInfo inningInfo={"2회초 수비"} />
+      <GameDisplay />
+      <PitchButton />
+    </S.GamePlayground>
+  );
+};
+
+export default GamePlayground;

FE/baseball/src/Components/Game/GamePlayground/InningInfo.jsx

@@ -0,0 +1,7 @@
+import { GamePlayground as S } from "@/Components/Game/GameStyles";
+
+const InningInfo = ({ inningInfo }) => {
+  return <S.InningInfo>{inningInfo}</S.InningInfo>;
+};
+
+export default InningInfo;

FE/baseball/src/Components/Game/GamePlayground/PitchButton.jsx

@@ -0,0 +1,7 @@
+import { GamePlayground as S } from "@/Components/Game/GameStyles";
+
+const PitchButton = () => {
+  return <S.PitchButton>Pitch</S.PitchButton>;
+};
+
+export default PitchButton;