Commit ce339430 authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

moviechart tab

parent 4a1c1025
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>
);
}
......
......@@ -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>
)
}
......
const MovieChart = () => {
return (
<>
<h1>영화</h1>
</>
)
}
export default MovieChart
\ No newline at end of file
const MovieComming = () => {
return (
<>
<h1>상영예정작</h1>
</>
)
}
export default MovieComming
\ No newline at end of file
......@@ -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 />
......
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>
</>
)
}
......
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>
)
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment