feat(server+web+desktop): Phase 3.2-B Payple 결제 연동 + 대시보드 Premium 상태 표시
Payple PG 연동: - _shared/payple.ts: Payple API 래퍼 (auth/billing/cancel/deleteBillingKey) - payple-checkout Edge Function: 빌링키 결제 + 구독 활성화 - payple-webhook Edge Function: 결제완료/취소 이벤트 - payple-manage Edge Function: 구독 취소 (빌링키 해지) - DB migration: payment_provider + payple_payer_id + payple_pay_oid - 웹 billing 페이지: Payple JS SDK 결제창 + 관리 버튼 (Stripe 대체) - Electron LicenseModal: shell.openExternal → 웹 결제 페이지 대시보드 Premium 상태: - CrtDisplay services에 PREMIUM LLM LED 추가 - 백엔드 인디케이터 카드 (Local/Premium) + 티어 카드 - 사용량 섹션: 전 티어 표시 + 모델별 Premium 쿼터 - 12개 locale × 14개 i18n 키
This commit is contained in:
윤찬
parent
b8cb665264
commit
c9baf031c9
27 changed files with 1318 additions and 98 deletions
165
apps/web/src/components/billing/payple-checkout-button.tsx
Normal file
165
apps/web/src/components/billing/payple-checkout-button.tsx
Normal file
|
|
@ -0,0 +1,165 @@
|
|||
'use client'
|
||||
|
||||
// apps/web/src/components/billing/payple-checkout-button.tsx
|
||||
// Payple 결제창 호출 → 빌링키 획득 → payple-checkout Edge Function 호출
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import { Button, CircularProgress, Alert, Box } from '@mui/material'
|
||||
import Script from 'next/script'
|
||||
import { getSupabaseBrowserClient } from '@/lib/supabase-browser'
|
||||
|
||||
// Payple JS SDK 타입 (전역 함수)
|
||||
declare global {
|
||||
interface Window {
|
||||
PaypleCpayAuthCheck: (obj: Record<string, unknown>) => void
|
||||
}
|
||||
}
|
||||
|
||||
interface PaypleCheckoutButtonProps {
|
||||
tier: 'pro' | 'pro_plus'
|
||||
}
|
||||
|
||||
// 테스트 환경 감지: 환경변수가 없거나 test면 테스트 모드
|
||||
const PAYPLE_CLIENT_KEY = process.env.NEXT_PUBLIC_PAYPLE_CLIENT_KEY ?? 'test_DF55F29DA654A8CBC0F0A9DD4B556486'
|
||||
const IS_TEST = PAYPLE_CLIENT_KEY.startsWith('test_')
|
||||
const SDK_URL = IS_TEST
|
||||
? 'https://democpay.payple.kr/js/v1/payment.js'
|
||||
: 'https://cpay.payple.kr/js/v1/payment.js'
|
||||
|
||||
export function PaypleCheckoutButton({ tier }: PaypleCheckoutButtonProps): React.ReactElement {
|
||||
const [busy, setBusy] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [success, setSuccess] = useState(false)
|
||||
const [sdkReady, setSdkReady] = useState(false)
|
||||
|
||||
// SDK가 이미 로드되어 있는지 확인
|
||||
useEffect(() => {
|
||||
if (typeof window !== 'undefined' && typeof window.PaypleCpayAuthCheck === 'function') {
|
||||
setSdkReady(true)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const handleCheckout = useCallback(async () => {
|
||||
setError(null)
|
||||
setSuccess(false)
|
||||
|
||||
if (!sdkReady || typeof window.PaypleCpayAuthCheck !== 'function') {
|
||||
setError('결제 모듈 로딩 중입니다. 잠시 후 다시 시도해주세요.')
|
||||
return
|
||||
}
|
||||
|
||||
const supabase = getSupabaseBrowserClient()
|
||||
const { data: { session } } = await supabase.auth.getSession()
|
||||
|
||||
if (!session) {
|
||||
setError('로그인이 필요합니다')
|
||||
return
|
||||
}
|
||||
|
||||
setBusy(true)
|
||||
|
||||
try {
|
||||
// Payple 결제창 호출 (SPA 콜백 패턴)
|
||||
const obj: Record<string, unknown> = {
|
||||
clientKey: PAYPLE_CLIENT_KEY,
|
||||
PCD_PAY_TYPE: 'card',
|
||||
PCD_PAY_WORK: 'AUTH', // 카드 등록만 (빌링키 발급)
|
||||
PCD_CARD_VER: '01', // 정기결제용
|
||||
PCD_PAY_GOODS: tier === 'pro_plus' ? 'D3RO Voice Pro+' : 'D3RO Voice Pro',
|
||||
PCD_PAY_TOTAL: tier === 'pro_plus' ? 29900 : 9900,
|
||||
PCD_PAYER_NO: session.user.id,
|
||||
PCD_PAYER_EMAIL: session.user.email ?? '',
|
||||
PCD_RST_URL: '/billing', // 상대 경로 → callbackFunction 사용
|
||||
callbackFunction: async (result: Record<string, string>) => {
|
||||
try {
|
||||
if (result['PCD_PAY_RST'] !== 'success') {
|
||||
setError(result['PCD_PAY_MSG'] ?? '결제가 취소되었습니다')
|
||||
setBusy(false)
|
||||
return
|
||||
}
|
||||
|
||||
const payerId = result['PCD_PAYER_ID']
|
||||
if (!payerId) {
|
||||
setError('빌링키를 받지 못했습니다')
|
||||
setBusy(false)
|
||||
return
|
||||
}
|
||||
|
||||
// Edge Function 호출: 빌링키로 첫 결제 실행
|
||||
const response = await fetch(
|
||||
`${process.env.NEXT_PUBLIC_SUPABASE_URL}/functions/v1/payple-checkout`,
|
||||
{
|
||||
method: 'POST',
|
||||
headers: {
|
||||
Authorization: `Bearer ${session.access_token}`,
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
payer_id: payerId,
|
||||
tier,
|
||||
pcd_pay_cardname: result['PCD_PAY_CARDNAME'],
|
||||
pcd_pay_cardnum: result['PCD_PAY_CARDNUM'],
|
||||
}),
|
||||
}
|
||||
)
|
||||
|
||||
if (!response.ok) {
|
||||
const txt = await response.text()
|
||||
throw new Error(`결제 처리 실패: ${response.status} ${txt}`)
|
||||
}
|
||||
|
||||
setSuccess(true)
|
||||
// 2초 후 페이지 리로드하여 구독 상태 반영
|
||||
setTimeout(() => {
|
||||
window.location.reload()
|
||||
}, 2000)
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : '알 수 없는 오류')
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
window.PaypleCpayAuthCheck(obj)
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : '알 수 없는 오류')
|
||||
setBusy(false)
|
||||
}
|
||||
}, [sdkReady, tier])
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Script
|
||||
src={SDK_URL}
|
||||
strategy="afterInteractive"
|
||||
onLoad={() => setSdkReady(true)}
|
||||
onError={() => setError('결제 모듈 로드 실패')}
|
||||
/>
|
||||
|
||||
{success ? (
|
||||
<Alert severity="success" variant="filled" sx={{ fontSize: 13 }}>
|
||||
결제가 완료되었습니다! 잠시 후 새로고침됩니다.
|
||||
</Alert>
|
||||
) : (
|
||||
<>
|
||||
<Button
|
||||
fullWidth
|
||||
variant="contained"
|
||||
size="large"
|
||||
onClick={() => void handleCheckout()}
|
||||
disabled={busy || !sdkReady}
|
||||
startIcon={busy ? <CircularProgress size={16} color="inherit" /> : null}
|
||||
>
|
||||
{busy ? '처리 중...' : '업그레이드'}
|
||||
</Button>
|
||||
{error && (
|
||||
<Alert severity="error" variant="outlined" sx={{ mt: 1, fontSize: 11 }}>
|
||||
{error}
|
||||
</Alert>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
101
apps/web/src/components/billing/payple-manage-button.tsx
Normal file
101
apps/web/src/components/billing/payple-manage-button.tsx
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
'use client'
|
||||
|
||||
// apps/web/src/components/billing/payple-manage-button.tsx
|
||||
// Payple 구독 관리 — payple-manage Edge Function 호출 (구독 취소)
|
||||
|
||||
import { useState } from 'react'
|
||||
import { Button, CircularProgress, Alert, Box, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions } from '@mui/material'
|
||||
import SettingsIcon from '@mui/icons-material/Settings'
|
||||
import { getSupabaseBrowserClient } from '@/lib/supabase-browser'
|
||||
|
||||
export function PaypleManageButton(): React.ReactElement {
|
||||
const [busy, setBusy] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [confirmOpen, setConfirmOpen] = useState(false)
|
||||
const [success, setSuccess] = useState(false)
|
||||
|
||||
async function handleCancel(): Promise<void> {
|
||||
setConfirmOpen(false)
|
||||
setError(null)
|
||||
setBusy(true)
|
||||
try {
|
||||
const supabase = getSupabaseBrowserClient()
|
||||
const { data: { session } } = await supabase.auth.getSession()
|
||||
|
||||
if (!session) {
|
||||
setError('로그인이 필요합니다')
|
||||
return
|
||||
}
|
||||
|
||||
const response = await fetch(
|
||||
`${process.env.NEXT_PUBLIC_SUPABASE_URL}/functions/v1/payple-manage`,
|
||||
{
|
||||
method: 'POST',
|
||||
headers: {
|
||||
Authorization: `Bearer ${session.access_token}`,
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ action: 'cancel' }),
|
||||
}
|
||||
)
|
||||
|
||||
if (!response.ok) {
|
||||
const txt = await response.text()
|
||||
throw new Error(`구독 취소 실패: ${response.status} ${txt}`)
|
||||
}
|
||||
|
||||
const data = await response.json() as { success?: boolean; cancel_at?: string }
|
||||
if (data.success) {
|
||||
setSuccess(true)
|
||||
setTimeout(() => window.location.reload(), 2000)
|
||||
}
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : '알 수 없는 오류')
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
if (success) {
|
||||
return (
|
||||
<Alert severity="info" variant="outlined" sx={{ fontSize: 12 }}>
|
||||
구독이 취소되었습니다. 현재 결제 기간이 끝날 때까지 이용 가능합니다.
|
||||
</Alert>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Button
|
||||
variant="outlined"
|
||||
size="small"
|
||||
startIcon={busy ? <CircularProgress size={14} /> : <SettingsIcon />}
|
||||
onClick={() => setConfirmOpen(true)}
|
||||
disabled={busy}
|
||||
>
|
||||
구독 관리
|
||||
</Button>
|
||||
|
||||
<Dialog open={confirmOpen} onClose={() => setConfirmOpen(false)}>
|
||||
<DialogTitle>구독 취소</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText>
|
||||
정말 구독을 취소하시겠습니까? 현재 결제 기간이 끝날 때까지는 계속 이용할 수 있습니다.
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setConfirmOpen(false)}>돌아가기</Button>
|
||||
<Button onClick={() => void handleCancel()} color="error" variant="contained">
|
||||
구독 취소
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
{error && (
|
||||
<Alert severity="error" variant="outlined" sx={{ mt: 1, fontSize: 11 }}>
|
||||
{error}
|
||||
</Alert>
|
||||
)}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue