199 lines
7.1 KiB
TypeScript
199 lines
7.1 KiB
TypeScript
'use client';
|
||
|
||
import { useState, useEffect } from 'react';
|
||
import { createBrowserClient } from '@supabase/ssr';
|
||
import { useRouter } from 'next/navigation';
|
||
import TokenPurchaseModal from '@/components/TokenPurchaseModal';
|
||
import { ensureProfile } from '@/lib/ensure-profile';
|
||
|
||
interface Props {
|
||
allPros: string[];
|
||
allCons: string[];
|
||
advice: string;
|
||
element1: string;
|
||
element2: string;
|
||
element1Kr: string;
|
||
element2Kr: string;
|
||
}
|
||
|
||
export default function CompatibilityDetailUnlock({ allPros, allCons, advice, element1, element2, element1Kr, element2Kr }: Props) {
|
||
const [isUnlocked, setIsUnlocked] = useState(false);
|
||
const [user, setUser] = useState<any>(null);
|
||
const [credits, setCredits] = useState(0);
|
||
const [showModal, setShowModal] = useState(false);
|
||
const [loading, setLoading] = useState(false);
|
||
const router = useRouter();
|
||
|
||
const supabase = createBrowserClient(
|
||
process.env.NEXT_PUBLIC_SUPABASE_URL!,
|
||
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
|
||
);
|
||
|
||
useEffect(() => {
|
||
const init = async () => {
|
||
const { data: { user } } = await supabase.auth.getUser();
|
||
if (user) {
|
||
setUser(user);
|
||
const currentCredits = await ensureProfile(supabase, user);
|
||
setCredits(currentCredits);
|
||
}
|
||
};
|
||
init();
|
||
}, []);
|
||
|
||
const handleUnlock = async () => {
|
||
if (!user) {
|
||
if (confirm('로그인이 필요합니다. 로그인 페이지로 이동하시겠습니까?')) {
|
||
router.push('/login');
|
||
}
|
||
return;
|
||
}
|
||
|
||
if (credits < 1) {
|
||
setShowModal(true);
|
||
return;
|
||
}
|
||
|
||
// 토큰 차감
|
||
setLoading(true);
|
||
const { error } = await supabase
|
||
.from('profiles')
|
||
.update({ credits: credits - 1 })
|
||
.eq('id', user.id);
|
||
|
||
if (error) {
|
||
alert('토큰 차감에 실패했습니다. 다시 시도해주세요.');
|
||
setLoading(false);
|
||
return;
|
||
}
|
||
|
||
setCredits(credits - 1);
|
||
setIsUnlocked(true);
|
||
setLoading(false);
|
||
};
|
||
|
||
const handlePurchaseComplete = async () => {
|
||
setShowModal(false);
|
||
// 크레딧 새로고침
|
||
if (user) {
|
||
const { data: profile } = await supabase
|
||
.from('profiles')
|
||
.select('credits')
|
||
.eq('id', user.id)
|
||
.single();
|
||
if (profile) setCredits(profile.credits || 0);
|
||
}
|
||
};
|
||
|
||
if (!isUnlocked) {
|
||
return (
|
||
<>
|
||
<div className="relative mb-8">
|
||
{/* 블러 처리된 미리보기 */}
|
||
<div className="filter blur-sm select-none pointer-events-none opacity-60">
|
||
<div className="grid md:grid-cols-2 gap-8 mb-8">
|
||
<div className="bg-white rounded-2xl shadow-lg p-8">
|
||
<h3 className="text-2xl font-bold text-gray-900 mb-4 flex items-center">
|
||
<span className="text-3xl mr-3">✅</span>두 사람의 장점
|
||
</h3>
|
||
<div className="space-y-3">
|
||
{allPros.slice(0, 3).map((_, i) => (
|
||
<div key={i} className="h-4 bg-gray-200 rounded w-full"></div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<div className="bg-white rounded-2xl shadow-lg p-8">
|
||
<h3 className="text-2xl font-bold text-gray-900 mb-4 flex items-center">
|
||
<span className="text-3xl mr-3">⚠️</span>주의할 점
|
||
</h3>
|
||
<div className="space-y-3">
|
||
{allCons.slice(0, 3).map((_, i) => (
|
||
<div key={i} className="h-4 bg-gray-200 rounded w-full"></div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="bg-gradient-to-r from-indigo-600 to-purple-600 rounded-2xl p-8">
|
||
<div className="h-6 bg-white/30 rounded w-3/4 mx-auto mb-4"></div>
|
||
<div className="h-4 bg-white/20 rounded w-full"></div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 잠금 오버레이 */}
|
||
<div className="absolute inset-0 flex items-center justify-center bg-white/40 backdrop-blur-[2px] rounded-2xl">
|
||
<div className="text-center p-8 bg-white/95 backdrop-blur-md rounded-2xl shadow-xl border border-pink-100 max-w-sm mx-auto">
|
||
<div className="text-4xl mb-4">🔐</div>
|
||
<h3 className="text-2xl font-bold text-gray-900 mb-2">상세 궁합 해석</h3>
|
||
<p className="text-gray-600 mb-2">
|
||
{element1Kr}({element1})과 {element2Kr}({element2})의<br />
|
||
오행 기반 맞춤 해석을 확인하세요.
|
||
</p>
|
||
<p className="text-sm text-gray-500 mb-4">
|
||
토큰 1개 사용 | 보유: <span className="font-bold text-pink-600">{credits}개</span>
|
||
</p>
|
||
<button
|
||
onClick={handleUnlock}
|
||
disabled={loading}
|
||
className="w-full bg-gradient-to-r from-pink-600 to-purple-600 text-white font-bold py-3 px-6 rounded-xl hover:shadow-lg hover:scale-105 transition transform disabled:opacity-50"
|
||
>
|
||
{loading ? '처리 중...' : credits >= 1 ? '토큰 1개로 잠금해제' : '토큰 충전하기'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<TokenPurchaseModal
|
||
isOpen={showModal}
|
||
onClose={() => setShowModal(false)}
|
||
onPurchaseComplete={handlePurchaseComplete}
|
||
user={user}
|
||
supabase={supabase}
|
||
/>
|
||
</>
|
||
);
|
||
}
|
||
|
||
// Unlocked content
|
||
return (
|
||
<>
|
||
<div className="grid md:grid-cols-2 gap-8 mb-8">
|
||
<div className="bg-white rounded-2xl shadow-lg p-8">
|
||
<h3 className="text-2xl font-bold text-gray-900 mb-4 flex items-center">
|
||
<span className="text-3xl mr-3">✅</span>두 사람의 장점
|
||
</h3>
|
||
<ul className="space-y-3 text-gray-700">
|
||
{allPros.map((pro, i) => (
|
||
<li key={i} className="flex items-start">
|
||
<span className="text-pink-600 mr-2 mt-1 flex-shrink-0">•</span>
|
||
<span>{pro}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="bg-white rounded-2xl shadow-lg p-8">
|
||
<h3 className="text-2xl font-bold text-gray-900 mb-4 flex items-center">
|
||
<span className="text-3xl mr-3">⚠️</span>주의할 점
|
||
</h3>
|
||
<ul className="space-y-3 text-gray-700">
|
||
{allCons.map((con, i) => (
|
||
<li key={i} className="flex items-start">
|
||
<span className="text-purple-600 mr-2 mt-1 flex-shrink-0">•</span>
|
||
<span>{con}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-gradient-to-r from-indigo-600 to-purple-600 rounded-2xl shadow-lg p-8 text-white mb-8">
|
||
<h3 className="text-2xl font-bold mb-4 text-center">💡 조언</h3>
|
||
<p className="text-lg leading-relaxed text-center">{advice}</p>
|
||
<p className="text-sm text-white/70 mt-4 text-center">
|
||
궁합은 참고사항이에요. 서로를 이해하고 존중하며 노력한다면 어떤 궁합이든 행복한 관계를 만들 수 있답니다.
|
||
</p>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|