initial: stock trading dashboard

.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+dist/
+.env
+*.log

back/nest-cli.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/nest-cli",
+  "collection": "@nestjs/schematics",
+  "sourceRoot": "src",
+  "compilerOptions": {
+    "deleteOutDir": true
+  }
+}

back/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "trading-bot-server",
+  "version": "1.0.0",
+  "scripts": {
+    "start": "nest start",
+    "start:dev": "nest start --watch",
+    "build": "nest build"
+  },
+  "dependencies": {
+    "@nestjs/common": "^10.0.0",
+    "@nestjs/core": "^10.0.0",
+    "@nestjs/platform-express": "^10.0.0",
+    "@nestjs/platform-socket.io": "^10.0.0",
+    "@nestjs/websockets": "^10.0.0",
+    "socket.io": "^4.6.0",
+    "rxjs": "^7.8.0",
+    "reflect-metadata": "^0.1.13"
+  },
+  "devDependencies": {
+    "@nestjs/cli": "^10.0.0",
+    "@nestjs/schematics": "^10.0.0",
+    "@types/node": "^20.0.0",
+    "typescript": "^5.0.0"
+  }
+}

back/src/app.module.ts

@@ -0,0 +1,10 @@
+import { Module } from '@nestjs/common';
+import { BotGateway } from './websocket/bot.gateway';
+import { BotService } from './bot/bot.service';
+
+@Module({
+  imports: [],
+  controllers: [],
+  providers: [BotGateway, BotService],
+})
+export class AppModule {}

back/src/bot/bot.service.ts

@@ -0,0 +1,36 @@
+import { Injectable, Logger } from '@nestjs/common';
+
+@Injectable()
+export class BotService {
+  private logger = new Logger('BotService');
+
+  // 봇 상태 데이터 저장
+  private botState = {
+    isRunning: false,
+    positions: [],
+    balance: 0,
+    totalProfit: 0,
+    logs: [],
+  };
+
+  getBotState() {
+    return this.botState;
+  }
+
+  updateBotState(state: any) {
+    this.botState = { ...this.botState, ...state };
+    this.logger.log('Bot state updated');
+  }
+
+  addLog(log: any) {
+    this.botState.logs.push({
+      ...log,
+      timestamp: new Date().toISOString(),
+    });
+    
+    // 최근 100개만 유지
+    if (this.botState.logs.length > 100) {
+      this.botState.logs = this.botState.logs.slice(-100);
+    }
+  }
+}

back/src/main.ts

@@ -0,0 +1,15 @@
+import { NestFactory } from '@nestjs/core';
+import { AppModule } from './app.module';
+
+async function bootstrap() {
+  const app = await NestFactory.create(AppModule);
+  
+  app.enableCors({
+    origin: ['http://localhost:5173', 'http://stock.wageulwageul.com', 'http://3.34.1.212'],
+    credentials: true,
+  });
+  
+  await app.listen(3001);
+  console.log('🚀 Trading Bot Dashboard Server running on http://localhost:3001');
+}
+bootstrap();

back/src/websocket/bot.gateway.ts

@@ -0,0 +1,98 @@
+import {
+  WebSocketGateway,
+  WebSocketServer,
+  SubscribeMessage,
+  OnGatewayConnection,
+  OnGatewayDisconnect,
+} from '@nestjs/websockets';
+import { Server, Socket } from 'socket.io';
+import { Logger } from '@nestjs/common';
+
+@WebSocketGateway({
+  cors: {
+    origin: ['http://localhost:5173', 'http://stock.wageulwageul.com', 'http://3.34.1.212', 'https://stock.wageulwageul.com'],
+    credentials: true,
+  },
+})
+export class BotGateway implements OnGatewayConnection, OnGatewayDisconnect {
+  @WebSocketServer()
+  server: Server;
+
+  private logger = new Logger('BotGateway');
+  private connectedClients = new Set<string>();
+
+  // 마지막 상태 캐시 - 새 클라이언트 접속 시 즉시 전송
+  private lastUpdate: any = null;
+  private recentLogs: any[] = [];
+  private readonly MAX_LOGS = 100;
+
+  handleConnection(client: Socket) {
+    this.connectedClients.add(client.id);
+    this.logger.log(`Client connected: ${client.id} (Total: ${this.connectedClients.size})`);
+
+    client.emit('connection:success', {
+      message: 'Connected to Trading Bot Dashboard',
+      timestamp: new Date().toISOString(),
+    });
+
+    // 새 클라이언트에게 마지막 상태 즉시 전송
+    if (this.lastUpdate) {
+      client.emit('dashboard:update', this.lastUpdate);
+    }
+
+    // 최근 로그 재전송 (최대 50개)
+    const logsToSend = this.recentLogs.slice(-50);
+    for (const log of logsToSend) {
+      client.emit('dashboard:log', log);
+    }
+  }
+
+  handleDisconnect(client: Socket) {
+    this.connectedClients.delete(client.id);
+    this.logger.log(`Client disconnected: ${client.id} (Total: ${this.connectedClients.size})`);
+  }
+
+  @SubscribeMessage('bot:update')
+  handleBotUpdate(client: Socket, payload: any) {
+    this.lastUpdate = payload;
+    this.server.emit('dashboard:update', payload);
+  }
+
+  @SubscribeMessage('bot:trade')
+  handleTrade(client: Socket, payload: any) {
+    this.logger.log(`Trade executed: ${payload.action} ${payload.stock_code}`);
+    this.server.emit('dashboard:trade', payload);
+  }
+
+  @SubscribeMessage('bot:log')
+  handleLog(client: Socket, payload: any) {
+    // 로그 캐시에 추가
+    this.recentLogs.push(payload);
+    if (this.recentLogs.length > this.MAX_LOGS) {
+      this.recentLogs.shift();
+    }
+    this.server.emit('dashboard:log', payload);
+  }
+
+  broadcastUpdate(data: any) {
+    this.lastUpdate = data;
+    this.server.emit('dashboard:update', data);
+  }
+
+  broadcastTrade(data: any) {
+    this.server.emit('dashboard:trade', data);
+  }
+
+  broadcastLog(message: string, level: string = 'info') {
+    const payload = {
+      message,
+      level,
+      timestamp: new Date().toISOString(),
+    };
+    this.recentLogs.push(payload);
+    if (this.recentLogs.length > this.MAX_LOGS) {
+      this.recentLogs.shift();
+    }
+    this.server.emit('dashboard:log', payload);
+  }
+}

back/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "declaration": true,
+    "removeComments": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
+    "target": "ES2021",
+    "sourceMap": true,
+    "outDir": "./dist",
+    "baseUrl": "./",
+    "incremental": true,
+    "skipLibCheck": true,
+    "strictNullChecks": false,
+    "noImplicitAny": false,
+    "strictBindCallApply": false,
+    "forceConsistentCasingInFileNames": false,
+    "noFallthroughCasesInSwitch": false
+  }
+}

front/.env.production

@@ -0,0 +1 @@
+VITE_WS_URL=wss://stock.wageulwageul.com

front/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Trading Bot Dashboard</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+</html>

front/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "trading-bot-dashboard-client",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "vue": "^3.3.0",
+    "socket.io-client": "^4.6.0",
+    "chart.js": "^4.4.0",
+    "vue-chartjs": "^5.2.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.4.0",
+    "vite": "^5.0.0"
+  }
+}

front/src/App.vue

@@ -0,0 +1,475 @@
+<template>
+  <div class="dashboard">
+    <div class="container">
+      <!-- 봇 상태 -->
+      <section class="card">
+        <h2>🤖 봇 상태</h2>
+        <div class="stats">
+          <div class="stat-item">
+            <span class="label">총자산</span>
+            <span class="value">{{ formatCurrency(balance) }}</span>
+          </div>
+          <div class="stat-item">
+            <span class="label">현금 잔고</span>
+            <span class="value">{{ formatCurrency(cashBalance) }}</span>
+          </div>
+          <div class="stat-item">
+            <span class="label">보유 종목</span>
+            <span class="value">{{ positions.length }}개</span>
+          </div>
+          <div class="stat-item">
+            <span class="label">총 손익</span>
+            <span :class="['value', totalProfit >= 0 ? 'profit' : 'loss']">
+              {{ totalProfit >= 0 ? '+' : '' }}{{ formatCurrency(totalProfit) }}
+            </span>
+          </div>
+        </div>
+      </section>
+
+      <!-- 보유 종목 -->
+      <section class="card">
+        <h2>💼 보유 종목</h2>
+        <div v-if="positions.length === 0" class="empty">
+          보유 중인 종목이 없습니다
+        </div>
+        <div v-else class="positions-list">
+          <div v-for="pos in positions" :key="pos.code" class="position-item">
+            <div class="position-info">
+              <div class="stock-name-section"><span class="stock-name">{{ pos.name }}</span><span class="code">({{ pos.code }})</span></div>
+              <span class="quantity">{{ pos.quantity }}주</span>
+            </div>
+            <div class="position-price">
+              <span class="buy-price">매수: {{ formatCurrency(pos.buyPrice) }}</span>
+              <span class="current-price">현재: {{ formatCurrency(pos.currentPrice) }}</span>
+              <span :class="['profit', pos.profitRate >= 0 ? 'positive' : 'negative']">
+                {{ pos.profitRate >= 0 ? '+' : '' }}{{ pos.profitRate.toFixed(2) }}%
+              </span>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- 실시간 거래 -->
+      <section class="card">
+        <h2>📊 실시간 거래</h2>
+        <div v-if="trades.length === 0" class="empty">
+          거래 내역이 없습니다
+        </div>
+        <div v-else class="trades-list">
+          <div v-for="trade in trades" :key="trade.id" :class="['trade-item', trade.action]">
+            <span class="time">{{ formatTime(trade.timestamp) }}</span>
+            <span :class="['action', trade.action]">{{ trade.action === 'buy' ? '매수' : '매도' }}</span>
+            <span class="stock-info">
+              <span class="stock-name">{{ trade.stock_name || trade.stock_code }}</span>
+              <span class="code">({{ trade.stock_code }})</span>
+            </span>
+            <span class="quantity">{{ trade.quantity }}주</span>
+            <span class="price">@ {{ formatCurrency(trade.price) }}</span>
+          </div>
+        </div>
+      </section>
+
+      <section class="card logs">
+        <h2>📝 실시간 로그</h2>
+        <div class="log-container">
+          <div v-for="log in logs" :key="log.id" :class="['log-item', log.level]">
+            <span class="timestamp">{{ formatTime(log.timestamp) }}</span>
+            <span class="message">{{ log.message }}</span>
+          </div>
+        </div>
+      </section>
+
+      <section class="card trade-history">
+        <h2>📜 거래 내역 (최근 7일)</h2>
+        <div v-if="tradeHistory.length === 0" class="empty">
+          거래 내역이 없습니다
+        </div>
+        <div v-else class="trades-list">
+          <div v-for="(trade, idx) in tradeHistory" :key="idx" :class="['trade-item', trade.type]">
+            <span class="time">{{ trade.time.slice(0,2) }}:{{ trade.time.slice(2,4) }}</span>
+            <span :class="['action', trade.type]">{{ trade.type === 'buy' ? '매수' : '매도' }}</span>
+            <span class="code">{{ trade.name }}({{ trade.code }})</span>
+            <span class="quantity">{{ trade.quantity }}주</span>
+            <span class="price">{{ formatCurrency(trade.price) }}</span>
+          </div>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import { io } from 'socket.io-client';
+
+const connected = ref(false);
+const balance = ref(0);
+const totalProfit = ref(0);
+const cashBalance = ref(0);
+const positions = ref([]);
+const trades = ref([]);
+const tradeHistory = ref([]);
+const logs = ref([]);
+let logIdCounter = 0;
+let isFirstConnect = true;
+
+let socket;
+const WS_URL = import.meta.env.VITE_WS_URL || (window.location.protocol === 'https:' ? 'wss://' : 'ws://') + window.location.host;
+
+onMounted(() => {
+  socket = io(WS_URL);
+
+  socket.on('connect', () => {
+    connected.value = true;
+    if (isFirstConnect) {
+      logs.value = [];
+      isFirstConnect = false;
+    }
+    addLog('대시보드 연결됨', 'info');
+  });
+
+  socket.on('disconnect', () => {
+    connected.value = false;
+    addLog('대시보드 연결 끊김', 'warning');
+  });
+
+  socket.on('connection:success', (data) => {
+    addLog(data.message, 'success');
+  });
+
+  socket.on('dashboard:update', (data) => {
+    console.log('[Dashboard] Update received:', data);
+    balance.value = data.totalAsset || data.balance || 0;
+    cashBalance.value = data.actualCash || data.balance || 0;
+    totalProfit.value = data.totalProfit || 0;
+    
+    if (data.tradeHistory && Array.isArray(data.tradeHistory)) {
+      tradeHistory.value = data.tradeHistory.sort((a, b) => {
+        const dateCompare = b.date.localeCompare(a.date);
+        if (dateCompare !== 0) return dateCompare;
+        return b.time.localeCompare(a.time);
+      });
+    }
+    
+    if (data.positions && Array.isArray(data.positions)) {
+      positions.value = data.positions.map(pos => ({
+        code: pos.code,
+        name: pos.name || pos.code,
+        quantity: pos.quantity,
+        buyPrice: pos.buyPrice,
+        currentPrice: pos.currentPrice,
+        profit: pos.profit,
+        profitRate: pos.profitRate
+      }));
+      console.log('[Dashboard] Positions updated:', positions.value);
+    }
+  });
+
+  socket.on('dashboard:trade', (data) => {
+    const trade = {
+      id: Date.now(),
+      ...data,
+      timestamp: data.timestamp || new Date().toISOString()
+    };
+    trades.value.unshift(trade);
+    if (trades.value.length > 50) {
+      trades.value = trades.value.slice(0, 50);
+    }
+    
+    addLog(`${data.action === 'buy' ? '매수' : '매도'}: ${data.stock_code} ${data.quantity}주 @ ${formatCurrency(data.price)}`, 
+           data.action === 'buy' ? 'success' : 'info');
+  });
+
+  socket.on('dashboard:log', (data) => {
+    addLog(data.message, data.level || 'info');
+  });
+});
+
+onUnmounted(() => {
+  if (socket) {
+    socket.disconnect();
+  }
+});
+
+const addLog = (message, level = 'info') => {
+  const log = {
+    id: ++logIdCounter,
+    message,
+    level,
+    timestamp: new Date().toISOString()
+  };
+  
+  logs.value.unshift(log);
+  if (logs.value.length > 100) {
+    logs.value = logs.value.slice(0, 100);
+  }
+};
+
+const formatCurrency = (value) => {
+  return '₩' + Math.round(value).toLocaleString('ko-KR');
+};
+
+const formatTime = (timestamp) => {
+  if (!timestamp) return '';
+  const date = new Date(timestamp);
+  return date.toLocaleTimeString('ko-KR', { 
+    hour: '2-digit', 
+    minute: '2-digit',
+    second: '2-digit'
+  });
+};
+</script>
+
+<style scoped>
+.dashboard {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
+  padding: 20px;
+}
+
+.container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+}
+
+.logs {
+  grid-column: 1 / 3;
+  grid-row: 2;
+  min-height: 650px;
+}
+
+.trade-history {
+  grid-column: 3;
+  grid-row: 2;
+}
+
+@media (max-width: 1200px) {
+  .container {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .logs {
+    grid-column: 1 / 3;
+  }
+}
+
+@media (max-width: 768px) {
+  .container {
+    grid-template-columns: 1fr;
+  }
+  
+  .logs {
+    grid-column: span 1;
+  }
+}
+
+.card {
+  background: white;
+  padding: 25px;
+  border-radius: 12px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.card h2 {
+  margin: 0 0 20px 0;
+  color: #333;
+  font-size: 20px;
+}
+
+.stats {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 15px;
+}
+
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.stat-item .label {
+  font-size: 14px;
+  color: #666;
+}
+
+.stat-item .value {
+  font-size: 24px;
+  font-weight: bold;
+  color: #333;
+}
+
+.stat-item .value.profit {
+  color: #10b981;
+}
+
+.stat-item .value.loss {
+  color: #ef4444;
+}
+
+.empty {
+  text-align: center;
+  color: #999;
+  padding: 40px 0;
+}
+
+.positions-list, .trades-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.position-item {
+  padding: 15px;
+  background: #f9fafb;
+  border-radius: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.position-info {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.position-info .quantity {
+  color: #666;
+  font-size: 14px;
+}
+
+.position-price {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 5px;
+}
+
+.buy-price, .current-price {
+  font-size: 14px;
+  color: #666;
+}
+
+.profit {
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.profit.positive {
+  color: #10b981;
+}
+
+.profit.negative {
+  color: #ef4444;
+}
+
+.trade-item {
+  padding: 12px;
+  background: #f9fafb;
+  border-radius: 8px;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  font-size: 14px;
+}
+
+.trade-item.buy {
+  border-left: 4px solid #10b981;
+}
+
+.trade-item.sell {
+  border-left: 4px solid #ef4444;
+}
+
+.trade-item .time {
+  color: #999;
+  font-size: 12px;
+}
+
+.trade-item .action {
+  font-weight: bold;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.trade-item .action.buy {
+  background: #d1fae5;
+  color: #065f46;
+}
+
+.trade-item .action.sell {
+  background: #fee2e2;
+  color: #991b1b;
+}
+
+.trade-item .code {
+  font-weight: bold;
+  color: #333;
+}
+
+.log-container {
+  max-height: 600px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.log-item {
+  font-weight: 500;
+  padding: 10px;
+  background: #f9fafb;
+  border-radius: 6px;
+  display: flex;
+  gap: 10px;
+  font-size: 13px;
+  color: #1f2937;
+  font-family: 'Courier New', monospace;
+}
+
+.log-item .timestamp {
+  font-weight: 500;
+  color: #6b7280;
+  font-size: 11px;
+  flex-shrink: 0;
+}
+
+.log-item.info {
+  border-left: 3px solid #3b82f6;
+}
+
+.log-item.success {
+  border-left: 3px solid #10b981;
+}
+
+.log-item.warning {
+  border-left: 3px solid #f59e0b;
+}
+
+.log-item.error {
+  border-left: 3px solid #ef4444;
+  background: #fef2f2;
+}
+
+.stock-name-section {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.stock-name {
+  font-weight: 700 !important;
+  color: #000 !important;
+  font-size: 16px;
+}
+
+.code {
+  font-size: 12px;
+  color: #666;
+}
+</style>

front/src/App.vue.backup3

@@ -0,0 +1,529 @@
+<template>
+  <div class="dashboard">
+    <header class="header">
+      <h1>📈 Trading Bot Dashboard</h1>
+      <div class="status">
+        <span :class="['status-indicator', connected ? 'connected' : 'disconnected']"></span>
+        <span>{{ connected ? '연결됨' : '연결 끊김' }}</span>
+      </div>
+    </header>
+
+    <div class="container">
+      <!-- 봇 상태 -->
+      <section class="card">
+        <h2>🤖 봇 상태</h2>
+        <div class="stats">
+          <div class="stat-item">
+            <span class="label">잔고</span>
+            <span class="value">{{ formatCurrency(balance) }}</span>
+          </div>
+          <div class="stat-item">
+            <span class="label">보유 종목</span>
+            <span class="value">{{ positions.length }}개</span>
+          </div>
+          <div class="stat-item">
+            <span class="label">총 손익</span>
+            <span :class="['value', totalProfit >= 0 ? 'profit' : 'loss']">
+              {{ totalProfit >= 0 ? '+' : '' }}{{ formatCurrency(totalProfit) }}
+            </span>
+          </div>
+        </div>
+      </section>
+
+      <!-- 보유 종목 -->
+      <section class="card">
+        <h2>💼 보유 종목</h2>
+        <div v-if="positions.length === 0" class="empty">
+          보유 중인 종목이 없습니다
+        </div>
+        <div v-else class="positions-list">
+          <div v-for="pos in positions" :key="pos.code" class="position-item">
+            <div class="position-info">
+              <div class="stock-name-section"><span class="stock-name">{{ pos.name }}</span><span class="code">({{ pos.code }})</span></div>
+              <span class="quantity">{{ pos.quantity }}주</span>
+            </div>
+            <div class="position-price">
+              <span class="buy-price">매수: {{ formatCurrency(pos.buyPrice) }}</span>
+              <span class="current-price">현재: {{ formatCurrency(pos.currentPrice) }}</span>
+              <span :class="['profit', pos.profitRate >= 0 ? 'positive' : 'negative']">
+                {{ pos.profitRate >= 0 ? '+' : '' }}{{ pos.profitRate.toFixed(2) }}%
+              </span>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- 거래 내역 -->
+      <section class="card">
+        <h2>📊 실시간 거래</h2>
+        <div v-if="trades.length === 0" class="empty">
+          거래 내역이 없습니다
+        </div>
+        <div v-else class="trades-list">
+          <div v-for="trade in trades" :key="trade.id" :class="['trade-item', trade.action]">
+            <span class="time">{{ formatTime(trade.timestamp) }}</span>
+            <span :class="['action', trade.action]">{{ trade.action === 'buy' ? '매수' : '매도' }}</span>
+            <span class="stock-info">
+              <span class="stock-name">{{ trade.stock_name || trade.stock_code }}</span>
+              <span class="code">({{ trade.stock_code }})</span>
+            </span>
+            <span class="quantity">{{ trade.quantity }}주</span>
+            <span class="price">@ {{ formatCurrency(trade.price) }}</span>
+          </div>
+        </div>
+      </section>
+
+
+      <section class="card logs">
+        <h2>📝 실시간 로그</h2>
+        <div class="log-container">
+          <div v-for="log in logs" :key="log.id" :class="['log-item', log.level]">
+            <span class="timestamp">{{ formatTime(log.timestamp) }}</span>
+            <span class="message">{{ log.message }}</span>
+          </div>
+        </div>
+      </section>
+    </div>
+
+      <section class="card">
+        <h2>📜 거래 내역 (최근 7일)</h2>
+        <div v-if="tradeHistory.length === 0" class="empty">
+          거래 내역이 없습니다
+        </div>
+        <div v-else class="trades-list">
+          <div v-for="(trade, idx) in tradeHistory" :key="idx" :class="['trade-item', trade.type]">
+            <span class="time">{{ trade.time.slice(0,2) }}:{{ trade.time.slice(2,4) }}</span>
+            <span :class="['action', trade.type]">{{ trade.type === 'buy' ? '매수' : '매도' }}</span>
+            <span class="code">{{ trade.name }}({{ trade.code }})</span>
+            <span class="quantity">{{ trade.quantity }}주</span>
+            <span class="price">{{ formatCurrency(trade.price) }}</span>
+          </div>
+        </div>
+      </section>
+
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import { io } from 'socket.io-client';
+
+const connected = ref(false);
+const balance = ref(0);
+const totalProfit = ref(0);
+const positions = ref([]);
+const trades = ref([]);
+const tradeHistory = ref([]);
+const logs = ref([]);
+
+let socket;
+const WS_URL = import.meta.env.VITE_WS_URL || (window.location.protocol === 'https:' ? 'wss://' : 'ws://') + window.location.host;
+
+onMounted(() => {
+  // Socket.io 연결
+  socket = io(WS_URL);
+
+  socket.on('connect', () => {
+    connected.value = true;
+    addLog('대시보드 연결됨', 'info');
+  });
+
+  socket.on('disconnect', () => {
+    connected.value = false;
+    addLog('대시보드 연결 끊김', 'warning');
+  });
+
+  socket.on('connection:success', (data) => {
+    addLog(data.message, 'success');
+  });
+
+  socket.on('dashboard:update', (data) => {
+    console.log('[Dashboard] Update received:', data);
+    balance.value = data.balance || 0;
+    totalProfit.value = data.totalProfit || 0;
+    
+    
+    // 거래 내역 업데이트 (최신순 정렬)
+    if (data.tradeHistory && Array.isArray(data.tradeHistory)) {
+      tradeHistory.value = data.tradeHistory.sort((a, b) => {
+        const dateCompare = b.date.localeCompare(a.date);
+        if (dateCompare !== 0) return dateCompare;
+        return b.time.localeCompare(a.time);
+      });
+    }
+    // positions는 배열로 받음
+    if (data.positions && Array.isArray(data.positions)) {
+      positions.value = data.positions.map(pos => ({
+        code: pos.code,
+        name: pos.name || pos.code,
+        quantity: pos.quantity,
+        buyPrice: pos.buyPrice,
+        currentPrice: pos.currentPrice,
+        profit: pos.profit,
+        profitRate: pos.profitRate
+      }));
+      console.log('[Dashboard] Positions updated:', positions.value);
+    }
+  });
+
+  socket.on('dashboard:trade', (data) => {
+    const trade = {
+      id: Date.now(),
+      ...data,
+      timestamp: data.timestamp || new Date().toISOString()
+    };
+    trades.value.unshift(trade);
+    if (trades.value.length > 50) {
+      trades.value = trades.value.slice(0, 50);
+    }
+    
+    addLog(`${data.action === 'buy' ? '매수' : '매도'}: ${data.stock_code} ${data.quantity}주 @ ${formatCurrency(data.price)}`, 
+           data.action === 'buy' ? 'success' : 'info');
+  });
+
+  socket.on('dashboard:log', (data) => {
+    addLog(data.message, data.level || 'info');
+  });
+});
+
+onUnmounted(() => {
+  if (socket) {
+    socket.disconnect();
+  }
+});
+
+function addLog(message, level = 'info') {
+  logs.value.unshift({
+    id: Date.now() + Math.random(),
+    message,
+    level,
+    timestamp: new Date().toISOString()
+  });
+  
+  if (logs.value.length > 100) {
+    logs.value = logs.value.slice(0, 100);
+  }
+}
+
+function formatCurrency(amount) {
+  if (typeof amount !== 'number') return '₩0';
+  return new Intl.NumberFormat('ko-KR', {
+    style: 'currency',
+    currency: 'KRW',
+  }).format(amount);
+}
+
+function formatTime(timestamp) {
+  const date = new Date(timestamp);
+  return date.toLocaleTimeString('ko-KR', {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit'
+  });
+}
+</script>
+
+<style scoped>
+.dashboard {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
+  padding: 20px;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 30px;
+  background: white;
+  padding: 20px 30px;
+  border-radius: 12px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.header h1 {
+  margin: 0;
+  color: #333;
+  font-size: 28px;
+}
+
+.status {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.status-indicator {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  animation: pulse 2s infinite;
+}
+
+.status-indicator.connected {
+  background: #10b981;
+}
+
+.status-indicator.disconnected {
+  background: #ef4444;
+  animation: none;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+}
+
+/* 실시간 로그를 2칸 차지 */
+.logs {
+  grid-column: 1 / 3;  /* 1번 열부터 3번 열 전까지 (2칸) */
+}
+
+@media (max-width: 1200px) {
+  .container {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .logs {
+    grid-column: 1 / 3;
+  }
+}
+
+@media (max-width: 768px) {
+  .container {
+    grid-template-columns: 1fr;
+  }
+  
+  .logs {
+    grid-column: span 1;
+  }
+}
+
+.card {
+  background: white;
+  padding: 25px;
+  border-radius: 12px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.card h2 {
+  margin: 0 0 20px 0;
+  color: #333;
+  font-size: 20px;
+}
+
+.stats {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 15px;
+}
+
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.stat-item .label {
+  font-size: 14px;
+  color: #666;
+}
+
+.stat-item .value {
+  font-size: 24px;
+  font-weight: bold;
+  color: #333;
+}
+
+.stat-item .value.profit {
+  color: #10b981;
+}
+
+.stat-item .value.loss {
+  color: #ef4444;
+}
+
+.empty {
+  text-align: center;
+  color: #999;
+  padding: 40px 0;
+}
+
+.positions-list, .trades-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.position-item {
+  padding: 15px;
+  background: #f9fafb;
+  border-radius: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.position-info {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.position-info .code {
+  font-weight: bold;
+  color: #333;
+  font-size: 16px;
+}
+
+.position-info .quantity {
+  color: #666;
+  font-size: 14px;
+}
+
+.position-price {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 5px;
+}
+
+.buy-price, .current-price {
+  font-size: 14px;
+  color: #666;
+}
+
+.profit {
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.profit.positive {
+  color: #10b981;
+}
+
+.profit.negative {
+  color: #ef4444;
+}
+
+.trade-item {
+  padding: 12px;
+  background: #f9fafb;
+  border-radius: 8px;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  font-size: 14px;
+}
+
+.trade-item.buy {
+  border-left: 4px solid #10b981;
+}
+
+.trade-item.sell {
+  border-left: 4px solid #ef4444;
+}
+
+.trade-item .time {
+  color: #999;
+  font-size: 12px;
+}
+
+.trade-item .action {
+  font-weight: bold;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.trade-item .action.buy {
+  background: #d1fae5;
+  color: #065f46;
+}
+
+.trade-item .action.sell {
+  background: #fee2e2;
+  color: #991b1b;
+}
+
+.trade-item .code {
+  font-weight: bold;
+  color: #333;
+}
+
+.logs {
+  grid-column: 1 / -1;
+  min-height: 650px;
+}
+
+.log-container {
+  max-height: 600px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.log-item {
+  color: #1a202c;
+  color: #1a202c;
+  font-weight: 500;
+  padding: 10px;
+  background: #f9fafb;
+  border-radius: 6px;
+  display: flex;
+  gap: 10px;
+  font-size: 13px;
+  color: #1f2937;
+  font-family: 'Courier New', monospace;
+}
+
+.log-item .timestamp {
+  font-weight: 500;
+  color: #6b7280;
+  font-size: 11px;
+  flex-shrink: 0;
+}
+
+.log-item.info {
+  border-left: 3px solid #3b82f6;
+}
+
+.log-item.success {
+  border-left: 3px solid #10b981;
+}
+
+.log-item.warning {
+  border-left: 3px solid #f59e0b;
+}
+
+.log-item.error {
+  border-left: 3px solid #ef4444;
+  background: #fef2f2;
+}
+
+.stock-name-section {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.stock-name {
+  font-weight: 700 !important;
+  color: #000 !important;
+  font-size: 16px;
+}
+
+.code {
+  font-size: 12px;
+  color: #666;
+}
+</style>

front/src/App.vue.backup4

@@ -0,0 +1,535 @@
+<template>
+  <div class="dashboard">
+    <header class="header">
+      <h1>📈 Trading Bot Dashboard</h1>
+      <div class="status">
+        <span :class="['status-indicator', connected ? 'connected' : 'disconnected']"></span>
+        <span>{{ connected ? '연결됨' : '연결 끊김' }}</span>
+      </div>
+    </header>
+
+    <div class="container">
+      <!-- 봇 상태 -->
+      <section class="card">
+        <h2>🤖 봇 상태</h2>
+        <div class="stats">
+          <div class="stat-item">
+            <span class="label">잔고</span>
+            <span class="value">{{ formatCurrency(balance) }}</span>
+          </div>
+          <div class="stat-item">
+            <span class="label">보유 종목</span>
+            <span class="value">{{ positions.length }}개</span>
+          </div>
+          <div class="stat-item">
+            <span class="label">총 손익</span>
+            <span :class="['value', totalProfit >= 0 ? 'profit' : 'loss']">
+              {{ totalProfit >= 0 ? '+' : '' }}{{ formatCurrency(totalProfit) }}
+            </span>
+          </div>
+        </div>
+      </section>
+
+      <!-- 보유 종목 -->
+      <section class="card">
+        <h2>💼 보유 종목</h2>
+        <div v-if="positions.length === 0" class="empty">
+          보유 중인 종목이 없습니다
+        </div>
+        <div v-else class="positions-list">
+          <div v-for="pos in positions" :key="pos.code" class="position-item">
+            <div class="position-info">
+              <div class="stock-name-section"><span class="stock-name">{{ pos.name }}</span><span class="code">({{ pos.code }})</span></div>
+              <span class="quantity">{{ pos.quantity }}주</span>
+            </div>
+            <div class="position-price">
+              <span class="buy-price">매수: {{ formatCurrency(pos.buyPrice) }}</span>
+              <span class="current-price">현재: {{ formatCurrency(pos.currentPrice) }}</span>
+              <span :class="['profit', pos.profitRate >= 0 ? 'positive' : 'negative']">
+                {{ pos.profitRate >= 0 ? '+' : '' }}{{ pos.profitRate.toFixed(2) }}%
+              </span>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- 거래 내역 -->
+      <section class="card">
+        <h2>📊 실시간 거래</h2>
+        <div v-if="trades.length === 0" class="empty">
+          거래 내역이 없습니다
+        </div>
+        <div v-else class="trades-list">
+          <div v-for="trade in trades" :key="trade.id" :class="['trade-item', trade.action]">
+            <span class="time">{{ formatTime(trade.timestamp) }}</span>
+            <span :class="['action', trade.action]">{{ trade.action === 'buy' ? '매수' : '매도' }}</span>
+            <span class="stock-info">
+              <span class="stock-name">{{ trade.stock_name || trade.stock_code }}</span>
+              <span class="code">({{ trade.stock_code }})</span>
+            </span>
+            <span class="quantity">{{ trade.quantity }}주</span>
+            <span class="price">@ {{ formatCurrency(trade.price) }}</span>
+          </div>
+        </div>
+      </section>
+
+
+      <section class="card logs">
+        <h2>📝 실시간 로그</h2>
+        <div class="log-container">
+          <div v-for="log in logs" :key="log.id" :class="['log-item', log.level]">
+            <span class="timestamp">{{ formatTime(log.timestamp) }}</span>
+            <span class="message">{{ log.message }}</span>
+          </div>
+        </div>
+      </section>
+    </div>
+
+      <section class="card trade-history">
+        <h2>📜 거래 내역 (최근 7일)</h2>
+        <div v-if="tradeHistory.length === 0" class="empty">
+          거래 내역이 없습니다
+        </div>
+        <div v-else class="trades-list">
+          <div v-for="(trade, idx) in tradeHistory" :key="idx" :class="['trade-item', trade.type]">
+            <span class="time">{{ trade.time.slice(0,2) }}:{{ trade.time.slice(2,4) }}</span>
+            <span :class="['action', trade.type]">{{ trade.type === 'buy' ? '매수' : '매도' }}</span>
+            <span class="code">{{ trade.name }}({{ trade.code }})</span>
+            <span class="quantity">{{ trade.quantity }}주</span>
+            <span class="price">{{ formatCurrency(trade.price) }}</span>
+          </div>
+        </div>
+      </section>
+
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import { io } from 'socket.io-client';
+
+const connected = ref(false);
+const balance = ref(0);
+const totalProfit = ref(0);
+const positions = ref([]);
+const trades = ref([]);
+const tradeHistory = ref([]);
+const logs = ref([]);
+
+let socket;
+const WS_URL = import.meta.env.VITE_WS_URL || (window.location.protocol === 'https:' ? 'wss://' : 'ws://') + window.location.host;
+
+onMounted(() => {
+  // Socket.io 연결
+  socket = io(WS_URL);
+
+  socket.on('connect', () => {
+    connected.value = true;
+    addLog('대시보드 연결됨', 'info');
+  });
+
+  socket.on('disconnect', () => {
+    connected.value = false;
+    addLog('대시보드 연결 끊김', 'warning');
+  });
+
+  socket.on('connection:success', (data) => {
+    addLog(data.message, 'success');
+  });
+
+  socket.on('dashboard:update', (data) => {
+    console.log('[Dashboard] Update received:', data);
+    balance.value = data.balance || 0;
+    totalProfit.value = data.totalProfit || 0;
+    
+    
+    // 거래 내역 업데이트 (최신순 정렬)
+    if (data.tradeHistory && Array.isArray(data.tradeHistory)) {
+      tradeHistory.value = data.tradeHistory.sort((a, b) => {
+        const dateCompare = b.date.localeCompare(a.date);
+        if (dateCompare !== 0) return dateCompare;
+        return b.time.localeCompare(a.time);
+      });
+    }
+    // positions는 배열로 받음
+    if (data.positions && Array.isArray(data.positions)) {
+      positions.value = data.positions.map(pos => ({
+        code: pos.code,
+        name: pos.name || pos.code,
+        quantity: pos.quantity,
+        buyPrice: pos.buyPrice,
+        currentPrice: pos.currentPrice,
+        profit: pos.profit,
+        profitRate: pos.profitRate
+      }));
+      console.log('[Dashboard] Positions updated:', positions.value);
+    }
+  });
+
+  socket.on('dashboard:trade', (data) => {
+    const trade = {
+      id: Date.now(),
+      ...data,
+      timestamp: data.timestamp || new Date().toISOString()
+    };
+    trades.value.unshift(trade);
+    if (trades.value.length > 50) {
+      trades.value = trades.value.slice(0, 50);
+    }
+    
+    addLog(`${data.action === 'buy' ? '매수' : '매도'}: ${data.stock_code} ${data.quantity}주 @ ${formatCurrency(data.price)}`, 
+           data.action === 'buy' ? 'success' : 'info');
+  });
+
+  socket.on('dashboard:log', (data) => {
+    addLog(data.message, data.level || 'info');
+  });
+});
+
+onUnmounted(() => {
+  if (socket) {
+    socket.disconnect();
+  }
+});
+
+function addLog(message, level = 'info') {
+  logs.value.unshift({
+    id: Date.now() + Math.random(),
+    message,
+    level,
+    timestamp: new Date().toISOString()
+  });
+  
+  if (logs.value.length > 100) {
+    logs.value = logs.value.slice(0, 100);
+  }
+}
+
+function formatCurrency(amount) {
+  if (typeof amount !== 'number') return '₩0';
+  return new Intl.NumberFormat('ko-KR', {
+    style: 'currency',
+    currency: 'KRW',
+  }).format(amount);
+}
+
+function formatTime(timestamp) {
+  const date = new Date(timestamp);
+  return date.toLocaleTimeString('ko-KR', {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit'
+  });
+}
+</script>
+
+<style scoped>
+.dashboard {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
+  padding: 20px;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 30px;
+  background: white;
+  padding: 20px 30px;
+  border-radius: 12px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.header h1 {
+  margin: 0;
+  color: #333;
+  font-size: 28px;
+}
+
+.status {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.status-indicator {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  animation: pulse 2s infinite;
+}
+
+.status-indicator.connected {
+  background: #10b981;
+}
+
+.status-indicator.disconnected {
+  background: #ef4444;
+  animation: none;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+}
+
+/* 실시간 로그를 2칸 차지 */
+.logs {
+  grid-column: 1 / 3;  /* 1-2번 열 */
+  grid-row: 2;  /* 2번째 행 */
+}
+
+.trade-history {
+  grid-column: 3;  /* 3번째 열 */
+  grid-row: 2;  /* 2번째 행 */
+}
+
+@media (max-width: 1200px) {
+  .container {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .logs {
+    grid-column: 1 / 3;
+  }
+}
+
+@media (max-width: 768px) {
+  .container {
+    grid-template-columns: 1fr;
+  }
+  
+  .logs {
+    grid-column: span 1;
+  }
+}
+
+.card {
+  background: white;
+  padding: 25px;
+  border-radius: 12px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.card h2 {
+  margin: 0 0 20px 0;
+  color: #333;
+  font-size: 20px;
+}
+
+.stats {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 15px;
+}
+
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.stat-item .label {
+  font-size: 14px;
+  color: #666;
+}
+
+.stat-item .value {
+  font-size: 24px;
+  font-weight: bold;
+  color: #333;
+}
+
+.stat-item .value.profit {
+  color: #10b981;
+}
+
+.stat-item .value.loss {
+  color: #ef4444;
+}
+
+.empty {
+  text-align: center;
+  color: #999;
+  padding: 40px 0;
+}
+
+.positions-list, .trades-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.position-item {
+  padding: 15px;
+  background: #f9fafb;
+  border-radius: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.position-info {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.position-info .code {
+  font-weight: bold;
+  color: #333;
+  font-size: 16px;
+}
+
+.position-info .quantity {
+  color: #666;
+  font-size: 14px;
+}
+
+.position-price {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 5px;
+}
+
+.buy-price, .current-price {
+  font-size: 14px;
+  color: #666;
+}
+
+.profit {
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.profit.positive {
+  color: #10b981;
+}
+
+.profit.negative {
+  color: #ef4444;
+}
+
+.trade-item {
+  padding: 12px;
+  background: #f9fafb;
+  border-radius: 8px;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  font-size: 14px;
+}
+
+.trade-item.buy {
+  border-left: 4px solid #10b981;
+}
+
+.trade-item.sell {
+  border-left: 4px solid #ef4444;
+}
+
+.trade-item .time {
+  color: #999;
+  font-size: 12px;
+}
+
+.trade-item .action {
+  font-weight: bold;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.trade-item .action.buy {
+  background: #d1fae5;
+  color: #065f46;
+}
+
+.trade-item .action.sell {
+  background: #fee2e2;
+  color: #991b1b;
+}
+
+.trade-item .code {
+  font-weight: bold;
+  color: #333;
+}
+
+.logs {
+  grid-column: 1 / -1;
+  min-height: 650px;
+}
+
+.log-container {
+  max-height: 600px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.log-item {
+  color: #1a202c;
+  color: #1a202c;
+  font-weight: 500;
+  padding: 10px;
+  background: #f9fafb;
+  border-radius: 6px;
+  display: flex;
+  gap: 10px;
+  font-size: 13px;
+  color: #1f2937;
+  font-family: 'Courier New', monospace;
+}
+
+.log-item .timestamp {
+  font-weight: 500;
+  color: #6b7280;
+  font-size: 11px;
+  flex-shrink: 0;
+}
+
+.log-item.info {
+  border-left: 3px solid #3b82f6;
+}
+
+.log-item.success {
+  border-left: 3px solid #10b981;
+}
+
+.log-item.warning {
+  border-left: 3px solid #f59e0b;
+}
+
+.log-item.error {
+  border-left: 3px solid #ef4444;
+  background: #fef2f2;
+}
+
+.stock-name-section {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.stock-name {
+  font-weight: 700 !important;
+  color: #000 !important;
+  font-size: 16px;
+}
+
+.code {
+  font-size: 12px;
+  color: #666;
+}
+</style>

front/src/main.js

@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import './style.css';
+
+createApp(App).mount('#app');

front/src/style.css

@@ -0,0 +1,15 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: #0a0e27;
+  color: #e0e0e0;
+}
+
+#app {
+  min-height: 100vh;
+}

front/vite.config.js

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+
+export default defineConfig({
+  plugins: [vue()],
+  server: {
+    port: 5173,
+  },
+});