186 lines
9.5 KiB
TypeScript
186 lines
9.5 KiB
TypeScript
|
|
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import { createBrowserClient } from '@supabase/ssr'
|
|
import Link from 'next/link';
|
|
import { useRouter } from 'next/navigation';
|
|
import TokenPurchaseModal from '@/components/TokenPurchaseModal';
|
|
import { ensureProfile } from '@/lib/ensure-profile';
|
|
|
|
export default function MyPage() {
|
|
const [user, setUser] = useState<any>(null);
|
|
const [records, setRecords] = useState<any[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [credits, setCredits] = useState(0);
|
|
const [showTokenModal, setShowTokenModal] = useState(false);
|
|
const router = useRouter();
|
|
const supabase = createBrowserClient(
|
|
process.env.NEXT_PUBLIC_SUPABASE_URL!,
|
|
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
|
|
);
|
|
|
|
useEffect(() => {
|
|
async function getUserData() {
|
|
const { data: { user } } = await supabase.auth.getUser();
|
|
if (!user) {
|
|
router.push('/login');
|
|
return;
|
|
}
|
|
setUser(user);
|
|
|
|
// Fetch credits (프로필 없으면 자동 생성)
|
|
const currentCredits = await ensureProfile(supabase, user);
|
|
setCredits(currentCredits);
|
|
|
|
// Fetch records
|
|
const { data, error } = await supabase
|
|
.from('saju_records')
|
|
.select('*')
|
|
.eq('user_id', user.id) // Ensure only fetching user's records
|
|
.order('created_at', { ascending: false });
|
|
|
|
if (error) {
|
|
console.error('Error fetching records:', error.message, error.details, error.hint);
|
|
alert('기록을 불러오는 중 오류가 발생했습니다: ' + error.message);
|
|
} else {
|
|
setRecords(data || []);
|
|
}
|
|
|
|
setLoading(false);
|
|
}
|
|
|
|
getUserData();
|
|
}, [router]);
|
|
|
|
if (loading) return (
|
|
<div className="min-h-screen flex items-center justify-center">
|
|
<div className="w-16 h-16 border-4 border-indigo-200 border-t-indigo-600 rounded-full animate-spin"></div>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50">
|
|
{/* Navigation */}
|
|
<nav className="bg-white/80 backdrop-blur-md border-b border-gray-200 sticky top-0 z-50">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex justify-between items-center h-16">
|
|
<Link href="/" className="text-2xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">
|
|
🔮 사주포춘
|
|
</Link>
|
|
<div className="hidden md:flex space-x-6">
|
|
<Link href="/saju" className="text-gray-700 hover:text-indigo-600 transition font-medium">사주팔자</Link>
|
|
<Link href="/compatibility" className="text-gray-700 hover:text-indigo-600 transition font-medium">궁합</Link>
|
|
<Link href="/tojeong" className="text-gray-700 hover:text-indigo-600 transition font-medium">토정비결</Link>
|
|
<Link href="/mypage" className="text-indigo-600 font-bold">마이페이지</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div className="p-4 md:p-8">
|
|
<div className="max-w-4xl mx-auto">
|
|
<header className="mb-8 flex justify-between items-center bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
|
|
<h1 className="text-3xl font-bold text-gray-900">내 사주 보관함</h1>
|
|
<Link href="/saju" className="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition font-bold shadow-md">
|
|
+ 새 사주 보기
|
|
</Link>
|
|
</header>
|
|
|
|
<div className="bg-white rounded-2xl shadow-sm p-6 mb-8 border border-gray-100 flex flex-col md:flex-row items-center gap-6">
|
|
<div className="w-20 h-20 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-full flex items-center justify-center text-white text-3xl font-bold shadow-lg">
|
|
{user.email[0].toUpperCase()}
|
|
</div>
|
|
<div className="flex-1 text-center md:text-left">
|
|
<h2 className="text-2xl font-bold text-gray-900 mb-1">{user.email}</h2>
|
|
<div className="flex flex-wrap gap-2 justify-center md:justify-start">
|
|
<span className="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">회원</span>
|
|
<span className="px-3 py-1 bg-indigo-50 text-indigo-700 rounded-full text-sm font-semibold">보유 토큰: {credits}개</span>
|
|
<button
|
|
onClick={() => setShowTokenModal(true)}
|
|
className="px-3 py-1 bg-indigo-600 text-white rounded-full text-sm font-semibold hover:bg-indigo-700 transition"
|
|
>
|
|
토큰 충전
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={async () => {
|
|
await supabase.auth.signOut();
|
|
router.push('/');
|
|
router.refresh();
|
|
}}
|
|
className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 text-gray-700 transition"
|
|
>
|
|
로그아웃
|
|
</button>
|
|
</div>
|
|
|
|
<h2 className="text-xl font-bold text-gray-900 mb-4 ml-2 border-l-4 border-indigo-500 pl-3">저장된 기록 ({records.length})</h2>
|
|
|
|
{records.length === 0 ? (
|
|
<div className="text-center py-20 bg-white rounded-2xl border border-gray-200 border-dashed">
|
|
<div className="text-6xl mb-4">📭</div>
|
|
<p className="text-xl text-gray-800 font-bold mb-2">아직 저장된 사주 기록이 없습니다.</p>
|
|
<p className="text-gray-500 mb-8">나의 운세를 확인하고 평생 소장해보세요!</p>
|
|
<Link
|
|
href="/saju"
|
|
className="px-8 py-3 bg-indigo-600 text-white rounded-xl hover:bg-indigo-700 transition font-bold shadow-lg hover:shadow-xl transform hover:-translate-y-1"
|
|
>
|
|
지금 무료로 사주 보기
|
|
</Link>
|
|
</div>
|
|
) : (
|
|
<div className="grid md:grid-cols-2 gap-6">
|
|
{records.map((record) => (
|
|
<div key={record.id} className="bg-white p-6 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 group">
|
|
<div className="flex justify-between items-start mb-4">
|
|
<div>
|
|
<span className="inline-block px-3 py-1 bg-indigo-50 text-indigo-700 text-xs font-bold rounded-full mb-2">
|
|
{new Date(record.created_at).toLocaleDateString()}
|
|
</span>
|
|
<h3 className="text-xl font-bold text-gray-900 group-hover:text-indigo-600 transition">
|
|
{record.saju_data.birthDate.year}년 {record.saju_data.birthDate.month}월 {record.saju_data.birthDate.day}일생
|
|
</h3>
|
|
</div>
|
|
<span className="text-2xl">🔮</span>
|
|
</div>
|
|
<div className="text-sm text-gray-500 mb-6 line-clamp-3 bg-gray-50 p-3 rounded-lg h-20">
|
|
{record.interpretation
|
|
? record.interpretation.replace(/[#*]/g, '').substring(0, 100) + '...'
|
|
: '해석 내용 없음'}
|
|
</div>
|
|
<Link
|
|
href={`/result/saved/${record.id}`}
|
|
className="block w-full text-center py-3 bg-indigo-600 text-white rounded-xl hover:bg-indigo-700 transition font-bold shadow-md"
|
|
>
|
|
다시 보기
|
|
</Link>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<TokenPurchaseModal
|
|
isOpen={showTokenModal}
|
|
onClose={() => setShowTokenModal(false)}
|
|
onPurchaseComplete={async () => {
|
|
setShowTokenModal(false);
|
|
if (user) {
|
|
const { data: profile } = await supabase
|
|
.from('profiles')
|
|
.select('credits')
|
|
.eq('id', user.id)
|
|
.single();
|
|
if (profile) setCredits(profile.credits || 0);
|
|
}
|
|
}}
|
|
user={user}
|
|
supabase={supabase}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|