[Feat] XRP 결제 목록 및 상세 패널 페이지 구현#21
Merged
Merged
Conversation
- escrowPayments: getList, approveEvent 추가 및 approve action 파라미터 지원 - endpoints에 approveEvent 경로 추가 - useBuyer, useCompany, useEscrowPaymentList/useEscrowPayment 등 단건/목록 조회 hooks 추가
- 에스크로 결제 단건 상세, 항목별 승인 UI, 결제 개시 동작 - 양측 지갑 주소는 에스크로 결제 응답 필드와 내 프로필에서 직접 추출
- PaymentsPage 위치를 src/pages/payment/ 하위로 정리 - 인라인 히어로 마크업을 공용 PageHero 컴포넌트로 교체 - 헤더 XRP Payment 네비게이션을 /payments/create → /payments로 변경
payments_hero_title 한글 locale이 영문과 동일하게 노출되던 문제 수정
buyerId/sellerWalletAddress 두 필드로 나뉘어 있던 구조를 백엔드 API 스펙(CreateEscrowPaymentDto)에 맞춰 counterpartyWalletAddress 하나로 통합. 세션 기반 인증으로 buyerId는 서버에서 식별.
- 에스크로 결제 개시 확인 모달 추가 (EscrowPaymentModal) - buyer가 APPROVED 상태에서 결제를 개시할 수 있는 버튼/모달 흐름 구현 - 이전 에스크로가 모두 RELEASED여야 다음 항목 이벤트 승인 가능하도록 잠금 처리 - 승인/이벤트승인/결제개시 hook에 toast 알림 및 잔액 부족 메세지 처리 추가 - 하드코딩된 영문 문자열을 i18n으로 분리 (모달/디테일 키 추가) - 식별 기준을 companyId → role 기반 isBuyer로 단순화
- 결제 항목 진행 상태를 시각화하는 EscrowProgressBar 컴포넌트 추가 - PaymentsPage에서 PROCESSING/ACTIVE 상태는 progress bar로 렌더링, COMPLETED/CANCELLED는 별도 라벨로 표시 - 보낸/받은 탭은 응답에 sender 식별 필드가 없어 프론트 단독 분류가 불가능하므로, 백엔드 group 파라미터 스펙(ongoing/done)에 맞춰 탭의 의미를 진행 상태 그룹으로 재정의 - escrowPaymentsApi.getList 파라미터를 group/status enum으로 타이트닝 - 관련 i18n 키 추가 및 col_amount 줄바꿈 표시 적용
결제 개시 전용이던 모달을 ConfirmModal로 리네임/일반화. 제목·부제· 버튼 라벨을 props로 받아 다양한 확정 흐름에서 재사용할 수 있도록 변경. 파일 위치도 components/payment에서 components 루트로 이동. 취소 버튼 라벨도 짧게 정리.
구매자/판매자 확정 버튼 클릭 시 바로 approveEvent를 호출하지 않고 ConfirmModal로 한 번 더 확인받도록 EventRow에 모달 흐름 추가. event_confirm_modal_* i18n 키 추가.
framer-motion으로 tagline·hero 라인·description·CTA를 순차 fade+slide-up 하고, 강조 박스는 clipPath 좌→우 wipe로 박스와 텍스트가 함께 reveal되도록 처리.
각 단계 원이 scale 0.5→1 + 배경색 전환으로 등장, 점선은 clipPath 좌→우 wipe로 채워지면서 단계 간 stagger로 순차 reveal.
framer-motion animate()를 이용한 useCountUp 훅 추가. 0에서 totalAmountXrp 까지 ease-out으로 카운트업. paymentId가 바뀌면(다른 row 선택) 새 값에 맞춰 다시 한 번 재생.
- PaymentRow를 motion.tr로 변환, index 기반 0.04s stagger로 순차 마운트 - 우측 PaymentDetail 패널을 AnimatePresence mode="wait"로 감싸고 selectedId 변경 시 opacity + x 슬라이드로 cross-fade 전환
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (17)
📝 Walkthrough워크스루XRP 결제 목록 및 상세 패널 페이지를 새로 구현합니다. API 계층에서 스키마와 엔드포인트를 업데이트하고, 데이터 페칭용 React Query 훅을 추가하며, 모달과 진행률 표시줄 컴포넌트를 작성하고, 좌측 목록과 우측 상세 패널로 구성된 PaymentsPage를 구현합니다. 변경사항XRP 결제 API 및 데이터 페칭 계층
결제 UI 컴포넌트
국제화 및 지원 변경사항
sequenceDiagram
actor User
participant UI as PaymentsPage
participant Hooks as React Query<br/>useEscrowPaymentList
participant API as escrowPaymentsApi
participant Server as Backend API
User->>UI: 탭 선택 (Received/Sent)
UI->>Hooks: useEscrowPaymentList(group, page)
Hooks->>API: getList({group, page, limit})
API->>Server: GET /escrow-payments?group=...&page=...
Server-->>API: [{id, amount, status, escrows[]}, ...]
API-->>Hooks: 캐시 저장
Hooks-->>UI: 결제 목록 데이터
UI->>UI: 테이블 렌더링<br/>(EscrowProgressBar 상태)
User->>UI: 결제 행 클릭
UI->>UI: selectedId 설정
UI->>Hooks: useEscrowPayment(selectedId)
Hooks->>API: getById(selectedId)
API->>Server: GET /escrow-payments/{id}
Server-->>API: {id, amount, escrows[{id, events[]}]}
API-->>Hooks: 캐시 저장
Hooks-->>UI: 상세 데이터
UI->>UI: PaymentDetail 렌더링
User->>UI: 에스크로 이벤트<br/>확인 버튼 클릭
UI->>UI: ConfirmModal 표시
User->>UI: Confirm 클릭
UI->>Hooks: useApproveEscrowEvent<br/>(paymentId, escrowId, type)
Hooks->>API: approveEvent(...)
API->>Server: POST /escrow-payments/{id}/escrows/{escrowId}/events/{type}/approve
Server-->>API: {status: "success"}
API-->>Hooks: 결과
Hooks->>Hooks: 캐시 무효화<br/>(single payment)
Hooks-->>UI: 성공 토스트
UI->>UI: 이벤트 상태<br/>업데이트
예상 코드 리뷰 노력🎯 4 (복잡) | ⏱️ ~60분 관련 PR
시✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. 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. Comment |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🔍 PR 요약
🧾 관련 이슈
🛠️ 주요 변경 사항
에스크로 결제 페이지
PaymentDetail완성: 결제 개시 모달, 이벤트 확정 모달, 이전 에스크로 미완료 시 다음 이벤트 잠금, 토스트 알림, 하드코딩 영문 → i18n 분리PaymentsPage를pages/payment/하위로 이동 +PageHero적용EscrowProgressBar도입(PROCESSING/ACTIVE상태에서 항목별 진행률 시각화)group파라미터에 맞춤)API · 모델 정리
escrowPaymentsApi.getList:group: "ongoing" | "done"/statusenum으로 타입 타이트닝CreateEscrowPaymentDto:buyerId+sellerWalletAddress→counterpartyWalletAddress로 단일화 (세션 기반 인증으로 buyerId는 서버 식별)useEscrowPayments훅에 승인/이벤트 승인/결제 개시 토스트 알림 및 잔액 부족 메세지 처리 추가컴포넌트 리팩토링
EscrowPaymentModal→ 범용ConfirmModal로 일반화 (제목/부제/버튼 라벨 props),components/루트로 이동애니메이션
clipPath좌→우 wipeEscrowProgressBar: 각 단계 원 scale+색상 전환, 점선clipPathwipe로 단계 간 순차 revealPaymentDetail총 금액 0 →totalAmountXrpcount-up (useCountUp훅)index * 0.04s딜레이)AnimatePresence mode="wait"기반 slide-in / cross-fade부수 정리
MyInfo에서 소개/제품/웹사이트 입력 필드 제거 (수정 API 미지원 영역)SegmentedControl활성 탭 외곽선 제거🧠 의도 및 배경
Summary by CodeRabbit
새로운 기능
사용자 인터페이스 개선