moviechart tab

client/src/App.js

 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+import Header from "./components/Header";
+import SubNav from "./components/Navs/SubNav";
+import MainNav from "./components/Navs/MainNav";
 import HomePage from "./pages/HomePage";
 import LoginPage from "./pages/LoginPage";
 import SignupPage from "./pages/SignupPage";
@@ -10,11 +13,17 @@ import AdminPage from "./pages/AdminPage";
 
 function App() {
   return (
-    <Router>
-      <Switch>
-        <Route exact path="/" component={HomePage} />
-      </Switch>
-    </Router>
+      <div className="" style={{ backgroundColor: "black" }}>
+        <SubNav />
+        <Header />
+        <MainNav />
+        <Router>
+          <Switch>
+            <Route exact path="/" component={HomePage} />
+            <Route path="/movie" component={MovieListPage} />
+          </Switch>
+        </Router>
+      </div>
   );
 }
 

client/src/components/BoxOffice/BoxOffice.js

@@ -22,7 +22,7 @@ const BoxOffice = () => {
     }, [])
 
     return (
-        <>
+        <div className="container">
             <h2 className="fw-bold text-white text-center my-5">Box Office</h2>
             <div id="multi-carousel" className={`d-flex carousel slide align-items-center ${styles.customHeight}`} data-bs-ride="carousel">
                 <div className="carousel-inner">
@@ -102,7 +102,7 @@ const BoxOffice = () => {
                     <span className="visually-hidden">Next</span>
                 </button>
             </div>
-        </>
+        </div>
     )
 }
 

client/src/components/MovieChart.js

+const MovieChart = () => {
+    return (
+        <>
+        <h1>영화</h1>
+        </>
+    )
+}
+
+export default MovieChart
\ No newline at end of file

client/src/components/MovieComming.js

+const MovieComming = () => {
+    return (
+        <>
+            <h1>상영예정작</h1>
+        </>
+    )
+}
+
+export default MovieComming
\ No newline at end of file

client/src/components/Navs/MainNav.js

@@ -3,7 +3,7 @@ import Search from "../Search";
 const MainNav = () => {
     return (
         <nav class="nav justify-content-evenly border border-start-0 border-end-0 border-white border-2 py-1">
-            <a class="nav-link text-white" href="#">영화</a>
+            <a class="nav-link text-white" href="/movie">영화</a>
             <a class="nav-link text-white" href="#">빠른예매</a>
             <a class="nav-link text-white" href="#">극장</a>
             <Search />

client/src/pages/HomePage.js

-import Header from "../components/Header";
-import SubNav from "../components/Navs/SubNav";
-import MainNav from "../components/Navs/MainNav";
+
 import BoxOffice from "../components/BoxOffice";
 import Collection from "../components/Collection";
 import Footer from "../components/Footer";
 
 const HomePage = () => {
     return (
-        <div className="" style={{backgroundColor:"black"}}>
-            <SubNav/>
-            <Header/>
-            <MainNav />
+        <>
             <BoxOffice />
             <Collection />
             <Footer />
-        </div>
+        </>
     )
 }
 

client/src/pages/MovieListPage.js

+import React, { useState, useEffect } from 'react'
+import MovieChart from '../components/MovieChart'
+import MovieComming from '../components/MovieComming'
 const MovieListPage = () => {
+    const navtabStyle = {
+    }
     return (
-        <div>
-            
+        <div className="container">
+            <ul className="nav nav-tabs row justify-content-center my-3 border-0" id="myTab" role="tablist">
+                <li className="nav-item col-5" role="presentation">
+                    <button className="nav-link active mx-auto" id="moviechart-tab" data-bs-toggle="tab" data-bs-target="#moviechart" type="button" role="tab" aria-controls="moviechart" aria-selected="true">무비차트</button>
+                </li>
+                <li className="nav-item col-5" role="presentation">
+                    <button className="nav-link mx-auto" id="moviecomming-tab" data-bs-toggle="tab" data-bs-target="#moviecomming" type="button" role="tab" aria-controls="moviecomming" aria-selected="false">상영예정작</button>
+                </li>
+            </ul>
+            <div className="tab-content" id="myTabContent">
+                <div className="tab-pane fade show active" id="moviechart" role="tabpanel" aria-labelledby="moviechart-tab">
+                    <MovieChart />
+                </div>
+                <div className="tab-pane fade" id="moviecomming" role="tabpanel" aria-labelledby="moviecomming-tab">
+                    <MovieComming />
+                </div>
+            </div>
         </div>
     )
 }