feat: support Markdown rendering in product details

apps/spa/src/pages/ProductDetailPage.tsx

@@ -9,6 +9,8 @@ import ProductImageGallery from '../components/ProductImageGallery'
 import DynamicPageRenderer from '../components/DynamicPageRenderer'
 import { API_BASE, getCategoryImage, formatPrice, type Category, type Product, type PageSection, type TranslatableString } from '../types'
 import { useCartStore } from '../store/cartStore'
+import { marked } from 'marked'
+import DOMPurify from 'dompurify'
 
 /** แปลง TranslatableString (string | Record<string,string>) เป็น string ตาม locale */
 function resolveTranslatable(value: TranslatableString | null | undefined, lang: string): string {
@@ -270,8 +272,12 @@ export default function ProductDetailPage() {
           <div className="pt-16 border-t border-spa-stone/10 space-y-6">
             <h2 className="text-3xl font-bold text-pop-black">{t('product.details')}</h2>
             <div 
-              className="prose prose-spa prose-lg max-w-4xl product-editorial text-spa-stone"
-              dangerouslySetInnerHTML={{ __html: resolveTranslatable(product.details, i18n.language) }}
+              className="prose prose-spa prose-lg max-w-4xl product-editorial text-spa-stone whitespace-pre-wrap"
+              dangerouslySetInnerHTML={{ 
+                __html: DOMPurify.sanitize(
+                  marked.parse(resolveTranslatable(product.details, i18n.language).replace(/\\n/g, '\n'), { async: false }) as string
+                )
+              }}
             />
           </div>
         )}