diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx
index dcd80a62..0127c9d1 100644
--- a/frontend/components/screen/ScreenDesigner.tsx
+++ b/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);
diff --git a/frontend/components/screen/StyleEditor.tsx b/frontend/components/screen/StyleEditor.tsx
index 054875f7..2e5dec7e 100644
--- a/frontend/components/screen/StyleEditor.tsx
+++ b/frontend/components/screen/StyleEditor.tsx
@@ -49,7 +49,6 @@ export default function StyleEditor({ style, onStyleChange, className }: StyleEd
value={localStyle.borderWidth || ""}
onChange={(e) => handleStyleChange("borderWidth", e.target.value)}
className="h-6 w-full px-2 py-0 text-xs"
- style={{ fontSize: "12px" }}
/>
@@ -60,20 +59,20 @@ export default function StyleEditor({ style, onStyleChange, className }: StyleEd
value={localStyle.borderStyle || "solid"}
onValueChange={(value) => handleStyleChange("borderStyle", value)}
>
-
+
-
+
실선
-
+
파선
-
+
점선
-
+
없음
@@ -93,7 +92,7 @@ export default function StyleEditor({ style, onStyleChange, className }: StyleEd
value={localStyle.borderColor || "#000000"}
onChange={(e) => handleStyleChange("borderColor", e.target.value)}
className="h-6 w-12 p-1"
- style={{ fontSize: "12px" }}
+ className="text-xs"
/>
handleStyleChange("borderColor", e.target.value)}
placeholder="#000000"
className="h-6 flex-1 text-xs"
- style={{ fontSize: "12px" }}
/>
@@ -116,7 +114,6 @@ export default function StyleEditor({ style, onStyleChange, className }: StyleEd
value={localStyle.borderRadius || ""}
onChange={(e) => handleStyleChange("borderRadius", e.target.value)}
className="h-6 w-full px-2 py-0 text-xs"
- style={{ fontSize: "12px" }}
/>
@@ -142,7 +139,7 @@ export default function StyleEditor({ style, onStyleChange, className }: StyleEd
value={localStyle.backgroundColor || "#ffffff"}
onChange={(e) => handleStyleChange("backgroundColor", e.target.value)}
className="h-6 w-12 p-1"
- style={{ fontSize: "12px" }}
+ className="text-xs"
/>
handleStyleChange("backgroundColor", e.target.value)}
placeholder="#ffffff"
className="h-6 flex-1 text-xs"
- style={{ fontSize: "12px" }}
/>
@@ -166,7 +162,6 @@ export default function StyleEditor({ style, onStyleChange, className }: StyleEd
value={localStyle.backgroundImage || ""}
onChange={(e) => handleStyleChange("backgroundImage", e.target.value)}
className="h-6 w-full px-2 py-0 text-xs"
- style={{ fontSize: "12px" }}
/>
위젯 배경 꾸미기용 (고급 사용자 전용)
@@ -195,7 +190,7 @@ export default function StyleEditor({ style, onStyleChange, className }: StyleEd
value={localStyle.color || "#000000"}
onChange={(e) => handleStyleChange("color", e.target.value)}
className="h-6 w-12 p-1"
- style={{ fontSize: "12px" }}
+ className="text-xs"
/>
handleStyleChange("color", e.target.value)}
placeholder="#000000"
className="h-6 flex-1 text-xs"
- style={{ fontSize: "12px" }}
/>
@@ -218,7 +212,6 @@ export default function StyleEditor({ style, onStyleChange, className }: StyleEd
value={localStyle.fontSize || ""}
onChange={(e) => handleStyleChange("fontSize", e.target.value)}
className="h-6 w-full px-2 py-0 text-xs"
- style={{ fontSize: "12px" }}
/>
@@ -232,29 +225,29 @@ export default function StyleEditor({ style, onStyleChange, className }: StyleEd
value={localStyle.fontWeight || "normal"}
onValueChange={(value) => handleStyleChange("fontWeight", value)}
>
-
+
-
+
보통
-
+
굵게
-
+
100
-
+
400
-
+
500
-
+
600
-
+
700
@@ -268,20 +261,20 @@ export default function StyleEditor({ style, onStyleChange, className }: StyleEd
value={localStyle.textAlign || "left"}
onValueChange={(value) => handleStyleChange("textAlign", value)}
>
-
+
-
+
왼쪽
-
+
가운데
-
+
오른쪽
-
+
양쪽
diff --git a/frontend/components/screen/config-panels/ButtonConfigPanel.tsx b/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
index 1ef8fee4..7af50458 100644
--- a/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
@@ -509,7 +509,7 @@ export const ButtonConfigPanel: React.FC = ({
role="combobox"
aria-expanded={modalScreenOpen}
className="h-6 w-full justify-between px-2 py-0"
- style={{ fontSize: "12px" }}
+ className="text-xs"
disabled={screensLoading}
>
{config.action?.targetScreenId
@@ -900,7 +900,7 @@ export const ButtonConfigPanel: React.FC = ({
role="combobox"
aria-expanded={modalScreenOpen}
className="h-6 w-full justify-between px-2 py-0"
- style={{ fontSize: "12px" }}
+ className="text-xs"
disabled={screensLoading}
>
{config.action?.targetScreenId
@@ -978,7 +978,7 @@ export const ButtonConfigPanel: React.FC = ({
role="combobox"
aria-expanded={modalScreenOpen}
className="h-6 w-full justify-between px-2 py-0"
- style={{ fontSize: "12px" }}
+ className="text-xs"
disabled={screensLoading}
>
{config.action?.targetScreenId
@@ -1132,7 +1132,7 @@ export const ButtonConfigPanel: React.FC = ({
role="combobox"
aria-expanded={modalScreenOpen}
className="h-6 w-full justify-between px-2 py-0"
- style={{ fontSize: "12px" }}
+ className="text-xs"
disabled={screensLoading}
>
{config.action?.targetScreenId
@@ -1286,7 +1286,6 @@ export const ButtonConfigPanel: React.FC = ({
role="combobox"
aria-expanded={displayColumnOpen}
className="mt-2 h-8 w-full justify-between text-xs"
- style={{ fontSize: "12px" }}
disabled={columnsLoading || tableColumns.length === 0}
>
{columnsLoading
@@ -1301,9 +1300,9 @@ export const ButtonConfigPanel: React.FC = ({
-
+
-
+
컬럼을 찾을 수 없습니다.
@@ -1316,7 +1315,6 @@ export const ButtonConfigPanel: React.FC = ({
setDisplayColumnOpen(false);
}}
className="text-xs"
- style={{ fontSize: "12px" }}
>
= ({
role="combobox"
aria-expanded={navScreenOpen}
className="h-6 w-full justify-between px-2 py-0"
- style={{ fontSize: "12px" }}
+ className="text-xs"
disabled={screensLoading}
>
{config.action?.targetScreenId
@@ -1424,7 +1422,6 @@ export const ButtonConfigPanel: React.FC = ({
onUpdateProperty("componentConfig.action.targetUrl", newValue);
}}
className="h-6 w-full px-2 py-0 text-xs"
- style={{ fontSize: "12px" }}
/>
URL을 입력하면 화면 선택보다 우선 적용됩니다
diff --git a/frontend/components/screen/config-panels/CheckboxConfigPanel.tsx b/frontend/components/screen/config-panels/CheckboxConfigPanel.tsx
index 85a78b7a..bff983dc 100644
--- a/frontend/components/screen/config-panels/CheckboxConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/CheckboxConfigPanel.tsx
@@ -117,7 +117,7 @@ export const CheckboxConfigPanel: React.FC = ({
return (
-
+
체크박스 설정
@@ -173,7 +173,7 @@ export const CheckboxConfigPanel: React.FC = ({
value={localConfig.label || ""}
onChange={(e) => updateConfig("label", e.target.value)}
placeholder="체크박스 라벨"
- className="text-xs" style={{ fontSize: "12px" }}
+ className="text-xs"
/>
@@ -187,7 +187,7 @@ export const CheckboxConfigPanel: React.FC = ({
value={localConfig.checkedValue || ""}
onChange={(e) => updateConfig("checkedValue", e.target.value)}
placeholder="Y"
- className="text-xs" style={{ fontSize: "12px" }}
+ className="text-xs"
/>
@@ -199,7 +199,7 @@ export const CheckboxConfigPanel: React.FC = ({
value={localConfig.uncheckedValue || ""}
onChange={(e) => updateConfig("uncheckedValue", e.target.value)}
placeholder="N"
- className="text-xs" style={{ fontSize: "12px" }}
+ className="text-xs"
/>
@@ -232,7 +232,7 @@ export const CheckboxConfigPanel: React.FC = ({
value={localConfig.groupLabel || ""}
onChange={(e) => updateConfig("groupLabel", e.target.value)}
placeholder="체크박스 그룹 제목"
- className="text-xs" style={{ fontSize: "12px" }}
+ className="text-xs"
/>
@@ -244,19 +244,19 @@ export const CheckboxConfigPanel: React.FC = ({
value={newOptionLabel}
onChange={(e) => setNewOptionLabel(e.target.value)}
placeholder="라벨"
- className="flex-1 text-xs" style={{ fontSize: "12px" }}
+ className="flex-1 text-xs"
/>
setNewOptionValue(e.target.value)}
placeholder="값"
- className="flex-1 text-xs" style={{ fontSize: "12px" }}
+ className="flex-1 text-xs"
/>
@@ -277,13 +277,13 @@ export const CheckboxConfigPanel: React.FC = ({
value={option.label}
onChange={(e) => updateOption(index, "label", e.target.value)}
placeholder="라벨"
- className="flex-1 text-xs" style={{ fontSize: "12px" }}
+ className="flex-1 text-xs"
/>
updateOption(index, "value", e.target.value)}
placeholder="값"
- className="flex-1 text-xs" style={{ fontSize: "12px" }}
+ className="flex-1 text-xs"
/>
= ({
disabled={localConfig.readonly}
required={localConfig.required}
defaultChecked={localConfig.defaultChecked}
- className="text-xs" style={{ fontSize: "12px" }}
+ className="text-xs"
/>