관리자 커스텀 결제 링크 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
활동 로그
-
팀팀리드 상태 변경: 리뷰 → 완료
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