편집기 인풋 오류 수정 및 탭 컴포넌트 완성

frontend/components/screen/ScreenDesigner.tsx

@@ -981,7 +981,18 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
   // 스페이스바 키 이벤트 처리 (Pan 모드) + 전역 마우스 이벤트
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
-      // 입력 필드에서는 스페이스바 무시
+      // 입력 필드에서는 스페이스바 무시 (activeElement로 정확하게 체크)
+      const activeElement = document.activeElement;
+      if (
+        activeElement instanceof HTMLInputElement ||
+        activeElement instanceof HTMLTextAreaElement ||
+        activeElement?.getAttribute('contenteditable') === 'true' ||
+        activeElement?.getAttribute('role') === 'textbox'
+      ) {
+        return;
+      }
+
+      // e.target도 함께 체크 (이중 방어)
       if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
         return;
       }
@@ -997,6 +1008,17 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
     };
 
     const handleKeyUp = (e: KeyboardEvent) => {
+      // 입력 필드에서는 스페이스바 무시
+      const activeElement = document.activeElement;
+      if (
+        activeElement instanceof HTMLInputElement ||
+        activeElement instanceof HTMLTextAreaElement ||
+        activeElement?.getAttribute('contenteditable') === 'true' ||
+        activeElement?.getAttribute('role') === 'textbox'
+      ) {
+        return;
+      }
+
       if (e.code === "Space") {
         e.preventDefault(); // 스페이스바 기본 스크롤 동작 차단
         setIsPanMode(false);