배포 환경에서 캐릭터 이미지 저장 실패 해결

[ongheong]

문제

• 배포 도메인(moddo.kr)에서 캐릭터 이미지 저장이 실패. localhost에서는 정상 동작.
• 네트워크 탭에서 S3 이미지에 CORS 에러 확인.

원인

서비스워커의 runtimeCaching 규칙(/\.(?:js|css|png|jpg|jpeg|svg)$/)이 출처를 가리지 않아 외부 S3 이미지까지 캐싱하는 것이 근본 원인.

• 이미지가 crossOrigin 없이 로드되면서 SW가 opaque 응답을 캐시에 저장.
• 이후 다운로드용 fetch(imageUrl)이 그 opaque 응답을 돌려받아 response.ok === false → 저장 실패.
• localhost가 성공했던 이유: runtimeCaching 규칙은 프로덕션 빌드 SW에서만 적용되고, dev SW에는 없어 S3 이미지를 가로채지 않기 때문.

변경

• SW 캐시를 same-origin 자원만 매칭하도록 제한 → 외부 S3 이미지는 SW가 가로채지 않음 (근본 해결)
• cacheName bump (static-assets → static-assets-v2) → 기존에 오염된 opaque 캐시 엔트리 폐기

다운로드 로직은 develop에서 fetch().blob() + saveAs 방식으로 리팩터링됨. 본 PR은 그 방식 위에서 SW 캐싱 문제를 해결.
S3 CORS는 moddo.kr / www.moddo.kr origin에 대해 정상 허용됨(curl 확인).

테스트 방법

• moddo.kr에서 하드 리로드(캐시 비우기) 후 일반 Chrome에서 캐릭터 이미지 저장 성공 확인
• Chrome 시크릿에서 저장 성공 확인
• 모바일에서 저장 성공 확인
• 네트워크 탭에서 S3 이미지 CORS 에러가 사라졌는지 확인

참고: SW 변경이라 기존 사용자는 새 SW 활성화(auto-update 새로고침) 이후 반영됩니다.
localhost(dev)에서는 MSW가 S3 fetch를 가로채 다운로드가 실패할 수 있으나, prod에는 영향 없음.

🤖 Generated with Claude Code

[coderabbitai]

📝 Walkthrough

Walkthrough

이 PR은 리소스 로딩과 캐싱 정책을 개선한다. 캐릭터 공유 페이지의 이미지 렌더링에 crossOrigin="anonymous" 속성을 추가하고, Workbox PWA 캐싱 규칙을 더 제한적으로 변경하여 같은 출처의 정적 자원만 캐싱하도록 업데이트한다.

Changes

리소스 로딩 및 캐싱 정책

Layer / File(s)	요약
캐릭터 이미지 CORS 설정 src/pages/characterShare/CharacterSharePage.tsx	캐릭터 이미지 렌더링 시 crossOrigin="anonymous" 속성을 추가하여 원격 이미지 로딩 시 CORS를 명시적으로 지정한다.
Workbox 정적 자원 캐싱 규칙 업데이트 vite.config.ts	runtimeCaching의 정적 자원 캐싱 규칙을 같은 출처 기반으로 제한하고, 경로 확장자 검사 방식을 적용하며, 캐시 이름을 static-assets-v2로 갱신한다.

Possibly related PRs

• moddo-kr/moddo-frontend#60: 캐릭터 공유 페이지의 이미지 렌더링/다운로드 경로를 리팩터링했으며, 같은 CORS 문제를 다루고 있다.

Suggested labels

🔨 Refactor

Poem

🐰 네트워크 경계를 넘어 CORS 속성 하나를 더하니,
PWA 캐시는 이제 더 꼼꼼하게 같은 곳만 담는다네.
공유된 캐릭터 이미지는 안전하게,
정적 자원은 현명하게 보호받는다. ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/image-test

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cloudflare-workers-and-pages]

Deploying moddo-frontend with    Cloudflare Pages

Latest commit:	f88a268
Status:	✅  Deploy successful!
Preview URL:	https://db61c151.moddo-frontend.pages.dev
Branch Preview URL:	https://fix-image-test.moddo-frontend.pages.dev

View logs