initial commit

components/LogConsole.tsx

@@ -0,0 +1,57 @@
+import React, { useEffect, useRef } from 'react';
+import { LogEntry } from '../types';
+
+interface LogConsoleProps {
+  logs: LogEntry[];
+}
+
+const LogConsole: React.FC<LogConsoleProps> = ({ logs }) => {
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [logs]);
+
+  const getColor = (type: LogEntry['type']) => {
+    switch (type) {
+      case 'command': return 'text-blue-600';
+      case 'response': return 'text-green-600';
+      case 'error': return 'text-red-600';
+      case 'success': return 'text-emerald-600';
+      default: return 'text-slate-500';
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-full bg-white border border-slate-300 rounded-lg overflow-hidden font-mono text-xs shadow-sm">
+      <div className="bg-slate-50 px-3 py-1 border-b border-slate-200 text-slate-500 text-xs font-semibold uppercase tracking-wider">
+        연결 로그 (Connection Log)
+      </div>
+      <div 
+        ref={scrollRef}
+        className="flex-1 overflow-y-auto p-2 space-y-1 bg-white"
+      >
+        {logs.map((log) => (
+          <div key={log.id} className="flex gap-3 hover:bg-slate-50 p-0.5 rounded">
+            <span className="text-slate-400 shrink-0 select-none">
+              {new Date(log.timestamp).toLocaleTimeString()}
+            </span>
+            <span className={`${getColor(log.type)} break-all`}>
+              <span className="font-bold mr-2 uppercase text-[10px] opacity-70 border border-slate-200 px-1 rounded bg-slate-50 text-slate-600">
+                {log.type}
+              </span>
+              {log.message}
+            </span>
+          </div>
+        ))}
+        {logs.length === 0 && (
+          <div className="text-slate-400 italic px-2">로그 없음. 연결 대기 중...</div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default LogConsole;