TCP 서버 모드 추가

TestMasterUI/src/hooks/use-mobile.jsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange);
+  }, [])
+
+  return !!isMobile
+}

TestMasterUI/src/hooks/useMonaco.js

@@ -0,0 +1,68 @@
+import { useEffect, useRef, useState } from 'react';
+import * as monaco from 'monaco-editor';
+
+export const useMonaco = ({
+  defaultValue = '',
+  language = 'javascript',
+  readOnly = false,
+  automaticLayout = true,
+  quickSuggestions = false
+}) => {
+  const [editor, setEditor] = useState(null);
+  const containerRef = useRef(null);
+  const [value, setValue] = useState(defaultValue);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    const instance = monaco.editor.create(containerRef.current, {
+      value: defaultValue,
+      language,
+      automaticLayout,
+      quickSuggestions,
+      readOnly,
+      minimap: {
+        enabled: false
+      },
+      scrollBeyondLastLine: false,
+      theme: 'vs-dark'
+    });
+
+    setEditor(instance);
+
+    instance.onDidChangeModelContent(() => {
+      setValue(instance.getValue());
+    });
+
+    const resizeHandler = () => {
+      // Monaco editor sometimes needs a manual resize trigger
+      instance.layout({
+        width: 0,
+        height: 0
+      });
+      instance.layout();
+    };
+
+    window.addEventListener('resize', resizeHandler);
+
+    return () => {
+      window.removeEventListener('resize', resizeHandler);
+      instance.dispose();
+    };
+  }, [defaultValue, language, automaticLayout, quickSuggestions, readOnly]);
+
+  // Sync external value changes
+  useEffect(() => {
+    if (editor && defaultValue !== value) {
+      editor.setValue(defaultValue);
+    }
+  }, [defaultValue, editor]);
+
+  return {
+    editor,
+    containerRef,
+    value
+  };
+};
+
+export default useMonaco;