From e0f4584a31ed2fc0cf8e1cf2dea540b5c4ee80aa Mon Sep 17 00:00:00 2001
From: yeoeun-ex <yeoeun.sim@ex-em.com>
Date: Sun, 7 Jun 2026 22:35:01 +0900
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=EB=B0=B0=ED=8F=AC=20=ED=99=98?=
 =?UTF-8?q?=EA=B2=BD=EC=97=90=EC=84=9C=20=EC=BA=90=EB=A6=AD=ED=84=B0=20?=
 =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=A0=80=EC=9E=A5=20=EC=8B=A4?=
 =?UTF-8?q?=ED=8C=A8=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

서비스워커가 외부 S3 이미지까지 캐싱하며 opaque 응답을 저장해
html-to-image의 CORS fetch가 tainted canvas로 실패하던 문제 수정.

- runtimeCaching을 same-origin 자원만 매칭하도록 제한
- 오염된 캐시 폐기를 위해 cacheName bump (static-assets-v2)
- img에 crossOrigin="anonymous" 추가로 CORS 로드 보장

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/pages/characterShare/CharacterSharePage.tsx | 1 +
 vite.config.ts                                  | 7 +++++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/pages/characterShare/CharacterSharePage.tsx b/src/pages/characterShare/CharacterSharePage.tsx
index 88a64d06..2e0ae13e 100644
--- a/src/pages/characterShare/CharacterSharePage.tsx
+++ b/src/pages/characterShare/CharacterSharePage.tsx
@@ -100,6 +100,7 @@ function CharacterSharePage() {
               <img
                 src={data.imageBigUrl}
                 alt={data.name}
+                crossOrigin="anonymous"
                 style={{
                   ...CHARACTER_DATA[data.name].imageSize.big,
                 }}
diff --git a/vite.config.ts b/vite.config.ts
index 58692b34..35b0aaa6 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -79,10 +79,13 @@ export default defineConfig(({ mode }) => {
             clientsClaim: true,
             runtimeCaching: [
               {
-                urlPattern: /\.(?:js|css|png|jpg|jpeg|svg)$/,
+                // same-origin 정적 자원만 캐시 (외부 S3 이미지는 제외 - CORS/tainted canvas 방지)
+                urlPattern: ({ url, sameOrigin }) =>
+                  sameOrigin &&
+                  /\.(?:js|css|png|jpg|jpeg|svg)$/.test(url.pathname),
                 handler: 'StaleWhileRevalidate', // 네트워크를 먼저 시도
                 options: {
-                  cacheName: 'static-assets',
+                  cacheName: 'static-assets-v2',
                   expiration: {
                     maxEntries: 60, // 최대 캐시 항목 수
                     maxAgeSeconds: 30 * 24 * 60 * 60, // 30일

From f88a26858ffd692810a0a131bfd1f4407fdfc30f Mon Sep 17 00:00:00 2001
From: yeoeun-ex <yeoeun.sim@ex-em.com>
Date: Sun, 7 Jun 2026 23:03:39 +0900
Subject: [PATCH 2/2] =?UTF-8?q?revert:=20=EC=BA=90=EB=A6=AD=ED=84=B0=20?=
 =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20crossOrigin=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

develop의 fetch 기반 다운로드에서는 canvas tainting이 없어 불필요하고,
S3 CORS 미허용 origin에서 이미지 표시가 깨지는 부작용이 있어 제거.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/pages/characterShare/CharacterSharePage.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/pages/characterShare/CharacterSharePage.tsx b/src/pages/characterShare/CharacterSharePage.tsx
index 40215a0e..8a251d40 100644
--- a/src/pages/characterShare/CharacterSharePage.tsx
+++ b/src/pages/characterShare/CharacterSharePage.tsx
@@ -83,11 +83,7 @@ function CharacterSharePage() {
           <S.PageTitle>캐릭터를 획득했어요!</S.PageTitle>
         </S.TitleContainer>
         <S.CharacterCardContainer>
-          <S.CharacterImage
-            src={data.imageUrl}
-            alt={data.name}
-            crossOrigin="anonymous"
-          />
+          <S.CharacterImage src={data.imageUrl} alt={data.name} />
         </S.CharacterCardContainer>
         <S.DownloadButton onClick={handleDownload}>
           <Download width="1.25rem" color={getToken('fill.inverse.neutral')} />