react-springboot : 화면 구성하기

react-springboot/book/book-frontend/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "printWidth": 80
+}

react-springboot/book/book-frontend/src/App.js

@@ -1,5 +1,28 @@
+import React from 'react';
+import { Container } from 'react-bootstrap';
+import { Route } from 'react-router-dom';
+import Header from './components/Header';
+import Detail from './pages/book/Detail';
+import Home from './pages/book/Home';
+import SaveForm from './pages/book/SaveForm';
+import UpdateForm from './pages/book/UpdateForm';
+import JoinForm from './pages/user/JoinForm';
+import LoginForm from './pages/user/LoginForm';
+
 function App() {
-  return <div>Hello World</div>;
+  return (
+    <div>
+      <Header />
+      <Container>
+        <Route path="/" exact={true} component={Home} />
+        <Route path="/saveForm" exact={true} component={SaveForm} />
+        <Route path="/book/:id" exact={true} component={Detail} />
+        <Route path="/loginForm" exact={true} component={LoginForm} />
+        <Route path="/joinForm" exact={true} component={JoinForm} />
+        <Route path="/updateForm/:id" exact={true} component={UpdateForm} />
+      </Container>
+    </div>
+  );
 }
 
 export default App;

react-springboot/book/book-frontend/src/components/Header.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Button, Form, FormControl, Nav, Navbar } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+
+const Header = () => {
+  return (
+    <>
+      <Navbar bg="dark" variant="dark">
+        <Link to="/" className="navbar-brand">
+          홈
+        </Link>
+        <Nav className="mr-auto">
+          <Link to="/joinForm" className="nav-link">
+            회원가입
+          </Link>
+          <Link to="/loginForm" className="nav-link">
+            로그인
+          </Link>
+          <Link to="/saveForm" className="nav-link">
+            글쓰기
+          </Link>
+        </Nav>
+        <Form inline>
+          <FormControl type="text" placeholder="Search" className="mr-sm-2" />
+          <Button variant="outline-info">Search</Button>
+        </Form>
+      </Navbar>
+      <br />
+    </>
+  );
+};
+
+export default Header;

react-springboot/book/book-frontend/src/index.js

@@ -1,6 +1,8 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import App from "./App";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+import { BrowserRouter } from 'react-router-dom';
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 ReactDOM.render(
   <React.StrictMode>
@@ -8,5 +10,5 @@ ReactDOM.render(
       <App />
     </BrowserRouter>
   </React.StrictMode>,
-  document.getElementById("root")
+  document.getElementById('root'),
 );

react-springboot/book/book-frontend/src/pages/book/Detail.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const Detail = () => {
+  return (
+    <div>
+      <h1>상세보기 페이지</h1>
+    </div>
+  );
+};
+
+export default Detail;
+<h1>상세보기 페이지</h1>;

react-springboot/book/book-frontend/src/pages/book/Home.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Home = () => {
+  return (
+    <div>
+      <h1>책 리스트 보기</h1>
+    </div>
+  );
+};
+
+export default Home;

react-springboot/book/book-frontend/src/pages/book/SaveForm.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const SaveForm = () => {
+  return (
+    <div>
+      <h1>책 등록하기</h1>
+    </div>
+  );
+};
+
+export default SaveForm;
+<h1>책 등록하기</h1>;

react-springboot/book/book-frontend/src/pages/book/UpdateForm.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const UpdateForm = () => {
+  return (
+    <div>
+      <h1>책 수정하기</h1>
+    </div>
+  );
+};
+
+export default UpdateForm;
+<h1>책 수정하기</h1>;

react-springboot/book/book-frontend/src/pages/user/JoinForm.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const JoinForm = () => {
+  return (
+    <div>
+      <h1>회원가입 화면</h1>
+    </div>
+  );
+};
+
+export default JoinForm;

react-springboot/book/book-frontend/src/pages/user/LoginForm.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const LoginForm = () => {
+  return (
+    <div>
+      <h1>로그인 화면</h1>
+    </div>
+  );
+};
+
+export default LoginForm;