feat: 토스페이먼츠 결제 fade-out → 카카오 채널/문의하기로 전환

결제 방식 변경:
- ai-kit: PaymentButton 2개 → KAKAO_CHANNEL_URL 있으면 카카오버튼,
  없으면 ContactModal로 폴백. 가격(19,900원/월) 표시 유지
- prompt: PaymentButton → 카카오버튼 or openModal() 호출로 교체
  문의 시 샘플 파일 미리 제공 안내 유지
- saju: AI 해석 hasPaid=true 고정 → 무료 제공으로 전환
  사주 페이지 결제 버튼 → '무료로 사주 분석하기' 링크
  SajuAISection PaymentButton → 비활성화 주석 처리

환경변수 추가 (선택):
- NEXT_PUBLIC_KAKAO_CHANNEL_URL: 카카오 채널 채팅 링크
- NEXT_PUBLIC_TOSS_ME_URL: toss.me 개인 송금 링크
- 토스페이먼츠 PG 키 주석 처리 (재활성화 시 해제 가능)

사주 hero AI 패턴 제거:
- radial gradient orb 3개, blur 배경 → diagonal pattern
- 그래디언트 텍스트 → amber-400 단색

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-02 01:00:49 +09:00
parent 7c59dafaeb
commit 50872de773
5 changed files with 109 additions and 64 deletions

View File

@@ -2,7 +2,7 @@
import { useEffect, useState } from 'react';
import Link from 'next/link';
import PaymentButton from '../components/PaymentButton';
// PaymentButton 비활성화 — 토스페이먼츠 결제 일시 중단
import { createClient } from '@/lib/supabase/client';
const faqItems = [
@@ -77,22 +77,16 @@ export default function SajuPage() {
return (
<div className="min-h-full bg-[#f0f5ff]">
{/* ─── Hero ─── */}
<div className="relative overflow-hidden bg-gradient-to-br from-[#04102b] via-[#0a1f5c] to-[#04102b] px-6 py-14 lg:px-12">
<div className="absolute inset-0 opacity-[0.06]"
style={{ backgroundImage: 'radial-gradient(circle, #a78bfa 1px, transparent 1px)', backgroundSize: '30px 30px' }} />
<div className="absolute right-0 top-0 w-96 h-96 rounded-full bg-violet-500/10 blur-3xl -translate-y-1/2 translate-x-1/3" />
<div className="absolute left-1/3 bottom-0 w-64 h-64 rounded-full bg-amber-400/8 blur-3xl translate-y-1/2" />
<div className="relative overflow-hidden bg-[#04102b] px-6 py-14 lg:px-12" style={{ backgroundImage: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 40px)' }}>
<div className="relative max-w-3xl mx-auto text-center">
<div className="inline-flex items-center gap-2 bg-violet-400/10 border border-violet-400/25 text-violet-300 text-xs font-semibold px-4 py-1.5 rounded-full mb-5 tracking-wide">
<div className="relative max-w-3xl mx-auto">
<div className="flex items-center gap-2 mb-5">
<span className="w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse" />
× AI ·
<span className="text-violet-300/70 text-xs font-mono tracking-widest uppercase"> × AI · </span>
</div>
<h1 className="text-4xl md:text-5xl font-extrabold text-white leading-tight mb-5 tracking-tight">
AI가 <br />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-[#c4b5fd] to-[#fbbf24]">
</span>
<span className="text-amber-400"></span>
</h1>
<p className="text-blue-200/70 text-base md:text-lg leading-relaxed mb-8 max-w-xl mx-auto">
AI .<br />
@@ -288,23 +282,14 @@ export default function SajuPage() {
))}
</ul>
<div className="mt-6 pt-5 border-t border-white/10 relative">
<div className="text-2xl font-extrabold text-amber-400">4,900</div>
<div className="text-xs text-blue-300/70 mt-1 mb-4">1 · </div>
{hasPaid ? (
<Link
href="/saju/input"
className="block w-full text-center py-3 rounded-xl text-sm font-bold transition bg-amber-400 text-[#04102b] hover:bg-amber-300"
>
</Link>
) : (
<PaymentButton
productId="saju_detail"
className="block w-full text-center py-3 rounded-xl text-sm font-bold transition bg-amber-400 text-[#04102b] hover:bg-amber-300"
>
AI
</PaymentButton>
)}
<div className="text-lg font-bold text-emerald-400 mb-1"> </div>
<div className="text-xs text-blue-300/70 mt-1 mb-4"> · 12 AI </div>
<Link
href="/saju/input"
className="block w-full text-center py-3 rounded-xl text-sm font-bold transition bg-amber-400 text-[#04102b] hover:bg-amber-300"
>
</Link>
</div>
</div>
</div>