Main

.github/workflows/deploy.yml

@@ -2,7 +2,7 @@ name: Deploy to GitHub Pages
 
 on:
   push:
-    branches: [ main ]
+    branches: [main]
   # 手動でワークフローを実行できるようにする
   workflow_dispatch:
 
@@ -14,7 +14,7 @@ permissions:
 
 # 同時に1つのデプロイのみ許可
 concurrency:
-  group: "pages"
+  group: 'pages'
   cancel-in-progress: true
 
 jobs:
@@ -23,19 +23,19 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-      
+
       - name: Set up Node
         uses: actions/setup-node@v4
         with:
           node-version: 20
           cache: 'npm'
-      
+
       - name: Install dependencies
-        run: npm ci
-      
+        run: npm ci --legacy-peer-deps
+
       - name: Build
         run: npm run build
-      
+
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:

README.md

@@ -1,39 +1,79 @@
+![Lifespan TODOアプリケーションのスクリーンショット](./lifespan-todo.png)
+
 # Lifespan TODO
 
-残り時間を意識して、優先すべきタスクに集中するためのTODOアプリケーション。
+**あなたの残り時間を意識し、本当に優先すべきタスクに集中するための TODO アプリケーション**
 
-## 機能
+人生の残り時間（週単位）を視覚的に表示することで、日々のタスクに新たな視点をもたらします。時間を意識することで、より計画的に、そして重要なことに集中できるようサポートします。
 
-- 週の残り時間を視覚的に表示（日・時間・分・秒）
-- タスクの追加、編集、削除機能
-- タスクの完了状態の切り替え
-- ドラッグ＆ドロップでのタスク並べ替え
-- 完了済みタスクと未完了タスクの分離表示
-- ローカルストレージへの自動保存
+## ✨ 主な機能
 
-## 技術スタック
+- **残り時間の可視化:** 週の残り時間を日・時間・分・秒でリアルタイム表示
+- **タスク管理:**
+  - 簡単なタスク追加
+  - タスク内容の編集
+  - 不要なタスクの削除
+  - ワンクリックでの完了/未完了切り替え
+- **直感的な操作:** ドラッグ＆ドロップによるタスクの並べ替え
+- **整理された表示:** 完了済みタスクと未完了タスクを分けて表示
+- **データ永続化:** 入力したタスクはブラウザのローカルストレージに自動保存
 
-- React 19
-- TypeScript
-- Vite
-- TailwindCSS
-- Framer Motion (アニメーション)
-- Shadcn/UI (UIコンポーネント)
+## 🚀 技術スタック
 
-## 開発環境のセットアップ
+- **フロントエンド:**
+  - React 19
+  - TypeScript
+  - Vite
+- **スタイリング:**
+  - TailwindCSS
+  - Shadcn/UI
+  - clsx, tailwind-merge
+- **アニメーション:**
+  - Framer Motion
+- **状態管理・ユーティリティ:**
+  - React Hooks
+  - date-fns
+  - Lucide React
 
-```bash
-# パッケージのインストール
-npm install
+## 🛠️ 開発環境のセットアップ
 
-# 開発サーバーの起動
-npm run dev
+1.  **リポジトリをクローン:**
 
-# ビルド
-npm run build
+    ```bash
+    git clone https://github.com/あなたのユーザー名/lifespan-todo.git
+    cd lifespan-todo
+    ```
 
-# ビルド結果のプレビュー
-npm run preview
-```
+2.  **依存パッケージのインストール:**
+
+    ```bash
+    npm install
+    # または yarn install
+    ```
+
+3.  **開発サーバーの起動:**
 
+    ```bash
+    npm run dev
+    # または yarn dev
+    ```
 
+    ブラウザで `http://localhost:5173` (ポートは異なる場合があります) を開きます。
+
+## 📁 プロジェクト構成 (src ディレクトリ)
+
+```
+src
+├── App.tsx           # アプリケーションのメインコンポーネント
+├── main.tsx          # アプリケーションのエントリーポイント
+├── index.css         # グローバルなスタイル
+├── components/       # 再利用可能なUIコンポーネント
+│   ├── todo/         # TODO関連コンポーネント
+│   ├── ui/           # Shadcn/UIベースのコンポーネント
+│   └── ...
+├── hooks/            # カスタムフック (例: useTodos)
+├── lib/              # Shadcn/UIの設定など (例: utils.ts)
+├── utils/            # 汎用的なユーティリティ関数
+├── mocks/            # (もしあれば) モックデータやハンドラ
+└── vite-env.d.ts     # Vite環境変数の型定義
+```

package.json

@@ -22,7 +22,7 @@
     "@radix-ui/react-tooltip": "^1.1.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "date-fns": "^4.1.0",
+    "date-fns": "^3.6.0",
     "framer-motion": "^12.4.10",
     "lucide-react": "^0.475.0",
     "react": "^19.0.0",
@@ -60,5 +60,8 @@
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.22.0",
     "vite": "^6.1.0"
+  },
+  "overrides": {
+    "date-fns": "^3.6.0"
   }
 }

src/components/todo/TodoItem.tsx

@@ -74,6 +74,11 @@ export const TodoItem = ({
         } ${!todo.completed ? 'cursor-pointer' : ''} outline-none overflow-hidden break-words`}
         contentEditable={!todo.completed && isEditing}
         suppressContentEditableWarning
+        onClick={() => {
+          if (!todo.completed) {
+            setEditingId(todo.id);
+          }
+        }}
         onKeyDown={e => {
           if (e.key === 'Enter') {
             e.preventDefault();
@@ -83,7 +88,7 @@ export const TodoItem = ({
             setEditingId(null);
           }
         }}
-        onBlur={e => !todo.completed && handleEdit(e)}
+        onBlur={e => !todo.completed && isEditing && handleEdit(e)}
         style={{ outline: 'none' }}
       >
         {todo.content}
@@ -111,4 +116,4 @@ export const TodoItem = ({
       </TooltipProvider>
     </Reorder.Item>
   );
-};
+};