"Initial_commit"

2025-12-19 00:55:55 +09:00
commit 0bfc6ffb19
15 changed files with 2103 additions and 0 deletions
--- a/App.tsx
+++ b/App.tsx
@@ -0,0 +1,251 @@
+
+import React, { useState, useEffect } from 'react';
+import { serialService } from './services/serialService';
+import { JBDProtocol, CMD_BASIC_INFO, CMD_CELL_INFO, CMD_HW_VERSION } from './services/jbdProtocol';
+import { BMSBasicInfo, BMSCellInfo, ConnectionState } from './types';
+import Dashboard from './components/Dashboard';
+import Settings from './components/Settings';
+import Terminal from './components/Terminal';
+import { LayoutDashboard, Settings as SettingsIcon, Usb, AlertCircle, RefreshCw } from 'lucide-react';
+
+const App: React.FC = () => {
+  const [connectionState, setConnectionState] = useState<ConnectionState>(ConnectionState.DISCONNECTED);
+  const [basicInfo, setBasicInfo] = useState<BMSBasicInfo | null>(null);
+  const [cellInfo, setCellInfo] = useState<BMSCellInfo | null>(null);
+  const [hwVersion, setHwVersion] = useState<string | null>(null);
+  const [activeTab, setActiveTab] = useState<'dashboard' | 'settings'>('dashboard');
+  const [errorMsg, setErrorMsg] = useState<string | null>(null);
+
+  // Polling Logic
+  useEffect(() => {
+    let isMounted = true;
+    let timeoutId: number;
+
+    const runPoll = async () => {
+      // ONLY POLL IF ON DASHBOARD AND CONNECTED
+      if (connectionState !== ConnectionState.CONNECTED || activeTab !== 'dashboard') return;
+
+      try {
+        // 1. Get Basic Info
+        const basicData = await serialService.sendCommand(CMD_BASIC_INFO);
+        const parsedBasic = JBDProtocol.parseBasicInfo(basicData);
+        if (isMounted) setBasicInfo(parsedBasic);
+
+        // Delay 500ms
+        await new Promise(r => setTimeout(r, 500)); 
+        if (!isMounted) return;
+        
+        // 2. Get Cell Info
+        const cellData = await serialService.sendCommand(CMD_CELL_INFO);
+        const parsedCells = JBDProtocol.parseCellInfo(cellData);
+        if (isMounted) setCellInfo(parsedCells);
+
+        // Delay 500ms
+        await new Promise(r => setTimeout(r, 500));
+        if (!isMounted) return;
+
+        // 3. Get Hardware Version (CMD 0x05)
+        const hwData = await serialService.sendCommand(CMD_HW_VERSION);
+        // CMD 0x05 usually returns raw ASCII string in payload
+        const versionStr = new TextDecoder().decode(hwData);
+        if (isMounted) setHwVersion(versionStr);
+
+        if (isMounted) setErrorMsg(null);
+      } catch (e: any) {
+        console.error("Polling error:", e);
+        // Log to terminal for debugging
+        serialService.log('error', `Poll Fail: ${e.message}`);
+      } finally {
+        // Schedule next poll cycle in 500ms
+        if (isMounted && connectionState === ConnectionState.CONNECTED && activeTab === 'dashboard') {
+          timeoutId = window.setTimeout(runPoll, 500);
+        }
+      }
+    };
+
+    if (connectionState === ConnectionState.CONNECTED && activeTab === 'dashboard') {
+      runPoll();
+    }
+
+    return () => {
+      isMounted = false;
+      window.clearTimeout(timeoutId);
+    };
+  }, [connectionState, activeTab]);
+
+  const handleConnect = async () => {
+    try {
+      setConnectionState(ConnectionState.CONNECTING);
+      await serialService.connect();
+      setConnectionState(ConnectionState.CONNECTED);
+      setErrorMsg(null);
+    } catch (e: any) {
+      console.error(e);
+      setConnectionState(ConnectionState.ERROR);
+      setErrorMsg(e.message || "시리얼 포트 연결 실패");
+    }
+  };
+
+  const handleDisconnect = async () => {
+    try {
+      await serialService.disconnect();
+      setConnectionState(ConnectionState.DISCONNECTED);
+      setBasicInfo(null);
+      setCellInfo(null);
+      setHwVersion(null);
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const toggleMosfet = async (type: 'charge' | 'discharge', currentState: boolean) => {
+    if (!basicInfo) return;
+    try {
+      const newCharge = type === 'charge' ? !currentState : basicInfo.mosfetStatus.charge;
+      const newDischarge = type === 'discharge' ? !currentState : basicInfo.mosfetStatus.discharge;
+      
+      await serialService.toggleMosfet(newCharge, newDischarge);
+    } catch (e: any) {
+      alert("MOSFET 제어 실패: " + e.message);
+    }
+  };
+
+  const renderContent = () => {
+    switch (activeTab) {
+      case 'dashboard':
+        return <Dashboard basicInfo={basicInfo} cellInfo={cellInfo} hwVersion={hwVersion} onToggleMosfet={toggleMosfet} />;
+      case 'settings':
+        return <Settings />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="flex h-screen w-full bg-gray-950 text-gray-100 overflow-hidden">
+      
+      {/* Sidebar */}
+      <div className="w-20 lg:w-64 flex-shrink-0 bg-gray-900 border-r border-gray-800 flex flex-col z-20">
+        <div className="p-6 flex items-center justify-center lg:justify-start">
+          <div className="h-8 w-8 bg-blue-600 rounded-lg flex items-center justify-center font-bold shadow-lg shadow-blue-900/50">
+            J
+          </div>
+          <span className="ml-3 font-bold text-xl hidden lg:block tracking-tight text-gray-100">JBD Tool</span>
+        </div>
+
+        <nav className="flex-1 px-4 space-y-2 mt-4">
+          <button
+            onClick={() => setActiveTab('dashboard')}
+            className={`w-full flex items-center p-3 rounded-xl transition-all ${
+              activeTab === 'dashboard' 
+                ? 'bg-blue-600 text-white shadow-lg shadow-blue-900/20' 
+                : 'text-gray-400 hover:bg-gray-800 hover:text-gray-200'
+            }`}
+          >
+            <LayoutDashboard size={20} />
+            <span className="ml-3 hidden lg:block font-medium">대시보드</span>
+          </button>
+          <button
+            onClick={() => setActiveTab('settings')}
+            className={`w-full flex items-center p-3 rounded-xl transition-all ${
+              activeTab === 'settings' 
+                ? 'bg-blue-600 text-white shadow-lg shadow-blue-900/20' 
+                : 'text-gray-400 hover:bg-gray-800 hover:text-gray-200'
+            }`}
+          >
+            <SettingsIcon size={20} />
+            <span className="ml-3 hidden lg:block font-medium">설정 (EEPROM)</span>
+          </button>
+        </nav>
+
+        <div className="p-4 border-t border-gray-800">
+          <div className="flex flex-col gap-2">
+            {connectionState === ConnectionState.CONNECTED ? (
+              <button 
+                onClick={handleDisconnect}
+                className="w-full py-3 px-4 bg-red-900/30 text-red-400 border border-red-900/50 rounded-xl hover:bg-red-900/50 transition-colors flex items-center justify-center font-semibold"
+              >
+                <Usb size={18} className="mr-2" />
+                <span className="hidden lg:inline">연결 해제</span>
+              </button>
+            ) : (
+               <button 
+                onClick={handleConnect}
+                disabled={connectionState === ConnectionState.CONNECTING}
+                className="w-full py-3 px-4 bg-green-600 text-white rounded-xl hover:bg-green-500 transition-colors flex items-center justify-center font-semibold shadow-lg shadow-green-900/20"
+              >
+                {connectionState === ConnectionState.CONNECTING ? <RefreshCw className="animate-spin" size={18}/> : <Usb size={18} className="mr-2" />}
+                <span className="hidden lg:inline">BMS 연결</span>
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Main Content Area */}
+      <div className="flex-1 flex flex-col h-full overflow-hidden relative">
+        {/* Header */}
+        <header className="h-16 bg-gray-900/50 backdrop-blur border-b border-gray-800 flex items-center justify-between px-6 z-10 flex-shrink-0">
+          <h1 className="text-xl font-semibold text-gray-200">
+            {activeTab === 'dashboard' ? '개요 (Overview)' : '설정 (Configuration)'}
+          </h1>
+          <div className="flex items-center gap-4">
+             {connectionState === ConnectionState.CONNECTED && (
+                <div className="flex items-center text-xs font-mono text-green-400 bg-green-900/20 px-3 py-1 rounded-full border border-green-900/50">
+                   <div className="w-2 h-2 rounded-full bg-green-500 mr-2 animate-pulse"></div>
+                   CONNECTED
+                </div>
+             )}
+             {connectionState === ConnectionState.DISCONNECTED && (
+                <div className="flex items-center text-xs font-mono text-gray-500 bg-gray-800 px-3 py-1 rounded-full">
+                   <div className="w-2 h-2 rounded-full bg-gray-500 mr-2"></div>
+                   OFFLINE
+                </div>
+             )}
+          </div>
+        </header>
+
+        {/* Content Body with Right Sidebar */}
+        <div className="flex-1 flex overflow-hidden">
+            {/* Main View */}
+            <main className="flex-1 overflow-hidden bg-gray-950 relative">
+              {errorMsg && (
+                <div className="bg-red-900/80 text-white px-6 py-2 flex items-center justify-center text-sm font-medium backdrop-blur absolute top-0 left-0 right-0 z-30 animate-in slide-in-from-top-2">
+                  <AlertCircle size={16} className="mr-2" />
+                  {errorMsg}
+                </div>
+              )}
+
+              {renderContent()}
+              
+              {/* Empty State Overlay */}
+              {connectionState !== ConnectionState.CONNECTED && (
+                <div className="absolute inset-0 bg-gray-950/80 backdrop-blur-sm z-10 flex flex-col items-center justify-center p-6 text-center">
+                    <div className="w-16 h-16 bg-gray-800 rounded-2xl flex items-center justify-center mb-6 shadow-xl border border-gray-700">
+                      <Usb size={32} className="text-gray-500"/>
+                    </div>
+                    <h2 className="text-2xl font-bold text-white mb-2">장치가 연결되지 않았습니다</h2>
+                    <p className="text-gray-400 max-w-md mb-8">
+                      JBD BMS를 UART-to-USB 어댑터로 연결하여 실시간 상태를 확인하고 설정을 변경하세요.
+                    </p>
+                    <button 
+                      onClick={handleConnect}
+                      className="py-3 px-8 bg-blue-600 hover:bg-blue-500 text-white font-semibold rounded-xl transition-all shadow-lg shadow-blue-900/30 flex items-center"
+                    >
+                      <Usb size={18} className="mr-2"/> 장치 연결하기
+                    </button>
+                </div>
+              )}
+            </main>
+
+            {/* Right Terminal Panel */}
+            <aside className="w-80 lg:w-96 border-l border-gray-800 bg-gray-950 flex flex-col flex-shrink-0 z-20">
+              <Terminal />
+            </aside>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default App;