-
-
-
-
- To get started, edit the page.tsx file.
-
-
- Looking for a starting point or more instructions? Head over to{" "}
-
- Templates
- {" "}
- or the{" "}
-
- Learning
- {" "}
- center.
-
-
+
+
+
+
+
+ 대시보드
+
+
+
+
+
최근 활동
+
아직 활동 내역이 없습니다.
+
+
);
}
diff --git a/frontend/src/components/layout/Header.tsx b/frontend/src/components/layout/Header.tsx
new file mode 100644
index 0000000..ac16ccf
--- /dev/null
+++ b/frontend/src/components/layout/Header.tsx
@@ -0,0 +1,37 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { api } from '@/lib/api';
+
+interface HeaderProps {
+ username?: string;
+}
+
+export default function Header({ username }: HeaderProps) {
+ const router = useRouter();
+
+ const handleLogout = () => {
+ api.logout();
+ router.push('/login');
+ };
+
+ return (
+
+ );
+}
diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
new file mode 100644
index 0000000..c2b59eb
--- /dev/null
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -0,0 +1,51 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+const menuItems = [
+ { href: '/', label: '대시보드', icon: '📊' },
+ { href: '/portfolio', label: '포트폴리오', icon: '💼' },
+ { href: '/strategy', label: '퀀트 전략', icon: '📈' },
+ { href: '/backtest', label: '백테스트', icon: '🔬' },
+ { href: '/market', label: '시세 조회', icon: '💹' },
+ { href: '/admin/data', label: '데이터 관리', icon: '⚙️' },
+];
+
+export default function Sidebar() {
+ const pathname = usePathname();
+
+ return (
+
+ );
+}
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
new file mode 100644
index 0000000..32a290f
--- /dev/null
+++ b/frontend/src/lib/api.ts
@@ -0,0 +1,108 @@
+const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
+
+class ApiClient {
+ private baseUrl: string;
+ private token: string | null = null;
+
+ constructor(baseUrl: string) {
+ this.baseUrl = baseUrl;
+ if (typeof window !== 'undefined') {
+ this.token = localStorage.getItem('token');
+ }
+ }
+
+ setToken(token: string) {
+ this.token = token;
+ if (typeof window !== 'undefined') {
+ localStorage.setItem('token', token);
+ }
+ }
+
+ clearToken() {
+ this.token = null;
+ if (typeof window !== 'undefined') {
+ localStorage.removeItem('token');
+ }
+ }
+
+ private async request
(
+ endpoint: string,
+ options: RequestInit = {}
+ ): Promise {
+ const headers: HeadersInit = {
+ 'Content-Type': 'application/json',
+ ...options.headers,
+ };
+
+ if (this.token) {
+ (headers as Record)['Authorization'] = `Bearer ${this.token}`;
+ }
+
+ const response = await fetch(`${this.baseUrl}${endpoint}`, {
+ ...options,
+ headers,
+ });
+
+ if (!response.ok) {
+ const error = await response.json().catch(() => ({}));
+ throw new Error(error.detail || 'API request failed');
+ }
+
+ return response.json();
+ }
+
+ async get(endpoint: string): Promise {
+ return this.request(endpoint, { method: 'GET' });
+ }
+
+ async post(endpoint: string, data?: unknown): Promise {
+ return this.request(endpoint, {
+ method: 'POST',
+ body: data ? JSON.stringify(data) : undefined,
+ });
+ }
+
+ async put(endpoint: string, data?: unknown): Promise {
+ return this.request(endpoint, {
+ method: 'PUT',
+ body: data ? JSON.stringify(data) : undefined,
+ });
+ }
+
+ async delete(endpoint: string): Promise {
+ return this.request(endpoint, { method: 'DELETE' });
+ }
+
+ async login(username: string, password: string) {
+ const formData = new URLSearchParams();
+ formData.append('username', username);
+ formData.append('password', password);
+
+ const response = await fetch(`${this.baseUrl}/api/auth/login`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/x-www-form-urlencoded',
+ },
+ body: formData,
+ });
+
+ if (!response.ok) {
+ const error = await response.json().catch(() => ({}));
+ throw new Error(error.detail || 'Login failed');
+ }
+
+ const data = await response.json();
+ this.setToken(data.access_token);
+ return data;
+ }
+
+ logout() {
+ this.clearToken();
+ }
+
+ async getCurrentUser() {
+ return this.get('/api/auth/me');
+ }
+}
+
+export const api = new ApiClient(API_URL);