Merge pull request #27 from Polynomeer/feature/20/down-popup

Feature/20/down popup
codesquad-members-2021 · May 7, 2021 · 7feb8d9 · 7feb8d9
2 parents 5efa52e + c851dfe
commit 7feb8d9
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 37 deletions.
diff --git a/FE/baseball/src/Components/Game/GameStyles.jsx b/FE/baseball/src/Components/Game/GameStyles.jsx
@@ -1,6 +1,22 @@
-import styled from 'styled-components';
-import * as CS from '@/Styles/CommonStyles';
-import theme from '@/Styles/theme';
+import styled, { keyframes } from "styled-components";
+import * as CS from "@/Styles/CommonStyles";
+import theme from "@/Styles/theme";
+
+
+const ArrowFade = keyframes`
+0% {
+  bottom: 0px;
+  opacity: 0;
+}
+50% {
+  bottom: 1.5px;
+  opacity: 0.4;
+}
+100% {
+  bottom: 3px;
+  opacity: 0.8;
+}
+`;
 
 const Game = {
   Game: styled(CS.BOX.FLEX_ROW_BOX)`
@@ -66,13 +82,14 @@ const GameHeader = {
     CurrentPlayerTag: styled.div`
       width: 100px;
       text-align: center;
+      font-size: ${theme.FONTSIZE.XS};
       font-weight: 500;
       color: red;
       border-radius: 8px;
       border: 1px solid red;
       background: ${theme.COLOR.CURRENT_PLAYER_TAG};
       padding: 5px;
-      margin: 15px;
+      margin: 10px;
     `,
   },
 };
@@ -225,7 +242,7 @@ const GamePlayLog = {
 const SquadBoard = {
   SquadBoard: styled(CS.BOX.FLEX_ROW_BOX)`
     position: absolute;
-    bottom: ${({ isMouseOver }) => (isMouseOver ? '0px' : '-1080px')};
+    bottom: ${({ isMouseOver }) => (isMouseOver ? "5px" : "-1080px")};
     left: 5%;
     width: 70%;
     height: 77%;
@@ -248,27 +265,32 @@ const SquadBoard = {
     position: absolute;
     display: ${({ isMouseOver }) => (isMouseOver ? 'block' : 'none')};
     left: 0;
-    width: 100%;
-    height: 100%;
+    width: 99.6%;
+    height: 99.4%;
     background: #222;
-    opacity: 0.7;
+    opacity: 0.8;
     transition: all 1s;
   `,
   PopUpButton: styled.div`
     width: 100px;
-    height: 20px;
+    height: 25px;
     border-radius: 50% 50% 0px 0px;
     position: absolute;
-    bottom: 0%;
+    bottom: 5px;
     left: 530px;
     background: gray;
     opacity: 0.5;
     text-align: center;
     padding: 3px;
-
+    z-index: 999;
     &:hover {
       opacity: 0.7;
     }
+    div {
+      position: absolute;
+      left: 42.5%;
+      animation: ${ArrowFade} 1s infinite ease-in alternate;
+    }
   `,
   SquadTable: {
     SquadTable: styled.div`
@@ -279,19 +301,36 @@ const SquadBoard = {
       margin: 0px 30px;
     `,
     SquadTableHeader: styled.div`
+      position: relative;
       font-size: ${theme.FONTSIZE.S};
       font-weight: 700;
       text-align: center;
       border-bottom: 3px solid ${theme.COLOR.DEFAULT};
       padding-bottom: 10px;
     `,
+    CurrentPlayerTag: styled.div`
+      position: absolute;
+      top: 5px;
+      right: 0;
+      width: 70px;
+      text-align: center;
+      font-size: 0.75rem;
+      font-weight: 300;
+      color: red;
+      border-radius: 8px;
+      border: 1px solid red;
+      background: ${theme.COLOR.CURRENT_PLAYER_TAG};
+      padding: 5px;
+    `,
     SquadTableBody: styled.table`
       width: 100%;
       height: 95%;
     `,
     SquadTableRow: styled.tr`
       border-bottom: 1px solid ${theme.COLOR.PLAYER_DESCRIPTION};
       text-align: center;
+      color: ${({ isCurrentPlayer }) =>
+        isCurrentPlayer ? "red" : theme.COLOR.DEFAULT};
     `,
     SquadTableData: styled.td`
       vertical-align: middle;

diff --git a/FE/baseball/src/Components/Game/SquadBoard/PopUpButton.jsx b/FE/baseball/src/Components/Game/SquadBoard/PopUpButton.jsx
@@ -3,17 +3,19 @@ import { SquadBoard as S } from "@/Components/Game/GameStyles";
 const PopUpButton = ({ handleMouseOver }) => {
   return (
     <S.PopUpButton onMouseOver={handleMouseOver}>
-      <svg
-        x="0px"
-        y="0px"
-        width="15px"
-        height="15px"
-        viewBox="0 0 284.929 284.929"
-        fill="#fff"
-      >
-        <path d="M17.128,167.872c1.903,1.902,4.093,2.854,6.567,2.854c2.474,0,4.664-0.952,6.567-2.854L142.466,55.666l112.208,112.206    c1.902,1.902,4.093,2.854,6.563,2.854c2.478,0,4.668-0.952,6.57-2.854l14.274-14.277c1.902-1.902,2.847-4.093,2.847-6.563    c0-2.475-0.951-4.665-2.847-6.567L149.028,7.419c-1.901-1.906-4.088-2.853-6.562-2.853s-4.665,0.95-6.567,2.853L2.856,140.464    C0.95,142.367,0,144.554,0,147.034c0,2.468,0.953,4.658,2.856,6.561L17.128,167.872z" />
-        <path d="M149.028,117.055c-1.901-1.906-4.088-2.856-6.562-2.856s-4.665,0.953-6.567,2.856L2.856,250.1    C0.95,252.003,0,254.192,0,256.67c0,2.472,0.953,4.661,2.856,6.564l14.272,14.276c1.903,1.903,4.093,2.848,6.567,2.848    c2.474,0,4.664-0.951,6.567-2.848l112.204-112.209l112.208,112.209c1.902,1.903,4.093,2.852,6.563,2.852    c2.478,0,4.668-0.948,6.57-2.852l14.274-14.276c1.902-1.903,2.847-4.093,2.847-6.564c0-2.478-0.951-4.667-2.847-6.57    L149.028,117.055z" />
-      </svg>
+      <div>
+        <svg
+          x="0px"
+          y="0px"
+          width="15px"
+          height="15px"
+          viewBox="0 0 284.929 284.929"
+          fill="#fff"
+        >
+          <path d="M17.128,167.872c1.903,1.902,4.093,2.854,6.567,2.854c2.474,0,4.664-0.952,6.567-2.854L142.466,55.666l112.208,112.206    c1.902,1.902,4.093,2.854,6.563,2.854c2.478,0,4.668-0.952,6.57-2.854l14.274-14.277c1.902-1.902,2.847-4.093,2.847-6.563    c0-2.475-0.951-4.665-2.847-6.567L149.028,7.419c-1.901-1.906-4.088-2.853-6.562-2.853s-4.665,0.95-6.567,2.853L2.856,140.464    C0.95,142.367,0,144.554,0,147.034c0,2.468,0.953,4.658,2.856,6.561L17.128,167.872z" />
+          <path d="M149.028,117.055c-1.901-1.906-4.088-2.856-6.562-2.856s-4.665,0.953-6.567,2.856L2.856,250.1    C0.95,252.003,0,254.192,0,256.67c0,2.472,0.953,4.661,2.856,6.564l14.272,14.276c1.903,1.903,4.093,2.848,6.567,2.848    c2.474,0,4.664-0.951,6.567-2.848l112.204-112.209l112.208,112.209c1.902,1.903,4.093,2.852,6.563,2.852    c2.478,0,4.668-0.948,6.57-2.852l14.274-14.276c1.902-1.903,2.847-4.093,2.847-6.564c0-2.478-0.951-4.667-2.847-6.57    L149.028,117.055z" />
+        </svg>
+      </div>
     </S.PopUpButton>
   );
 };

diff --git a/FE/baseball/src/Components/Game/SquadBoard/SquadTable/CurrentPlayerTag.jsx b/FE/baseball/src/Components/Game/SquadBoard/SquadTable/CurrentPlayerTag.jsx
@@ -0,0 +1,7 @@
+import { SquadBoard as S } from "@/Components/Game/GameStyles";
+
+const CurrentPlayerTag = () => {
+  return <S.SquadTable.CurrentPlayerTag>Player</S.SquadTable.CurrentPlayerTag>;
+};
+
+export default CurrentPlayerTag;
diff --git a/FE/baseball/src/Components/Game/SquadBoard/SquadTable/SquadTable.jsx b/FE/baseball/src/Components/Game/SquadBoard/SquadTable/SquadTable.jsx
@@ -5,7 +5,7 @@ import { SquadBoard as S } from "@/Components/Game/GameStyles";
 const SquadTable = () => {
   return (
     <S.SquadTable.SquadTable>
-      <SquadTableHeader teamName={"TEAM - ILLY"} />
+      <SquadTableHeader teamName={"TEAM - ILLY"} isCurrentPlayer={true} />
       <SquadTableBody />
     </S.SquadTable.SquadTable>
   );

diff --git a/FE/baseball/src/Components/Game/SquadBoard/SquadTable/SquadTableBody.jsx b/FE/baseball/src/Components/Game/SquadBoard/SquadTable/SquadTableBody.jsx
@@ -20,16 +20,16 @@ const SquadTableBody = ({ playerInfo }) => {
     <S.SquadTable.SquadTableBody>
       <tbody>
         <SquadTableRow row={rowHeaderDefault} />
-        <SquadTableRow row={mockRow} />
-        <SquadTableRow row={mockRow} />
-        <SquadTableRow row={mockRow} />
-        <SquadTableRow row={mockRow} />
-        <SquadTableRow row={mockRow} />
-        <SquadTableRow row={mockRow} />
-        <SquadTableRow row={mockRow} />
-        <SquadTableRow row={mockRow} />
-        <SquadTableRow row={mockRow} />
-        <SquadTableRow row={mockRow} />
+        <SquadTableRow row={mockRow} isCurrentPlayer={false} />
+        <SquadTableRow row={mockRow} isCurrentPlayer={false} />
+        <SquadTableRow row={mockRow} isCurrentPlayer={false} />
+        <SquadTableRow row={mockRow} isCurrentPlayer={false} />
+        <SquadTableRow row={mockRow} isCurrentPlayer={false} />
+        <SquadTableRow row={mockRow} isCurrentPlayer={true} />
+        <SquadTableRow row={mockRow} isCurrentPlayer={false} />
+        <SquadTableRow row={mockRow} isCurrentPlayer={false} />
+        <SquadTableRow row={mockRow} isCurrentPlayer={false} />
+        <SquadTableRow row={mockRow} isCurrentPlayer={false} />
       </tbody>
     </S.SquadTable.SquadTableBody>
   );

diff --git a/FE/baseball/src/Components/Game/SquadBoard/SquadTable/SquadTableHeader.jsx b/FE/baseball/src/Components/Game/SquadBoard/SquadTable/SquadTableHeader.jsx
@@ -1,8 +1,14 @@
+import CurrentPlayerTag from "./CurrentPlayerTag";
 import { SquadBoard as S } from "@/Components/Game/GameStyles";
 
-const SquadTableHeader = ({ teamName }) => {
+const SquadTableHeader = ({ teamName, isCurrentPlayer }) => {
   return (
-    <S.SquadTable.SquadTableHeader>{teamName}</S.SquadTable.SquadTableHeader>
+    <>
+      <S.SquadTable.SquadTableHeader>
+        {teamName}
+        {isCurrentPlayer ? <CurrentPlayerTag /> : null}
+      </S.SquadTable.SquadTableHeader>
+    </>
   );
 };
 

diff --git a/FE/baseball/src/Components/Game/SquadBoard/SquadTable/SquadTableRow.jsx b/FE/baseball/src/Components/Game/SquadBoard/SquadTable/SquadTableRow.jsx
@@ -1,9 +1,9 @@
 import SquadTableData from "./SquadTableData";
 import { SquadBoard as S } from "@/Components/Game/GameStyles";
 
-const SquadTableRow = ({ row }) => {
+const SquadTableRow = ({ row, isCurrentPlayer }) => {
   return row ? (
-    <S.SquadTable.SquadTableRow>
+    <S.SquadTable.SquadTableRow isCurrentPlayer={isCurrentPlayer}>
       <SquadTableData data={row.타자} />
       <SquadTableData data={row.타석} />
       <SquadTableData data={row.안타} />