到了第 15 天，我們開始會遇到一個更真實的挑戰：專案越來越大，程式碼開始需要共用元件，同時，也更容易遇到各種 Build 錯誤。

今天的主題，就是要讓你學會如何把 Cursor 當作你的「程式夥伴」，幫助你整理元件，並修復錯誤。

🔄 元件共用：避免重複造輪子

在開發初期，很多人會把程式碼一份份地複製貼上。

這樣雖然能跑，但後期維護就會變得非常痛苦。

舉個例子：

你可能有三個頁面都要用到一個 Card，但因為複製貼上，導致你修正其中一個樣式時，另外兩個卻沒更新。

👉 解決方法：

1. 把重複的程式碼抽出來，建立一個 components/ 資料夾。

2. 建立共用元件，例如：

   // components/Card.tsx
   export default function Card({ title, children }: { title: string; children: React.ReactNode }) {
     return (
       <div className="rounded-xl shadow-md p-4 bg-white">
         <h2 className="text-lg font-bold">{title}</h2>
         <div>{children}</div>
       </div>
     )
   }
   
   

3. 在任何地方呼叫：

   import Card from "@/components/Card"
   
   export default function HomePage() {
     return <Card title="歡迎">這是一個共用元件</Card>
   }
   
   

💡 Cursor 技巧：

你只要選中重複的程式碼，問 Cursor：「把這段抽成共用元件」，它就能自動生成一個乾淨的 components 檔案給你。

🐛 修正 Build 錯誤

隨著專案變大，錯誤會開始浮現：

• 少 import 某個檔案
• TypeScript 型別不一致
• Tailwind class 拼錯
• API 回傳型態改變

👉 這時候，你只要把錯誤訊息貼給 Cursor，例如：

Type error: Property 'title' is missing in type ...

Cursor 通常能直接幫你修正，甚至會附上原因。

更重要的是，你能透過這些錯誤訊息去理解 專案架構到底哪裡出問題，而不只是單純照著修。

💾 Git 備份的重要性

這裡要強調一個好習慣：

只要你的 Build 成功，就馬上 Commit！

這樣做的好處：

• 出現新錯誤時，你隨時可以回到上一個能運作的版本。
• 嘗試新功能不怕失敗，因為有備份。
• 專案會像遊戲一樣，每次通關就有存檔點。

範例：

git add .
git commit -m "Day 15: 元件共用完成，Build 成功"

💡 小練習：

今天至少要做一次成功 Commit，把共用元件重構後的專案存檔下來。

✅ 今天的任務

1. 找出至少一個重複的程式碼，抽成共用元件。
2. 嘗試故意引發一個小錯誤（例如刪掉必要的 props），然後用 Cursor 幫你修正。
3. Build 成功後，馬上用 Git 備份，建立今天的存檔點。

📌 Day 15 總結

今天我們學會了：

• 如何用 Cursor 把重複程式碼抽成共用元件
• 如何利用錯誤訊息讓 Cursor 幫助修正 Build 錯誤
• 最重要的：養成「Build 成功就 Commit」的專業習慣