前一篇最後說今天的內容可能要做資料表結構與設計，但後續反省的時候發現這樣直接開幹會有問題。

根據我過去的失敗經驗，這樣一個從資料庫／後端開始開發的專案，最後很容易變成：

• API 都做完了
• 但跟實際需求落差很大
• 要花很多時間調整 → 太麻煩 → 不幹了

為了避免花式做白工，這次要調整一下順序
先從前端開始，有畫面、有構想之後才知道實際需求，再來做後端的開發。

Let's go.

首先要幹出一個畫面

問題：畫面要有什麼？

這個問題幾乎等於：使用者打開「MyMomentum」之後要幹嘛？

我覺得除了「紀錄」、或是「分析」 這種工作感很重的行為之外，最重要的反而是

「沉醉在自己所累積的這些成就。」

第二件事才是紀錄，所以在畫面上就會以這樣的重要性去分配放置的位置
我打算把紀錄這件事放在首頁，除此之外首頁就不要有太多功能。

這樣可以兼顧：

1. 方便：打開首頁馬上可以記錄
2. 簡單：首頁只有摘要跟紀錄兩件事情，不會眼花撩亂，目標明確

再參考我自己的經驗與一些App的啟發，我畫了下面這張圖：

畫完覺得很醜、而且紀錄Panel這麼大片壓力有點大，不過應該能表達我對首頁的想像

接著就開始做前端，把畫面刻出來看看，前端要分Components的話會長這樣

重點放在兩個區塊：摘要區、紀錄區

摘要區：要呈現使用者所有的”活動” ，每個活動用卡片呈現，預計要呈現

• 總累積時間
• 當週累積時間
• 目標/已累積 進度

當我在畫面上點擊該卡片要能夠看”活動詳細記錄”，最後在卡片的尾端加一個 “+” 的卡片用來增加活動

記錄區：要能夠提供快速紀錄活動、不麻煩的區塊，分為

• 即時記錄 - 預計提供一個計時器，按下開始/結束即可完成一次紀錄
• 事後紀錄 - 如果發生活動時不能打開App，則可以事後紀錄發生時間、共多久、什麼活動等。

首頁內容架構：

使用者日常操作流程

• 早上打開 App → 查看摘要
• 在首頁 → 點即時記錄開始 → 結束 → 紀錄完成
• 點某張卡 → 看該活動的紀錄細節與圖表
• 每週檢視自己時間分配 → 點「全部活動」圖表頁分析比較

整理好了，首頁該做什麼、該有什麼應該都很清晰了，下一步直接開始實作

我使用cursor協助開發，提示詞跟討論過程圍繞下面幾個重點：

• 摘要區：顯示本週累積時間、最常做的活動、進度完成率
• 活動卡片區：活動名稱、累積時間、本週時間、完成率進度條，最後加一張「+」卡片建立新活動
• 紀錄區：分成即時紀錄（開始/結束計時）與事後紀錄（手動輸入活動＋時間）
  請cursor協助刻出React + Tailwind 的首頁雛型，然後先用 mock data 先渲染靜態畫面。
  結果就是：

必須說完成度很高阿，有了基本的畫面之後，下一步需要有資料庫來存資料，否則我們只能一直用假資料來開發。