fix: medical-articles preview support with draftKey

src/app/medical-articles/[id]/page.tsx

@@ -1,5 +1,6 @@
 import {
   getMedicalArticleById,
+  getDraftMedicalArticle,
   getArticles,
   getCategories,
   getTags,
@@ -17,16 +18,30 @@ import { notFound } from 'next/navigation'
 export const revalidate = 60
 
 interface Props {
-  params: { id: string }
+  params: Promise<{ id: string }> | { id: string }
+  searchParams?: Promise<{ draftKey?: string }> | { draftKey?: string }
 }
 
-export default async function MedicalArticlePage({ params }: Props) {
-  const { id } = await params
+export default async function MedicalArticlePage({
+  params,
+  searchParams,
+}: Props) {
+  const { id } = await (params instanceof Promise
+    ? params
+    : Promise.resolve(params))
+  const resolvedSearch = searchParams
+    ? await (searchParams instanceof Promise
+        ? searchParams
+        : Promise.resolve(searchParams))
+    : {}
+  const draftKey = resolvedSearch.draftKey
 
   try {
     const [article, { contents: allArticles }, categoriesRes, tagsRes] =
       await Promise.all([
-        getMedicalArticleById(id),
+        draftKey
+          ? getDraftMedicalArticle(id, draftKey)
+          : getMedicalArticleById(id),
         getArticles(),
         getCategories(),
         getTags(),
@@ -64,6 +79,31 @@ export default async function MedicalArticlePage({ params }: Props) {
 
     return (
       <div className="min-h-screen bg-white">
+        {draftKey && (
+          <div className="border-b-2 border-yellow-400 bg-yellow-100 py-3">
+            <div className="container mx-auto px-4">
+              <div className="flex items-center gap-2 text-yellow-800">
+                <svg
+                  className="h-5 w-5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                  />
+                </svg>
+                <span className="font-semibold">下書きプレビュー</span>
+                <span className="text-sm">
+                  このページは下書き状態の記事です
+                </span>
+              </div>
+            </div>
+          </div>
+        )}
         <div className="mx-auto max-w-7xl py-8">
           {/* 記事ヘッダー（画像より上） */}
           <div className="mb-8">

src/components/SafeHTML.tsx

@@ -9,7 +9,7 @@ import { useEffect, useState, useRef } from 'react'
  * @param width 表示幅
  * @returns 最適化された画像 URL
  */
-function optimizeMicroCMSImage(url: string, _width: number): string {
+function optimizeMicroCMSImage(url: string): string {
   if (!url) return url
 
   // microCMS の画像 URL かチェック
@@ -56,12 +56,8 @@ export function SafeHTML({ html, className }: SafeHTMLProps) {
       // microCMS画像じゃなければスキップ
       if (!url.includes('microcms-assets.io')) return imgTag
 
-      // width属性を抽出
-      const widthMatch = imgTag.match(/width=["'](\d+)["']/i)
-      const width = widthMatch ? parseInt(widthMatch[1], 10) : 800
-
       // 最適化
-      const optimizedUrl = optimizeMicroCMSImage(url, width)
+      const optimizedUrl = optimizeMicroCMSImage(url)
 
       // srcだけ置き換え
       return imgTag.replace(/src=["'][^"']*["']/, `src="${optimizedUrl}"`)

src/lib/microCMS/microcms.ts

@@ -274,6 +274,18 @@ export const getMedicalArticleById = async (id: string) => {
   return data
 }
 
+export const getDraftMedicalArticle = async (id: string, draftKey: string) => {
+  const data = await client.get<Article>({
+    endpoint: 'medical-articles',
+    contentId: id,
+    queries: {
+      draftKey,
+      depth: 2,
+    },
+  })
+  return data
+}
+
 /**
  * 下書き記事を取得（プレビュー用）
  * @param id 記事ID