From a6ff1b3ff53532614111f8d61277cf33f3bc79c6 Mon Sep 17 00:00:00 2001
From: Yuta Sakurai <sakurai.yuta@gmail.com>
Date: Mon, 30 Jun 2025 16:20:49 +0900
Subject: [PATCH] =?UTF-8?q?Step2:=20TODO=E8=BF=BD=E5=8A=A0,=E4=B8=80?=
 =?UTF-8?q?=E8=A6=A7=E8=A1=A8=E7=A4=BA=E7=94=BB=E9=9D=A2=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 | 66 +++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 63 insertions(+), 3 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3d7512a..b247867 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,13 +1,73 @@
+"use client";
+
+import { useState } from "react";
+
+// Todo型の定義
+type Todo = {
+  id: number;
+  text: string;
+  completed: boolean;
+};
+
 export default function Home() {
+  // 状態管理の準備（サンプルデータ付き）
+  const [todos, setTodos] = useState<Todo[]>([
+    { id: 1, text: "TypeScriptを学ぶ", completed: false },
+    { id: 2, text: "Reactの基礎を理解する", completed: true },
+    { id: 3, text: "TODOアプリを作る", completed: false },
+  ]);
+
   return (
     <main className="min-h-screen p-8 bg-gray-50 dark:bg-gray-900">
       <div className="max-w-4xl mx-auto">
         <h1 className="text-4xl font-bold text-center text-gray-800 dark:text-gray-100 mb-8">
           私のTODOアプリ
         </h1>
-        <p className="text-center text-gray-600 dark:text-gray-400">
-          これからTODOアプリを作っていきます！
-        </p>
+
+        {/* TODO入力フォーム */}
+        <div className="mb-8">
+          <form className="flex gap-2">
+            <input
+              type="text"
+              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"
+            />
+            <button
+              type="submit"
+              className="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
+            >
+              追加
+            </button>
+          </form>
+        </div>
+
+        {/* TODOリスト表示エリア */}
+        <div className="space-y-2">
+          {todos.map((todo) => (
+            <div
+              key={todo.id}
+              className="flex items-center gap-3 p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm"
+            >
+              <input
+                type="checkbox"
+                checked={todo.completed}
+                className="w-5 h-5 text-blue-500 rounded focus:ring-2 focus:ring-blue-500"
+              />
+              <span
+                className={`flex-1 ${
+                  todo.completed
+                    ? "line-through text-gray-500 dark:text-gray-400"
+                    : "text-gray-800 dark:text-gray-100"
+                }`}
+              >
+                {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>
+            </div>
+          ))}
+        </div>
       </div>
     </main>
   );