valueit

결제 UI — Payments::CheckoutController + CompletionsController + 토스 결제위젯 + 성공/실패 페이지 + 테스트

## 목표 코호트 결제 UI. checkout 페이지(토스 결제위젯), 성공/실패 결과 페이지. ## 현재 상태 - Payments::CheckoutController 스텁 (show, create) - Payments::CompletionsController 스텁 (success, fail) - 라우트: `namespace :payments { get "/checkout/:plan", to: "checkout#show", as: :checkout; post "/checkout/:plan", to: "checkout#create"; get "/success", to: "completions#success"; get "/fail", to: "completions#fail" }` - Toss::PaymentService 구현 완료 (checkout_params, confirm) - Cohort 모델: name, price_cents, accepting_applications ## 구현 사항 ### 1. Payments::CheckoutController ```ruby class Payments::CheckoutController < ApplicationController def show @plan = params[:plan] @cohort = Cohort.find(params[:cohort_id]) if params[:cohort_id] service = Toss::PaymentService.new(user: Current.user, plan: @plan, cohort: @cohort) @checkout_params = service.checkout_params end def create # checkout → 토스 결제창으로 리다이렉트 (JS에서 처리) redirect_to payments_checkout_path(params[:plan]) end end ``` ### 2. Payments::CompletionsController ```ruby class Payments::CompletionsController < ApplicationController def success # 토스 콜백: paymentKey, orderId, amount service = Toss::PaymentService.new(user: Current.user, plan: extract_plan, cohort: find_cohort) result = service.confirm(payment_key: params[:paymentKey], order_id: params[:orderId]) if result.success? redirect_to dashboard_path, notice: I18n.t("payments.success") else redirect_to dashboard_path, alert: result.error_message end end def fail @error_code = params[:code] @error_message = params[:message] end private def extract_plan params[:orderId]&.split("-")&.[](1) || "cohort" end def find_cohort # orderId에서 cohort 정보 추출 또는 세션에서 Cohort.accepting.order(:created_at).last end end ``` ### 3. 뷰 **payments/checkout/show.html.erb**: - 결제 정보 요약 (코호트명, 금액) - 토스 결제위젯 JS 스크립트 로드 (CDN) - "결제하기" 버튼 → 토스 결제창 호출 - 다크 테마 **payments/completions/success.html.erb** (리다이렉트이므로 뷰 불필요할 수 있음) **payments/completions/fail.html.erb**: - 에러 코드, 메시지 표시 - "다시 시도" 버튼 → checkout - 다크 테마 ### 4. 토스 결제위젯 Stimulus Controller - `app/javascript/controllers/toss_payment_controller.js` - data에서 checkout_params 읽어 토스 SDK 호출 - 또는 인라인 스크립트로 간단 구현 ### ⚠️ 주의 - payments/checkout, completions 범위만 (developer-1은 payments/webhooks 작업 중) - Pro 관련 UI 없음 (코호트만) - 토스 JS SDK URL: https://js.tosspayments.com/v2/standard - 한국어 Flash 메시지 ### 테스트 - CheckoutController: show (checkout_params 존재), 인증 필요 - CompletionsController: success (confirm 호출 mock), fail (에러 표시) ### 완료 기준 - checkout 페이지 (결제 정보 + 토스 위젯) - 성공/실패 결과 페이지 - bin/rails test 전체 통과