feat: Add VisionData panel, HW error display, and reel handler 3D model

- Add hardware error banner with priority system (motion > i/o > emergency)
- Add DIO status to HW status display with backend integration
- Remove status text from HW status, keep only LED indicators
- Add VisionDataPanel showing real-time recognized data for L/C/R ports
- Add GetVisionData API in MachineBridge with batch field support
- Add BroadcastVisionData function (250ms interval)
- Replace 3D model with detailed reel handler equipment
- Use OrthographicCamera with front view for distortion-free display
- Fix ProcessedDataPanel layout to avoid right sidebar overlap
- Show log viewer filename in error message when file not found

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

FrontEnd/components/VisionDataPanel.tsx

@@ -0,0 +1,156 @@
+import React, { useState, useEffect } from 'react';
+import { Eye, CheckCircle, XCircle } from 'lucide-react';
+import { comms } from '../communication';
+import { PanelHeader } from './common/PanelHeader';
+import { CyberPanel } from './common/CyberPanel';
+
+interface PortData {
+    cartSize: string;
+    enabled?: boolean;
+    confirm?: boolean;
+    rid: string;
+    rid_trust?: boolean;
+    rid_new?: boolean;
+    sid: string;
+    sid0?: string;
+    sid_trust?: boolean;
+    qty: string;
+    qty_trust?: boolean;
+    qty_rq?: boolean;
+    vname: string;
+    vname_trust?: boolean;
+    vlot: string;
+    vlot_trust?: boolean;
+    mfgdate: string;
+    mfgdate_trust?: boolean;
+    partno: string;
+    partno_trust?: boolean;
+    reelSize: string;
+    rid2?: string;
+    sid2?: string;
+    qty2?: string;
+    vname2?: string;
+    vlot2?: string;
+    mfgdate2?: string;
+    partno2?: string;
+    batch?: string;
+    qtymax?: string;
+    barcodeCount?: number;
+    regexCount?: number;
+}
+
+interface VisionData {
+    left: PortData;
+    center: PortData;
+    right: PortData;
+}
+
+const fieldLabels = ['RID', 'SID', 'QTY', 'VNAME', 'VLOT', 'MFG', 'PART', 'SIZE', 'BATCH'];
+
+export const VisionDataPanel: React.FC = () => {
+    const [data, setData] = useState<VisionData | null>(null);
+
+    useEffect(() => {
+        const unsubscribe = comms.subscribe((msg: any) => {
+            if (msg?.type === 'VISION_DATA_UPDATE' && msg.data) {
+                setData(msg.data);
+            }
+        });
+
+        return () => {
+            unsubscribe();
+        };
+    }, []);
+
+    const getTrustColor = (trust?: boolean) => {
+        if (trust === undefined) return 'text-slate-400';
+        return trust ? 'text-lime-400' : 'text-slate-400';
+    };
+
+    const getCompareColor = (val1: string, val2?: string) => {
+        if (!val2 || val2 === '') return '';
+        return val1 !== val2 ? 'text-red-400' : '';
+    };
+
+    const renderPortColumn = (port: PortData | undefined, title: string, isCenter: boolean = false) => {
+        if (!port) return null;
+
+        const values = [
+            { val: port.rid, val2: port.rid2, trust: port.rid_trust },
+            { val: port.sid, val2: port.sid2, trust: port.sid_trust },
+            { val: port.qty, val2: port.qty2, trust: port.qty_trust, rq: port.qty_rq },
+            { val: port.vname, val2: port.vname2, trust: port.vname_trust },
+            { val: port.vlot, val2: port.vlot2, trust: port.vlot_trust },
+            { val: port.mfgdate, val2: port.mfgdate2, trust: port.mfgdate_trust },
+            { val: port.partno, val2: port.partno2, trust: port.partno_trust },
+            { val: port.reelSize === 'None' ? '--' : port.reelSize, val2: undefined, trust: undefined },
+            { val: port.batch || '-', val2: undefined, trust: undefined },
+        ];
+
+        const headerBg = port.enabled === false ? 'bg-orange-600/80' : (port.confirm ? 'bg-lime-600/80' : 'bg-slate-700/80');
+        const headerText = port.enabled === false ? 'DISABLE' : port.cartSize;
+
+        return (
+            <div className="flex-1 min-w-0 flex flex-col h-full">
+                {/* Header */}
+                <div className={`${headerBg} px-3 py-2 text-center font-bold text-sm border-b border-slate-600`}>
+                    <span className="text-white text-base">{headerText}</span>
+                    <span className="text-slate-300 ml-2 text-xs">({title})</span>
+                </div>
+                {/* Values */}
+                <div className="flex-1 flex flex-col divide-y divide-slate-700/50">
+                    {values.map((item, idx) => (
+                        <div key={idx} className="flex items-center px-2 py-1.5 text-sm flex-1">
+                            <span className="w-14 text-slate-500 font-bold shrink-0">{fieldLabels[idx]}</span>
+                            <span className={`flex-1 font-mono truncate ${isCenter ? getTrustColor(item.trust) : getCompareColor(item.val, item.val2)}`}>
+                                {item.rq ? `RQ:${item.val}` : item.val || '-'}
+                            </span>
+                            {isCenter && item.trust !== undefined && (
+                                item.trust ?
+                                    <CheckCircle className="w-4 h-4 text-lime-400 shrink-0" /> :
+                                    <XCircle className="w-4 h-4 text-slate-500 shrink-0" />
+                            )}
+                        </div>
+                    ))}
+                    {/* Center-specific fields */}
+                    {isCenter && (
+                        <>
+                            <div className="flex items-center px-2 py-1.5 text-sm flex-1">
+                                <span className="w-14 text-slate-500 font-bold shrink-0">MAX</span>
+                                <span className="flex-1 font-mono text-cyan-400">{port.qtymax || '-'}</span>
+                            </div>
+                            <div className="flex items-center px-2 py-1.5 text-sm flex-1">
+                                <span className="w-14 text-slate-500 font-bold shrink-0">BCD</span>
+                                <span className="flex-1 font-mono text-yellow-400">{port.barcodeCount ?? 0}</span>
+                            </div>
+                            <div className="flex items-center px-2 py-1.5 text-sm flex-1">
+                                <span className="w-14 text-slate-500 font-bold shrink-0">REGEX</span>
+                                <span className="flex-1 font-mono text-yellow-400">{port.regexCount ?? 0}</span>
+                            </div>
+                        </>
+                    )}
+                </div>
+            </div>
+        );
+    };
+
+    return (
+        <CyberPanel className="flex flex-col h-full">
+            <PanelHeader icon={Eye} title="RECOGNIZED DATA" className="mb-1" />
+
+            <div className="flex-1 overflow-hidden">
+                {!data ? (
+                    <div className="flex items-center justify-center h-full text-slate-500 text-xs">
+                        Waiting for data...
+                    </div>
+                ) : (
+                    <div className="flex gap-1 h-full">
+                        {renderPortColumn(data.left, 'LEFT')}
+                        {renderPortColumn(data.center, 'CENTER', true)}
+                        {renderPortColumn(data.right, 'RIGHT')}
+                    </div>
+                )}
+            </div>
+        </CyberPanel>
+    );
+};

FrontEnd/components/layout/Footer.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { RobotTarget } from '../../types';
 import { comms } from '../../communication';
 
@@ -10,6 +10,13 @@ interface HWItem {
     status: number;
 }
 
+// 오류 우선순위: motion(1) > i/o(2) > emergency(3) > general(4)
+interface HardwareError {
+    type: 'motion' | 'io' | 'emergency' | 'general';
+    priority: number;
+    message: string;
+}
+
 interface FooterProps {
     isHostConnected: boolean;
     robotTarget: RobotTarget;
@@ -45,17 +52,57 @@ export const Footer: React.FC<FooterProps> = ({ isHostConnected, robotTarget })
         };
     }, []);
 
+    // 하드웨어 오류 감지 및 우선순위 기반 표시
+    // 우선순위: motion(1) > i/o(2) > emergency(3) > general(4)
+    const hardwareError = useMemo((): HardwareError | null => {
+        const errors: HardwareError[] = [];
+
+        for (const hw of hwStatus) {
+            if (hw.status === 3) { // OFF 상태 (오류)
+                if (hw.name === 'MOT') {
+                    errors.push({ type: 'motion', priority: 1, message: 'MOTION HARDWARE ERROR' });
+                } else if (hw.name === 'DIO' || hw.name === 'I/O') {
+                    errors.push({ type: 'io', priority: 2, message: 'I/O HARDWARE ERROR' });
+                } else if (hw.name === 'EMG') {
+                    errors.push({ type: 'emergency', priority: 3, message: 'EMERGENCY ERROR' });
+                }
+                // 다른 하드웨어는 일반 오류로 표시하지 않음 (BCD, VIS, PRT 등은 일반적인 연결 상태)
+            }
+        }
+
+        // 우선순위가 가장 높은(숫자가 낮은) 오류 반환
+        if (errors.length === 0) return null;
+        return errors.sort((a, b) => a.priority - b.priority)[0];
+    }, [hwStatus]);
+
     return (
+        <>
+            {/* 하드웨어 오류 표시 배너 - 화면 중앙 상단에 크게 표시 */}
+            {hardwareError && (
+                <div className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[200] pointer-events-none">
+                    <div className="bg-red-900/95 border-4 border-red-500 rounded-lg px-12 py-8 shadow-[0_0_50px_rgba(239,68,68,0.5)] animate-pulse">
+                        <div className="text-center">
+                            <div className="text-red-400 text-6xl mb-4">⚠</div>
+                            <div className="text-red-100 text-3xl font-bold font-tech tracking-wider">
+                                {hardwareError.message}
+                            </div>
+                            <div className="text-red-300 text-sm mt-3 font-mono">
+                                CHECK HARDWARE CONNECTION
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            )}
+
             <footer className="absolute bottom-0 left-0 right-0 h-10 bg-black/80 border-t border-neon-blue/30 flex items-center px-6 justify-between z-40 backdrop-blur text-xs font-mono text-slate-400">
                 <div className="flex gap-4">
                     {/* H/W 상태 표시 (윈폼 HWState와 동일) */}
                     {hwStatus.map((hw) => {
                         const colors = getStatusColor(hw.status);
                         return (
-                        <div key={hw.name} className="flex items-center gap-1.5" title={`${hw.name}: ${hw.title}`}>
+                            <div key={hw.name} className="flex items-center gap-1" title={`${hw.name}: ${hw.title}`}>
                                 <div className={`w-2 h-2 rounded-full transition-all ${colors.bg} ${colors.shadow}`}></div>
-                            <span className={`font-bold ${colors.text}`}>{hw.name}</span>
+                                <span className={`text-[11px] font-bold ${colors.text}`}>{hw.name}</span>
-                            <span className="text-[10px] text-slate-500">{hw.title}</span>
                             </div>
                         );
                     })}
@@ -71,5 +118,6 @@ export const Footer: React.FC<FooterProps> = ({ isHostConnected, robotTarget })
                     <span>POS.Z: {robotTarget.z.toFixed(3)}</span>
                 </div>
             </footer>
+        </>
     );
 };

FrontEnd/pages/HomePage.tsx

@@ -8,6 +8,7 @@ import { MotionPanel } from '../components/MotionPanel';
 import { CyberPanel } from '../components/common/CyberPanel';
 import { ModelInfoPanel } from '../components/ModelInfoPanel';
 import { ProcessedDataPanel } from '../components/ProcessedDataPanel';
+import { VisionDataPanel } from '../components/VisionDataPanel';
 import { SystemStatusPanel } from '../components/SystemStatusPanel';
 import { EventLogPanel } from '../components/EventLogPanel';
 import { SystemState, Recipe, IOPoint, LogEntry, RobotTarget, ConfigItem } from '../types';
@@ -121,8 +122,13 @@ export const HomePage: React.FC<HomePageProps> = ({
                 <EventLogPanel logs={logs} />
             </div>
 
-            {/* Bottom Docked - Processed Data Panel */}
+            {/* Left - Vision Data Panel (Recognized Data) - 세로 공간 최대 사용 */}
-            <div className="absolute left-6 right-6 bottom-10 h-48 z-20">
+            <div className="absolute left-6 top-0 bottom-52 w-[680px] z-20">
+                <VisionDataPanel />
+            </div>
+
+            {/* Bottom Docked - Processed Data Panel (우측 사이드바 피함) */}
+            <div className="absolute left-6 right-[356px] bottom-10 h-40 z-20">
                 <ProcessedDataPanel />
             </div>
         </main>

Handler/Project/Dialog/fWebView.cs

@@ -277,6 +277,7 @@ namespace Project.Dialog
             {
                 _hwUpdateCounter = 0;
                 BroadcastHWStatus();
+                BroadcastVisionData();
             }
         }
 
@@ -311,6 +312,37 @@ namespace Project.Dialog
             }
         }
 
+        // Vision Data 브로드캐스트 (listView21과 동일한 데이터)
+        private void BroadcastVisionData()
+        {
+            try
+            {
+                var bridge = new WebUI.MachineBridge(this);
+                string visionDataJson = bridge.GetVisionData();
+
+                var payload = new
+                {
+                    type = "VISION_DATA_UPDATE",
+                    data = JsonConvert.DeserializeObject(visionDataJson)
+                };
+
+                string json = JsonConvert.SerializeObject(payload);
+
+                // WebView2로 전송
+                if (webView != null && webView.CoreWebView2 != null)
+                {
+                    webView.CoreWebView2.PostWebMessageAsJson(json);
+                }
+
+                // WebSocket으로 전송
+                _wsServer?.Broadcast(json);
+            }
+            catch (Exception ex)
+            {
+                Console.WriteLine($"[fWebView] Vision data broadcast error: {ex.Message}");
+            }
+        }
+
         private List<object> GetChangedIOs()
         {
             var list = new List<object>();

Handler/Project/WebUI/MachineBridge.cs

@@ -1367,7 +1367,7 @@ namespace Project.WebUI
                 var exename = AR.UTIL.MakePath("LogView.exe");
                 if (System.IO.File.Exists(exename) == false)
                 {
-                    var response = new { success = false, message = "Log viewer file not found\nPlease contact support" };
+                    var response = new { success = false, message = $"Log viewer file not found\n{exename}\nPlease contact support" };
                     return JsonConvert.SerializeObject(response);
                 }
 
@@ -2221,7 +2221,15 @@ namespace Project.WebUI
                     hwList.Add(new { name = "PLC", title = "SET", status = 0 });
                 }
 
-                // 9. Motion
+                // 9. DIO (Digital I/O)
+                hwList.Add(new
+                {
+                    name = "DIO",
+                    title = PUB.dio?.IsInit == true ? "ON" : "OFF",
+                    status = PUB.dio?.IsInit == true ? 1 : 3
+                });
+
+                // 10. Motion
                 hwList.Add(new
                 {
                     name = "MOT",
@@ -2238,6 +2246,100 @@ namespace Project.WebUI
             }
         }
 
+        /// <summary>
+        /// 실시간 인식 데이터 조회 (listView21과 동일한 데이터)
+        /// Left/Center/Right 포트의 VisionData 정보
+        /// </summary>
+        public string GetVisionData()
+        {
+            try
+            {
+                var visdataL = PUB.Result.ItemDataL?.VisionData;
+                var visdataC = PUB.Result.ItemDataC?.VisionData;
+                var visdataR = PUB.Result.ItemDataR?.VisionData;
+
+                var result = new
+                {
+                    left = new
+                    {
+                        cartSize = DIO.getCartSize(0).ToString(),
+                        enabled = PUB.flag.get(eVarBool.FG_ENABLE_LEFT),
+                        rid = visdataL?.RID ?? "",
+                        sid = visdataL?.SID ?? "",
+                        qty = visdataL?.QTY ?? "",
+                        vname = visdataL?.VNAME ?? "",
+                        vlot = visdataL?.VLOT ?? "",
+                        mfgdate = visdataL?.MFGDATE ?? "",
+                        partno = visdataL?.PARTNO ?? "",
+                        reelSize = visdataL?.ReelSize.ToString() ?? "--",
+                        batch = visdataL?.BATCH ?? "",
+                        rid2 = visdataL?.RID2 ?? "",
+                        sid2 = visdataL?.SID2 ?? "",
+                        qty2 = visdataL?.QTY2 ?? "",
+                        vname2 = visdataL?.VNAME2 ?? "",
+                        vlot2 = visdataL?.VLOT2 ?? "",
+                        mfgdate2 = visdataL?.MFGDATE2 ?? "",
+                        partno2 = visdataL?.PARTNO2 ?? ""
+                    },
+                    center = new
+                    {
+                        cartSize = DIO.getCartSize(1).ToString(),
+                        confirm = visdataC?.Confirm ?? false,
+                        rid = visdataC?.RID ?? "",
+                        rid_trust = visdataC?.RID_Trust ?? false,
+                        rid_new = visdataC?.RIDNew ?? false,
+                        sid = visdataC?.SID ?? "",
+                        sid0 = visdataC?.SID0 ?? "",
+                        sid_trust = visdataC?.SID_Trust ?? false,
+                        qty = visdataC?.QTY ?? "",
+                        qty_trust = visdataC?.QTY_Trust ?? false,
+                        qty_rq = visdataC?.QTYRQ ?? false,
+                        vname = visdataC?.VNAME ?? "",
+                        vname_trust = visdataC?.VNAME_Trust ?? false,
+                        vlot = visdataC?.VLOT ?? "",
+                        vlot_trust = visdataC?.VLOT_Trust ?? false,
+                        mfgdate = visdataC?.MFGDATE ?? "",
+                        mfgdate_trust = visdataC?.MFGDATE_Trust ?? false,
+                        partno = visdataC?.PARTNO ?? "",
+                        partno_trust = visdataC?.PARTNO_Trust ?? false,
+                        reelSize = visdataC?.ReelSize.ToString() ?? "--",
+                        batch = visdataC?.BATCH ?? "",
+                        qtymax = visdataC?.QTYMAX ?? "",
+                        barcodeCount = visdataC?.barcodelist?.Count ?? 0,
+                        regexCount = PUB.Result.BCDPattern?.Count ?? 0
+                    },
+                    right = new
+                    {
+                        cartSize = DIO.getCartSize(2).ToString(),
+                        enabled = PUB.flag.get(eVarBool.FG_ENABLE_RIGHT),
+                        rid = visdataR?.RID ?? "",
+                        sid = visdataR?.SID ?? "",
+                        qty = visdataR?.QTY ?? "",
+                        vname = visdataR?.VNAME ?? "",
+                        vlot = visdataR?.VLOT ?? "",
+                        mfgdate = visdataR?.MFGDATE ?? "",
+                        partno = visdataR?.PARTNO ?? "",
+                        reelSize = visdataR?.ReelSize.ToString() ?? "--",
+                        batch = visdataR?.BATCH ?? "",
+                        rid2 = visdataR?.RID2 ?? "",
+                        sid2 = visdataR?.SID2 ?? "",
+                        qty2 = visdataR?.QTY2 ?? "",
+                        vname2 = visdataR?.VNAME2 ?? "",
+                        vlot2 = visdataR?.VLOT2 ?? "",
+                        mfgdate2 = visdataR?.MFGDATE2 ?? "",
+                        partno2 = visdataR?.PARTNO2 ?? ""
+                    }
+                };
+
+                return JsonConvert.SerializeObject(result);
+            }
+            catch (Exception ex)
+            {
+                Console.WriteLine($"[ERROR] Failed to get vision data: {ex.Message}");
+                return JsonConvert.SerializeObject(new { left = new { }, center = new { }, right = new { } });
+            }
+        }
+
         /// <summary>
         /// 인터락 목록 조회 (실시간 값 포함)
         /// </summary>

Handler/Project/fMain.cs

@@ -1651,7 +1651,7 @@ namespace Project
             var exename = UTIL.MakePath("LogView.exe");
             if (System.IO.File.Exists(exename) == false)
             {
-                UTIL.MsgE("Log viewer file not found\nPlease contact support (T8567)");
+                UTIL.MsgE($"Log viewer file not found\n{exename}\nPlease contact support (T8567)");
                 return;
             }