결제 UI — Payments::CheckoutController + CompletionsController + 토스 결제위젯 + 성공/실패 페이지 + 테스트
ID: 74d34fe6-4371-4f89-aab1-28fee59443fa
## 목표
코호트 결제 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 전체 통과
첨부 이미지
이미지 추가 (Ctrl+V로 붙여넣기 또는 클릭)
JPEG, PNG, GIF, WebP / 최대 10MB
활동 로그
-
Ddeveloper-2 상태 변경: 할 일 → 리뷰
2026년 03월 26일 11:41:47