gahusb/jaengseung-made
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

사주 기능 이식 & 로그인, 유저 페이지 Supabase 연동 & 토스 페이먼츠 결제 연동 & 사주 심층 분석을 위한 기능 분리

Browse Source
This commit is contained in:
gahusb
2026-03-10 04:28:56 +09:00
parent e8076b2b7a
commit 83043a357b
45 changed files with 8058 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

341
app/saju/page.tsx Normal file
View File

@@ -0,0 +1,341 @@
'use client';
import { useEffect, useState } from 'react';
import Link from 'next/link';
import PaymentButton from '../components/PaymentButton';
import { createClient } from '@/lib/supabase/client';
const faqItems = [
{
q: '사주팔자란 무엇인가요?',
a: '사주팔자(四柱八字)는 태어난 년·월·일·시의 네 기둥(四柱)에 각각 천간과 지지 두 글자씩 총 여덟 글자(八字)로 이루어진 동양의 전통 운명 분석 체계입니다.',
},
{
q: 'AI 해석은 어떻게 동작하나요?',
a: '전통 명리학 계산 로직(오행, 신강/신약, 용신/희신 등)으로 산출된 데이터를 GPT-4o에 전달하여 12개 항목의 상세 해석을 생성합니다. 기본 원국 분석은 무료이며, AI 상세 해석은 유료(₩4,900)로 제공됩니다.',
},
{
q: '태어난 시간을 모르면 어떻게 하나요?',
a: '시간을 모르더라도 년·월·일 세 기둥(三柱)만으로 사주를 계산할 수 있습니다. 다만 시주가 빠지면 세부 분석 정확도가 다소 낮아집니다.',
},
{
q: '음력으로 입력할 수 있나요?',
a: '네, 양력과 음력 모두 지원합니다. 음력을 선택하면 내부적으로 양력으로 변환하여 정확한 사주를 계산합니다. 윤달도 별도 선택이 가능합니다.',
},
];
interface SajuRecord {
id: number;
created_at: string;
saju_data: {
birth_year: number;
birth_month: number;
birth_day: number;
birth_hour?: number;
gender: string;
};
interpretation: string | null;
is_paid: boolean;
}
function buildResultUrl(rec: SajuRecord) {
const { birth_year, birth_month, birth_day, birth_hour, gender } = rec.saju_data;
// null/undefined 값이 있으면 URL 생성 불가
if (!birth_year || !birth_month || !birth_day) return '/saju/input';
let url = `/saju/result?year=${birth_year}&month=${birth_month}&day=${birth_day}&gender=${gender}&calendarType=solar`;
if (birth_hour != null) url += `&hour=${birth_hour}`;
return url;
}
export default function SajuPage() {
const supabase = createClient();
const [paidRecords, setPaidRecords] = useState<SajuRecord[]>([]);
const [hasPaid, setHasPaid] = useState(false);
const [authChecked, setAuthChecked] = useState(false);
useEffect(() => {
async function fetchRecords() {
const { data: { user } } = await supabase.auth.getUser();
if (!user) { setAuthChecked(true); return; }
const { data: records } = await supabase
.from('saju_records')
.select('*')
.eq('user_id', user.id)
.eq('is_paid', true)
.order('created_at', { ascending: false })
.limit(2);
if (records && records.length > 0) {
setPaidRecords(records);
setHasPaid(true);
}
setAuthChecked(true);
}
fetchRecords();
}, []);
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 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">
<span className="w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse" />
전통 명리학 × AI 해석 · 무료 기본 분석 제공
</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>
</h1>
<p className="text-blue-200/70 text-base md:text-lg leading-relaxed mb-8 max-w-xl mx-auto">
수천 년의 동양 명리학과 최신 AI 기술의 만남.<br />
태어난 순간의 우주적 에너지를 12가지 항목으로 해석해드립니다.
</p>
{/* 이전 기록 있으면 분기 버튼, 없으면 단일 CTA */}
{authChecked && hasPaid ? (
<div className="flex flex-col sm:flex-row items-center justify-center gap-3">
<Link
href="/saju/input"
className="inline-flex items-center gap-2 bg-gradient-to-r from-[#1a56db] to-[#7c3aed] hover:from-[#1e4fc2] hover:to-[#6d28d9] text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all shadow-lg shadow-violet-900/40"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
</svg>
새로 보기
</Link>
<a
href="#past-records"
className="inline-flex items-center gap-2 bg-white/10 border border-white/20 text-white px-7 py-3.5 rounded-xl font-semibold text-base transition-all hover:bg-white/20"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
이전 내역 다시 보기
</a>
</div>
) : (
<Link
href="/saju/input"
className="inline-flex items-center gap-2 bg-gradient-to-r from-[#1a56db] to-[#7c3aed] hover:from-[#1e4fc2] hover:to-[#6d28d9] text-white px-8 py-3.5 rounded-xl font-semibold text-base transition-all shadow-lg shadow-violet-900/40"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
</svg>
지금 바로 시작하기
</Link>
)}
</div>
</div>
<div className="px-6 py-12 lg:px-12">
<div className="max-w-4xl mx-auto space-y-10">
{/* ─── 이전 기록 섹션 (구매한 유저만) ─── */}
{hasPaid && paidRecords.length > 0 && (
<div id="past-records">
<div className="text-center mb-6">
<p className="text-violet-600 text-xs font-bold uppercase tracking-widest mb-2">MY RECORDS</p>
<h2 className="text-2xl font-extrabold text-[#04102b]">이전 AI 사주 기록</h2>
<p className="text-slate-500 text-sm mt-1">결제한 사주 기록을 다시 확인하세요</p>
</div>
<div className="grid md:grid-cols-2 gap-4">
{paidRecords.map((rec) => (
<div key={rec.id} className="bg-white rounded-2xl border border-[#dbe8ff] p-5 hover:border-violet-300 transition-colors">
<div className="flex items-start justify-between mb-3">
<div>
<div className="text-xs text-slate-400 mb-1">
{new Date(rec.created_at).toLocaleDateString('ko-KR', { year: 'numeric', month: 'long', day: 'numeric' })}
</div>
<div className="font-bold text-[#04102b] text-base">
{rec.saju_data.birth_year ?? '?'}년{' '}
{rec.saju_data.birth_month ?? '?'}월{' '}
{rec.saju_data.birth_day ?? '?'}일생
</div>
<div className="text-sm text-slate-500 mt-0.5">
{rec.saju_data.gender === 'male' ? '남성' : '여성'}
{rec.saju_data.birth_hour != null ? ` · ${rec.saju_data.birth_hour}시생` : ''}
</div>
</div>
<span className="text-xs font-bold px-2 py-1 rounded-lg bg-amber-50 text-amber-600 border border-amber-200 flex-shrink-0">
AI 해석 완료
</span>
</div>
{rec.interpretation && (
<p className="text-xs text-slate-500 bg-slate-50 rounded-lg px-3 py-2 mb-3 line-clamp-2">
{rec.interpretation.replace(/[#*]/g, '').substring(0, 80)}...
</p>
)}
<Link
href={buildResultUrl(rec)}
className="block w-full text-center py-2 rounded-xl text-sm font-bold bg-gradient-to-r from-[#04102b] to-[#0a2060] text-white hover:from-[#0a1f5c] hover:to-[#1a3a7a] transition"
>
다시 보기 →
</Link>
</div>
))}
</div>
</div>
)}
{/* ─── 바로 시작하기 CTA ─── */}
<div className="bg-gradient-to-r from-[#04102b] via-[#0a1f5c] to-[#0d2d8a] rounded-2xl border border-[#1a3a7a] p-8 text-center relative overflow-hidden">
<div className="absolute inset-0 opacity-[0.04]"
style={{ backgroundImage: 'radial-gradient(circle, #a78bfa 1px, transparent 1px)', backgroundSize: '25px 25px' }} />
<div className="relative">
<div className="text-3xl mb-3">✨</div>
<h3 className="text-2xl font-extrabold text-white mb-2">지금 무료로 시작하세요</h3>
<p className="text-blue-200/60 text-sm mb-6">회원가입 없이, 생년월일만 입력하면 바로 확인 가능합니다</p>
<Link
href="/saju/input"
className="inline-flex items-center gap-2 bg-gradient-to-r from-[#1a56db] to-[#7c3aed] text-white px-8 py-3.5 rounded-xl font-semibold text-base hover:from-[#1e4fc2] hover:to-[#6d28d9] transition-all shadow-lg shadow-violet-900/40"
>
사주 입력하러 가기 →
</Link>
</div>
</div>
{/* ─── 무료 vs 유료 비교표 ─── */}
<div>
<div className="text-center mb-8">
<p className="text-[#1a56db] text-xs font-bold uppercase tracking-widest mb-2">PRICING</p>
<h2 className="text-2xl md:text-3xl font-extrabold text-[#04102b] tracking-tight">무료 vs 유료 비교</h2>
<p className="text-slate-500 text-sm mt-2">기본 원국은 무료로, AI 상세 해석은 단 ₩4,900에</p>
</div>
<div className="grid md:grid-cols-2 gap-6">
{/* 무료 */}
<div className="bg-white rounded-2xl border border-[#dbe8ff] p-6 shadow-sm">
<div className="flex items-center gap-3 mb-5">
<div className="w-10 h-10 rounded-xl bg-[#f0f5ff] border border-[#dbe8ff] flex items-center justify-center">
<svg className="w-5 h-5 text-[#1a56db]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div>
<div className="text-xs font-bold text-slate-500 uppercase tracking-wide">FREE</div>
<div className="text-lg font-extrabold text-[#04102b]">무료 기본 분석</div>
</div>
</div>
<ul className="space-y-3">
{[
'사주팔자 원국 (년·월·일·시주)',
'천간·지지·지장간 표',
'십성 및 십이운성',
'오행 분포 차트',
'지지 상호작용 (합·충·형)',
'일간 분석 요약',
].map((item) => (
<li key={item} className="flex items-center gap-2.5 text-sm text-slate-700">
<div className="w-4 h-4 rounded-full bg-blue-100 border border-blue-200 flex items-center justify-center flex-shrink-0">
<div className="w-1.5 h-1.5 rounded-full bg-[#1a56db]" />
</div>
{item}
</li>
))}
</ul>
<div className="mt-6 pt-5 border-t border-slate-100">
<div className="text-2xl font-extrabold text-[#04102b]">무료</div>
<div className="text-xs text-slate-500 mt-1">회원가입 불필요</div>
<Link
href="/saju/input"
className="mt-4 block w-full text-center py-2.5 rounded-xl text-sm font-bold bg-[#f0f5ff] border border-[#dbe8ff] text-[#1a56db] hover:bg-blue-50 transition"
>
무료로 시작하기
</Link>
</div>
</div>
{/* 유료 */}
<div className="bg-gradient-to-br from-[#04102b] to-[#0a2060] rounded-2xl border border-[#1a3a7a] p-6 shadow-lg relative overflow-hidden">
<div className="absolute top-4 right-4 bg-amber-400 text-[#04102b] text-xs font-bold px-2 py-0.5 rounded-lg">
₩4,900
</div>
<div className="absolute bottom-0 right-0 w-32 h-32 rounded-full bg-violet-500/10 blur-2xl" />
<div className="flex items-center gap-3 mb-5 relative">
<div className="w-10 h-10 rounded-xl bg-violet-500/20 border border-violet-400/30 flex items-center justify-center">
<svg className="w-5 h-5 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
</svg>
</div>
<div>
<div className="text-xs font-bold text-violet-300 uppercase tracking-wide">AI PREMIUM</div>
<div className="text-lg font-extrabold text-white">AI 상세 해석</div>
</div>
</div>
<ul className="space-y-3 relative">
{[
'무료 기본 분석 전체 포함',
'신강/신약 정밀 판단',
'용신·희신·기신 추정',
'대운 (10년 주기) 분석',
'올해 세운 흐름',
'GPT-4o AI 12가지 상세 해석',
].map((item) => (
<li key={item} className="flex items-center gap-2.5 text-sm text-blue-200">
<div className="w-4 h-4 rounded-full bg-amber-400/20 border border-amber-400/40 flex items-center justify-center flex-shrink-0">
<div className="w-1.5 h-1.5 rounded-full bg-amber-400" />
</div>
{item}
</li>
))}
</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>
</div>
</div>
</div>
{/* ─── FAQ ─── */}
<div>
<div className="text-center mb-8">
<p className="text-[#1a56db] text-xs font-bold uppercase tracking-widest mb-2">FAQ</p>
<h2 className="text-2xl font-extrabold text-[#04102b]">자주 묻는 질문</h2>
</div>
<div className="space-y-4">
{faqItems.map((item, i) => (
<div key={i} className="bg-white rounded-2xl border border-[#dbe8ff] p-6">
<div className="flex items-start gap-3">
<div className="w-6 h-6 rounded-full bg-[#f0f5ff] border border-[#dbe8ff] flex items-center justify-center flex-shrink-0 mt-0.5">
<span className="text-[#1a56db] text-xs font-bold">Q</span>
</div>
<div>
<p className="font-bold text-[#04102b] text-sm mb-2">{item.q}</p>
<p className="text-slate-600 text-sm leading-relaxed">{item.a}</p>
</div>
</div>
</div>
))}
</div>
</div>
</div>
</div>
</div>
);
}