Feat: 토스 페이 연동 [JDDEV-73]

[yiyoonseo]

🔗 관련 이슈

JDDEV-73

• Close #

📝 개요

• 토스페이 연동

⌨️ 작업 상세 내용

• 토스페이 연동했습니다.

💡 코드 설명 및 참고사항

1. 포트원 결제 SDK 연동 및 플로우 구현

• src/lib/api/credit.ts 내 결제 준비(preparePurchase), 결제 요청(requestPortOnePayment), 결제 검증(completePortOnePayment) API 통신 로직 구현
• 결제창 호출 시 누락되었던 환경변수 및 키값 맵핑 로직 수정

2. Next.js App Router 기반 결제 리다이렉트 페이지 추가

• PG사 결제 완료/취소 후 프론트엔드로 복귀할 처리용 라우트 추가
• src/app/credit/payment-result/page.tsx: 결제 완료 시 orderId를 파싱하여 메인 크레딧 페이지로 전달
• src/app/credit/payment-cancel/page.tsx: 사용자의 결제 취소 시 cancel=true 플래그를 달아 복귀 처리

3. 상태 기반 결제 결과 폴링(Polling) 로직 구현 (`CreditContent`)

• 결제 완료 후 넘어온 orderId를 감지하여 2초 주기로 백엔드에 결제 상태(checkPaymentStatus) 확인
• 폴링 중 발생할 수 있는 일시적인 API 에러(4xx, 5xx)로 인해 Next.js Error Overlay(빨간 화면)가 뜨지 않도록 예외 처리(Error throw 대신 UNKNOWN 상태 반환) 적용

4. Zustand를 활용한 크레딧 잔액 전역 상태 관리

• src/store/useCreditStore.ts 생성하여 크레딧 상태 중앙화
• 결제 완료(COMPLETED) 시 fetchCreditBalance를 호출해 최신 잔액을 가져온 뒤 스토어 업데이트
• Lnb 컴포넌트 등 크레딧 잔액을 표시하는 모든 컴포넌트가 새로고침 없이 즉시 리렌더링되도록 UX 개선

5. UI/UX 개선 (Toast 알림 적용)

• 투박한 alert 대신 Toast 컴포넌트를 활용하여 성공/실패/취소 알림 적용
• useEffect 내부의 동기적 상태 업데이트로 인한 React 렌더링 경고(Cascading renders)를 해결하기 위해 setTimeout을 활용한 비동기 알림 처리 적용

📸 스크린샷 (UI 변경 시)

🔍 리뷰 요구사항 (Reviewers)

• [ ]

⚠️ 로컬 실행 시 유의사항

Summary by CodeRabbit

• New Features

  • Added payment result and cancellation pages with clear processing, success, and cancellation states.
  • Added synchronized credit balance updates across the navigation and credit purchase flows.
  • Added toast notifications for payment success, failure, cancellation, and balance synchronization issues.

• Bug Fixes

  • Improved payment-status polling and handling of unsuccessful API responses.
  • Preserved meaningful payment error messages while providing a fallback for unknown errors.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 9b3b581f-00ec-4606-a6e4-80a1d9605d24

📥 Commits

Reviewing files that changed from the base of the PR and between 0d72eef and 1c4bab9.

⛔ Files ignored due to path filters (1)

• jobdri/pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (8)

• jobdri/package.json
• jobdri/src/app/credit/page.tsx
• jobdri/src/app/credit/payment-cancel/page.tsx
• jobdri/src/app/credit/payment-result/page.tsx
• jobdri/src/components/common/cards/CreditCard.tsx
• jobdri/src/components/common/lnb/Lnb.tsx
• jobdri/src/lib/api/credit.ts
• jobdri/src/lib/store/useCreditStore.ts

---

📝 Walkthrough

Walkthrough

The credit payment flow now uses checkout URLs, dedicated result and cancellation routes, payment-status polling, toast feedback, and shared Zustand credit balance state.

Changes

Credit payment flow

Layer / File(s)	Summary
Payment contracts and credit state jobdri/package.json, jobdri/src/lib/api/credit.ts, jobdri/src/lib/store/useCreditStore.ts	Added Zustand. Updated payment result data and status-check behavior. Added shared credit balance state.
Checkout and payment result routes jobdri/src/components/common/cards/CreditCard.tsx, jobdri/src/app/credit/payment-result/page.tsx, jobdri/src/app/credit/payment-cancel/page.tsx	The purchase flow uses the returned checkout URL. Result and cancellation routes redirect to the credit page with payment state.
Credit polling and shared balance display jobdri/src/app/credit/page.tsx, jobdri/src/components/common/lnb/Lnb.tsx	Payment polling uses paymentId. Successful payments refresh shared credit state. Toast feedback replaces payment alerts. Lnb reads the shared balance.

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

Sequence Diagram(s)

sequenceDiagram
  participant CreditCard
  participant PaymentResultPage
  participant CreditPage
  participant PaymentAPI
  participant CreditStore
  CreditCard->>PaymentResultPage: Redirect using checkoutPage
  PaymentResultPage->>CreditPage: Redirect with payment identifier
  CreditPage->>PaymentAPI: Poll payment status with paymentId
  PaymentAPI-->>CreditPage: Return payment status
  CreditPage->>CreditStore: Store refreshed credit balance

Loading

Possibly related issues

• [Feat] 포트원 결제 연동 API BackEnd#170 — Both changes modify the payment integration flow.

Possibly related PRs

• JobDri-Developer/FrontEnd#66 — The PR modifies the same credit payment API, page, card, and navigation flow.
• JobDri-Developer/FrontEnd#115 — Both PRs modify payment-status polling and toast handling.
• JobDri-Developer/FrontEnd#116 — The PR modifies the same credit pages, card, and payment API.

Suggested labels: 🎨 UI, ⭐ Feature

Suggested reviewers: minnngo

✨ 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 feature/JDDEV-73-tosspay-fix

---

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