가상투자 메뉴 기능 구현

frontend/src/components/virtual/VirtualLiveBadge.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { VirtualLiveStatus } from '../../hooks/useVirtualTargetLiveStatus';
+
+interface Props {
+  status: VirtualLiveStatus;
+}
+
+const LABEL: Record<VirtualLiveStatus, string | null> = {
+  idle: null,
+  connecting: '연결 중',
+  live: '실시간',
+  disconnected: '연결 끊김',
+};
+
+const VirtualLiveBadge: React.FC<Props> = ({ status }) => {
+  const label = LABEL[status];
+  if (!label) return null;
+
+  return (
+    <span className={`vtd-live-badge vtd-live-badge--${status}`}>
+      <span className="vtd-live-badge-dot" aria-hidden />
+      <span className="vtd-live-badge-text">{label}</span>
+    </span>
+  );
+};
+
+export default VirtualLiveBadge;