[JDDEV-74] [JDDEV-73] Fix: 빌드 에러 수정

[yiyoonseo]

🔗 관련 이슈

• Close #

📝 개요

⌨️ 작업 상세 내용

• [ ]
• [ ]

💡 코드 설명 및 참고사항

📸 스크린샷 (UI 변경 시)

🔍 리뷰 요구사항 (Reviewers)

• [ ]

⚠️ 로컬 실행 시 유의사항

Summary by CodeRabbit

• Refactor
  • Improved credit page architecture by restructuring components for enhanced performance and code organization.

[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: f7197d57-959d-478e-a41b-dbaaf54ca4de

📥 Commits

Reviewing files that changed from the base of the PR and between 10f0b03 and 39f1835.

📒 Files selected for processing (2)

• jobdri/src/app/credit/CreditPageClient.tsx
• jobdri/src/app/credit/page.tsx

---

📝 Walkthrough

Walkthrough

A new CreditPageClient component is extracted with credit plan fetching, discount calculation, and purchase confirmation logic. The parent CreditPage is refactored into a Suspense-wrapped wrapper that renders the client component, moving all state management and side effects downstream.

Changes

Credit Page Client Component Extraction

Layer / File(s)	Summary
Client component setup and discount logic jobdri/src/app/credit/CreditPageClient.tsx	Imports React hooks, UI components (CreditCard, Useage), and credit API functions. Defines calcDiscountRate helper that computes percentage discount strings or returns empty string when no discount applies.
State management and purchase flow jobdri/src/app/credit/CreditPageClient.tsx	Initializes plans state, fetches credit plans on first render, and monitors URL search parameters (paymentKey, orderId, amount) to trigger confirmPurchase when all are present. Both API calls silently ignore errors.
CreditCard rendering with discount display jobdri/src/app/credit/CreditPageClient.tsx	Derives base price from the ONE_TIME plan with numeric fallback, computes localized price strings and discount rates for each plan, and renders a list of CreditCard components alongside the Useage section.
Page wrapper refactoring jobdri/src/app/credit/page.tsx	Converts CreditPage from a full client-side component into a lightweight Suspense boundary that renders CreditPageClient, moving all state management, API calls, and rendering logic to the client component.

Sequence Diagram

sequenceDiagram
  participant Page as CreditPage
  participant Client as CreditPageClient
  participant API as Credit API
  participant URL as Search Params
  
  Page->>Client: render inside Suspense
  Client->>API: fetchCreditPlans()
  API-->>Client: plans[]
  Client->>Client: compute basePricePerUnit from ONE_TIME
  Client->>Client: calcDiscountRate for each plan
  Client-->>Page: render CreditCard list
  URL->>Client: paymentKey, orderId, amount
  Client->>API: confirmPurchase(paymentKey, orderId, amount)
  API-->>Client: (ignore errors)

Loading

🎯 2 (Simple) | ⏱️ ~10 minutes

🐰 A client component hops in to handle credit plans,
Discounts calculated with careful plans,
The parent page delegates with grace,
Purchase confirmation finds its place! ✨

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