[JDDEV-74] [JDDEV-73] 크레딧 결제 로직 구현

[yiyoonseo]

🔗 관련 이슈

• Close #

📝 개요

• 결제 로직 구현

⌨️ 작업 상세 내용

크레딧 API 연동

• 크레딧 잔액 조회 (GET /api/payments/credits/me)
• 크레딧 거래 내역 조회 (GET /api/payments/credits/me/transactions)
• 크레딧 플랜 목록 조회 (GET /api/payments/plans)

토스 결제 흐름 구현

• 결제 준비 (POST /api/payments/prepare) → 토스 결제창 오픈
• 결제 완료 후 /credit?paymentKey=... 리디렉션 수신
• 결제 승인 (POST /api/payments/confirm) 자동 처리

UI 연동

• LNB 하단 크레딧 잔액 실시간 표시
• 크레딧 페이지 플랜 카드 목록 렌더링 및 할인율 계산
• 크레딧 이용 내역 테이블 연동
• LNB 접기/펼치기 트랜지션 애니메이션 추가

변경 파일

• src/lib/api/credit.ts — API 함수 정의
• src/components/common/lnb/Lnb.tsx — 잔액 표시 / 애니메이션
• src/components/common/modal/ModalPurchase.tsx — 토스 결제 연동
• src/components/common/cards/CreditCard.tsx — planCode 연결
• src/app/credit/page.tsx — 플랜 렌더링 / confirm 처리
• src/components/common/credit/Useage.tsx — 거래 내역 연동

📸 스크린샷 (UI 변경 시)

🔍 리뷰 요구사항 (Reviewers)

• [ ]

⚠️ 로컬 실행 시 유의사항

Summary by CodeRabbit

• New Features
  • Added credit purchase functionality with integrated payment processing
  • Dynamic credit plan options now displayed based on available offers
  • Real-time credit balance visibility throughout the app
  • Credit transaction history page showing all purchase and usage activity
  • Automated payment confirmation workflow for seamless purchases

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

This PR integrates the Toss Payments SDK to enable dynamic credit purchases. It adds a new credit API module, converts the credit page to fetch and render plans dynamically, wires the modal to handle payment confirmation through Toss, refactors credit balance fetching into component state, and introduces a new transaction history component.

Changes

Credit Purchase and Transaction System

Layer / File(s)	Summary
Credit API module and types jobdri/src/lib/api/credit.ts	Defines TransactionType, CreditTransaction, PlanCode, and CreditPlan types; implements fetchCreditBalance(), fetchCreditTransactions(), fetchCreditPlans(), preparePurchase(), and confirmPurchase() HTTP wrappers.
Toss Payments SDK dependency jobdri/package.json	Adds @tosspayments/tosspayments-sdk@^2.7.0 to dependencies.
Credit page with dynamic plan rendering jobdri/src/app/credit/page.tsx	Fetches credit plans on mount, computes base price and discount rates, renders dynamic CreditCard instances per plan, and conditionally triggers purchase confirmation when URL contains paymentKey, orderId, and amount.
ModalPurchase with Toss Payments integration jobdri/src/components/common/modal/ModalPurchase.tsx	Updates props to require planCode and remove onConfirm callback; adds internal async payment flow that calls preparePurchase(), loads Toss SDK, initiates CARD payment, and manages loading state throughout the process.
CreditCard component updated for planCode jobdri/src/components/common/cards/CreditCard.tsx	Adds required planCode prop, passes it to ModalPurchase, removes intermediate handleConfirm logic, makes discount display conditional, and adjusts button styling for layout.
Lnb component fetches credit balance jobdri/src/components/common/lnb/Lnb.tsx	Removes creditCount from props, adds local state, and fetches credit balance on mount via fetchCreditBalance().
Useage transaction history component jobdri/src/components/common/credit/Useage.tsx	New component that fetches credit transactions on mount, formats each with localized date/time and Korean type labels, and renders them in a table.

Sequence Diagram

sequenceDiagram
  participant User
  participant CreditPage
  participant API as credit API
  participant CreditCard
  participant ModalPurchase
  participant TossSDK as Toss Payments SDK
  
  User->>CreditPage: visit page
  CreditPage->>API: fetchCreditPlans()
  API-->>CreditPage: plans[]
  CreditPage->>CreditPage: render CreditCard per plan
  
  User->>CreditCard: click purchase button
  CreditCard->>ModalPurchase: open modal with planCode
  
  User->>ModalPurchase: click confirm
  ModalPurchase->>API: preparePurchase(planCode)
  API-->>ModalPurchase: PreparePaymentResult{orderId, clientKey, amount...}
  
  ModalPurchase->>TossSDK: loadTossPayments(clientKey)
  ModalPurchase->>TossSDK: createPayment() + requestPayment(CARD)
  TossSDK-->>ModalPurchase: payment result
  
  alt payment success
    ModalPurchase->>API: confirmPurchase(paymentKey, orderId, amount)
    API-->>ModalPurchase: void (success)
    ModalPurchase->>ModalPurchase: close modal
  else payment error
    ModalPurchase->>ModalPurchase: clear loading, show error
  end

Loading

🎯 3 (Moderate) | ⏱️ ~20 minutes

🐰 A payment path hops along so free,
With Toss and plans for credits three,
Dynamic cards and states so true,
Transaction rows in UI's view! ✨

🚥 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	The title clearly identifies the main objectives: implementing credit payment logic (크레딧 결제 로직 구현) and references the associated issue numbers, directly matching the PR's primary purpose.
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.

_{✏️ 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 feature/JDDEV-74-credit-api

---

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