* index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
);
* App.js
import { Container } from 'react-bootstrap';
import { Route, Routes } from 'react-router-dom';
import Header from './components/Header';
import Footer from './components/Footer';
import Home from './pages/book/Home';
import Detail from './pages/book/Detail';
import SaveForm from './pages/book/SaveForm';
import LoginForm from './pages/user/LoginForm';
import JoinForm from './pages/user/JoinForm';
import UpdateForm from './pages/book/UpdateForm';
function App() {
return (
<div>
<Header />
<Container>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/saveForm" element={<SaveForm />} />
<Route path="/book/:id" element={<Detail />} />
<Route path="/loginForm" element={<LoginForm />} />
<Route path="/joinForm" element={<JoinForm />} />
<Route path="/updateForm/:id" element={<UpdateForm />} />
<Route path="/*" element={<h1>존재하지 않는 페이지입니다.</h1>} />
</Routes>
</Container>
<Footer />
</div>
);
}
export default App;
* Header.js
import React from 'react';
import { Link } from 'react-router-dom';
import {
Navbar,
Container,
Nav,
Form,
Button,
} from 'react-bootstrap';
const Header = () => {
return (
<div>
<Navbar expand="lg" bg="dark" variant="dark">
<Container fluid>
<Link to="/" className="navbar-brand">Kitae's Home</Link>
<Navbar.Toggle aria-controls="navbarScroll" />
<Navbar.Collapse id="navbarScroll">
<Nav className="me-auto my-2 my-lg-0" style={{ maxHeight: '100px' }} navbarScroll>
<Link to="/" className="nav-link">Home</Link>
<Link to="/joinForm" className="nav-link">회원가입</Link>
<Link to="/loginForm" className="nav-link">로그인</Link>
<Link to="/saveForm" className="nav-link">글쓰기</Link>
</Nav>
<Form className="d-flex">
<Form.Control
type="search"
placeholder="Search"
className="me-2"
aria-label="Search"
/>
<Button variant="outline-success">Search</Button>
</Form>
</Navbar.Collapse>
</Container>
</Navbar>
</div>
);
};
export default Header;
* Footer.js
import React from 'react';
import { styled } from 'styled-components';
const FooterList = styled.div`
border: 1px solid green;
height: 80px;
color: green;
display: grid;
place-items: center; /* 수평 및 수직 정렬 */
`;
const Footer = () => {
return (
<FooterList>
<ul>
<li>작업중 : Spring boot + React</li>
<li>이메일 : kkt@inhatc.ac.kr</li>
<li>작성자 : 김기태</li>
</ul>
</FooterList>
);
};
export default Footer;
나머지 구성 (작업중)
<<결과>>