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

@@ -3,7 +3,7 @@
import { useState, useEffect, useRef } from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import PaymentButton from '@/app/components/PaymentButton';
// PaymentButton 비활성화 — 토스페이먼츠 결제 일시 중단, 무료 제공 중
interface BirthKey {
birth_year: number;
@@ -313,13 +313,13 @@ export default function SajuAISection({
))}
</div>
<PaymentButton
productId="saju_detail"
returnUrl={currentUrl}
className="inline-flex items-center gap-2 bg-gradient-to-r from-amber-500 to-amber-400 hover:from-amber-400 hover:to-amber-300 text-[#04102b] font-bold px-7 py-3 rounded-xl transition-all shadow-lg"
{/* 결제 일시 중단 — hasPaid=true이므로 이 분기는 표시되지 않음 */}
<a
href={process.env.NEXT_PUBLIC_KAKAO_CHANNEL_URL ?? '/freelance?service=AI사주분석'}
className="inline-flex items-center gap-2 bg-amber-400 hover:bg-amber-300 text-[#04102b] font-bold px-7 py-3 rounded-xl transition-all"
>
AI · 4,900
</PaymentButton>
AI
</a>
</div>
</div>
);