docs: [changes] 절곡품 Canvas CORS 프록시 수정 이력 추가

changes/20260321_bending_api_internal_url_fix.md

@@ -91,6 +91,45 @@ API 호출 실패 시 빈 데이터를 반환하여 "데이터가 없습니다"
 
 ---
 
+## 수정 4: Canvas 편집기 R2 이미지 CORS 에러 (MNG)
+
+### 원인
+
+절곡품 전개도 편집기(Canvas Editor)에서 이미지를 로드할 때:
+1. `fabric.Image.fromURL`에 `crossOrigin: 'anonymous'` 설정
+2. `/files/{id}/view`가 R2 presigned URL로 redirect
+3. R2 버킷에 CORS 허용 설정이 없어 브라우저가 차단
+4. Canvas가 "tainted" 상태가 되어 `toDataURL()` 실패
+
+### 수정 파일 (MNG)
+
+| 파일 | 변경 내용 |
+|------|----------|
+| `app/Http/Controllers/FileViewController.php` | `proxy()` 메서드 추가 — R2 이미지를 서버에서 다운로드 후 같은 도메인으로 스트리밍 |
+| `routes/web.php` | `/files/{id}/proxy` 라우트 추가 |
+| `public/js/canvas-editor.js` | `fabric.Image.fromURL`에 `crossOrigin: 'anonymous'` 옵션 추가 |
+| `resources/views/bending/base/form.blade.php` | `<img>` 태그에 `data-proxy-url` 속성 추가, Canvas 편집기에서 프록시 URL 사용 |
+| `resources/views/bending/products/form.blade.php` | 동일 패턴 적용 |
+
+### 동작 원리
+
+- 일반 `<img>` 표시: `/files/{id}/view` → R2 redirect (CORS 불필요, 빠름)
+- Canvas 편집기: `/files/{id}/proxy` → MNG 서버가 R2에서 다운로드 후 스트리밍 (같은 도메인, CORS 무관)
+
+### 로컬 `.env` 변경
+
+API `.env`에 Cloudflare R2 접속 정보 추가 (개발서버와 동일):
+
+```
+R2_ACCESS_KEY_ID=cecd4d4c...
+R2_SECRET_ACCESS_KEY=f20136ec...
+R2_BUCKET=sam
+R2_ENDPOINT=https://caf8dcb2c4ea443018ee5e7a7421db0e.r2.cloudflarestorage.com
+R2_REGION=auto
+```
+
+---
+
 ## 신규 API 호출 코드 작성 시 필수 규칙
 
 MNG에서 API를 호출하는 코드를 새로 작성할 때:
@@ -101,6 +140,7 @@ MNG에서 API를 호출하는 코드를 새로 작성할 때:
 필수  MNG에서 Bearer 없이 호출하려면 API 화이트리스트에 라우트 추가
 권장  FormulaApiService::resolveApiConnection() 참조
 권장  API 실패 시 사용자에게 구체적인 안내 메시지 표시
+권장  Canvas에서 외부 이미지 사용 시 프록시(/files/{id}/proxy) 경유
 ```
 
 ## 테스트 체크리스트
@@ -108,6 +148,7 @@ MNG에서 API를 호출하는 코드를 새로 작성할 때:
 - [x] 로컬 Docker에서 `/bending/base` 페이지 정상 로드 (266건)
 - [x] 로컬 Docker에서 `/bending/products` 페이지 정상 로드
 - [x] API 미인증 시 안내 메시지 표시 확인
+- [x] Canvas 편집기 이미지 로드 및 toDataURL 정상 동작
 - [x] pint 코드 스타일 검사 통과
 
 ## 관련 문서