사주 풀이 고도화, NAS 배포 자동화
This commit is contained in:
134
app/tojeong/result/TojeongDetailUnlock.tsx
Normal file
134
app/tojeong/result/TojeongDetailUnlock.tsx
Normal file
@@ -0,0 +1,134 @@
|
||||
'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 {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export default function TojeongDetailUnlock({ children }: 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 <>{children}</>;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="relative mb-8">
|
||||
{/* 블러 처리된 미리보기 */}
|
||||
<div className="filter blur-sm select-none pointer-events-none opacity-60">
|
||||
<div className="bg-white rounded-2xl shadow-lg p-8">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-6 flex items-center">
|
||||
<span className="text-3xl mr-3">💡</span>
|
||||
한 해를 위한 조언
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="h-4 bg-gray-200 rounded w-full"></div>
|
||||
<div className="h-4 bg-gray-200 rounded w-5/6"></div>
|
||||
<div className="h-4 bg-gray-200 rounded w-4/6"></div>
|
||||
<div className="h-4 bg-gray-200 rounded w-full"></div>
|
||||
</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-amber-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">
|
||||
토정비결의 상세한 조언과 해석을 확인하세요.
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 mb-4">
|
||||
토큰 1개 사용 | 보유: <span className="font-bold text-amber-600">{credits}개</span>
|
||||
</p>
|
||||
<button
|
||||
onClick={handleUnlock}
|
||||
disabled={loading}
|
||||
className="w-full bg-gradient-to-r from-amber-600 to-orange-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}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -2,6 +2,7 @@ import Link from 'next/link';
|
||||
import { calculateSaju } from '@/lib/saju-calculator';
|
||||
import PDFButton from '../../components/PDFButton';
|
||||
import ShareButtons from '../../components/ShareButtons';
|
||||
import TojeongDetailUnlock from './TojeongDetailUnlock';
|
||||
|
||||
interface PageProps {
|
||||
searchParams: Promise<{
|
||||
@@ -258,31 +259,33 @@ export default async function TojeongResultPage({ searchParams }: PageProps) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 조언 */}
|
||||
<div className="bg-white rounded-2xl shadow-lg p-8 mb-8">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-6 flex items-center">
|
||||
<span className="text-3xl mr-3">💡</span>
|
||||
{targetYear}년 한 해를 위한 조언
|
||||
</h3>
|
||||
<ul className="space-y-3 text-gray-700">
|
||||
<li className="flex items-start">
|
||||
<span className="text-amber-600 mr-2">•</span>
|
||||
<span>운이 좋은 달에는 적극적으로 새로운 일을 시작하세요.</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="text-amber-600 mr-2">•</span>
|
||||
<span>운이 낮은 달에는 무리하지 말고 현상 유지에 집중하세요.</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="text-amber-600 mr-2">•</span>
|
||||
<span>매사에 감사하는 마음을 가지고 긍정적으로 생활하세요.</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="text-amber-600 mr-2">•</span>
|
||||
<span>토정비결은 참고사항이며, 자신의 노력이 가장 중요합니다.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{/* 조언 - 토큰 잠금 영역 */}
|
||||
<TojeongDetailUnlock>
|
||||
<div className="bg-white rounded-2xl shadow-lg p-8 mb-8">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-6 flex items-center">
|
||||
<span className="text-3xl mr-3">💡</span>
|
||||
{targetYear}년 한 해를 위한 조언
|
||||
</h3>
|
||||
<ul className="space-y-3 text-gray-700">
|
||||
<li className="flex items-start">
|
||||
<span className="text-amber-600 mr-2">•</span>
|
||||
<span>운이 좋은 달에는 적극적으로 새로운 일을 시작하세요.</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="text-amber-600 mr-2">•</span>
|
||||
<span>운이 낮은 달에는 무리하지 말고 현상 유지에 집중하세요.</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="text-amber-600 mr-2">•</span>
|
||||
<span>매사에 감사하는 마음을 가지고 긍정적으로 생활하세요.</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="text-amber-600 mr-2">•</span>
|
||||
<span>토정비결은 참고사항이며, 자신의 노력이 가장 중요합니다.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</TojeongDetailUnlock>
|
||||
|
||||
{/* 다른 메뉴 */}
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
|
||||
Reference in New Issue
Block a user