✍️ #47 學生肖像授權同意書線上簽名系統：React 19 + Firebase + 簽名 PDF 自動生成 + Email 含連結 + v2.3 同意意願按鈕
#47 真實名稱「學生活動肖像使用授權同意書 - 線上簽名系統」。React 19 + TypeScript + Vite + Tailwind 4 + Framer Motion + Firebase（Firestore + Storage + Auth）+ react-signature-canvas + PDF 自動生成上傳 Firebase Storage 永久保存 + Email 含 PDF 下載連結 + v2.3 同意/不同意按鈕同步 PDF 顏色（綠/紅）+ 跨校支援。
紙本同意書的真實痛點
學校每學期要收 5-10 種同意書：
- 學生肖像授權（拍照 / 錄影用學校宣傳）
- 戶外教學
- 課後社團
- 校外比賽
- 健康訪查
痛點：
- ❌ 印 30 份 × N 種 → 每學期 200+ 張紙
- ❌ 家長忘記簽 → 連環追
- ❌ 簽完老師要收 + 數 + 整理 + 鎖櫃 5 年
- ❌ 教育局審查要看 → 翻箱倒櫃找
阿凱的 #47 學生肖像授權同意書線上簽名系統 反向：家長手機簽 → PDF 自動生成 → 永久存 Firebase Storage。
#47 真實怎麼做？
真實名稱：「學生活動肖像使用授權同意書 - 線上簽名系統」
完整功能（從 README 抽出）：
功能 A：✍️ 流暢簽名體驗
- 整合 react-signature-canvas
- 提供接近紙筆的書寫手感
- 手機 / 平板 / 電腦都能簽
功能 B：🛡️ 嚴格資料驗證
- 限制年級 / 班級 / 座號僅能輸入數字
- 簽名筆畫複雜度檢查，防止無效簽名（防止家長亂畫敷衍）
功能 C：🔒 安全性強化
- Firebase Security Rules 嚴格把關
- 簽名圖檔自動壓縮並標準化 600×300，節省流量
功能 D：📊 管理員後台 2.0 (v2.0.0)
- 🎨 繽紛漸層風格 + 動態背景
- 📱 手機版自動切換卡片視圖
- 🗑️ 批次管理（單筆 / 多選刪除）
- 📥 Excel 匯出完整簽署名單
- 🏷️ 視覺化徽章（年級 / 班級 / 座號）
功能 E：🏫 跨校支援 (v2.1.0)
- 新增縣市 / 學校欄位
- 後台縣市篩選 + 學校搜尋
- 一套系統服務多校
功能 F：📄 PDF 自動生成 (v2.2.0)
- 簽署完成後自動生成包含完整條款 + 簽名的 PDF
- 自動上傳 Firebase Storage 永久保存
- 不會丟失
功能 G：📧 Email 通知升級 (v2.2.0)
- 通知信件包含 PDF 下載連結
- 信件內容含縣市與學校資訊
功能 H：✅ 簽署意願選項 (v2.3.0)
- 新增「同意 / 不同意」單選按鈕
- 強制家長確認意願
- PDF 與 Email 同步顯示簽署意願（同意綠色 / 不同意紅色）
- 後台列表新增「意願」欄位
- 支援 Excel 匯出
真實技術棧
- 前端：React 19 + TypeScript + Vite
- 樣式：Tailwind CSS 4 + Framer Motion
- 後端：Firebase（Firestore + Storage + Authentication）
- 路由：React Router v7
- 管理員登入：Firebase Auth Email/Password
- 訪問
/admin/login進管理後台 - 部署：
cagoooo.github.io/signature/
跟 #48 動態表單的差別
| # | 工具 | 主軸 |
|---|---|---|
| #47 同意書（本篇） | 電子簽名 + PDF | 法律效力場景 |
| #48 動態表單系統 | 拖曳式表單編輯器 | 一般問卷 / 報名 |
#47 跟 #48 是學校行政數位轉型的姊妹工具 — 一個簽法律文件、一個收一般資訊。
教學情境
學期初肖像授權收件：
- 老師發 QR Code 給家長
- 家長手機3 分鐘簽完
- 老師後台Excel 匯出全班名單
- 收件率從 70% → 100%
戶外教學前夕：
- 同意書改 #47 模板
- 家長深夜也能簽
- 不用「老師明天我簽好給你」
v2.3 同意/不同意按鈕：
- 家長明確選而不是亂簽
- 不同意的學生 不會被拍進團體照
- 法律效力 + 隱私保護雙贏
「PDF 自動生成 + Firebase Storage 永久保存」的價值
對學校：
- ✅ 教育局審查要看 → 給 Firebase Storage 連結（5 秒搞定）
- ✅ 5 年保存規定 → 自動永久存（不會找不到）
- ✅ 家長要副本 → 直接傳 PDF 連結
- ✅ 零紙張（環保 + 省錢）
配對工具推薦
- #48 動態表單系統 — 一般表單需求
- #62 親職教育日 — 同款活動專用工具
- #2 行政業務協調系統 — 校內行政平台
適用對象
- 國中小所有導師（學期初每年用）
- 教務 / 學務組長（彙整全校同意書）
- 校長 / 主任（教育局審查時提供）
- 想做「法律效力電子簽名」的學校
- 補習班 / 安親班 / 才藝中心（家長簽合約用）
想試試？
下學期肖像授權 — 改用 #47 → 開學一週內 100% 收齊 + 永久存檔。