웹 디자인 전면 개편
This commit is contained in:
186
components/Header.tsx
Normal file
186
components/Header.tsx
Normal file
@@ -0,0 +1,186 @@
|
||||
'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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user