refactor: 토너먼트 결과 화면 하단 CTA 구조 개선 및 영수증 레이아웃 정리

[kanghaeun]

작업 요약

• "전체 결과 보기" 카드를 스크롤 영역으로 이동하고, 저장/공유 버튼과 홈으로 가기 링크만 하단 고정
• 영수증 상품 카드 클릭 시 상세 페이지 이동 기능 추가

작업 세부 내용

하단 CTA 구조 개선

고정 영역 구조 변경

• 전체 결과 보기 카드를 고정 영역(BottomCta)에서 스크롤 영역으로 이동
• 저장/공유 버튼과 홈으로 가기 링크만 항상 화면 하단에 고정

CTA 위계 정리

• 저장/공유 버튼 → 홈으로 가기 순으로 시각적 우선순위 반영
• 버튼 배경색·라벨 수정

기타

• CTA 상단 페이드 그라데이션 추가 — 스크롤 콘텐츠가 자연스럽게 사라지도록 처리
• 앱 화면이 낮게 크롭될 때도 CTA가 콘텐츠를 가리지 않도록 하단 여백 재계산
• 다운로드 아이콘 신규 추가

---

영수증 레이아웃 정리

기능 추가

• 상품 카드 클릭 시 상품 상세 페이지로 이동

스타일 수정

• 상품 카드: 상품명 말줄임 처리, 트로피 뱃지 크기 조정
• 텍스트 색상 및 헤드라인 정리, 타이틀 폰트 사이즈·간격 조정
• 1위 상품 카드 하단 패딩, 구분선 좌우 여백 등 세부 정렬 수정
• 바구니 손잡이 스트로크 추가, PIKI 로고 에셋 교체

제거

• 영수증 페이지 뒤로가기 버튼 제거

스크린샷

연관 이슈

closes #342

Summary by CodeRabbit

• 새 기능
  • 토너먼트 결과 영수증에서 상품 카드를 클릭해 해당 상품 편집 화면으로 이동할 수 있습니다.
  • 결과 화면 하단에서 영수증을 저장(다운로드)할 수 있으며, 권한에 따라 토너먼트 공유 기능을 사용할 수 있습니다.
  • 결과 화면에서 홈으로 바로 이동할 수 있습니다.
• UI 개선
  • 헤더 구성이 변경되고, 하단 CTA는 화면 하단에 고정되도록 개선되었습니다.
  • 영수증(1위 하이라이트/상품명 표시/링크) 및 결과 카드 스타일이 더 깔끔하게 정돈되었습니다.
  • 사용자 프로필 그룹의 썸네일 및 오버플로우 배지 크기가 조정되었습니다.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
piki	Ready	Preview, Comment	Jul 19, 2026 5:35pm

[github-actions]

Discord 스레드 연동용 메타데이터입니다. discord-pr-bot 워크플로가 자동 생성하며, 수정·삭제하면 PR 과 Discord 알림 연동이 끊깁니다.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 17ec3269-b179-4f7d-b8d1-ef597558afb5

📥 Commits

Reviewing files that changed from the base of the PR and between e5e7f51 and fa29cd4.

📒 Files selected for processing (1)

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

🚧 Files skipped from review as they are similar to previous changes (1)

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

---

📝 Walkthrough

Walkthrough

토너먼트 결과 영수증에 상품 상세 이동을 연결하고, 결과 화면의 하단 CTA와 헤더 구성을 변경했습니다. 그룹 결과 카드 및 프로필 이미지 그룹의 스타일과 다운로드 아이콘 export도 업데이트했습니다.

Changes

토너먼트 결과 UI

Layer / File(s)	Summary
영수증 상품 이동 연결 apps/web/src/app/tournament/[id]/result/_components/ReceiptDrawMachine.tsx, apps/web/src/app/tournament/[id]/result/_components/ReceiptPaper.tsx	영수증 컴포넌트에 tournamentId를 전달하고 상품 카드를 토너먼트 상품 수정 경로의 Link로 변경했습니다. 영수증 레이아웃과 순위 카드 스타일도 조정했습니다.
결과 화면 CTA 재구성 apps/web/src/app/tournament/[id]/result/_components/ResultClient.tsx, apps/web/src/assets/icons/fill/index.ts	하단 CTA를 영수증 저장, 조건부 토너먼트 공유, 홈 이동 구성으로 변경하고 다운로드 아이콘 export를 추가했습니다.
그룹 결과 표시 스타일 조정 apps/web/src/app/tournament/[id]/result/_components/group-result-entry-card/GroupResultEntryCard.tsx, apps/web/src/components/user-profile-group/index.tsx	그룹 결과 카드와 프로필 이미지 그룹의 색상, 크기, 간격 및 프로필 이미지 표시를 조정했습니다.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant ResultClient
  participant ReceiptDrawMachine
  participant ReceiptPaper
  participant ProductCard
  ResultClient->>ReceiptDrawMachine: tournamentId와 결과 전달
  ReceiptDrawMachine->>ReceiptPaper: tournamentId 전달
  ReceiptPaper->>ProductCard: 상품 정보와 tournamentId 전달
  ProductCard->>ProductCard: 상품 수정 경로 생성

Loading

Possibly related PRs

• TeamPiKi/client#345: 결과 화면의 고정 하단 CTA 및 BottomCta 변경과 직접 관련됩니다.

Suggested labels: feature, style

Suggested reviewers: soyeong0115, ychany

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Linked Issues check	❓ Inconclusive	대부분의 CTA·영수증·상품 이동 요구는 반영됐지만, 1인 토너먼트 배너 미노출과 대상 페이지 일치 여부는 확인되지 않습니다.	1인 토너먼트에서 배너가 숨겨지는지와 클릭 시 이동 대상이 의도한 상품 페이지인지 확인해 주세요.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	제목이 결과 화면 하단 CTA와 영수증 레이아웃 개선이라는 핵심 변경을 간결하게 잘 요약합니다.
Out of Scope Changes check	✅ Passed	아이콘 export, 카드 스타일, 프로필 썸네일 조정은 결과/영수증 UI 개선과 직접 연관되어 보여 범위를 벗어나지 않습니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ 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 refactor/342-tournament-result

---

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

[coderabbitai]

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.