zephyrdark
19d5527a71
- Add API client utility (frontend/src/lib/api.ts) with JWT authentication - Add Sidebar component with navigation menu (Korean labels) - Add Header component with logout functionality - Update globals.css with Tailwind CSS configuration - Update layout.tsx with Inter font and Korean language - Update page.tsx with dashboard layout and auth check - Add login page with form validation and error handling - Fix .gitignore to not exclude frontend/src/lib/ Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
79 lines
2.5 KiB
TypeScript
79 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import Sidebar from '@/components/layout/Sidebar';
|
|
import Header from '@/components/layout/Header';
|
|
import { api } from '@/lib/api';
|
|
|
|
interface User {
|
|
id: number;
|
|
username: string;
|
|
email: string;
|
|
}
|
|
|
|
export default function Dashboard() {
|
|
const router = useRouter();
|
|
const [user, setUser] = useState<User | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
const checkAuth = async () => {
|
|
try {
|
|
const userData = await api.getCurrentUser() as User;
|
|
setUser(userData);
|
|
} catch {
|
|
router.push('/login');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
checkAuth();
|
|
}, [router]);
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center">
|
|
<div className="text-gray-500">Loading...</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex min-h-screen">
|
|
<Sidebar />
|
|
<div className="flex-1">
|
|
<Header username={user?.username} />
|
|
<main className="p-6">
|
|
<h1 className="text-2xl font-bold text-gray-800 mb-6">대시보드</h1>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
|
<div className="bg-white rounded-lg shadow p-6">
|
|
<h3 className="text-gray-500 text-sm mb-1">총 자산</h3>
|
|
<p className="text-2xl font-bold text-gray-800">₩0</p>
|
|
</div>
|
|
<div className="bg-white rounded-lg shadow p-6">
|
|
<h3 className="text-gray-500 text-sm mb-1">총 수익률</h3>
|
|
<p className="text-2xl font-bold text-green-600">+0.00%</p>
|
|
</div>
|
|
<div className="bg-white rounded-lg shadow p-6">
|
|
<h3 className="text-gray-500 text-sm mb-1">포트폴리오</h3>
|
|
<p className="text-2xl font-bold text-gray-800">0개</p>
|
|
</div>
|
|
<div className="bg-white rounded-lg shadow p-6">
|
|
<h3 className="text-gray-500 text-sm mb-1">리밸런싱 필요</h3>
|
|
<p className="text-2xl font-bold text-orange-600">0건</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-lg shadow p-6">
|
|
<h2 className="text-lg font-semibold text-gray-800 mb-4">최근 활동</h2>
|
|
<p className="text-gray-500">아직 활동 내역이 없습니다.</p>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|