187 lines
8.0 KiB
TypeScript
187 lines
8.0 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { useEffect, useState } from 'react';
|
|
import { createBrowserClient } from '@supabase/ssr';
|
|
import { User } from '@supabase/supabase-js';
|
|
|
|
export default function Header() {
|
|
const [user, setUser] = useState<User | null>(null);
|
|
const [tokens, setTokens] = useState<number>(0);
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
|
|
const supabase = createBrowserClient(
|
|
process.env.NEXT_PUBLIC_SUPABASE_URL!,
|
|
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
|
|
);
|
|
|
|
useEffect(() => {
|
|
const getUser = async () => {
|
|
const { data: { user } } = await supabase.auth.getUser();
|
|
setUser(user);
|
|
|
|
if (user) {
|
|
// 토큰 정보 가져오기
|
|
const { data: profile } = await supabase
|
|
.from('user_profiles')
|
|
.select('tokens')
|
|
.eq('user_id', user.id)
|
|
.single();
|
|
|
|
if (profile) {
|
|
setTokens(profile.tokens || 0);
|
|
}
|
|
}
|
|
};
|
|
|
|
getUser();
|
|
|
|
const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => {
|
|
setUser(session?.user ?? null);
|
|
if (!session?.user) {
|
|
setTokens(0);
|
|
}
|
|
});
|
|
|
|
return () => {
|
|
subscription.unsubscribe();
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<header className="glass-nav fixed top-0 left-0 right-0 z-50">
|
|
<nav className="container-custom">
|
|
<div className="flex items-center justify-between h-16 md:h-20">
|
|
{/* 로고 */}
|
|
<Link href="/" className="flex items-center space-x-2 group">
|
|
<div className="w-10 h-10 bg-gradient-to-br from-[#d4af37] to-[#F3E7E3] rounded-lg flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform">
|
|
<span className="text-[#173658] text-xl font-bold">사</span>
|
|
</div>
|
|
<span className="text-white text-xl md:text-2xl font-bold hidden sm:block">
|
|
사주포춘
|
|
</span>
|
|
</Link>
|
|
|
|
{/* 데스크탑 메뉴 */}
|
|
<div className="hidden md:flex items-center space-x-1">
|
|
<Link
|
|
href="/saju"
|
|
className="text-white hover:text-[#d4af37] px-4 py-2 rounded-lg transition-colors font-medium"
|
|
>
|
|
사주 분석
|
|
</Link>
|
|
<Link
|
|
href="/compatibility"
|
|
className="text-white hover:text-[#d4af37] px-4 py-2 rounded-lg transition-colors font-medium"
|
|
>
|
|
궁합
|
|
</Link>
|
|
<Link
|
|
href="/tojeong"
|
|
className="text-white hover:text-[#d4af37] px-4 py-2 rounded-lg transition-colors font-medium"
|
|
>
|
|
토정비결
|
|
</Link>
|
|
<Link
|
|
href="/fortune"
|
|
className="text-white hover:text-[#d4af37] px-4 py-2 rounded-lg transition-colors font-medium"
|
|
>
|
|
오늘의 운세
|
|
</Link>
|
|
</div>
|
|
|
|
{/* 우측 사용자 메뉴 */}
|
|
<div className="flex items-center space-x-3">
|
|
{user ? (
|
|
<>
|
|
{/* 토큰 표시 */}
|
|
<div className="hidden sm:flex items-center space-x-2 bg-[#F3E7E3] px-3 py-1.5 rounded-full">
|
|
<svg className="w-5 h-5 text-[#d4af37]" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z" />
|
|
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z" clipRule="evenodd" />
|
|
</svg>
|
|
<span className="text-[#173658] font-bold text-sm">{tokens}</span>
|
|
</div>
|
|
|
|
{/* 프로필 버튼 */}
|
|
<Link
|
|
href="/mypage"
|
|
className="bg-[#F3E7E3] hover:bg-[#d4af37] text-[#173658] px-4 py-2 rounded-lg transition-all font-medium text-sm shadow-md hover:shadow-lg"
|
|
>
|
|
<span className="hidden sm:inline">마이페이지</span>
|
|
<span className="sm:hidden">MY</span>
|
|
</Link>
|
|
</>
|
|
) : (
|
|
<Link
|
|
href="/login"
|
|
className="bg-[#F3E7E3] hover:bg-[#d4af37] text-[#173658] px-5 py-2 rounded-lg transition-all font-bold text-sm shadow-md hover:shadow-lg"
|
|
>
|
|
로그인
|
|
</Link>
|
|
)}
|
|
|
|
{/* 모바일 메뉴 버튼 */}
|
|
<button
|
|
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
|
className="md:hidden text-white p-2"
|
|
aria-label="메뉴 열기"
|
|
>
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
{isMenuOpen ? (
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
) : (
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
|
)}
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 모바일 메뉴 */}
|
|
{isMenuOpen && (
|
|
<div className="md:hidden pb-4 space-y-2">
|
|
<Link
|
|
href="/saju"
|
|
className="block text-white hover:text-[#d4af37] px-4 py-2 rounded-lg transition-colors"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
사주 분석
|
|
</Link>
|
|
<Link
|
|
href="/compatibility"
|
|
className="block text-white hover:text-[#d4af37] px-4 py-2 rounded-lg transition-colors"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
궁합
|
|
</Link>
|
|
<Link
|
|
href="/tojeong"
|
|
className="block text-white hover:text-[#d4af37] px-4 py-2 rounded-lg transition-colors"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
토정비결
|
|
</Link>
|
|
<Link
|
|
href="/fortune"
|
|
className="block text-white hover:text-[#d4af37] px-4 py-2 rounded-lg transition-colors"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
오늘의 운세
|
|
</Link>
|
|
{user && (
|
|
<div className="sm:hidden flex items-center space-x-2 bg-[#F3E7E3] px-4 py-2 rounded-lg mt-2">
|
|
<svg className="w-5 h-5 text-[#d4af37]" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z" />
|
|
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z" clipRule="evenodd" />
|
|
</svg>
|
|
<span className="text-[#173658] font-bold">토큰: {tokens}개</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</nav>
|
|
</header>
|
|
);
|
|
}
|