Merge pull request #39 from nick-jy-huang/qa

feat: update README.md

Author: nick-jy-huang

README.md

@@ -2,97 +2,98 @@
   <img src="https://quotation-app-zeta.vercel.app/favicon.png" width="120" alt="Quotation App Logo">
 </p>
 
-<h1 align="center">Quotation App</h1>
-
-#### 一款簡單好用的線上報價單編輯與預覽工具，支援多欄位填寫、即時計算與美觀的預覽畫面，適合各類型專案報價需求。
+<h1 align="center">Quotation App 👨‍💻</h1>
+<p align="center">
+一款簡單好用的線上報價單編輯與預覽工具，支援多欄位填寫、即時計算與美觀的預覽畫面，適合各類型專案報價需求。
+</p>
 
 <p align="center">
-  <img src="https://quotation-app-zeta.vercel.app/image.png" width="90%"  alt="Quotation App Logo">
+  <img src="https://quotation-app-zeta.vercel.app/image.jpg" width="90%" alt="Quotation App Preview" style="border-radius: 20px; box-shadow: 0 4px 24px rgba(0,0,0,0.15);" />
 </p>
 
-## 特色功能
-
-- 報價單編輯與即時預覽
-- 輕鬆填寫基本資料、接案人資料、客戶資料與工作內容
-- 報價單小計、總計自動計算
-- 支援 Input Debounce，提升輸入體驗
-- 社群分享自動顯示預覽圖（Open Graph）
-- Axe-core 驗證無障礙設計
-- 匯出 PDF 並自動儲存匯出紀錄於 localStorage，支援歷史紀錄載入與清除
-- RWD 浮動匯出按鈕與匯出紀錄，手機／平板體驗佳
-- Prettier 程式碼格式化與 TypeScript 嚴謹型別
-- 元件結構清楚，易於維護與擴充
-- 多語系支援
-
-## 技術架構
-
-- Next.js 15
-- React 18
-- TypeScript
-- Tailwind CSS
-- next-intl
-- Zustand 狀態管理
-- dayjs 處理日期
-- html2canvas + jsPDF 匯出 PDF
-- axe-core 無障礙檢查
-
-## i18n 多語系支援
-
-- 支援中英文（zh-TW / en-US）介面切換
-- 語言切換按鈕可即時切換所有 UI 文字
-- 語系路由自動化，middleware 會根據支援語言自動產生白名單
-- 所有主要元件皆有多語系測試，確保不同語言下顯示正確
-- 新增語言只需於 `constants/locale.ts` 設定，無需手動調整 middleware
-- message 新增語系表
-
-## 安裝與啟動
-
-1. 下載專案
+## ✨ 特色功能
+
+- 📝 報價單編輯與即時預覽
+- 🧑‍💼 輕鬆填寫基本資料、接案人資料、客戶資料與工作內容
+- 🧮 報價單小計、總計自動計算
+- ⏳ 支援 Input Debounce，提升輸入體驗
+- 🌐 社群分享自動顯示預覽圖（Open Graph）
+- ♿ Axe-core 驗證無障礙設計
+- 📄 匯出 PDF 並自動儲存匯出紀錄於 localStorage，支援歷史紀錄載入與清除
+- 📱 RWD 浮動匯出按鈕與匯出紀錄，手機／平板體驗佳
+- 🎨 Prettier 程式碼格式化與 TypeScript 嚴謹型別
+- 🧩 元件結構清楚，易於維護與擴充
+- 🌏 多語系支援
+
+## 🛠️ 技術架構
+
+- ⚡ Next.js 15
+- ⚛️ React 18
+- 🦾 TypeScript
+- 💨 Tailwind CSS
+- 🌍 next-intl
+- 🗃️ Zustand 狀態管理
+- 📅 dayjs 處理日期
+- 🖨️ html2canvas + jsPDF 匯出 PDF
+- ♿ axe-core 無障礙檢查
+
+## 🌏 i18n 多語系支援
+
+- 🇹🇼🇺🇸 支援中英文（zh-TW / en-US）介面切換
+- 🔄 語言切換按鈕可即時切換所有 UI 文字
+- 🛣️ 語系路由自動化，middleware 會根據支援語言自動產生白名單
+- ✅ 所有主要元件皆有多語系測試，確保不同語言下顯示正確
+- ➕ 新增語言只需於 `constants/locale.ts` 設定，無需手動調整 middleware
+- 🗂️ message 新增語系表
+
+## 🚀 安裝與啟動
+
+1. ⬇️ 下載專案
 
 ```bash
 git clone https://github.com/nick-jy-huang/quotation-app.git
 cd quotation-app
 ```
 
-2. 安裝相依套件
+2. 📦 安裝相依套件
 
 ```bash
 pnpm install
 ```
 
-3. 啟動開發伺服器
+3. ▶️ 啟動開發伺服器
 
 ```bash
 pnpm dev
 ```
 
-4. 開啟瀏覽器並前往 [http://localhost:3000](http://localhost:3000)
+4. 🌐 開啟瀏覽器並前往 [http://localhost:3000](http://localhost:3000)
 
-## Node.js 版本需求
+## 🖥️ Node.js 版本需求
 
 本專案建議使用 Node.js 20 以上版本（Next.js 15 需 Node.js 18+，建議 20 以上）。
 
-## 測試
+## 🧪 測試
 
 本專案採用 Vitest + Testing Library 進行單元與元件測試，涵蓋主要元件、流程、無障礙、RWD、localStorage、副作用等情境。
 
-- 使用 [Vitest](https://vitest.dev/) 作為測試框架，支援 TypeScript 與 Vite 專案。
-- 使用 [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) 進行元件渲染與互動測試。
-- 覆蓋率報表自動產生於 `coverage/` 目錄，可用瀏覽器開啟 `coverage/index.html` 查看詳細覆蓋情況。
-- 重要元件皆有 smoke test、props 傳遞、互動、無障礙、RWD 等測試案例。
-- PDF 匯出、localStorage 等副作用皆有 mock 處理，確保測試穩定。
+- 🧪 使用 [Vitest](https://vitest.dev/) 作為測試框架，支援 TypeScript 與 Vite 專案。
+- 🧑‍💻 使用 [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) 進行元件渲染與互動測試。
+- 📊 覆蓋率報表自動產生於 `coverage/` 目錄，可用瀏覽器開啟 `coverage/index.html` 查看詳細覆蓋情況。
+- ✅ 重要元件皆有 smoke test、props 傳遞、互動、無障礙、RWD 等測試案例。
+- 🗃️ PDF 匯出、localStorage 等副作用皆有 mock 處理，確保測試穩定。
 
-### 執行測試
+### 🏃‍♂️ 執行測試
 
 ```bash
 pnpm test
 ```
 
-### 相關測試指令
+### 🧰 相關測試指令
 
 - `pnpm test`：執行所有單元測試，執行測試並產生覆蓋率報表，**coverage** 資料夾中點擊 **index.html**
 
-## 授權
+## 📄 授權
 
 - 本專案採用 MIT License 授權，詳見 [LICENSE](./LICENSE)。
 - 作者：nick-jy-huang

app/[locale]/layout.tsx

@@ -1,6 +1,8 @@
 import { NextIntlClientProvider } from 'next-intl';
 import { notFound } from 'next/navigation';
 import { getTranslations } from 'next-intl/server';
+import '@/styles/globals.css';
+import SplashScreen from '@/components/SplashScreen';
 
 export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }) {
   const { locale } = await params;
@@ -16,7 +18,7 @@ export async function generateMetadata({ params }: { params: Promise<{ locale: s
       url: 'https://quotation-app-zeta.vercel.app/',
       images: [
         {
-          url: 'https://quotation-app-zeta.vercel.app/image.png',
+          url: 'https://quotation-app-zeta.vercel.app/image.jpg',
           width: 1200,
           height: 630,
         },
@@ -38,13 +40,14 @@ export default async function LocaleLayout({
   const { locale } = await params;
   let messages;
   try {
-    messages = (await import(`../../messages/${locale}.json`)).default;
+    messages = (await import(`@/messages/${locale}.json`)).default;
   } catch (error) {
     notFound();
   }
 
   return (
     <NextIntlClientProvider locale={locale} messages={messages}>
+      <SplashScreen />
       {children}
     </NextIntlClientProvider>
   );

app/layout.tsx

@@ -1,6 +1,5 @@
 import { Geist, Geist_Mono } from 'next/font/google';
 import '@/styles/globals.css';
-import SplashScreen from '@/components/SplashScreen';
 
 const geistSans = Geist({
   variable: '--font-geist-sans',
@@ -12,11 +11,7 @@ const geistMono = Geist_Mono({
   subsets: ['latin'],
 });
 
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
+export default async function LocaleLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <head>
@@ -31,7 +26,6 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} bg-grid flex min-h-screen flex-col bg-gray-100`}
       >
-        <SplashScreen />
         <main>{children}</main>
       </body>
     </html>

components/Header/index.tsx

@@ -12,7 +12,7 @@ export default function Header({ onChange, activeTab }: HeaderProps) {
         <div className="flex items-center justify-between py-4">
           <div className="flex gap-4">
             <img src="/favicon.png" alt="logo" className="h-8 w-8 duration-300 hover:scale-125" />
-            <h1 className="hidden text-2xl font-bold text-gray-900 lg:block">Quotation App</h1>
+            <h1 className="hidden text-2xl font-bold text-gray-900 md:block">Quotation App</h1>
           </div>
 
           <div id="desktop-tab-switcher" className="flex items-center gap-2">

i18n/request.ts

@@ -10,6 +10,6 @@ export default getRequestConfig(async ({ requestLocale }) => {
 
   return {
     locale,
-    messages: (await import(`../messages/${locale}.json`)).default,
+    messages: (await import(`@/messages/${locale}.json`)).default,
   };
 });

middleware.ts

@@ -9,5 +9,5 @@ export function middleware(request: NextRequest) {
 }
 
 export const config = {
-  matcher: ['/((?!_next/static|robots.txt|sitemap.xml|favicon.png|image.png|api).*)', '/'],
+  matcher: ['/((?!_next/static|robots.txt|sitemap.xml|favicon.png|image.jpg|api).*)', '/'],
 };