Merge pull request #9 from Polynomeer/feature/6/intro_homeUI

Feature/6/intro home UI
codesquad-members-2021 · May 6, 2021 · db1afae · db1afae
2 parents 2e2020a + c076eca
commit db1afae
Show file tree

Hide file tree

Showing 24 changed files with 12,153 additions and 1 deletion.
diff --git a/FE/baseball/public/index.html b/FE/baseball/public/index.html
@@ -3,6 +3,11 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&display=swap"
+      rel="stylesheet"
+    />
     <title>Online Baseball Game</title>
   </head>
   <body>

diff --git a/FE/baseball/src/App.js b/FE/baseball/src/App.js
@@ -1,8 +1,13 @@
+import Router from '@/Routes/Router';
+import GlobalStyles from '@/Styles/GlobalStyles';
+
 const App = () => {
   return (
     <div className="App">
+      <GlobalStyles />
+      <Router />
     </div>
   );
-}
+};
 
 export default App;
diff --git a/FE/baseball/src/Components/Home/Home.jsx b/FE/baseball/src/Components/Home/Home.jsx
@@ -0,0 +1,14 @@
+import HomeTitle from '@/Components/Home/HomeTitle';
+import MatchInfo from './MatchInfo/MatchInfo';
+import { HomeStyles as S } from '@/Components/Home/HomeStyles';
+
+const Home = () => {
+  return (
+    <S.Home>
+      <HomeTitle />
+      <MatchInfo />
+    </S.Home>
+  );
+};
+
+export default Home;
diff --git a/FE/baseball/src/Components/Home/HomeStyles.jsx b/FE/baseball/src/Components/Home/HomeStyles.jsx
@@ -0,0 +1,118 @@
+import styled from 'styled-components';
+import * as CS from '@/Styles/CommonStyles';
+import theme from '@/Styles/theme';
+
+const HomeStyles = {
+  Home: styled(CS.BOX.FLEX_COLUMN_CENTER_BOX)`
+    background: #222;
+    width: 1440px;
+    height: 1080px;
+    color: ${theme.COLOR.DEFAULT};
+    padding-top: 40px;
+  `,
+
+  HomeTitle: styled.div`
+    font-size: 36px;
+    font-weight: 700;
+    padding: 20px;
+    margin-bottom: 10px;
+  `,
+
+  MatchInfo: styled(CS.BOX.FLEX_COLUMN_CENTER_BOX)`
+    width: 500px;
+  `,
+
+  MatchInfoTitle: styled.div`
+    padding: 40px 40px 20px 40px;
+    font-size: 24px;
+    letter-spacing: 3px;
+  `,
+  MatchInfoBody: styled.div`
+    width: 100%;
+    height: 340px;
+    padding: 0px 20px 0px 10px;
+    overflow-y: scroll;
+
+    ::-webkit-scrollbar {
+      width: 10px;
+      height: 20px;
+    }
+
+    ::-webkit-scrollbar-track {
+      background-color: #222;
+      border-radius: 8px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      border-radius: 8px;
+      background: #ffd2e1;
+    }
+
+    mask-image: linear-gradient(to top, transparent, #222),
+      linear-gradient(to left, transparent 12px, #222 12px);
+    mask-size: 100% 2000000px;
+    mask-position: left bottom;
+    transition: mask-position 0.3s, -webkit-mask-position 0.3s;
+
+    :hover {
+      mask-position: left top;
+    }
+  `,
+
+  ScrollMask: styled.div`
+    width: 100%;
+    border: 1px solid #ffa7c4;
+  `,
+
+  MatchBox: styled(CS.BOX.FLEX_COLUMN_CENTER_BOX)`
+    border: 1px solid #fff;
+    border-radius: 10px;
+    margin: 10px;
+    width: 100%;
+    height: 100px;
+    justify-content: center;
+  `,
+
+  GameNumber: styled(CS.BOX.FLEX_CENTER_BOX)`
+    width: 100%;
+    height: 50%;
+    padding: 15px 10px 0px 10px;
+    font-size: 12px;
+    color: #ffa7c4;
+  `,
+
+  Match: styled.div`
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    padding: 0px 5px 5px 5px;
+    justify-content: space-evenly;
+  `,
+
+  TeamName: styled(CS.BOX.FLEX_CENTER_BOX)`
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 23px;
+    font-weight: 900;
+    cursor: pointer;
+    transition: all ease-in-out 0.2s;
+
+    :hover {
+      color: #ffa7c4;
+      font-size: 24px;
+    }
+  `,
+
+  VS: styled.div`
+    display: flex;
+    align-items: center;
+    font-weight: 900;
+    font-size: 14px;
+  `,
+};
+
+export { HomeStyles };
diff --git a/FE/baseball/src/Components/Home/HomeTitle.jsx b/FE/baseball/src/Components/Home/HomeTitle.jsx
@@ -0,0 +1,7 @@
+import { HomeStyles as S } from '@/Components/Home/HomeStyles';
+
+const HomeTitle = () => {
+  return <S.HomeTitle>Team illy'swing BASEBALL</S.HomeTitle>;
+};
+
+export default HomeTitle;
diff --git a/FE/baseball/src/Components/Home/MatchInfo/MatchBox/GameNumber.jsx b/FE/baseball/src/Components/Home/MatchInfo/MatchBox/GameNumber.jsx
@@ -0,0 +1,7 @@
+import { HomeStyles as S } from '@/Components/Home/HomeStyles';
+
+const GameNumber = () => {
+  return <S.GameNumber>GameNumber</S.GameNumber>;
+};
+
+export default GameNumber;
diff --git a/FE/baseball/src/Components/Home/MatchInfo/MatchBox/Match.jsx b/FE/baseball/src/Components/Home/MatchInfo/MatchBox/Match.jsx
@@ -0,0 +1,15 @@
+import { HomeStyles as S } from '@/Components/Home/HomeStyles';
+import TeamName from './TeamName';
+import VS from './VS';
+
+const Match = () => {
+  return (
+    <S.Match>
+      <TeamName />
+      <VS />
+      <TeamName />
+    </S.Match>
+  );
+};
+
+export default Match;
diff --git a/FE/baseball/src/Components/Home/MatchInfo/MatchBox/MatchBox.jsx b/FE/baseball/src/Components/Home/MatchInfo/MatchBox/MatchBox.jsx
@@ -0,0 +1,14 @@
+import GameNumber from './GameNumber';
+import Match from './Match';
+import { HomeStyles as S } from '@/Components/Home/HomeStyles';
+
+const MatchBox = () => {
+  return (
+    <S.MatchBox>
+      <GameNumber />
+      <Match />
+    </S.MatchBox>
+  );
+};
+
+export default MatchBox;
diff --git a/FE/baseball/src/Components/Home/MatchInfo/MatchBox/TeamName.jsx b/FE/baseball/src/Components/Home/MatchInfo/MatchBox/TeamName.jsx
@@ -0,0 +1,7 @@
+import { HomeStyles as S } from '@/Components/Home/HomeStyles';
+
+const TeamName = () => {
+  return <S.TeamName>TeamName</S.TeamName>;
+};
+
+export default TeamName;
diff --git a/FE/baseball/src/Components/Home/MatchInfo/MatchBox/VS.jsx b/FE/baseball/src/Components/Home/MatchInfo/MatchBox/VS.jsx
@@ -0,0 +1,7 @@
+import { HomeStyles as S } from '@/Components/Home/HomeStyles';
+
+const VS = () => {
+  return <S.VS>VS</S.VS>;
+};
+
+export default VS;
diff --git a/FE/baseball/src/Components/Home/MatchInfo/MatchInfo.jsx b/FE/baseball/src/Components/Home/MatchInfo/MatchInfo.jsx
@@ -0,0 +1,14 @@
+import MatchInfoBody from './MatchInfoBody';
+import MatchInfoTitle from './MatchInfoTitle';
+import { HomeStyles as S } from '@/Components/Home/HomeStyles';
+
+const MatchInfo = () => {
+  return (
+    <S.MatchInfo>
+      <MatchInfoTitle />
+      <MatchInfoBody />
+    </S.MatchInfo>
+  );
+};
+
+export default MatchInfo;
diff --git a/FE/baseball/src/Components/Home/MatchInfo/MatchInfoBody.jsx b/FE/baseball/src/Components/Home/MatchInfo/MatchInfoBody.jsx
@@ -0,0 +1,20 @@
+import { HomeStyles as S } from '@/Components/Home/HomeStyles';
+import MatchBox from './MatchBox/MatchBox';
+
+const MatchInfoBody = () => {
+  return (
+    <S.ScrollMask>
+      <S.MatchInfoBody>
+        <MatchBox />
+        <MatchBox />
+        <MatchBox />
+        <MatchBox />
+        <MatchBox />
+        <MatchBox />
+        <MatchBox />
+      </S.MatchInfoBody>
+    </S.ScrollMask>
+  );
+};
+
+export default MatchInfoBody;
diff --git a/FE/baseball/src/Components/Home/MatchInfo/MatchInfoTitle.jsx b/FE/baseball/src/Components/Home/MatchInfo/MatchInfoTitle.jsx
@@ -0,0 +1,7 @@
+import { HomeStyles as S } from '@/Components/Home/HomeStyles';
+
+const MatchInfoTitle = () => {
+  return <S.MatchInfoTitle>⚾ Choose the Game ⚾︎</S.MatchInfoTitle>;
+};
+
+export default MatchInfoTitle;
diff --git a/FE/baseball/src/Components/Intro/GameStartButton.jsx b/FE/baseball/src/Components/Intro/GameStartButton.jsx
@@ -0,0 +1,14 @@
+import GameTitle from '@/Components/Intro/GameTitle';
+import { IntroStyles as S } from '@/Components/Intro/IntroStyles';
+import { Link } from 'react-router-dom';
+
+const GameStartButton = () => {
+  return (
+    <Link to="/home">
+      <S.GameStartButton>
+        <GameTitle />
+      </S.GameStartButton>
+    </Link>
+  );
+};
+export default GameStartButton;
diff --git a/FE/baseball/src/Components/Intro/GameTitle.jsx b/FE/baseball/src/Components/Intro/GameTitle.jsx
@@ -0,0 +1,12 @@
+import { IntroStyles as S } from '@/Components/Intro/IntroStyles';
+
+const GameTitle = () => {
+  return (
+    <S.GameTitle>
+      Team illy'swing BASEBALL GAME!!! <br />
+      comming soon...
+    </S.GameTitle>
+  );
+};
+
+export default GameTitle;
diff --git a/FE/baseball/src/Components/Intro/Intro.jsx b/FE/baseball/src/Components/Intro/Intro.jsx
@@ -0,0 +1,12 @@
+import { IntroStyles as S } from '@/Components/Intro/IntroStyles';
+import GameStartButton from '@/Components/Intro/GameStartButton';
+
+const Intro = () => {
+  return (
+    <S.Intro>
+      <GameStartButton />
+    </S.Intro>
+  );
+};
+
+export default Intro;
diff --git a/FE/baseball/src/Components/Intro/IntroStyles.jsx b/FE/baseball/src/Components/Intro/IntroStyles.jsx
@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+import * as CS from '@/Styles/CommonStyles';
+import theme from '@/Styles/theme';
+
+const IntroStyles = {
+  Intro: styled(CS.BOX.FLEX_CENTER_BOX)`
+    background: #222;
+    width: 1440px;
+    height: 1080px;
+    color: ${theme.COLOR.DEFAULT};
+  `,
+
+  GameTitle: styled.div`
+    text-align: center;
+  `,
+
+  GameStartButton: styled(CS.BOX.FLEX_CENTER_BOX)`
+    width: 650px;
+    height: 100px;
+    padding: 20px;
+    border: 1px solid #fff;
+    border-radius: 10px;
+    cursor: pointer;
+    font-size: 30px;
+    transition: all ease-in-out 0.4s;
+    font-weight: 700;
+
+    :hover {
+      background: #333;
+    }
+    :active {
+      background: #111;
+    }
+  `,
+};
+
+export { IntroStyles };
diff --git a/FE/baseball/src/Routes/Home.jsx b/FE/baseball/src/Routes/Home.jsx
@@ -0,0 +1 @@
+export { default as Home } from '@/Components/Home/Home';
diff --git a/FE/baseball/src/Routes/Intro.jsx b/FE/baseball/src/Routes/Intro.jsx
@@ -0,0 +1 @@
+export { default as Inrto } from '@/Components/Intro/Intro';
diff --git a/FE/baseball/src/Routes/Router.jsx b/FE/baseball/src/Routes/Router.jsx
@@ -0,0 +1,18 @@
+import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom';
+import { Inrto } from '@/Routes/Intro';
+import { Home } from '@/Routes/Home';
+
+const Router = () => {
+  return (
+    <BrowserRouter>
+      <Route exact path="/" component={Inrto} />
+      <Switch>
+        <Route path="/home" component={Home} />
+        {/* <Route path="/game" component={Game} /> */}
+        <Redirect from="*" to="/" />
+      </Switch>
+    </BrowserRouter>
+  );
+};
+
+export default Router;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as Home } from '@/Components/Home/Home';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as Inrto } from '@/Components/Intro/Intro';