Merge pull request #16 from Polynomeer/fix/13/background

fix: Fix Game background (#13)'
Resolve #13

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

@@ -1,6 +1,6 @@
-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)`
@@ -30,6 +30,7 @@ const Game = {
     height: 100%;
     z-index: -999;
     opacity: 0.4;
+    filter: blur(5px);
   `,
 };
 
@@ -111,7 +112,7 @@ const GamePlayground = {
     border-radius: 8px;
     background: #222;
     color: ${theme.COLOR.DEFAULT};
-    font-family: "Orbitron", sans-serif;
+    font-family: 'Orbitron', sans-serif;
     font-size: ${theme.FONTSIZE.M};
     padding: 10px;
   `,
@@ -142,11 +143,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;
@@ -191,7 +192,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;
@@ -224,7 +225,7 @@ const GamePlayLog = {
 const SquadBoard = {
   SquadBoard: styled(CS.BOX.FLEX_ROW_BOX)`
     position: absolute;
-    bottom: ${({ isMouseOver }) => (isMouseOver ? "0px" : "-1080px")};
+    bottom: ${({ isMouseOver }) => (isMouseOver ? '0px' : '-1080px')};
     left: 5%;
     width: 70%;
     height: 77%;
@@ -245,7 +246,7 @@ const SquadBoard = {
   `,
   PopUpBackground: styled.div`
     position: absolute;
-    display: ${({ isMouseOver }) => (isMouseOver ? "block" : "none")};
+    display: ${({ isMouseOver }) => (isMouseOver ? 'block' : 'none')};
     left: 0;
     width: 100%;
     height: 100%;