From 9839d0563c817f53a25e47f43db91af67900eda5 Mon Sep 17 00:00:00 2001
From: DDuckyee <dduckyee00@naver.com>
Date: Wed, 7 Jun 2023 05:57:36 +0900
Subject: [PATCH 1/2] Basic CRUD

---
 toy/package-lock.json |   2 +-
 toy/src/App.js        | 185 +++++++++++++++++++++++++++++++++++++-----
 2 files changed, 167 insertions(+), 20 deletions(-)

diff --git a/toy/package-lock.json b/toy/package-lock.json
index 129470b..f296c75 100644
--- a/toy/package-lock.json
+++ b/toy/package-lock.json
@@ -6,7 +6,7 @@
   "packages": {
     "": {
       "name": "toy",
-      "version": "0.1.0",
+      "version": "0.1.0", 
       "dependencies": {
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
diff --git a/toy/src/App.js b/toy/src/App.js
index 3784575..a9797dc 100644
--- a/toy/src/App.js
+++ b/toy/src/App.js
@@ -1,25 +1,172 @@
-import logo from './logo.svg';
 import './App.css';
+import { useState } from 'react';
+
+function Header(props) {
+	return <header>
+		<h1><a href="/" onClick={(event)=>{
+      event.preventDefault();
+      props.onChangeMode();
+    }}>{props.title}</a></h1>
+	</header>
+}
+
+function Nav(props) {
+	const lis = []
+	for(let i = 0; i < props.topics.length; i++){
+		let t = props.topics[i];
+		lis.push(<li key={t.id}>
+      <a id={t.id} href={'/read/'+t.id} onClick={event=>{
+        event.preventDefault();
+        props.onChangeMode(Number(event.target.id));
+      }}>{t.title}</a>
+    </li>);
+	}
+	return <nav>
+		<ol>
+			{lis}
+		</ol>
+	</nav>
+}
+
+function Article(props) {
+	return <article>
+		<h2>{props.title}</h2>
+		{props.body}
+	</article>
+}
+
+function Create(props) {
+  return <article>
+    <h2>Create</h2>
+    <form onSubmit={event=>{
+      event.preventDefault();
+      const title = event.target.title.value;
+      const body = event.target.body.value;
+      props.onCreate(title, body);
+    }}>
+      <p><input type='text' name='title' placeholder='title'/></p>
+      <p><textarea name='body' placeholder='body'></textarea></p>
+      <p><input type='submit' value="Create"></input></p>
+    </form>
+  </article>
+}
+
+function Update(props) {
+  const [title, setTitle] = useState(props.title);
+  const [body, setBody] = useState(props.body);
+  return <article>
+    <h2>Update</h2>
+    <form onSubmit={event=>{
+      event.preventDefault();
+      const title = event.target.title.value;
+      const body = event.target.body.value;
+      props.onUpdate(title, body);
+    }}>
+      <p><input type='text' name='title' placeholder='title' value={title} onChange={event=>{
+        setTitle(event.target.value);
+      }}/></p>
+      <p><textarea name='body' placeholder='body' value={body} onChange={event=>{
+        setBody(event.target.value);
+      }}></textarea></p>
+      <p><input type='submit' value="Update"></input></p>
+    </form>
+  </article>
+}
 
 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>
-  );
+  // const _mode = useState('WELCOME');
+  // const mode = _mode[0];
+  // const setMode = _mode[1];
+  const [mode, setMode] = useState('WELCOME');
+  const [id, setId] = useState('null');
+  const [nextId, setNextId] = useState(4);
+	const [topics, setTopics] = useState([
+		{id:1, title: 'html', body: 'html is ...'},
+		{id:2, title: 'css', body: 'css is ...'},
+		{id:3, title: 'javascript', body: 'javascript is ...'}
+	]);
+  let content = null;
+  let contextControl = null;
+
+  if(mode === 'WELCOME'){
+    content = <Article title="Welcome" body="Hello, WEB"></Article>
+  } else if(mode === 'READ'){
+    let title, body = null;
+    for(let i = 0; i < topics.length; i++) {
+      if(topics[i].id === id) {
+        title = topics[i].title;
+        body = topics[i].body
+      }
+    }
+    content = <Article title={title} body={body}></Article>
+    contextControl = <>
+    <li><a href={'/update/'+id} onClick={event=>{
+      event.preventDefault();
+      setMode('UPDATE');
+    }}>Update</a></li>
+    <li><input type='button' value="Delete" onClick={()=>{
+      const newTopics = []
+      for(let i = 0; i < topics.length; i++) {
+        if(topics[i].id !== id) {
+          newTopics.push(topics[i])
+        }
+      }
+      setTopics(newTopics);
+      setMode('WELCOME');
+    }}/></li>
+    </>
+  } else if(mode === 'CREATE'){
+    content = <Create onCreate={(_title, _body)=>{
+      const newTopic = {id:nextId, title:_title, body:_body};
+      const newTopics = [...topics];
+      newTopics.push(newTopic);
+      setTopics(newTopics);
+      setId(nextId)
+      setNextId(nextId+1);
+      setMode('READ');
+    }}></Create>
+  } else if(mode === 'UPDATE'){
+    let title, body = null;
+    for(let i = 0; i < topics.length; i++) {
+      if(topics[i].id === id) {
+        title = topics[i].title;
+        body = topics[i].body
+      }
+    }
+    content = <Update title={title} body={body} onUpdate={(title, body)=>{
+      const newTopics = [...topics];
+      const updatedTopic = {id:id, title:title, body:body}
+      for(let i = 0; i < newTopics.length; i++) {
+        if(newTopics[i].id === id) {
+          newTopics[i] = updatedTopic;
+          break
+        }
+      }
+      setTopics(newTopics);
+      setMode('READ');
+    }}></Update>
+  }
+
+	return (
+		<div>
+			<Header title="WEB" onChangeMode={()=>{
+        setMode('WELCOME');
+      }}></Header>
+			<Nav topics={topics} onChangeMode={(_id)=>{
+        setMode('READ');
+        setId(_id);
+      }}></Nav>
+      {content}
+
+      <ul>
+        <li><a href='/create' onClick={(event)=>{
+            event.preventDefault();
+            setMode('CREATE');
+          }}>Create</a></li>
+          {contextControl}
+      </ul>
+		</div>
+	);
 }
 
 export default App;

From 887e88e7c100bf54c836f0d9b050d64267fa688b Mon Sep 17 00:00:00 2001
From: DDuckyee <dduckyee00@naver.com>
Date: Fri, 9 Jun 2023 11:26:19 +0900
Subject: [PATCH 2/2] =?UTF-8?q?[refactor]=20pretier=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 toy/src/App.js | 352 +++++++++++++++++++++++++++++++------------------
 1 file changed, 221 insertions(+), 131 deletions(-)

diff --git a/toy/src/App.js b/toy/src/App.js
index a9797dc..521e7ed 100644
--- a/toy/src/App.js
+++ b/toy/src/App.js
@@ -1,172 +1,262 @@
-import './App.css';
-import { useState } from 'react';
+import "./App.css";
+import { useState } from "react";
 
 function Header(props) {
-	return <header>
-		<h1><a href="/" onClick={(event)=>{
-      event.preventDefault();
-      props.onChangeMode();
-    }}>{props.title}</a></h1>
-	</header>
+  return (
+    <header>
+      <h1>
+        <a
+          href="/"
+          onClick={(event) => {
+            event.preventDefault();
+            props.onChangeMode();
+          }}
+        >
+          {props.title}
+        </a>
+      </h1>
+    </header>
+  );
 }
 
 function Nav(props) {
-	const lis = []
-	for(let i = 0; i < props.topics.length; i++){
-		let t = props.topics[i];
-		lis.push(<li key={t.id}>
-      <a id={t.id} href={'/read/'+t.id} onClick={event=>{
-        event.preventDefault();
-        props.onChangeMode(Number(event.target.id));
-      }}>{t.title}</a>
-    </li>);
-	}
-	return <nav>
-		<ol>
-			{lis}
-		</ol>
-	</nav>
+  const lis = [];
+  for (let i = 0; i < props.topics.length; i++) {
+    let t = props.topics[i];
+    lis.push(
+      <li key={t.id}>
+        <a
+          id={t.id}
+          href={"/read/" + t.id}
+          onClick={(event) => {
+            event.preventDefault();
+            props.onChangeMode(Number(event.target.id));
+          }}
+        >
+          {t.title}
+        </a>
+      </li>
+    );
+  }
+  return (
+    <nav>
+      <ol>{lis}</ol>
+    </nav>
+  );
 }
 
 function Article(props) {
-	return <article>
-		<h2>{props.title}</h2>
-		{props.body}
-	</article>
+  return (
+    <article>
+      <h2>{props.title}</h2>
+      {props.body}
+    </article>
+  );
 }
 
 function Create(props) {
-  return <article>
-    <h2>Create</h2>
-    <form onSubmit={event=>{
-      event.preventDefault();
-      const title = event.target.title.value;
-      const body = event.target.body.value;
-      props.onCreate(title, body);
-    }}>
-      <p><input type='text' name='title' placeholder='title'/></p>
-      <p><textarea name='body' placeholder='body'></textarea></p>
-      <p><input type='submit' value="Create"></input></p>
-    </form>
-  </article>
+  return (
+    <article>
+      <h2>Create</h2>
+      <form
+        onSubmit={(event) => {
+          event.preventDefault();
+          const title = event.target.title.value;
+          const body = event.target.body.value;
+          props.onCreate(title, body);
+        }}
+      >
+        <p>
+          <input type="text" name="title" placeholder="title" />
+        </p>
+        <p>
+          <textarea name="body" placeholder="body"></textarea>
+        </p>
+        <p>
+          <input type="submit" value="Create"></input>
+        </p>
+      </form>
+    </article>
+  );
 }
 
 function Update(props) {
   const [title, setTitle] = useState(props.title);
   const [body, setBody] = useState(props.body);
-  return <article>
-    <h2>Update</h2>
-    <form onSubmit={event=>{
-      event.preventDefault();
-      const title = event.target.title.value;
-      const body = event.target.body.value;
-      props.onUpdate(title, body);
-    }}>
-      <p><input type='text' name='title' placeholder='title' value={title} onChange={event=>{
-        setTitle(event.target.value);
-      }}/></p>
-      <p><textarea name='body' placeholder='body' value={body} onChange={event=>{
-        setBody(event.target.value);
-      }}></textarea></p>
-      <p><input type='submit' value="Update"></input></p>
-    </form>
-  </article>
+  return (
+    <article>
+      <h2>Update</h2>
+      <form
+        onSubmit={(event) => {
+          event.preventDefault();
+          const title = event.target.title.value;
+          const body = event.target.body.value;
+          props.onUpdate(title, body);
+        }}
+      >
+        <p>
+          <input
+            type="text"
+            name="title"
+            placeholder="title"
+            value={title}
+            onChange={(event) => {
+              setTitle(event.target.value);
+            }}
+          />
+        </p>
+        <p>
+          <textarea
+            name="body"
+            placeholder="body"
+            value={body}
+            onChange={(event) => {
+              setBody(event.target.value);
+            }}
+          ></textarea>
+        </p>
+        <p>
+          <input type="submit" value="Update"></input>
+        </p>
+      </form>
+    </article>
+  );
 }
 
 function App() {
   // const _mode = useState('WELCOME');
   // const mode = _mode[0];
   // const setMode = _mode[1];
-  const [mode, setMode] = useState('WELCOME');
-  const [id, setId] = useState('null');
+  const [mode, setMode] = useState("WELCOME");
+  const [id, setId] = useState("null");
   const [nextId, setNextId] = useState(4);
-	const [topics, setTopics] = useState([
-		{id:1, title: 'html', body: 'html is ...'},
-		{id:2, title: 'css', body: 'css is ...'},
-		{id:3, title: 'javascript', body: 'javascript is ...'}
-	]);
+  const [topics, setTopics] = useState([
+    { id: 1, title: "html", body: "html is ..." },
+    { id: 2, title: "css", body: "css is ..." },
+    { id: 3, title: "javascript", body: "javascript is ..." },
+  ]);
   let content = null;
   let contextControl = null;
 
-  if(mode === 'WELCOME'){
-    content = <Article title="Welcome" body="Hello, WEB"></Article>
-  } else if(mode === 'READ'){
-    let title, body = null;
-    for(let i = 0; i < topics.length; i++) {
-      if(topics[i].id === id) {
+  if (mode === "WELCOME") {
+    content = <Article title="Welcome" body="Hello, WEB"></Article>;
+  } else if (mode === "READ") {
+    let title,
+      body = null;
+    for (let i = 0; i < topics.length; i++) {
+      if (topics[i].id === id) {
         title = topics[i].title;
-        body = topics[i].body
+        body = topics[i].body;
       }
     }
-    content = <Article title={title} body={body}></Article>
-    contextControl = <>
-    <li><a href={'/update/'+id} onClick={event=>{
-      event.preventDefault();
-      setMode('UPDATE');
-    }}>Update</a></li>
-    <li><input type='button' value="Delete" onClick={()=>{
-      const newTopics = []
-      for(let i = 0; i < topics.length; i++) {
-        if(topics[i].id !== id) {
-          newTopics.push(topics[i])
-        }
-      }
-      setTopics(newTopics);
-      setMode('WELCOME');
-    }}/></li>
-    </>
-  } else if(mode === 'CREATE'){
-    content = <Create onCreate={(_title, _body)=>{
-      const newTopic = {id:nextId, title:_title, body:_body};
-      const newTopics = [...topics];
-      newTopics.push(newTopic);
-      setTopics(newTopics);
-      setId(nextId)
-      setNextId(nextId+1);
-      setMode('READ');
-    }}></Create>
-  } else if(mode === 'UPDATE'){
-    let title, body = null;
-    for(let i = 0; i < topics.length; i++) {
-      if(topics[i].id === id) {
+    content = <Article title={title} body={body}></Article>;
+    contextControl = (
+      <>
+        <li>
+          <a
+            href={"/update/" + id}
+            onClick={(event) => {
+              event.preventDefault();
+              setMode("UPDATE");
+            }}
+          >
+            Update
+          </a>
+        </li>
+        <li>
+          <input
+            type="button"
+            value="Delete"
+            onClick={() => {
+              const newTopics = [];
+              for (let i = 0; i < topics.length; i++) {
+                if (topics[i].id !== id) {
+                  newTopics.push(topics[i]);
+                }
+              }
+              setTopics(newTopics);
+              setMode("WELCOME");
+            }}
+          />
+        </li>
+      </>
+    );
+  } else if (mode === "CREATE") {
+    content = (
+      <Create
+        onCreate={(_title, _body) => {
+          const newTopic = { id: nextId, title: _title, body: _body };
+          const newTopics = [...topics];
+          newTopics.push(newTopic);
+          setTopics(newTopics);
+          setId(nextId);
+          setNextId(nextId + 1);
+          setMode("READ");
+        }}
+      ></Create>
+    );
+  } else if (mode === "UPDATE") {
+    let title,
+      body = null;
+    for (let i = 0; i < topics.length; i++) {
+      if (topics[i].id === id) {
         title = topics[i].title;
-        body = topics[i].body
+        body = topics[i].body;
       }
     }
-    content = <Update title={title} body={body} onUpdate={(title, body)=>{
-      const newTopics = [...topics];
-      const updatedTopic = {id:id, title:title, body:body}
-      for(let i = 0; i < newTopics.length; i++) {
-        if(newTopics[i].id === id) {
-          newTopics[i] = updatedTopic;
-          break
-        }
-      }
-      setTopics(newTopics);
-      setMode('READ');
-    }}></Update>
+    content = (
+      <Update
+        title={title}
+        body={body}
+        onUpdate={(title, body) => {
+          const newTopics = [...topics];
+          const updatedTopic = { id: id, title: title, body: body };
+          for (let i = 0; i < newTopics.length; i++) {
+            if (newTopics[i].id === id) {
+              newTopics[i] = updatedTopic;
+              break;
+            }
+          }
+          setTopics(newTopics);
+          setMode("READ");
+        }}
+      ></Update>
+    );
   }
 
-	return (
-		<div>
-			<Header title="WEB" onChangeMode={()=>{
-        setMode('WELCOME');
-      }}></Header>
-			<Nav topics={topics} onChangeMode={(_id)=>{
-        setMode('READ');
-        setId(_id);
-      }}></Nav>
+  return (
+    <div>
+      <Header
+        title="WEB"
+        onChangeMode={() => {
+          setMode("WELCOME");
+        }}
+      ></Header>
+      <Nav
+        topics={topics}
+        onChangeMode={(_id) => {
+          setMode("READ");
+          setId(_id);
+        }}
+      ></Nav>
       {content}
 
       <ul>
-        <li><a href='/create' onClick={(event)=>{
-            event.preventDefault();
-            setMode('CREATE');
-          }}>Create</a></li>
-          {contextControl}
+        <li>
+          <a
+            href="/create"
+            onClick={(event) => {
+              event.preventDefault();
+              setMode("CREATE");
+            }}
+          >
+            Create
+          </a>
+        </li>
+        {contextControl}
       </ul>
-		</div>
-	);
+    </div>
+  );
 }
 
 export default App;