[Refactor] WTH-439: 영수증이 pdf인 경우 바로 브라우저 뷰어로 넘어가도록 수정

[dalzzy]

✅ PR 유형

어떤 변경 사항이 있었나요?

• 새로운 기능 추가
• 버그 수정
• 코드에 영향을 주지 않는 변경사항(오타 수정, 탭 사이즈 변경, 변수명 변경)
• 코드 리팩토링
• 주석 추가 및 수정
• 문서 수정
• 빌드 부분 혹은 패키지 매니저 수정
• 파일 혹은 폴더명 수정
• 파일 혹은 폴더 삭제

---

📌 관련 이슈번호

• Closed

---

✅ Key Changes

• 유저 회비 페이지에서 영수증이 pdf인 경우 바로 브라우저 뷰어로 넘어가도록 수정

📸 스크린샷 or 실행영상

2026-07-06.5.04.18.mov

---

🎸 기타 사항 or 추가 코멘트

Summary by CodeRabbit

• Bug Fixes
  • 영수증 보기에서 PDF는 새 탭으로 원본을 열고, 이미지 영수증은 기존 미리보기 방식으로 표시되도록 개선했습니다.
  • 영수증 상세 모달에서 PDF 전용 미리보기 흐름을 정리하고, 이미지 표시 방식으로 단순화했습니다.
  • 거래 상세 화면에서는 영수증 뷰어에 이미지 영수증만 전달되도록 바뀌어, PDF가 섞여 표시되는 문제를 줄였습니다.

[github-actions]

PR 테스트 결과

✅ Jest: 통과

🎉 모든 테스트를 통과했습니다!

[coderabbitai]

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: 4cfe2135-0648-4ad3-ad83-83a5e795b7ef

📥 Commits

Reviewing files that changed from the base of the PR and between 30a3a2e and 041b59b.

📒 Files selected for processing (3)

• src/components/dues/DuesReceiptCard.tsx
• src/components/dues/DuesReceiptViewerModal.tsx
• src/components/dues/DuesTransactionDetailModal.tsx

---

📝 Walkthrough

Walkthrough

PDF 영수증 처리 방식이 변경됨. DuesReceiptCard는 PDF일 경우 새 탭에서 fileUrl을 여는 외부 링크를 렌더링하고, DuesReceiptViewerModal은 PDF 전용 프리뷰/다운로드 로직(PdfReceiptPreview)을 제거하고 항상 이미지로 렌더링하도록 단순화됨. DuesTransactionDetailModal은 PDF가 아닌 영수증만 필터링해 뷰어 모달에 전달함.

Changes

PDF 영수증 렌더링 및 뷰어 변경

Layer / File(s)	Summary
영수증 카드 PDF 링크 분기 src/components/dues/DuesReceiptCard.tsx	hasReceipt 렌더링 시 isPdf일 경우 fileUrl을 새 탭에서 여는 <a> 태그와 전용 aria-label을 반환하도록 분기 추가.
영수증 뷰어 모달 단순화 src/components/dues/DuesReceiptViewerModal.tsx	isPdf 판별 로직과 PdfReceiptPreview 컴포넌트(다운로드/blob/toastError 처리 포함)를 제거하고 항상 activeReceipt.fileUrl을 사용하는 <img>로 렌더링, 관련 import 정리.
거래 상세 모달 이미지 영수증 필터링 src/components/dues/DuesTransactionDetailModal.tsx	isPdfReceipt를 import하여 receiptFiles에서 PDF를 제외한 imageReceiptFiles를 생성하고 DuesReceiptViewerModal에 전달.

Estimated code review effort: 2 (Simple) | ~15 minutes

Sequence Diagram(s)

sequenceDiagram
  participant DuesTransactionDetailModal
  participant DuesReceiptViewerModal
  participant DuesReceiptCard

  DuesTransactionDetailModal->>DuesTransactionDetailModal: receiptFiles를 isPdfReceipt로 필터링
  DuesTransactionDetailModal->>DuesReceiptViewerModal: imageReceiptFiles 전달
  DuesReceiptViewerModal->>DuesReceiptViewerModal: activeReceipt.fileUrl로 img 렌더링
  DuesReceiptCard->>DuesReceiptCard: isPdf 시 a 태그로 fileUrl 새 탭 열기

Loading

Possibly related PRs

• Team-Weeth/weeth-client#136: 영수증 PDF 판별/렌더링을 위한 isPdfReceipt 및 receipt 파일 데이터 흐름 변경과 직접적으로 연관됨.

Suggested labels: 🐞 BugFix

Suggested reviewers: woneeeee, nabbang6

Poem

토끼가 폴짝, PDF는 링크로 쏙!
프리뷰는 걷어내고 이미지만 남겼네
새 탭에서 열리는 영수증 한 장
모달은 가벼워져 콩콩 뛰어다니네 🐰📄

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	제목이 PDF 영수증을 바로 브라우저 뷰어로 여는 변경을 정확히 요약해 변경사항과 잘 맞습니다.
Description check	✅ Passed	필수 섹션이 모두 있고 변경 내용과 스크린샷도 포함되어 있어 템플릿을 대부분 충족합니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.

✨ 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/WTH-439-회비-영수증-pdf-모달-수정

---

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

[github-actions]

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
✅ Prettier: 통과
✅ Build: 통과

🎉 모든 검증을 통과했습니다!

[github-actions]

구현한 기능 Preview: https://weeth-dv8jgjxbo-weethsite-4975s-projects.vercel.app

[github-actions]

PR E2E 테스트 결과

✅ Playwright: 통과

🎉 E2E 테스트를 통과했습니다!

[JIN921]

저는 모달 뜨는 것도 괜찮다 생각햇는데 뎁스 줄으니까 더 좋아 보이네용! 어드민에도 저거 쓰고 잇엇는데 회비 관련 코드 통합 하면서 바꿔놔야 겟어요 ㅎㅎㅎ 수고하셨습니다!!!

[dalzzy]

저는 모달 뜨는 것도 괜찮다 생각햇는데 뎁스 줄으니까 더 좋아 보이네용! 어드민에도 저거 쓰고 잇엇는데 회비 관련 코드 통합 하면서 바꿔놔야 겟어요 ㅎㅎㅎ 수고하셨습니다!!!

아 그거까지 제가 수정해놓을게용!!

[nabbang6]

확인햇습니다~! 고생하셨어용 👍👍

[woneeeee]

확인했습니당!