feat: add KJB signal dashboard frontend page

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/app/signals/page.tsx

@@ -0,0 +1,360 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { DashboardLayout } from '@/components/layout/dashboard-layout';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { api } from '@/lib/api';
+import { Radio, History, RefreshCw, ArrowUpCircle, ArrowDownCircle, MinusCircle } from 'lucide-react';
+
+interface Signal {
+  id: number;
+  date: string;
+  ticker: string;
+  name: string | null;
+  signal_type: string;
+  entry_price: number | null;
+  target_price: number | null;
+  stop_loss_price: number | null;
+  reason: string | null;
+  status: string;
+  created_at: string;
+}
+
+const signalTypeConfig: Record<string, { label: string; style: string; icon: typeof ArrowUpCircle }> = {
+  buy: {
+    label: '매수',
+    style: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
+    icon: ArrowUpCircle,
+  },
+  sell: {
+    label: '매도',
+    style: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
+    icon: ArrowDownCircle,
+  },
+  partial_sell: {
+    label: '부분매도',
+    style: 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200',
+    icon: MinusCircle,
+  },
+};
+
+const statusConfig: Record<string, { label: string; style: string }> = {
+  active: {
+    label: '활성',
+    style: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
+  },
+  executed: {
+    label: '실행됨',
+    style: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
+  },
+  expired: {
+    label: '만료',
+    style: 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200',
+  },
+};
+
+const formatPrice = (value: number | null | undefined) => {
+  if (value === null || value === undefined) return '-';
+  return new Intl.NumberFormat('ko-KR').format(value);
+};
+
+export default function SignalsPage() {
+  const router = useRouter();
+  const [loading, setLoading] = useState(true);
+  const [todaySignals, setTodaySignals] = useState<Signal[]>([]);
+  const [historySignals, setHistorySignals] = useState<Signal[]>([]);
+  const [showHistory, setShowHistory] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
+
+  // History filter state
+  const [filterTicker, setFilterTicker] = useState('');
+  const [filterStartDate, setFilterStartDate] = useState('');
+  const [filterEndDate, setFilterEndDate] = useState('');
+
+  useEffect(() => {
+    const init = async () => {
+      try {
+        await api.getCurrentUser();
+        await fetchTodaySignals();
+      } catch {
+        router.push('/login');
+      } finally {
+        setLoading(false);
+      }
+    };
+    init();
+  }, [router]);
+
+  const fetchTodaySignals = async () => {
+    try {
+      const data = await api.get<Signal[]>('/api/signal/kjb/today');
+      setTodaySignals(data);
+    } catch (err) {
+      console.error('Failed to fetch today signals:', err);
+    }
+  };
+
+  const fetchHistorySignals = async () => {
+    try {
+      const params = new URLSearchParams();
+      if (filterStartDate) params.set('start_date', filterStartDate);
+      if (filterEndDate) params.set('end_date', filterEndDate);
+      if (filterTicker) params.set('ticker', filterTicker);
+      const query = params.toString();
+      const url = `/api/signal/kjb/history${query ? `?${query}` : ''}`;
+      const data = await api.get<Signal[]>(url);
+      setHistorySignals(data);
+    } catch (err) {
+      console.error('Failed to fetch signal history:', err);
+    }
+  };
+
+  const handleRefresh = async () => {
+    setRefreshing(true);
+    try {
+      if (showHistory) {
+        await fetchHistorySignals();
+      } else {
+        await fetchTodaySignals();
+      }
+    } finally {
+      setRefreshing(false);
+    }
+  };
+
+  const handleShowHistory = async () => {
+    if (!showHistory && historySignals.length === 0) {
+      await fetchHistorySignals();
+    }
+    setShowHistory(!showHistory);
+  };
+
+  const handleFilterSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    await fetchHistorySignals();
+  };
+
+  const renderSignalTable = (signals: Signal[]) => (
+    <div className="overflow-x-auto">
+      <table className="w-full">
+        <thead className="bg-muted">
+          <tr>
+            <th scope="col" className="px-4 py-3 text-left text-sm font-medium text-muted-foreground">날짜</th>
+            <th scope="col" className="px-4 py-3 text-left text-sm font-medium text-muted-foreground">종목코드</th>
+            <th scope="col" className="px-4 py-3 text-left text-sm font-medium text-muted-foreground">종목명</th>
+            <th scope="col" className="px-4 py-3 text-center text-sm font-medium text-muted-foreground">신호</th>
+            <th scope="col" className="px-4 py-3 text-right text-sm font-medium text-muted-foreground">진입가</th>
+            <th scope="col" className="px-4 py-3 text-right text-sm font-medium text-muted-foreground">목표가</th>
+            <th scope="col" className="px-4 py-3 text-right text-sm font-medium text-muted-foreground">손절가</th>
+            <th scope="col" className="px-4 py-3 text-left text-sm font-medium text-muted-foreground">사유</th>
+            <th scope="col" className="px-4 py-3 text-center text-sm font-medium text-muted-foreground">상태</th>
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-border">
+          {signals.map((signal) => {
+            const typeConf = signalTypeConfig[signal.signal_type] || {
+              label: signal.signal_type,
+              style: 'bg-muted',
+              icon: MinusCircle,
+            };
+            const statConf = statusConfig[signal.status] || {
+              label: signal.status,
+              style: 'bg-muted',
+            };
+            const TypeIcon = typeConf.icon;
+
+            return (
+              <tr key={signal.id} className="hover:bg-muted/50">
+                <td className="px-4 py-3 text-sm">{signal.date}</td>
+                <td className="px-4 py-3 text-sm font-mono">{signal.ticker}</td>
+                <td className="px-4 py-3 text-sm">{signal.name || '-'}</td>
+                <td className="px-4 py-3 text-center">
+                  <Badge className={typeConf.style}>
+                    <TypeIcon className="h-3 w-3 mr-1" />
+                    {typeConf.label}
+                  </Badge>
+                </td>
+                <td className="px-4 py-3 text-sm text-right font-mono">{formatPrice(signal.entry_price)}</td>
+                <td className="px-4 py-3 text-sm text-right font-mono text-green-600">{formatPrice(signal.target_price)}</td>
+                <td className="px-4 py-3 text-sm text-right font-mono text-red-600">{formatPrice(signal.stop_loss_price)}</td>
+                <td className="px-4 py-3 text-sm max-w-xs truncate" title={signal.reason || ''}>
+                  {signal.reason || '-'}
+                </td>
+                <td className="px-4 py-3 text-center">
+                  <Badge className={statConf.style}>{statConf.label}</Badge>
+                </td>
+              </tr>
+            );
+          })}
+          {signals.length === 0 && (
+            <tr>
+              <td colSpan={9} className="px-4 py-8 text-center text-muted-foreground">
+                신호가 없습니다.
+              </td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+
+  if (loading) {
+    return (
+      <DashboardLayout>
+        <div className="space-y-6">
+          <Skeleton className="h-8 w-48" />
+          <Skeleton className="h-[400px]" />
+        </div>
+      </DashboardLayout>
+    );
+  }
+
+  return (
+    <DashboardLayout>
+      <div className="mb-6 flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-foreground">KJB 매매 신호</h1>
+          <p className="mt-1 text-muted-foreground">
+            KJB 전략 기반 매매 신호를 확인하세요
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={handleRefresh}
+            disabled={refreshing}
+          >
+            <RefreshCw className={`h-4 w-4 ${refreshing ? 'animate-spin' : ''}`} />
+          </Button>
+          <Button
+            variant="outline"
+            onClick={handleShowHistory}
+          >
+            {showHistory ? (
+              <>
+                <Radio className="mr-2 h-4 w-4" />
+                오늘의 신호
+              </>
+            ) : (
+              <>
+                <History className="mr-2 h-4 w-4" />
+                신호 이력
+              </>
+            )}
+          </Button>
+        </div>
+      </div>
+
+      {/* Summary Cards */}
+      {!showHistory && (
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+          <Card>
+            <CardContent className="p-4">
+              <div className="flex items-center gap-2 text-muted-foreground mb-1">
+                <ArrowUpCircle className="h-4 w-4 text-green-600" />
+                <span className="text-xs font-medium">매수 신호</span>
+              </div>
+              <p className="text-2xl font-bold">
+                {todaySignals.filter((s) => s.signal_type === 'buy').length}
+              </p>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardContent className="p-4">
+              <div className="flex items-center gap-2 text-muted-foreground mb-1">
+                <ArrowDownCircle className="h-4 w-4 text-red-600" />
+                <span className="text-xs font-medium">매도 신호</span>
+              </div>
+              <p className="text-2xl font-bold">
+                {todaySignals.filter((s) => s.signal_type === 'sell').length}
+              </p>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardContent className="p-4">
+              <div className="flex items-center gap-2 text-muted-foreground mb-1">
+                <MinusCircle className="h-4 w-4 text-orange-600" />
+                <span className="text-xs font-medium">부분매도 신호</span>
+              </div>
+              <p className="text-2xl font-bold">
+                {todaySignals.filter((s) => s.signal_type === 'partial_sell').length}
+              </p>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+
+      {showHistory ? (
+        <div className="space-y-4">
+          {/* History Filters */}
+          <Card>
+            <CardContent className="p-4">
+              <form onSubmit={handleFilterSubmit} className="flex flex-wrap items-end gap-4">
+                <div className="space-y-2">
+                  <Label htmlFor="filter-start-date">시작일</Label>
+                  <Input
+                    id="filter-start-date"
+                    type="date"
+                    value={filterStartDate}
+                    onChange={(e) => setFilterStartDate(e.target.value)}
+                    className="w-40"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="filter-end-date">종료일</Label>
+                  <Input
+                    id="filter-end-date"
+                    type="date"
+                    value={filterEndDate}
+                    onChange={(e) => setFilterEndDate(e.target.value)}
+                    className="w-40"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="filter-ticker">종목코드</Label>
+                  <Input
+                    id="filter-ticker"
+                    type="text"
+                    placeholder="예: 005930"
+                    value={filterTicker}
+                    onChange={(e) => setFilterTicker(e.target.value)}
+                    className="w-36"
+                  />
+                </div>
+                <Button type="submit" variant="outline">
+                  조회
+                </Button>
+              </form>
+            </CardContent>
+          </Card>
+
+          {/* History Table */}
+          <Card>
+            <CardHeader>
+              <CardTitle>신호 이력</CardTitle>
+            </CardHeader>
+            <CardContent className="p-0">
+              {renderSignalTable(historySignals)}
+            </CardContent>
+          </Card>
+        </div>
+      ) : (
+        <Card>
+          <CardHeader>
+            <CardTitle>오늘의 매매 신호</CardTitle>
+          </CardHeader>
+          <CardContent className="p-0">
+            {renderSignalTable(todaySignals)}
+          </CardContent>
+        </Card>
+      )}
+    </DashboardLayout>
+  );
+}

frontend/src/components/layout/new-sidebar.tsx

@@ -10,6 +10,7 @@ import {
   FlaskConical,
   Database,
   Search,
+  Radio,
   ChevronLeft,
   ChevronRight,
 } from 'lucide-react';
@@ -28,6 +29,7 @@ const navItems = [
   { href: '/portfolio', label: '포트폴리오', icon: Briefcase },
   { href: '/strategy', label: '전략', icon: TrendingUp },
   { href: '/backtest', label: '백테스트', icon: FlaskConical },
+  { href: '/signals', label: '매매 신호', icon: Radio },
   { href: '/admin/data', label: '데이터 수집', icon: Database },
   { href: '/admin/data/explorer', label: '데이터 탐색', icon: Search },
 ];