From 3df7d75c8cbac1fc72b7dad218fe1a0b4e926b64 Mon Sep 17 00:00:00 2001
From: Application-drop-up <msts.oo0131@gmail.com>
Date: Tue, 26 May 2026 23:02:16 +0900
Subject: [PATCH 1/2] fix(HeritageCard): switch img src to backend proxy to
 avoid CORS errors

Replace direct UNESCO CDN URL (item.thumbnailUrl) with the backend proxy
endpoint /api/v1/heritage-image/{id}. Add isImgError state so the
placeholder SVG is shown when the proxy itself fails. Replace
referrerPolicy="no-referrer" with crossOrigin="anonymous" to pair with
the Access-Control-Allow-Origin header the proxy returns. Resolves #376.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 client/src/app/features/top/cards/HeritageCard.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/client/src/app/features/top/cards/HeritageCard.tsx b/client/src/app/features/top/cards/HeritageCard.tsx
index ff46184..45e843d 100644
--- a/client/src/app/features/top/cards/HeritageCard.tsx
+++ b/client/src/app/features/top/cards/HeritageCard.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react";
 import type { WorldHeritageVm } from "../../../../domain/types.ts";
 import { BaseCard } from "@shared/uis/BaseCard.tsx";
 import { useText } from "@shared/locale/ui-text.ts";
@@ -10,22 +11,25 @@ export function HeritageCard({
   onClickItem?: (id: number) => void;
 }) {
   const text = useText();
+  const [isImgError, setIsImgError] = useState(false);
 
   const handleCardClick = () => {
     if (onClickItem) onClickItem(item.id);
   };
 
   const title = item.title;
+  const proxyUrl = `${import.meta.env.VITE_API_BASE_URL}/api/v1/heritage-image/${item.id}`;
 
   return (
     <BaseCard onClick={handleCardClick}>
       <div className="relative h-64 overflow-hidden rounded-2xl sm:h-72 lg:h-80">
-        {item.thumbnailUrl ? (
+        {!isImgError ? (
           <img
-            src={item.thumbnailUrl}
+            src={proxyUrl}
             alt={title}
             className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
-            referrerPolicy="no-referrer"
+            crossOrigin="anonymous"
+            onError={() => setIsImgError(true)}
           />
         ) : (
           <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-indigo-50 to-zinc-100 dark:from-indigo-950 dark:to-zinc-800">

From cdb8f07808d55362bd8db80eccda74d89ddc82f5 Mon Sep 17 00:00:00 2001
From: Application-drop-up <msts.oo0131@gmail.com>
Date: Wed, 27 May 2026 07:38:33 +0900
Subject: [PATCH 2/2] Revert "fix(HeritageCard): switch img src to backend
 proxy to avoid CORS errors"

This reverts commit 3df7d75c8cbac1fc72b7dad218fe1a0b4e926b64.
---
 client/src/app/features/top/cards/HeritageCard.tsx | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/client/src/app/features/top/cards/HeritageCard.tsx b/client/src/app/features/top/cards/HeritageCard.tsx
index 45e843d..ff46184 100644
--- a/client/src/app/features/top/cards/HeritageCard.tsx
+++ b/client/src/app/features/top/cards/HeritageCard.tsx
@@ -1,4 +1,3 @@
-import { useState } from "react";
 import type { WorldHeritageVm } from "../../../../domain/types.ts";
 import { BaseCard } from "@shared/uis/BaseCard.tsx";
 import { useText } from "@shared/locale/ui-text.ts";
@@ -11,25 +10,22 @@ export function HeritageCard({
   onClickItem?: (id: number) => void;
 }) {
   const text = useText();
-  const [isImgError, setIsImgError] = useState(false);
 
   const handleCardClick = () => {
     if (onClickItem) onClickItem(item.id);
   };
 
   const title = item.title;
-  const proxyUrl = `${import.meta.env.VITE_API_BASE_URL}/api/v1/heritage-image/${item.id}`;
 
   return (
     <BaseCard onClick={handleCardClick}>
       <div className="relative h-64 overflow-hidden rounded-2xl sm:h-72 lg:h-80">
-        {!isImgError ? (
+        {item.thumbnailUrl ? (
           <img
-            src={proxyUrl}
+            src={item.thumbnailUrl}
             alt={title}
             className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
-            crossOrigin="anonymous"
-            onError={() => setIsImgError(true)}
+            referrerPolicy="no-referrer"
           />
         ) : (
           <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-indigo-50 to-zinc-100 dark:from-indigo-950 dark:to-zinc-800">