react : post list

react-springboot/my-app/.eslintcache

@@ -1 +1 @@
-[{"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\index.js":"1","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\App.js":"2","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\Sub.js":"3","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\Style.js":"4","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Header.js":"5","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Footer.js":"6","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Login.js":"7","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\pages\\LoginPage.js":"8","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\pages\\HomePage.js":"9","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\home\\Home.js":"10"},{"size":360,"mtime":1612361035951,"results":"11","hashOfConfig":"12"},{"size":464,"mtime":1612361005152,"results":"13","hashOfConfig":"12"},{"size":196,"mtime":1612336218178,"results":"14","hashOfConfig":"12"},{"size":163,"mtime":1612343575699,"results":"15","hashOfConfig":"12"},{"size":1468,"mtime":1612365798828,"results":"16","hashOfConfig":"12"},{"size":497,"mtime":1612348360786,"results":"17","hashOfConfig":"12"},{"size":293,"mtime":1612348402121,"results":"18","hashOfConfig":"12"},{"size":335,"mtime":1612358305043,"results":"19","hashOfConfig":"12"},{"size":1550,"mtime":1612355590475,"results":"20","hashOfConfig":"12"},{"size":1474,"mtime":1612363852723,"results":"21","hashOfConfig":"12"},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},"11g3wnd",{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"27","messages":"28","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"31"},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"34","messages":"35","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"36","messages":"37","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"38","messages":"39","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"40","messages":"41","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"42","messages":"43","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\index.js",[],["44","45"],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\App.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\Sub.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\Style.js",[],["46","47"],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Header.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Footer.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Login.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\pages\\LoginPage.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\pages\\HomePage.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\home\\Home.js",[],{"ruleId":"48","replacedBy":"49"},{"ruleId":"50","replacedBy":"51"},{"ruleId":"48","replacedBy":"52"},{"ruleId":"50","replacedBy":"53"},"no-native-reassign",["54"],"no-negated-in-lhs",["55"],["54"],["55"],"no-global-assign","no-unsafe-negation"]
+[{"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\index.js":"1","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\App.js":"2","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\pages\\ListPage.js":"3","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\pages\\WritePage.js":"4","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Navigation.js":"5"},{"size":360,"mtime":1612361035951,"results":"6","hashOfConfig":"7"},{"size":439,"mtime":1612369197962,"results":"8","hashOfConfig":"7"},{"size":1998,"mtime":1612373599309,"results":"9","hashOfConfig":"7"},{"size":492,"mtime":1612368959285,"results":"10","hashOfConfig":"7"},{"size":306,"mtime":1612368239201,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"11g3wnd",{"filePath":"15","messages":"16","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"19","messages":"20","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\index.js",[],["23","24"],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\App.js",["25","26"],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\pages\\ListPage.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\pages\\WritePage.js",["27"],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Navigation.js",[],{"ruleId":"28","replacedBy":"29"},{"ruleId":"30","replacedBy":"31"},{"ruleId":"32","severity":1,"message":"33","line":1,"column":10,"nodeType":"34","messageId":"35","endLine":1,"endColumn":15},{"ruleId":"32","severity":1,"message":"36","line":4,"column":8,"nodeType":"34","messageId":"35","endLine":4,"endColumn":17},{"ruleId":"32","severity":1,"message":"37","line":6,"column":9,"nodeType":"34","messageId":"35","endLine":6,"endColumn":13},"no-native-reassign",["38"],"no-negated-in-lhs",["39"],"no-unused-vars","'Route' is defined but never used.","Identifier","unusedVar","'WritePage' is defined but never used.","'post' is assigned a value but never used.","no-global-assign","no-unsafe-negation"]

react-springboot/my-app/practice/App.css

@@ -0,0 +1,3 @@
+.box-style {
+  color: blue;
+}

react-springboot/my-app/practice/App.js

@@ -0,0 +1,19 @@
+import { Route } from 'react-router-dom';
+import './App.css';
+import Footer from './components/Footer';
+import Header from './components/Header';
+import HomePage from './pages/HomePage';
+import LoginPage from './pages/LoginPage';
+
+function App() {
+  return (
+    <>
+      <Header />
+      <Route path="/" exact={true} component={HomePage} />
+      <Route path="/login/:id" exact={true} component={LoginPage} />
+      <Footer />
+    </>
+  );
+}
+
+export default App;

react-springboot/my-app/practice/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

react-springboot/my-app/practice/index.js

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

react-springboot/my-app/src/App.js

@@ -1,18 +1,17 @@
 import { Route } from 'react-router-dom';
-import './App.css';
-import Footer from './components/Footer';
-import Header from './components/Header';
-import HomePage from './pages/HomePage';
-import LoginPage from './pages/LoginPage';
+import Navigation from './components/Navigation';
+import ListPage from './pages/ListPage';
+import WritePage from './pages/WritePage';
 
 function App() {
   return (
-    <>
-      <Header />
-      <Route path="/" exact={true} component={HomePage} />
-      <Route path="/login/:id" exact={true} component={LoginPage} />
-      <Footer />
-    </>
+    <div>
+      <Navigation />
+      <ListPage />
+
+      {/* <Route path="/" exact={true} component={ListPage}></Route>
+      <Route path="/write" exact={true} component={WritePage}></Route> */}
+    </div>
   );
 }
 

react-springboot/my-app/src/components/Navigation.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const Navigation = () => {
+  return (
+    <ul>
+      <li>
+        <Link to="/">리스트</Link>
+      </li>
+      <li>
+        <Link to="/write">글쓰기</Link>
+      </li>
+    </ul>
+  );
+};
+
+export default Navigation;

react-springboot/my-app/src/pages/ListPage.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import { useState } from 'react';
+import styled from 'styled-components';
+
+const StyledItemBoxDiv = styled.div`
+  display: flex;
+  justify-content: space-between;
+  border: 1px solid black;
+  padding: 10px;
+  height: 100px;
+  margin: 20px;
+  align-items: center;
+`;
+
+const ListPage = () => {
+  const [post, setPost] = useState({
+    id: 0,
+    title: '',
+    content: '',
+  });
+
+  const [posts, setPosts] = useState([
+    { id: 1, title: '제목1', content: '내용1' },
+    { id: 2, title: '제목2', content: '내용2' },
+    { id: 3, title: '제목3', content: '내용3' },
+    { id: 4, title: '제목4', content: '내용4' },
+    { id: 5, title: '제목5', content: '내용5' },
+  ]);
+
+  const handleWrite = (e) => {
+    // ListPage의 setPosts
+    e.preventDefault();
+    setPosts([...posts, post]);
+  };
+
+  const handleForm = (e) => {
+    // computed property names 문법 (키값 동적 할당)
+    setPost({ ...post, [e.target.name]: e.target.value });
+  };
+
+  const handleDelete = (props) => {
+    setPosts(posts.filter((v) => v.id !== props));
+  };
+
+  return (
+    <div>
+      <h1>글목록 페이지</h1>
+      <form onSubmit={handleWrite}>
+        <input
+          type="text"
+          placeholder="제목을 입력하세요"
+          value={post.title}
+          onChange={handleForm}
+          name="title"
+        />
+        <input
+          type="text"
+          placeholder="내용을 입력하세요"
+          value={post.content}
+          onChange={handleForm}
+          name="content"
+        />
+        <button>글쓰기</button>
+      </form>
+      {posts.map((post) => (
+        <StyledItemBoxDiv>
+          <div>
+            번호 : {post.id} / 제목 : {post.title} / 내용 : {post.content}
+          </div>
+          <button onClick={() => handleDelete(post.id)}>삭제</button>
+        </StyledItemBoxDiv>
+      ))}
+    </div>
+  );
+};
+
+export default ListPage;

react-springboot/my-app/src/pages/WritePage.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+const WritePage = () => {
+  const handleWrite = () => {
+    // ListPage의 setPosts
+    let post = { id: 6, title: 'input value' };
+  };
+
+  return (
+    <div>
+      <h1>글쓰기 페이지</h1>
+      <hr />
+      <form>
+        <input type="text" placeholder="제목을 입력하세요" />
+        <button type="button" onClick={handleWrite}>
+          글쓰기
+        </button>
+      </form>
+    </div>
+  );
+};
+
+export default WritePage;