diff --git a/FE/baseball/src/Components/Game/Game.jsx b/FE/baseball/src/Components/Game/Game.jsx index 62459c945..4414dbe36 100644 --- a/FE/baseball/src/Components/Game/Game.jsx +++ b/FE/baseball/src/Components/Game/Game.jsx @@ -1,12 +1,13 @@ -import GameHeader from './GameHeader/GameHeader'; -import GamePlayground from './GamePlayground/GamePlayground'; -import GamePlayLog from './GamePlayLog/GamePlayLog'; -import { Game as S } from '@/Components/Game/GameStyles'; -import ScoreBoard from './ScoreBoard/ScoreBoard'; +import GameHeader from "./GameHeader/GameHeader"; +import GamePlayground from "./GamePlayground/GamePlayground"; +import GamePlayLog from "./GamePlayLog/GamePlayLog"; +import SquadBoard from "./SquadBoard/SquadBoard"; +import ScoreBoard from "./ScoreBoard/ScoreBoard"; +import { Game as S } from "@/Components/Game/GameStyles"; const Game = () => { const backgroundUrl = - 'https://upload.wikimedia.org/wikipedia/commons/8/80/Munhak_baseball_stadium_2012.png'; + "https://upload.wikimedia.org/wikipedia/commons/8/80/Munhak_baseball_stadium_2012.png"; return ( <> @@ -19,6 +20,7 @@ const Game = () => { + ); diff --git a/FE/baseball/src/Components/Game/GamePlayground/GameDisplay/GameDisplay.jsx b/FE/baseball/src/Components/Game/GamePlayground/GameDisplay/GameDisplay.jsx index 3314cc992..9a0a6284b 100644 --- a/FE/baseball/src/Components/Game/GamePlayground/GameDisplay/GameDisplay.jsx +++ b/FE/baseball/src/Components/Game/GamePlayground/GameDisplay/GameDisplay.jsx @@ -1,7 +1,8 @@ import { GamePlayground as S } from "@/Components/Game/GameStyles"; const GameDisplay = () => { - return GameDisplay; + // GameDisplay넣어야함 + return ; }; export default GameDisplay; diff --git a/FE/baseball/src/Components/Game/GameStyles.jsx b/FE/baseball/src/Components/Game/GameStyles.jsx index 5bb5259cf..65b278744 100644 --- a/FE/baseball/src/Components/Game/GameStyles.jsx +++ b/FE/baseball/src/Components/Game/GameStyles.jsx @@ -1,10 +1,11 @@ -import styled from 'styled-components'; -import * as CS from '@/Styles/CommonStyles'; -import theme from '@/Styles/theme'; +import styled from "styled-components"; +import * as CS from "@/Styles/CommonStyles"; +import theme from "@/Styles/theme"; const Game = { Game: styled(CS.BOX.FLEX_ROW_BOX)` - border: 3px solid #fff; + position: relative; + border: 3px solid ${theme.COLOR.DEFAULT}; background: #111; opacity: 0.8; width: 1440px; @@ -106,11 +107,11 @@ const GamePlayground = { left: 44%; width: 150px; outline: none; - border: 2px solid #fff; + border: 2px solid ${theme.COLOR.DEFAULT}; border-radius: 8px; background: #222; - color: #fff; - font-family: 'Orbitron', sans-serif; + color: ${theme.COLOR.DEFAULT}; + font-family: "Orbitron", sans-serif; font-size: ${theme.FONTSIZE.M}; padding: 10px; `, @@ -141,11 +142,11 @@ const GamePlayground = { margin-right: 3px; background: ${({ type }) => { switch (type) { - case 'STRIKE': + case "STRIKE": return theme.COLOR.BALLCOUNT_STRIKE; - case 'BALL': + case "BALL": return theme.COLOR.BALLCOUNT_BALL; - case 'OUT': + case "OUT": return theme.COLOR.BALLCOUNT_OUT; default: return; @@ -190,7 +191,7 @@ const GamePlayLog = { LogTitle: styled.div` font-weight: 600; color: ${({ isCurrentPlayer }) => - isCurrentPlayer ? 'red' : theme.COLOR.PLAYER_NAME}; + isCurrentPlayer ? "red" : theme.COLOR.PLAYER_NAME}; `, Log: styled.div` padding: 20px 0px; @@ -204,7 +205,7 @@ const GamePlayLog = { border: 2px solid #222; border-radius: 50%; color: #222; - background: #fff; + background: ${theme.COLOR.DEFAULT}; text-align: center; margin-right: 20px; `, @@ -212,7 +213,7 @@ const GamePlayLog = { margin-right: 40px; font-weight: 700; color: ${({ isEndAction }) => - isEndAction ? theme.COLOR.LOG_END_ACTION : '#fff'}; + isEndAction ? theme.COLOR.LOG_END_ACTION : theme.COLOR.DEFAULT}; `, LogRowBallCount: styled.div` color: ${theme.COLOR.LOG_BALLCOUNT}; @@ -220,4 +221,80 @@ const GamePlayLog = { }, }; -export { Game, GameHeader, GamePlayground, GamePlayLog }; +const SquadBoard = { + SquadBoard: styled(CS.BOX.FLEX_ROW_BOX)` + position: absolute; + bottom: ${({ isMouseOver }) => (isMouseOver ? "0px" : "-1080px")}; + left: 5%; + width: 70%; + height: 77%; + background: #222; + padding: 30px; + z-index: 999; + border-radius: 8px; + border: 3px solid ${theme.COLOR.DEFAULT}; + transition: all 1s; + `, + SquadBoardWrapper: styled.div` + position: absolute; + top: 0; + left: 0; + width: 1440px; + height: 1080px; + overflow: hidden; + `, + PopUpBackground: styled.div` + position: absolute; + display: ${({ isMouseOver }) => (isMouseOver ? "block" : "none")}; + left: 0; + width: 100%; + height: 100%; + background: #222; + opacity: 0.7; + transition: all 1s; + `, + PopUpButton: styled.div` + width: 100px; + height: 20px; + border-radius: 50% 50% 0px 0px; + position: absolute; + bottom: 0%; + left: 530px; + background: gray; + opacity: 0.5; + text-align: center; + padding: 3px; + &:hover { + opacity: 0.7; + } + `, + SquadTable: { + SquadTable: styled.div` + padding: 20px; + border-radius: 8px; + border: 3px solid ${theme.COLOR.DEFAULT}; + width: 45%; + margin: 0px 30px; + `, + SquadTableHeader: styled.div` + font-size: ${theme.FONTSIZE.S}; + font-weight: 700; + text-align: center; + border-bottom: 3px solid ${theme.COLOR.DEFAULT}; + padding-bottom: 10px; + `, + SquadTableBody: styled.table` + width: 100%; + height: 95%; + `, + SquadTableRow: styled.tr` + border-bottom: 1px solid ${theme.COLOR.PLAYER_DESCRIPTION}; + text-align: center; + `, + SquadTableData: styled.td` + vertical-align: middle; + `, + }, +}; + +export { Game, GameHeader, GamePlayground, GamePlayLog, SquadBoard }; diff --git a/FE/baseball/src/Components/Game/SquadBoard/PopUpButton.jsx b/FE/baseball/src/Components/Game/SquadBoard/PopUpButton.jsx new file mode 100644 index 000000000..6284bb43a --- /dev/null +++ b/FE/baseball/src/Components/Game/SquadBoard/PopUpButton.jsx @@ -0,0 +1,21 @@ +import { SquadBoard as S } from "@/Components/Game/GameStyles"; + +const PopUpButton = ({ handleMouseOver }) => { + return ( + + + + + + + ); +}; + +export default PopUpButton; diff --git a/FE/baseball/src/Components/Game/SquadBoard/SquadBoard.jsx b/FE/baseball/src/Components/Game/SquadBoard/SquadBoard.jsx index e69de29bb..afbe3c604 100644 --- a/FE/baseball/src/Components/Game/SquadBoard/SquadBoard.jsx +++ b/FE/baseball/src/Components/Game/SquadBoard/SquadBoard.jsx @@ -0,0 +1,31 @@ +import { useState } from "react"; +import PopUpButton from "./PopUpButton"; +import SquadTable from "./SquadTable/SquadTable"; +import { SquadBoard as S } from "@/Components/Game/GameStyles"; + +const SquadBoard = () => { + const [mouseOverFlag, setMouseOverFlag] = useState(false); + + const handleMouseOver = ({ target: { tagName } }) => { + if (tagName === "path" || tagName === "svg") return; + setMouseOverFlag((prev) => !prev); + }; + + return ( + <> + + + + + + + + + + ); +}; + +export default SquadBoard; diff --git a/FE/baseball/src/Components/Game/SquadBoard/SquadTable/SquadTable.jsx b/FE/baseball/src/Components/Game/SquadBoard/SquadTable/SquadTable.jsx new file mode 100644 index 000000000..d2e3372f7 --- /dev/null +++ b/FE/baseball/src/Components/Game/SquadBoard/SquadTable/SquadTable.jsx @@ -0,0 +1,14 @@ +import SquadTableHeader from "./SquadTableHeader"; +import SquadTableBody from "./SquadTableBody"; +import { SquadBoard as S } from "@/Components/Game/GameStyles"; + +const SquadTable = () => { + return ( + + + + + ); +}; + +export default SquadTable; diff --git a/FE/baseball/src/Components/Game/SquadBoard/SquadTable/SquadTableBody.jsx b/FE/baseball/src/Components/Game/SquadBoard/SquadTable/SquadTableBody.jsx new file mode 100644 index 000000000..9984ed31f --- /dev/null +++ b/FE/baseball/src/Components/Game/SquadBoard/SquadTable/SquadTableBody.jsx @@ -0,0 +1,38 @@ +import SquadTableRow from "./SquadTableRow"; +import { SquadBoard as S } from "@/Components/Game/GameStyles"; + +const SquadTableBody = ({ playerInfo }) => { + const rowHeaderDefault = { + 타자: "타자", + 타석: "타석", + 안타: "안타", + 아웃: "아웃", + 평균: "평균", + }; + const mockRow = { + 타자: "스윙", + 타석: "1", + 안타: "2", + 아웃: "2", + 평균: "1.000", + }; + return ( + + + + + + + + + + + + + + + + ); +}; + +export default SquadTableBody; diff --git a/FE/baseball/src/Components/Game/SquadBoard/SquadTable/SquadTableBodyRow.jsx b/FE/baseball/src/Components/Game/SquadBoard/SquadTable/SquadTableBodyRow.jsx deleted file mode 100644 index e69de29bb..000000000 diff --git a/FE/baseball/src/Components/Game/SquadBoard/SquadTable/SquadTableData.jsx b/FE/baseball/src/Components/Game/SquadBoard/SquadTable/SquadTableData.jsx new file mode 100644 index 000000000..145c03476 --- /dev/null +++ b/FE/baseball/src/Components/Game/SquadBoard/SquadTable/SquadTableData.jsx @@ -0,0 +1,7 @@ +import { SquadBoard as S } from "@/Components/Game/GameStyles"; + +const SquadTableData = ({ data }) => { + return {data}; +}; + +export default SquadTableData; diff --git a/FE/baseball/src/Components/Game/SquadBoard/SquadTable/SquadTableHeader.jsx b/FE/baseball/src/Components/Game/SquadBoard/SquadTable/SquadTableHeader.jsx new file mode 100644 index 000000000..a9fceef1e --- /dev/null +++ b/FE/baseball/src/Components/Game/SquadBoard/SquadTable/SquadTableHeader.jsx @@ -0,0 +1,9 @@ +import { SquadBoard as S } from "@/Components/Game/GameStyles"; + +const SquadTableHeader = ({ teamName }) => { + return ( + {teamName} + ); +}; + +export default SquadTableHeader; diff --git a/FE/baseball/src/Components/Game/SquadBoard/SquadTable/SquadTableHeaderRow.jsx b/FE/baseball/src/Components/Game/SquadBoard/SquadTable/SquadTableHeaderRow.jsx deleted file mode 100644 index e69de29bb..000000000 diff --git a/FE/baseball/src/Components/Game/SquadBoard/SquadTable/SquadTableItem.jsx b/FE/baseball/src/Components/Game/SquadBoard/SquadTable/SquadTableItem.jsx deleted file mode 100644 index e69de29bb..000000000 diff --git a/FE/baseball/src/Components/Game/SquadBoard/SquadTable/SquadTableRow.jsx b/FE/baseball/src/Components/Game/SquadBoard/SquadTable/SquadTableRow.jsx new file mode 100644 index 000000000..805fdad14 --- /dev/null +++ b/FE/baseball/src/Components/Game/SquadBoard/SquadTable/SquadTableRow.jsx @@ -0,0 +1,16 @@ +import SquadTableData from "./SquadTableData"; +import { SquadBoard as S } from "@/Components/Game/GameStyles"; + +const SquadTableRow = ({ row }) => { + return row ? ( + + + + + + + + ) : null; +}; + +export default SquadTableRow; diff --git a/FE/baseball/src/Styles/GlobalStyles.jsx b/FE/baseball/src/Styles/GlobalStyles.jsx index 2995d15e2..5010aeace 100644 --- a/FE/baseball/src/Styles/GlobalStyles.jsx +++ b/FE/baseball/src/Styles/GlobalStyles.jsx @@ -20,6 +20,7 @@ const GlobalStyles = createGlobalStyle` display: flex; justify-content: center; align-items: center; + } .App { width:1440px; @@ -28,6 +29,7 @@ const GlobalStyles = createGlobalStyle` flex-direction:column; justify-content: center; align-items: center; + } `; export default GlobalStyles;