초기 설정 및 MainNav & Search

client/package.json

@@ -9,6 +9,7 @@
     "@testing-library/user-event": "^12.1.10",
     "axios": "^0.21.1",
     "bootstrap": "^5.0.2",
+    "bootstrap-icons": "^1.5.0",
     "node-sass": "^6.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

client/src/App.js

-import logo from './logo.svg';
-import './App.css';
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+import HomePage from "./pages/HomePage";
+import LoginPage from "./pages/LoginPage";
+import SignupPage from "./pages/SignupPage";
+import MovieListPage from "./pages/MovieListPage";
+import MoviePage from "./pages/MoviePage";
+import TheaterPage from "./pages/TheaterPage";
+import MyPage from "./pages/MyPage";
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <Router>
+      <Switch>
+        <Route exact path="/" component={HomePage} />
+      </Switch>
+    </Router>
   );
 }
 

client/src/components/Footer.js

+const Footer = () => {
+    return (
+        <div style={{ backgroundColor: " #808080" }}>
+        </div>
+    )
+}
+
+export default Footer
\ No newline at end of file

client/src/components/Navs/MainNav.js

+import Search from "../Search/Search";
+
+const MainNav = () => {
+    return (
+        <nav class="nav justify-content-around bg-dark py-1">
+            <a class="nav-link text-white" href="#">영화</a>
+            <a class="nav-link text-white" href="#">빠른예매</a>
+            <a class="nav-link text-white" href="#">극장</a>
+            <Search />
+        </nav>
+    )
+}
+
+export default MainNav
\ No newline at end of file

client/src/components/Search/Search.js

+import styles from "./search.module.scss";
+
+const Search = () => {
+    return (
+        <div className="d-flex">
+            <input className="form-control" type="text" id="search" />
+            <i className="bi bi-search align-self-center text-white" style={{ fontSize: "1.3rem" }}></i>
+        </div>
+    )
+}
+
+export default Search
\ No newline at end of file

client/src/components/Search/index.js

+export { default } from './Search'
\ No newline at end of file

client/src/components/Search/search.module.scss

+input[type="text"] {
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid #fff;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border-radius: 0;
+  color: #fff;
+  margin-bottom: 5px;
+}
+
+input[type="text"]:focus {
+  background: transparent;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border-color: #fff;
+  color: #fff;
+}
\ No newline at end of file

client/src/index.js

 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
+import './scss/custom.scss';
+import 'bootstrap';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 

client/src/pages/HomePage.js

+import MainNav from "../components/Navs/MainNav";
+import Footer from "../components/Footer";
+
+const HomePage = () => {
+    return (
+        <div>
+            <MainNav />
+            <Footer />
+        </div>
+    )
+}
+
+export default HomePage
\ No newline at end of file

client/src/pages/LoginPage.js

+const LoginPage = () => {
+    return (
+        <div>
+            
+        </div>
+    )
+}
+
+export default LoginPage
\ No newline at end of file

client/src/pages/MovieListPage.js

+const MovieListPage = () => {
+    return (
+        <div>
+            
+        </div>
+    )
+}
+
+export default MovieListPage
\ No newline at end of file

client/src/pages/MoviePage.js

+const MoviePage = () => {
+    return (
+        <div>
+            
+        </div>
+    )
+}
+
+export default MoviePage
\ No newline at end of file

client/src/pages/MyPage.js

+const MyPage = () => {
+    return (
+        <div>
+            
+        </div>
+    )
+}
+
+export default MyPage
\ No newline at end of file

client/src/pages/SignupPage.js

+const SignupPage = () => {
+    return (
+        <div>
+            
+        </div>
+    )
+}
+
+export default SignupPage
\ No newline at end of file

client/src/pages/TheaterPage.js

+const TheaterPage = () => {
+    return (
+        <div>
+            
+        </div>
+    )
+}
+
+export default TheaterPage
\ No newline at end of file

client/src/scss/custom.scss

+@import '~bootstrap/scss/bootstrap.scss';
+@import '~bootstrap-icons/font/bootstrap-icons'; 
\ No newline at end of file