Traguild Payments

Traguild 서비스의 결제 기능을 담당하는 프론트엔드 모듈입니다. 토스 페이먼츠(Toss Payments) 위젯을 연동하여 결제 프로세스를 처리합니다.

기술 스택 (Tech Stack)

시작 가이드 (Getting Started)

이 프로젝트를 로컬 환경에서 실행하기 위한 방법입니다.

전제 조건 (Prerequisites)

• Node.js (LTS 버전 권장)
• Yarn 패키지 매니저

설치 (Installation)

의존성 패키지를 설치합니다.

yarn install

실행 (Running)

개발 서버를 실행합니다.

yarn dev

서버가 실행되면 브라우저에서 http://localhost:5173 (기본 포트)으로 접속하여 확인할 수 있습니다.

참고: CheckoutPage는 window.initialData를 통해 초기 주문 정보(orderName, orderPrice)를 주입받도록 설계되어 있습니다. 단독 실행 시 이 데이터가 없으면 에러가 발생할 수 있으므로 주의가 필요합니다.

프로젝트 구조 (Project Structure)

src 폴더 내의 주요 파일 및 역할은 다음과 같습니다.

파일명	설명
index.jsx	앱의 진입점(Entry point)으로, React Router를 구성하여 각 페이지(Checkout, Success, Fail)를 라우팅합니다.
Checkout.jsx	결제 페이지입니다. 토스 페이먼츠 위젯 SDK를 로드하고, 결제 UI 및 이용약관 UI를 렌더링하며 결제 요청을 수행합니다.
Success.jsx	결제 성공 시 리다이렉트되는 페이지입니다. 결제 승인 결과를 보여줍니다.
Fail.jsx	결제 실패 시 리다이렉트되는 페이지입니다. 에러 메시지와 실패 코드를 보여줍니다.

주요 기능 (Features)

1. 결제 준비: CheckoutPage에서 상품명과 가격 정보를 받아 결제 위젯을 초기화합니다.
2. 결제 진행: 사용자가 결제 수단을 선택하고 '결제하기' 버튼을 누르면 토스 페이먼츠 결제창을 호출합니다.
3. 결제 결과 처리:
   • 성공: successUrl로 이동하며, paymentKey, orderId, amount 등의 정보를 전달받아 최종 처리를 수행합니다.
   • 실패: failUrl로 이동하며, 에러 정보를 표시합니다.