사주 풀이 고도화, NAS 배포 자동화
This commit is contained in:
185
app/mypage/page.tsx
Normal file
185
app/mypage/page.tsx
Normal file
@@ -0,0 +1,185 @@
|
||||
|
||||
'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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user