📸 React 拍貼機

一個功能完整的拍貼機網站，類似 PicaPicaBooth，使用 React + Vite + Tailwind CSS 開發。

✨ 功能特色

• 🎭 多種版型選擇 - 簡約白框、復古電影、可愛塗鴉等精美版型
• 📷 自動拍照流程 - 自動倒數計時，連續拍攝多張照片
• 🖼️ 智能照片合成 - 自動將照片合成到選定的版型中
• 📱 響應式設計 - 完美適配各種螢幕尺寸
• 💾 一鍵下載 - 下載合成後的高品質拍貼照片
• 🎨 現代化界面 - 使用 Tailwind CSS 打造的美觀界面

🚀 快速開始

安裝依賴

yarn install

啟動開發服務器

yarn dev

建置生產版本

yarn build

🎯 使用流程

1. 開始體驗 - 點擊「開始體驗」按鈕進入拍貼機
2. 選擇版型 - 從三種精美版型中選擇你喜歡的樣式
3. 自動拍照 - 系統會自動倒數並連續拍攝 4 張照片
4. 查看結果 - 照片會自動合成到選定的版型中
5. 下載保存 - 點擊「下載成品」保存你的專屬拍貼

🛠️ 技術棧

• React 19 - 前端框架
• Vite - 建置工具
• Tailwind CSS - 現代化 CSS 框架
• Canvas API - 照片合成處理
• WebRTC - 相機存取

📁 專案結構

src/
├── components/
│   └── Photo.jsx          # 主要拍貼機組件
├── App.jsx                # 主應用組件
├── App.css                # 應用樣式
└── index.css              # Tailwind CSS 樣式

🎨 版型特色

• 簡約白框 - 經典四格拍貼，簡潔優雅
• 復古電影 - 懷舊電影風格，充滿復古魅力
• 可愛塗鴉 - 活潑可愛的塗鴉風格，適合年輕族群

📝 注意事項

• 需要瀏覽器支援相機存取權限
• 建議使用 HTTPS 環境以確保相機功能正常運作
• 照片僅在瀏覽器本地處理，不會上傳到任何服務器
• 支援現代瀏覽器（Chrome、Firefox、Safari、Edge）

🎨 自定義

您可以輕鬆自定義：

• 在 src/components/Photo.jsx 中的 frames 陣列添加新版型
• 修改版型的 positions 來調整照片位置
• 使用 Tailwind CSS 類別來調整界面樣式

享受您的拍貼機體驗！📸✨