From 29837b75f9ec1e37bd2d0b8dde4cc3ce55a098fe Mon Sep 17 00:00:00 2001
From: AQ-masatoshi-yamaguchi
 <69567949+AQ-masatoshi-yamaguchi@users.noreply.github.com>
Date: Wed, 2 Feb 2022 15:13:00 +0900
Subject: [PATCH 1/8] initial commit

---
 src/App.jsx | 33 ++++++++++++++++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/App.jsx b/src/App.jsx
index 478bf47..b8caf0c 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,5 +1,36 @@
 import "./styles.css";
 
 export const App = () => {
-  return <div></div>;
+  return (
+    <>
+      <div>
+        <input placeholder="TODOを入力" />
+        <button>追加</button>
+      </div>
+      <div>
+        <p>未完了のTODO</p>
+        <ul>
+          <div>
+            <li>ああああ</li>
+            <button>完了</button>
+            <button>削除</button>
+          </div>
+          <div>
+            <li>いいいい</li>
+            <button>完了</button>
+            <button>削除</button>
+          </div>
+        </ul>
+      </div>
+      <div>
+        <p>完了のTODO</p>
+        <ul>
+          <div>
+            <li>ああああ</li>
+            <button>戻す</button>
+          </div>
+        </ul>
+      </div>
+    </>
+  );
 };

From 9b0bcea7fa27b6a861bdeeafd9312795ea1fbbdb Mon Sep 17 00:00:00 2001
From: AQ-masatoshi-yamaguchi
 <69567949+AQ-masatoshi-yamaguchi@users.noreply.github.com>
Date: Wed, 2 Feb 2022 15:24:23 +0900
Subject: [PATCH 2/8] =?UTF-8?q?=E3=82=B9=E3=82=BF=E3=82=A4=E3=83=AB?=
 =?UTF-8?q?=E3=81=AE=E5=AE=9F=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx    | 16 ++++++------
 src/styles.css | 66 ++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 74 insertions(+), 8 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index b8caf0c..0e8bbdb 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -3,29 +3,29 @@ import "./styles.css";
 export const App = () => {
   return (
     <>
-      <div>
+      <div className="input-area">
         <input placeholder="TODOを入力" />
         <button>追加</button>
       </div>
-      <div>
-        <p>未完了のTODO</p>
+      <div className="incomplete-area">
+        <p className="title">未完了のTODO</p>
         <ul>
-          <div>
+          <div className="list-row">
             <li>ああああ</li>
             <button>完了</button>
             <button>削除</button>
           </div>
-          <div>
+          <div className="list-row">
             <li>いいいい</li>
             <button>完了</button>
             <button>削除</button>
           </div>
         </ul>
       </div>
-      <div>
-        <p>完了のTODO</p>
+      <div className="complete-area">
+        <p className="title">完了のTODO</p>
         <ul>
-          <div>
+          <div className="list-row">
             <li>ああああ</li>
             <button>戻す</button>
           </div>
diff --git a/src/styles.css b/src/styles.css
index e69de29..acf0522 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -0,0 +1,66 @@
+body {
+  font-family: sans-serif;
+}
+
+input {
+  border-radius: 16px;
+  border: none;
+  padding: 6px 16px;
+  outline: none;
+}
+
+button {
+  border-radius: 16px;
+  border: none;
+  padding: 4px 16px;
+}
+
+button:hover {
+  background-color: #ff7fff;
+  color: #fff;
+  cursor: pointer;
+}
+
+li {
+  margin-right: 8px;
+}
+
+.input-area {
+  background-color: #c1ffff;
+  width: 400px;
+  height: 30px;
+  border-radius: 8px;
+  padding: 8px;
+  margin: 8px;
+}
+
+.incomplete-area {
+  background-color: #c6ffe2;
+  width: 400px;
+  min-height: 200px;
+  padding: 8px;
+  margin: 8px;
+  border-radius: 8px;
+}
+
+.complete-area {
+  background-color: #ffffe0;
+  width: 400px;
+  min-height: 200px;
+  padding: 8px;
+  margin: 8px;
+  border-radius: 8px;
+}
+
+.title {
+  text-align: center;
+  margin-top: 0;
+  font-weight: bold;
+  color: #666;
+}
+
+.list-row {
+  display: flex;
+  align-items: center;
+  padding-bottom: 4px;
+}

From 4dd84ccc27295d100d66f7f2326aaec3c527a933 Mon Sep 17 00:00:00 2001
From: AQ-masatoshi-yamaguchi
 <69567949+AQ-masatoshi-yamaguchi@users.noreply.github.com>
Date: Wed, 2 Feb 2022 15:39:37 +0900
Subject: [PATCH 3/8] =?UTF-8?q?React=E3=83=A2=E3=83=83=E3=82=AF=E4=BD=9C?=
 =?UTF-8?q?=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx | 39 +++++++++++++++++++++++++--------------
 1 file changed, 25 insertions(+), 14 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 0e8bbdb..4df5d5b 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,6 +1,14 @@
 import "./styles.css";
+import React, { useState } from "react";
 
 export const App = () => {
+  const [incompleteTodos, setIncompleteTodos] = useState([
+    "ああああ",
+    "いいいい"
+  ]);
+
+  const [completeTodos, setCompleteTodos] = useState(["うううう"]);
+
   return (
     <>
       <div className="input-area">
@@ -10,25 +18,28 @@ export const App = () => {
       <div className="incomplete-area">
         <p className="title">未完了のTODO</p>
         <ul>
-          <div className="list-row">
-            <li>ああああ</li>
-            <button>完了</button>
-            <button>削除</button>
-          </div>
-          <div className="list-row">
-            <li>いいいい</li>
-            <button>完了</button>
-            <button>削除</button>
-          </div>
+          {incompleteTodos.map((todo) => {
+            return (
+              <div key={todo} className="list-row">
+                <li>{todo}</li>
+                <button>完了</button>
+                <button>削除</button>
+              </div>
+            );
+          })}
         </ul>
       </div>
       <div className="complete-area">
         <p className="title">完了のTODO</p>
         <ul>
-          <div className="list-row">
-            <li>ああああ</li>
-            <button>戻す</button>
-          </div>
+          {completeTodos.map((todo) => {
+            return (
+              <div key={todo} className="list-row">
+                <li>{todo}</li>
+                <button>戻す</button>
+              </div>
+            );
+          })}
         </ul>
       </div>
     </>

From c594554930d915ad64be8d777f621f8a1c30787e Mon Sep 17 00:00:00 2001
From: AQ-masatoshi-yamaguchi
 <69567949+AQ-masatoshi-yamaguchi@users.noreply.github.com>
Date: Wed, 2 Feb 2022 16:06:26 +0900
Subject: [PATCH 4/8] =?UTF-8?q?=E3=82=BF=E3=82=B9=E3=82=AF=E8=BF=BD?=
 =?UTF-8?q?=E5=8A=A0=E6=A9=9F=E8=83=BD=E5=AE=9F=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 4df5d5b..38d248b 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -2,6 +2,8 @@ import "./styles.css";
 import React, { useState } from "react";
 
 export const App = () => {
+  const [todoText, setTodoText] = useState("");
+
   const [incompleteTodos, setIncompleteTodos] = useState([
     "ああああ",
     "いいいい"
@@ -9,11 +11,24 @@ export const App = () => {
 
   const [completeTodos, setCompleteTodos] = useState(["うううう"]);
 
+  const onChangeTodoText = (event) => setTodoText(event.target.value);
+
+  const onClickAdd = () => {
+    if (todoText === "") return;
+    const newTodos = [...incompleteTodos, todoText];
+    setIncompleteTodos(newTodos);
+    setTodoText("");
+  };
+
   return (
     <>
       <div className="input-area">
-        <input placeholder="TODOを入力" />
-        <button>追加</button>
+        <input
+          placeholder="TODOを入力"
+          value={todoText}
+          onChange={onChangeTodoText}
+        />
+        <button onClick={onClickAdd}>追加</button>
       </div>
       <div className="incomplete-area">
         <p className="title">未完了のTODO</p>

From 43794c235345ab604be0a6ba04fa2a2287f34707 Mon Sep 17 00:00:00 2001
From: AQ-masatoshi-yamaguchi
 <69567949+AQ-masatoshi-yamaguchi@users.noreply.github.com>
Date: Wed, 2 Feb 2022 16:17:37 +0900
Subject: [PATCH 5/8] =?UTF-8?q?=E3=82=BF=E3=82=B9=E3=82=AF=E5=89=8A?=
 =?UTF-8?q?=E9=99=A4=E6=A9=9F=E8=83=BD=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 38d248b..942a263 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -20,6 +20,12 @@ export const App = () => {
     setTodoText("");
   };
 
+  const onClickDelete = (index) => {
+    const newTodos = [...incompleteTodos];
+    newTodos.splice(index, 1);
+    setIncompleteTodos(newTodos);
+  };
+
   return (
     <>
       <div className="input-area">
@@ -33,12 +39,12 @@ export const App = () => {
       <div className="incomplete-area">
         <p className="title">未完了のTODO</p>
         <ul>
-          {incompleteTodos.map((todo) => {
+          {incompleteTodos.map((todo, index) => {
             return (
               <div key={todo} className="list-row">
                 <li>{todo}</li>
                 <button>完了</button>
-                <button>削除</button>
+                <button onClick={() => onClickDelete(index)}>削除</button>
               </div>
             );
           })}

From 7fc88d679d76e187da21e1be079a0d06408152fb Mon Sep 17 00:00:00 2001
From: AQ-masatoshi-yamaguchi
 <69567949+AQ-masatoshi-yamaguchi@users.noreply.github.com>
Date: Wed, 2 Feb 2022 16:48:38 +0900
Subject: [PATCH 6/8] =?UTF-8?q?=E3=82=BF=E3=82=B9=E3=82=AF=E5=AE=8C?=
 =?UTF-8?q?=E4=BA=86=E6=A9=9F=E8=83=BD=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/App.jsx b/src/App.jsx
index 942a263..2ff2b95 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -26,6 +26,15 @@ export const App = () => {
     setIncompleteTodos(newTodos);
   };
 
+  const onClickComplete = (index) => {
+    const newIncompleteTodos = [...incompleteTodos];
+    newIncompleteTodos.splice(index, 1);
+    setIncompleteTodos(newIncompleteTodos);
+
+    const newCompleteTodos = [...completeTodos, incompleteTodos[index]];
+    setCompleteTodos(newCompleteTodos);
+  };
+
   return (
     <>
       <div className="input-area">
@@ -43,7 +52,7 @@ export const App = () => {
             return (
               <div key={todo} className="list-row">
                 <li>{todo}</li>
-                <button>完了</button>
+                <button onClick={() => onClickComplete(index)}>完了</button>
                 <button onClick={() => onClickDelete(index)}>削除</button>
               </div>
             );

From 8b4413dcc3356df172aef95fa7b272b2fb726311 Mon Sep 17 00:00:00 2001
From: AQ-masatoshi-yamaguchi
 <69567949+AQ-masatoshi-yamaguchi@users.noreply.github.com>
Date: Wed, 2 Feb 2022 16:53:20 +0900
Subject: [PATCH 7/8] =?UTF-8?q?=E3=82=BF=E3=82=B9=E3=82=AF=E6=88=BB?=
 =?UTF-8?q?=E3=81=99=E6=A9=9F=E8=83=BD=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 2ff2b95..fa20641 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -4,12 +4,9 @@ import React, { useState } from "react";
 export const App = () => {
   const [todoText, setTodoText] = useState("");
 
-  const [incompleteTodos, setIncompleteTodos] = useState([
-    "ああああ",
-    "いいいい"
-  ]);
+  const [incompleteTodos, setIncompleteTodos] = useState([]);
 
-  const [completeTodos, setCompleteTodos] = useState(["うううう"]);
+  const [completeTodos, setCompleteTodos] = useState([]);
 
   const onChangeTodoText = (event) => setTodoText(event.target.value);
 
@@ -35,6 +32,15 @@ export const App = () => {
     setCompleteTodos(newCompleteTodos);
   };
 
+  const onClickBack = (index) => {
+    const newCompleteTodos = [...completeTodos];
+    newCompleteTodos.splice(index, 1);
+    setCompleteTodos(newCompleteTodos);
+
+    const newIncompleteTodos = [...incompleteTodos, completeTodos[index]];
+    setIncompleteTodos(newIncompleteTodos);
+  };
+
   return (
     <>
       <div className="input-area">
@@ -62,11 +68,11 @@ export const App = () => {
       <div className="complete-area">
         <p className="title">完了のTODO</p>
         <ul>
-          {completeTodos.map((todo) => {
+          {completeTodos.map((todo, index) => {
             return (
               <div key={todo} className="list-row">
                 <li>{todo}</li>
-                <button>戻す</button>
+                <button onClick={() => onClickBack(index)}>戻す</button>
               </div>
             );
           })}

From 2f400dc25e6a60d7fb95a96af8711ef8675b8310 Mon Sep 17 00:00:00 2001
From: AQ-masatoshi-yamaguchi
 <69567949+AQ-masatoshi-yamaguchi@users.noreply.github.com>
Date: Wed, 2 Feb 2022 17:26:32 +0900
Subject: [PATCH 8/8] =?UTF-8?q?=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC?=
 =?UTF-8?q?=E3=83=8D=E3=83=B3=E3=83=88=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx                        | 49 +++++++++---------------------
 src/components/CompleteTodos.jsx   | 21 +++++++++++++
 src/components/IncompleteTodos.jsx | 22 ++++++++++++++
 src/components/InputTodo.jsx       | 12 ++++++++
 4 files changed, 69 insertions(+), 35 deletions(-)
 create mode 100644 src/components/CompleteTodos.jsx
 create mode 100644 src/components/IncompleteTodos.jsx
 create mode 100644 src/components/InputTodo.jsx

diff --git a/src/App.jsx b/src/App.jsx
index fa20641..2b33e01 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,5 +1,8 @@
 import "./styles.css";
 import React, { useState } from "react";
+import { InputTodo } from "./components/InputTodo";
+import { IncompleteTodos } from "./components/IncompleteTodos";
+import { CompleteTodos } from "./components/CompleteTodos";
 
 export const App = () => {
   const [todoText, setTodoText] = useState("");
@@ -43,41 +46,17 @@ export const App = () => {
 
   return (
     <>
-      <div className="input-area">
-        <input
-          placeholder="TODOを入力"
-          value={todoText}
-          onChange={onChangeTodoText}
-        />
-        <button onClick={onClickAdd}>追加</button>
-      </div>
-      <div className="incomplete-area">
-        <p className="title">未完了のTODO</p>
-        <ul>
-          {incompleteTodos.map((todo, index) => {
-            return (
-              <div key={todo} className="list-row">
-                <li>{todo}</li>
-                <button onClick={() => onClickComplete(index)}>完了</button>
-                <button onClick={() => onClickDelete(index)}>削除</button>
-              </div>
-            );
-          })}
-        </ul>
-      </div>
-      <div className="complete-area">
-        <p className="title">完了のTODO</p>
-        <ul>
-          {completeTodos.map((todo, index) => {
-            return (
-              <div key={todo} className="list-row">
-                <li>{todo}</li>
-                <button onClick={() => onClickBack(index)}>戻す</button>
-              </div>
-            );
-          })}
-        </ul>
-      </div>
+      <InputTodo
+        todoText={todoText}
+        onChange={onChangeTodoText}
+        onClick={onClickAdd}
+      />
+      <IncompleteTodos
+        todos={incompleteTodos}
+        onClickComplete={onClickComplete}
+        onClickDelete={onClickDelete}
+      />
+      <CompleteTodos todos={completeTodos} onClickBack={onClickBack} />
     </>
   );
 };
diff --git a/src/components/CompleteTodos.jsx b/src/components/CompleteTodos.jsx
new file mode 100644
index 0000000..0f94c96
--- /dev/null
+++ b/src/components/CompleteTodos.jsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+export const CompleteTodos = (props) => {
+  const { todos, onClickBack } = props;
+
+  return (
+    <div className="complete-area">
+      <p className="title">完了のTODO</p>
+      <ul>
+        {todos.map((todo, index) => {
+          return (
+            <div key={todo} className="list-row">
+              <li>{todo}</li>
+              <button onClick={() => onClickBack(index)}>戻す</button>
+            </div>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};
diff --git a/src/components/IncompleteTodos.jsx b/src/components/IncompleteTodos.jsx
new file mode 100644
index 0000000..500ebd6
--- /dev/null
+++ b/src/components/IncompleteTodos.jsx
@@ -0,0 +1,22 @@
+import React from "react";
+
+export const IncompleteTodos = (props) => {
+  const { todos, onClickComplete, onClickDelete } = props;
+
+  return (
+    <div className="incomplete-area">
+      <p className="title">未完了のTODO</p>
+      <ul>
+        {todos.map((todo, index) => {
+          return (
+            <div key={todo} className="list-row">
+              <li>{todo}</li>
+              <button onClick={() => onClickComplete(index)}>完了</button>
+              <button onClick={() => onClickDelete(index)}>削除</button>
+            </div>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};
diff --git a/src/components/InputTodo.jsx b/src/components/InputTodo.jsx
new file mode 100644
index 0000000..116c48a
--- /dev/null
+++ b/src/components/InputTodo.jsx
@@ -0,0 +1,12 @@
+import React from "react";
+
+export const InputTodo = (props) => {
+  const { todoText, onChange, onClick } = props;
+
+  return (
+    <div className="input-area">
+      <input placeholder="TODOを入力" value={todoText} onChange={onChange} />
+      <button onClick={onClick}>追加</button>
+    </div>
+  );
+};