Frontend training answer

frontend_training/package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "uuid": "^11.0.5"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",

frontend_training/src/App.css

@@ -6,3 +6,138 @@
   flex-direction: column;
   align-items: center;
 }
+
+.inputForm {
+  width: 600px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 38px;
+}
+
+.input {
+  width: 100%;
+  height: 100%;
+  padding: 0 14px;
+  color: #000;
+  border: 1px solid rgb(0 0 0 / 20%);
+  border-radius: 4px;
+}
+
+.todoList {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.todoItem {
+  display: flex;
+  gap: 30px;
+  align-items: center;
+}
+
+.addButton {
+  border-radius: 4px;
+  width: 60px;
+  height: 100%;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 18px;
+  color: #fff;
+  background-color: #000;
+  border: 1px solid rgb(0 0 0 / 20%);
+  border-radius: 4px;
+  cursor: pointer;
+
+  /* ホバー時のスタイル */
+  &:hover {
+    background-color: rgb(0 0 0 / 70%);
+  }
+
+  /* ボタン押下時のスタイル */
+  &:active {
+    background-color: rgb(0 0 0 / 40%);
+  }
+}
+
+.completeButton {
+  border-radius: 4px;
+  width: 60px;
+  height: 100%;
+  font-size: 13px;
+  font-weight: 600;
+  color: #fff;
+  background-color: #008000;
+  border: 1px solid rgb(0 128 0 / 20%);
+  cursor: pointer;
+
+  /* ホバー時のスタイル */
+  &:hover {
+    background-color: rgb(0 128 0 / 70%);
+  }
+
+  /* ボタン押下時のスタイル */
+  &:active {
+    background-color: rgb(0 128 0 / 40%);
+  }
+}
+
+.editItem {
+  display: flex;
+  gap: 30px;
+  align-items: center;
+  height: 25px;
+}
+
+.actionButtons {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  gap: 5px;
+}
+
+.updateButton {
+  border-radius: 4px;
+  width: fit-content;
+  height: 100%;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 18px;
+  color: #fff;
+  background-color: #007bff;
+  border: 1px solid rgba(0, 123, 255, 0.2);
+  cursor: pointer;
+
+  /* ホバー時のスタイル */
+  &:hover {
+    background-color: rgba(0, 123, 255, 0.7);
+  }
+
+  /* ボタン押下時のスタイル */
+  &:active {
+    background-color: rgba(0, 123, 255, 0.4);
+  }
+}
+
+.cancelButton {
+  border-radius: 4px;
+  width: fit-content;
+  height: 100%;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 18px;
+  color: #fff;
+  background-color: #dc3545;
+  border: 1px solid rgba(220, 53, 69, 0.2);
+  cursor: pointer;
+
+  /* ホバー時のスタイル */
+  &:hover {
+    background-color: rgba(220, 53, 69, 0.7);
+  }
+
+  /* ボタン押下時のスタイル */
+  &:active {
+    background-color: rgba(220, 53, 69, 0.4);
+  }
+}

frontend_training/src/App.tsx

@@ -1,12 +1,153 @@
-import './App.css'
+import { useState } from "react";
+import { v4 as uuidv4 } from "uuid";
+import "./App.css";
+
+type TodoItem = {
+  id: string;
+  text: string;
+  isCompleted: boolean;
+  isEdit: boolean;
+};
 
 function App() {
+  const [inputValue, setInputValue] = useState("");
+  const [todoList, setTodoList] = useState<TodoItem[]>([]);
+
+  const filteredTodoList = todoList.filter((todo) => !todo.isCompleted);
 
   return (
     <>
       <h1>TODOアプリ</h1>
+      <div className="inputForm">
+        <input
+          className="input"
+          type="text"
+          value={inputValue}
+          onChange={(event) => {
+            setInputValue(event.target.value);
+          }}
+        />
+        <button
+          className="addButton"
+          type="button"
+          onClick={() => {
+            if (inputValue === "") return;
+
+            setTodoList((prev) => [
+              ...prev,
+              {
+                id: uuidv4(),
+                text: inputValue,
+                isCompleted: false,
+                isEdit: false,
+              },
+            ]);
+            setInputValue("");
+          }}
+        >
+          追加
+        </button>
+      </div>
+      <ul className="todoList">
+        {filteredTodoList.map((todo) => {
+          if (todo.isEdit) {
+            return <EditTodo todo={todo} setTodoList={setTodoList} />;
+          }
+
+          return (
+            <div className="todoItem">
+              <li
+                key={todo.text}
+                onClick={() => {
+                  setTodoList((prev) => {
+                    return prev.map((item) => {
+                      if (item.id === todo.id) {
+                        return { ...item, isEdit: true };
+                      }
+
+                      return item;
+                    });
+                  });
+                }}
+              >
+                {todo.text}
+              </li>
+              <button
+                className="completeButton"
+                type="button"
+                onClick={() => {
+                  setTodoList((prev) => {
+                    return prev.map((item) => {
+                      if (item.id === todo.id) {
+                        return { ...item, isCompleted: true };
+                      }
+                      return item;
+                    });
+                  });
+                }}
+              >
+                完了
+              </button>
+            </div>
+          );
+        })}
+      </ul>
     </>
-  )
+  );
 }
 
-export default App
+export default App;
+
+function EditTodo({
+  todo,
+  setTodoList,
+}: {
+  todo: TodoItem;
+  setTodoList: React.Dispatch<React.SetStateAction<TodoItem[]>>;
+}) {
+  const [inputValue, setInputValue] = useState(todo.text);
+
+  return (
+    <div className="editItem">
+      <input
+        value={inputValue}
+        onChange={(event) => {
+          setInputValue(event.target.value);
+        }}
+        className="input"
+      />
+      <div className="actionButtons">
+        <button className="updateButton" type="button" onClick={() => {
+          setTodoList((prev) => {
+            return prev.map((item) => {
+              if (item.id === todo.id) {
+                return { ...item, text: inputValue, isEdit: false };
+              }
+
+              return item;
+            });
+          });
+        }}>
+          更新
+        </button>
+        <button
+          className="cancelButton"
+          type="button"
+          onClick={() => {
+            setTodoList((prev) => {
+              return prev.map((item) => {
+                if (item.id === todo.id) {
+                  return { ...item, isEdit: false };
+                }
+
+                return item;
+              });
+            });
+          }}
+        >
+          キャンセル
+        </button>
+      </div>
+    </div>
+  );
+}