fix(spa): fallback font-serif to Prompt for Thai characters

apps/spa/index.html

@@ -7,7 +7,7 @@
     <title>website</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Noto+Sans+JP:wght@400;500;700&family=Noto+Sans+KR:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
     <script src="https://cdn.omise.co/omise.js"></script>
   </head>
   <body>

apps/spa/src/App.tsx

@@ -1,4 +1,5 @@
 import { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
 import { BrowserRouter, Routes, Route } from 'react-router-dom'
 import ScrollToTop from './components/ScrollToTop'
 import { initLiff } from './lib/liff'
@@ -23,6 +24,8 @@ import ProfilePage from './pages/ProfilePage'
 import CartDrawer from './components/CartDrawer'
 
 function App() {
+  const { i18n } = useTranslation();
+
   useEffect(() => {
     const liffId = import.meta.env.VITE_LIFF_ID;
     if (liffId) {
@@ -32,6 +35,19 @@ function App() {
     }
   }, []);
 
+  useEffect(() => {
+    const lang = i18n.language;
+    document.body.classList.remove('font-sans-ja', 'font-sans-zh', 'font-sans-ko');
+    
+    if (lang === 'ja') {
+      document.body.classList.add('font-sans-ja');
+    } else if (lang === 'zh') {
+      document.body.classList.add('font-sans-zh');
+    } else if (lang === 'ko') {
+      document.body.classList.add('font-sans-ko');
+    }
+  }, [i18n.language]);
+
   return (
     <BrowserRouter>
       <ScrollToTop />

apps/spa/tailwind.config.js

@@ -9,6 +9,10 @@ export default {
       fontFamily: {
         sans: ['Sarabun', 'sans-serif'],
         heading: ['Prompt', 'sans-serif'],
+        serif: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'Prompt', 'serif'],
+        'sans-ja': ['"Noto Sans JP"', 'sans-serif'],
+        'sans-zh': ['"Noto Sans SC"', 'sans-serif'],
+        'sans-ko': ['"Noto Sans KR"', 'sans-serif'],
       },
       colors: {
         pop: {