From a121cc9dfef1c95b3715926a12f31f04a36e0936 Mon Sep 17 00:00:00 2001
From: Yuta Sakurai <sakurai.yuta@gmail.com>
Date: Mon, 30 Jun 2025 16:42:12 +0900
Subject: [PATCH] =?UTF-8?q?Step3:=20=E5=9F=BA=E6=9C=AC=E6=A9=9F=E8=83=BD(?=
 =?UTF-8?q?=E8=BF=BD=E5=8A=A0,=E6=9B=B4=E6=96=B0,=E5=89=8A=E9=99=A4)?=
 =?UTF-8?q?=E5=AE=9F=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/page.tsx | 45 +++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 43 insertions(+), 2 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index b247867..cc8b59d 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -17,6 +17,41 @@ export default function Home() {
     { id: 3, text: "TODOアプリを作る", completed: false },
   ]);
 
+  // 入力中のテキストを管理
+  const [inputText, setInputText] = useState("");
+
+  // TODO追加機能
+  const handleAddTodo = (e: React.FormEvent) => {
+    e.preventDefault(); // フォームのデフォルト動作を防ぐ
+    
+    if (inputText.trim() === "") {
+      return; // 空文字の場合は追加しない
+    }
+
+    const newTodo: Todo = {
+      id: Date.now(), // 簡易的なID生成
+      text: inputText,
+      completed: false,
+    };
+
+    setTodos([...todos, newTodo]); // 新しいTODOを配列に追加
+    setInputText(""); // 入力欄をクリア
+  };
+
+  // TODO完了状態の切り替え機能
+  const handleToggleTodo = (id: number) => {
+    setTodos(
+      todos.map((todo) =>
+        todo.id === id ? { ...todo, completed: !todo.completed } : todo
+      )
+    );
+  };
+
+  // TODO削除機能
+  const handleDeleteTodo = (id: number) => {
+    setTodos(todos.filter((todo) => todo.id !== id));
+  };
+
   return (
     <main className="min-h-screen p-8 bg-gray-50 dark:bg-gray-900">
       <div className="max-w-4xl mx-auto">
@@ -26,9 +61,11 @@ export default function Home() {
 
         {/* TODO入力フォーム */}
         <div className="mb-8">
-          <form className="flex gap-2">
+          <form onSubmit={handleAddTodo} className="flex gap-2">
             <input
               type="text"
+              value={inputText}
+              onChange={(e) => setInputText(e.target.value)}
               placeholder="新しいTODOを入力..."
               className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100"
             />
@@ -51,6 +88,7 @@ export default function Home() {
               <input
                 type="checkbox"
                 checked={todo.completed}
+                onChange={() => handleToggleTodo(todo.id)}
                 className="w-5 h-5 text-blue-500 rounded focus:ring-2 focus:ring-blue-500"
               />
               <span
@@ -62,7 +100,10 @@ export default function Home() {
               >
                 {todo.text}
               </span>
-              <button className="px-3 py-1 text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded transition-colors">
+              <button 
+                onClick={() => handleDeleteTodo(todo.id)}
+                className="px-3 py-1 text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded transition-colors"
+              >
                 削除
               </button>
             </div>