Commit 583e2046 authored by Kim, Subin's avatar Kim, Subin
Browse files

초기 설정 및 MainNav & Search

parent be9d9e34
This diff is collapsed.
......@@ -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",
......
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>
);
}
......
const Footer = () => {
return (
<div style={{ backgroundColor: " #808080" }}>
</div>
)
}
export default Footer
\ No newline at end of file
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
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
export { default } from './Search'
\ No newline at end of file
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
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';
......
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
const LoginPage = () => {
return (
<div>
</div>
)
}
export default LoginPage
\ No newline at end of file
const MovieListPage = () => {
return (
<div>
</div>
)
}
export default MovieListPage
\ No newline at end of file
const MoviePage = () => {
return (
<div>
</div>
)
}
export default MoviePage
\ No newline at end of file
const MyPage = () => {
return (
<div>
</div>
)
}
export default MyPage
\ No newline at end of file
const SignupPage = () => {
return (
<div>
</div>
)
}
export default SignupPage
\ No newline at end of file
const TheaterPage = () => {
return (
<div>
</div>
)
}
export default TheaterPage
\ No newline at end of file
@import '~bootstrap/scss/bootstrap.scss';
@import '~bootstrap-icons/font/bootstrap-icons';
\ No newline at end of file
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