관리자 커스텀 결제 링크 UI (컨트롤러 + 뷰 + 사이드바)

ID: 8de027de-288d-48df-8b74-546cc2cf8262

높음 완료

## 작업 내용
관리자가 커스텀 결제 링크를 생성하고 관리할 수 있는 Admin UI를 구현합니다.

## 1. Admin::CustomPaymentLinksController
- BaseController 상속 (Admin::BaseController)
- index: 결제 링크 목록 (최신순, 페이지네이션 없이 전체)
- new: 생성 폼
- create: CustomPaymentLinks::CreateService 호출
- cancel: CustomPaymentLinks::CancelService 호출
- qr_code: QR 코드 SVG 반환

## 2. 뷰 (Admin Views)
### index.html.erb - 결제 링크 목록
참고 이미지의 UI를 구현:
- 헤더: "생성된 결제 링크 목록", "총 N개의 커스텀 결제 링크"
- 테이블 컬럼: 상품명, 금액, 상태, 생성일, 만료일, 작업
- 상태 배지:
- 대기중 (pending): 회색 배경, "⏳ 대기중"
- 결제완료 (completed): 보라색 배경, "✅ 결제완료"
- 취소됨 (canceled): 회색 텍스트, "⊘ 취소됨"
- 작업 컬럼:
- 대기중: "복사" 버튼 + "취소" 버튼 (빨간색)
- 결제완료: "결제완료: YYYY.MM.DD" 텍스트
- 취소됨: 작업 없음
- "새 결제 링크 만들기" 버튼 (상단)
- 금액은 number_to_currency(amount, unit: "₩", precision: 0) 형식

### new.html.erb - 결제 링크 생성 폼
참고 이미지의 UI를 구현:
- 제목: "커스텀 결제 링크 생성"
- 설명: "관리자가 임의의 금액으로 결제 링크를 생성할 수 있습니다. 생성된 링크는 고객에게 공유하여 결제를 받을 수 있습니다."
- 폼 필드:
- 상품명 * (text_field, placeholder: "예: 1:1 코칭 컨설팅")
- 결제 금액 (원) * (number_field, placeholder: "예: 150000")
- 상세 설명 (선택) (text_area, placeholder: "예: 2시간 1:1 강점 코칭 세션")
- 유효 기간 (select: 7일/14일/30일)
- "결제 링크 생성" 버튼 (보라색, 전체 너비)

### QR 코드 기능
- rqrcode gem 사용 (이미 Gemfile에 있음)
- 링크 목록에서 "QR" 아이콘 클릭 시 모달/팝오버로 QR 표시
- Stimulus controller로 모달 토글

### 링크 복사 기능
- "복사" 버튼 클릭 시 클립보드에 결제 링크 URL 복사
- navigator.clipboard.writeText() 사용
- Stimulus controller: clipboard_controller.js

## 3. 사이드바 수정
app/views/admin/shared/_sidebar.html.erb에 추가:
- workspaces 메뉴 아래에 추가
- icon: "payments" (결제 아이콘 SVG path 추가)
- label: "커스텀 결제"
- active: controller_name == "custom_payment_links"
- _nav_item.html.erb의 icons 해시에 "payments" 아이콘 추가

## 4. i18n
config/locales/ko.yml에 추가:
```yaml
admin:
nav:
custom_payments: "커스텀 결제"
custom_payment_links:
title: "커스텀 결제 링크"
subtitle: "총 %{count}개의 커스텀 결제 링크"
new_link: "새 결제 링크 만들기"
create_title: "커스텀 결제 링크 생성"
create_description: "관리자가 임의의 금액으로 결제 링크를 생성할 수 있습니다..."
form:
title: "상품명"
title_placeholder: "예: 1:1 코칭 컨설팅"
amount: "결제 금액 (원)"
amount_placeholder: "예: 150000"
description: "상세 설명 (선택)"
description_placeholder: "예: 2시간 1:1 강점 코칭 세션"
expires_in: "유효 기간"
submit: "결제 링크 생성"
status:
pending: "대기중"
completed: "결제완료"
canceled: "취소됨"
actions:
copy: "복사"
cancel: "취소"
qr: "QR"
flash:
created: "결제 링크가 생성되었습니다."
canceled: "결제 링크가 취소되었습니다."
copied: "링크가 클립보드에 복사되었습니다."
```

## 5. 기존 UI 패턴 참고
- 테이블: bg-white rounded-xl shadow-sm border, thead bg-surface-emphasis, tr hover:bg-surface-emphasis
- 배지: inline-flex items-center px-2 py-0.5 rounded text-xs font-medium
- 버튼: px-4 py-2 bg-admin-primary text-white rounded-lg
- 폼: w-full rounded-lg border-border-default focus:border-admin-primary

## 담당 파일
- app/controllers/admin/custom_payment_links_controller.rb
- app/views/admin/custom_payment_links/index.html.erb
- app/views/admin/custom_payment_links/new.html.erb
- app/views/admin/shared/_sidebar.html.erb (수정)
- app/views/admin/shared/_nav_item.html.erb (아이콘 추가)
- config/locales/ko.yml (admin 섹션 수정)
- app/javascript/controllers/clipboard_controller.js (새 파일)
- app/javascript/controllers/qr_modal_controller.js (새 파일)
- test/controllers/admin/custom_payment_links_controller_test.rb

## 완료 기준
- Admin 결제 링크 목록 페이지 작동
- 생성 폼 작동 (유효성 검증 포함)
- 취소 기능 작동
- 복사 기능 작동
- QR 코드 표시
- 사이드바 메뉴 표시
- 컨트롤러 테스트 통과

첨부 이미지

이미지 추가 (Ctrl+V로 붙여넣기 또는 클릭)

JPEG, PNG, GIF, WebP / 최대 10MB

담당자: 관리자-UI
생성일: 2026년 02월 28일 07:20

활동 로그

  • 팀리드 상태 변경: 리뷰 → 완료

    2026년 02월 28일 07:39:54

  • 관리자-UI 상태 변경: 진행 중 → 리뷰

    2026년 02월 28일 07:36:06

  • 관리자-UI 관리자 커스텀 결제 링크 UI 구현 완료, 테스트 9/9 통과

    2026년 02월 28일 07:35:59

    상세 보기

    ## 생성된 파일
    - `app/controllers/admin/custom_payment_links_controller.rb` - 컨트롤러 (index, new, create, cancel, qr_code)
    - `app/views/admin/custom_payment_links/index.html.erb` - 목록 페이지 (테이블 + QR 모달)
    - `app/views/admin/custom_payment_links/new.html.erb` - 생성 폼
    - `app/javascript/controllers/qr_modal_controller.js` - QR 모달 Stimulus 컨트롤러
    - `test/integration/admin/custom_payment_links_test.rb` - 통합 테스트 9개

    ## 수정된 파일
    - `app/views/admin/shared/_sidebar.html.erb` - 커스텀 결제 메뉴 추가
    - `app/views/admin/shared/_nav_item.html.erb` - custom_payments 아이콘 추가
    - `config/locales/ko.yml` - i18n 키 추가 (nav + custom_payment_links 전체)

    ## 재사용한 기존 코드
    - `clipboard_controller.js` - 복사 기능
    - Admin::BaseController - 인증/권한
    - 기존 admin 테이블 UI 패턴

    ## 테스트 결과
    - 9 runs, 31 assertions, 0 failures, 0 errors

  • 관리자-UI 기존 구조 분석 완료, 코드 작성 시작

    2026년 02월 28일 07:27:49

    상세 보기

    ## 분석 완료 항목
    - Admin::BaseController 패턴 확인
    - 기존 payments/users 컨트롤러 패턴 확인
    - _sidebar.html.erb, _nav_item.html.erb 구조 확인
    - clipboard_controller.js, qr_code_controller.js 이미 존재 확인
    - 기존 integration test 패턴 확인 (sign_in_as)
    - ko.yml 구조 확인

    ## 재사용할 것
    - Admin::BaseController (인증/권한)
    - clipboard_controller.js (복사 기능)
    - qr_code_controller.js (QR 다운로드/복사)
    - 기존 admin 테이블 UI 패턴

  • 관리자-UI 티켓 클레임 완료

    2026년 02월 28일 07:27:04