fix: 영수증 화면 상품 사진 미표시 및 긴 상품명 넘침 수정

[ychany]

작업 내용

토너먼트 결과 화면의 영수증 컴포넌트에서 발견된 두 가지 표시 오류를 수정했습니다.

1. 상품 사진이 표시되지 않던 문제 (ReceiptPaper.tsx)

• 영수증 캡처 시 cross-origin 이미지가 캔버스에 그려지지 않는 문제를 우회하려고 외부 쇼핑몰 이미지를 /_next/image proxy 로 통과시키고 있었는데, 호출 시 w=120 값이 Next.js 의 허용 width 화이트리스트(imageSizes: 16/32/48/64/96/128/256/384)에 포함되지 않아 400 Bad Request 를 받아 broken image 가 떴습니다.
• 영수증 썸네일 표시 크기(60x60)의 2배인 w=128 로 변경.
• same-origin 이라 더 이상 필요 없는 crossOrigin="anonymous" 도 제거(붙어 있으면 응답에 CORS 헤더 없는 경우 거부됨).

2. 긴 상품명이 컨테이너 밖으로 넘치던 문제

• 기존 break-keep 은 한국어 단어 보존 측면에서 적합하지만, 공백 없는 긴 영문/숫자 토큰(예: (FANATICS)_2026FIFA_WORLDCUP_KR)이 들어오면 줄바꿈이 안 돼 카드 밖으로 넘쳤습니다.
• wrap-break-word (overflow-wrap: break-word) 추가 — 자연스러운 단어 단위 줄바꿈을 우선 시도하고 불가피하면 글자 단위로 강제 줄바꿈.

검증

• DevTools Network 에서 /_next/image?w=128 → 200 OK + jpeg 응답 확인
• 영수증 영역에 두 상품 모두 썸네일 정상 렌더링
• 한국어/영문 혼합 긴 상품명 모두 컨테이너 안에서 줄바꿈 동작
• pnpm check-types · pnpm lint 통과

연관 이슈

closes #269

Summary by CodeRabbit

릴리스 노트

• 스타일

  • 상품명 텍스트 줄바꿈 동작을 개선했습니다.

• 버그 수정

  • 상품 이미지 로딩 관련 설정을 조정했습니다.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
depromeet	Ready	Preview, Comment	Jun 19, 2026 11:56am

[github-actions]

No description provided.

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: aae9085c-49e8-4049-a13f-7f093167c631

📥 Commits

Reviewing files that changed from the base of the PR and between c032e91 and 7d2a382.

📒 Files selected for processing (1)

• apps/web/src/app/tournament/[id]/result/_components/ReceiptPaper.tsx

---

Walkthrough

ReceiptPaper.tsx 단일 파일에서 toSameOriginImageUrl의 기본 리사이즈 폭을 128로 변경하고 JSDoc을 갱신했으며, ProductCard 이미지에서 crossOrigin="anonymous" 속성을 제거하고 상품명 요소에 wrap-break-word 클래스를 추가했다.

Changes

ReceiptPaper ProductCard UI 수정

Layer / File(s)	Summary
ProductCard 이미지 URL 및 렌더링 속성 변경 apps/web/src/app/tournament/[id]/result/_components/ReceiptPaper.tsx	toSameOriginImageUrl 기본 width를 120에서 128로 변경하고 JSDoc 갱신, 이미지 <img>에서 crossOrigin="anonymous" 제거, 상품명 <p>에 wrap-break-word 클래스 추가.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

• depromeet/PIKI-Client#196: 동일한 ReceiptPaper.tsx 컴포넌트를 리팩토링한 PR으로, 이번 변경의 직접적인 기반 코드를 포함한다.

Suggested reviewers

• kanghaeun
• soyeong0115

Poem

🐰 토끼가 영수증을 다듬었네,
이미지 폭은 128로 쏙~
crossOrigin은 살며시 빼고,
상품명은 예쁘게 줄 넘기며,
QA 버그도 깡충 뛰어넘었지! 🎉

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목은 수정 내용을 명확하게 요약하고 있습니다: 영수증 화면에서 상품 사진 미표시 문제와 긴 상품명 넘침 문제 두 가지를 다루고 있으며, 변경사항의 핵심을 잘 반영하고 있습니다.
Linked Issues check	✅ Passed	PR은 이슈 #269에 명시된 QA 추적 이슈의 범위 내에서 영수증 컴포넌트의 표시 문제(상품 이미지 미표시, 긴 상품명 넘침)를 해결하는 코딩 변경사항을 구현하고 있습니다.
Out of Scope Changes check	✅ Passed	모든 변경사항이 PR 목표와 연관되어 있습니다: 이미지 너비 파라미터 변경, crossOrigin 속성 제거, 텍스트 줄바꿈 CSS 클래스 추가 모두 영수증 화면의 상품 이미지 미표시 및 텍스트 넘침 문제 해결에 직접적으로 관련되어 있습니다.

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

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/269-qa-web

---

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.}