昨天把記帳的第一階段收尾，今天開始第二個篇章：情緒日記 App（Web 版）
因為要快速驗證，所以先做一個最小可行產品（MVP）：可以寫日記、看清單，刷新不會消失。之後第 12 天再接上 Firestore 做雲端同步

而且打日記通常文字比較多，用電腦鍵盤會比手機方便，因此第一版先用 React 來做 Web 版。今天的目標很簡單，只要能輸入日記並暫存在網頁，就算成功！

今日目標

1. 用 Vite 建立 React 專案（JS 或 TS 皆可）
2. 主畫面有一個 TextArea 讓使用者輸入日記
3. 按下「存檔」→ 以 local state 暫存，並 同步寫入 localStorage（key：vibe.diary）
4. 日記欄位：id、date（預設今天）、content
5. 下方清單顯示所有日記，依日期（新到舊）排序
6. 基本防呆：內容空白不可存、存檔後清空輸入框；初始化時從 localStorage 載回資料

Prompt

幫我用 React 做一個「情緒日記 Web MVP」。

=== 功能需求 ===
1) 畫面區塊
   - TextArea：輸入日記內容（必填，空白時「存檔」要 disabled）
   - 「存檔」按鈕：點擊後存一筆日記
   - 下方清單：依日期新→舊顯示所有日記（日期 | 摘要前 30 字）

2) 資料模型
   - 每筆日記欄位：id（uuid）、date（ISO 或 yyyy/MM/dd）、content（字串）
   - 存在 React state，並同步序列化到 localStorage（key: "vibe.diary"）
   - 初始化時從 localStorage 讀回資料

3) 行為
   - 存檔：trim 後若為空不可存；成功後清空 TextArea
   - 排序：依 date 遞減（新到舊）
   - 日期預設今天，顯示格式 yyyy/MM/dd

4) 寫法
   - 使用 React hooks（useState、useEffect）
   - 可用簡單 CSS 做間距與排版

今日驗收 ✅

1. 能在 TextArea 輸入日記並「存檔」
2. 資料落在 state + localStorage，重新整理後仍存在
3. 清單依日期新→舊排序，摘要顯示前 30 字
   

明日預告

Day 12 把這個日記 接上 Firestore + Auth，變成雲端同步版：換電腦登入同一帳號，全部日記都回來！

隨便聊聊

話說朋友介紹一個新的工具 -- codex，是openai的產品，好像是最近進化變好用了，反正就是從官網可以選擇嵌入 vscode，用法跟 cursor 幾乎是一模一樣，好處是我本來就有訂閱 chatgpt plus，就不用另外付費，還可以停掉 cursor，再省一筆！不過我也才剛使用，還不知道有啥弊端，有問題之後再來更新><