feat: Add Intro display (#6)

codesquad-members-2021 · May 4, 2021 · 0ab3528 · 0ab3528
1 parent 2e2020a
commit 0ab3528
Show file tree

Hide file tree

Showing 10 changed files with 11,860 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,5 @@
+const Home = () => {
+  return <div>Home</div>;
+};
+
+export default Home;
diff --git a/FE/baseball/src/Components/Intro/GameTitle.jsx b/FE/baseball/src/Components/Intro/GameTitle.jsx
@@ -0,0 +1,5 @@
+const GameTitle = () => {
+  return <div>GameTitle</div>;
+};
+
+export default GameTitle;
diff --git a/FE/baseball/src/Components/Intro/Intro.jsx b/FE/baseball/src/Components/Intro/Intro.jsx
@@ -0,0 +1,52 @@
+import IntroStyles from '@/Components/Intro/IntroStyles';
+
+import styled from 'styled-components';
+
+const IntroLogo = () => {
+  return (
+    <a href="/home">
+      <IntroLogoBox>
+        <LogoTitle>
+          Team illy's Baseball game! <br />
+          comming soon...
+        </LogoTitle>
+      </IntroLogoBox>
+    </a>
+  );
+};
+
+const Intro = () => {
+  return (
+    <IntroStyles>
+      <IntroLogo />
+    </IntroStyles>
+  );
+};
+
+export default Intro;
+
+const IntroLogoBox = styled.div`
+  width: 600px;
+  height: 80px;
+  padding: 20px;
+  border: 1px solid #fff;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 30px;
+  transition: all ease-in-out 0.4s;
+  font-weight: 700;
+
+  :hover {
+    background: #333;
+  }
+  :active {
+    background: #111;
+  }
+`;
+
+const LogoTitle = styled.div`
+  text-align: center;
+`;
diff --git a/FE/baseball/src/Components/Intro/IntroStyles.jsx b/FE/baseball/src/Components/Intro/IntroStyles.jsx
@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+const IntroStyles = styled.div`
+  background: #222;
+  width: 1440px;
+  height: 1080px;
+  color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export default IntroStyles;
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,17 @@
+import Home from '@/Components/Home/Home';
+import { BrowserRouter, Route, Switch } from 'react-router-dom';
+import { Inrto } from '@/Routes/Intro';
+
+const Router = () => {
+  return (
+    <BrowserRouter>
+      <Route exact path="/" component={Inrto} />
+      <Switch>
+        <Route path="/home" component={Home} />
+        {/* <Route path="/game" component={Game} /> */}
+      </Switch>
+    </BrowserRouter>
+  );
+};
+
+export default Router;
diff --git a/FE/baseball/src/Styles/GlobalStyles.jsx b/FE/baseball/src/Styles/GlobalStyles.jsx
@@ -0,0 +1,16 @@
+import { createGlobalStyle } from 'styled-components';
+
+const GlobalStyles = createGlobalStyle`
+ body {
+   margin: 0;
+   padding: 0;
+   font-family: 'Orbitron', sans-serif;
+ }
+
+ a {
+   text-decoration: none;
+   color: #fff;
+ }
+`;
+
+export default GlobalStyles;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as Inrto } from '@/Components/Intro/Intro';