From 743ae6dbf1520895c65edb71a96e05b5d90c5776 Mon Sep 17 00:00:00 2001 From: kjs Date: Tue, 28 Oct 2025 17:33:03 +0900 Subject: [PATCH] =?UTF-8?q?=ED=8C=A8=EB=84=90=20=EC=A0=95=EB=A6=AC=20?= =?UTF-8?q?=EC=A4=91=EA=B0=84=20=EC=BB=A4=EB=B0=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/components/screen/ScreenDesigner.tsx | 135 +- frontend/components/screen/StyleEditor.tsx | 140 +- .../config-panels/ButtonConfigPanel.tsx | 16 +- .../config-panels/CheckboxConfigPanel.tsx | 24 +- .../screen/config-panels/CodeConfigPanel.tsx | 12 +- .../screen/config-panels/DateConfigPanel.tsx | 12 +- .../config-panels/EntityConfigPanel.tsx | 36 +- .../screen/config-panels/FileConfigPanel.tsx | 12 +- .../FlowVisibilityConfigPanel.tsx | 10 +- .../config-panels/FlowWidgetConfigPanel.tsx | 2 +- .../config-panels/NumberConfigPanel.tsx | 14 +- .../screen/config-panels/RadioConfigPanel.tsx | 22 +- .../config-panels/SelectConfigPanel.tsx | 22 +- .../screen/config-panels/TextConfigPanel.tsx | 12 +- .../config-panels/TextareaConfigPanel.tsx | 14 +- .../screen/dialogs/FlowButtonGroupDialog.tsx | 4 +- .../screen/panels/ComponentsPanel.tsx | 2 +- .../screen/panels/DataTableConfigPanel.tsx | 112 +- .../screen/panels/DetailSettingsPanel.tsx | 75 +- .../screen/panels/FlowButtonGroupPanel.tsx | 4 +- .../components/screen/panels/GridPanel.tsx | 4 +- .../components/screen/panels/LayoutsPanel.tsx | 2 +- .../screen/panels/PropertiesPanel.tsx | 6 +- .../screen/panels/ResolutionPanel.tsx | 15 +- .../screen/panels/RowSettingsPanel.tsx | 4 +- .../screen/panels/TemplatesPanel.tsx | 2 +- .../screen/panels/UnifiedPropertiesPanel.tsx | 173 +- .../screen/panels/WebTypeConfigPanel.tsx | 8 +- .../CheckboxTypeConfigPanel.tsx | 8 +- .../webtype-configs/CodeTypeConfigPanel.tsx | 4 +- .../webtype-configs/DateTypeConfigPanel.tsx | 2 +- .../webtype-configs/EntityTypeConfigPanel.tsx | 6 +- .../webtype-configs/NumberTypeConfigPanel.tsx | 2 +- .../webtype-configs/RadioTypeConfigPanel.tsx | 2 +- .../webtype-configs/SelectTypeConfigPanel.tsx | 6 +- .../webtype-configs/TextTypeConfigPanel.tsx | 4 +- .../TextareaTypeConfigPanel.tsx | 2 +- .../screen/toolbar/LeftUnifiedToolbar.tsx | 22 +- .../components/screen/widgets/FlowWidget.tsx | 2 +- .../components/screen/widgets/InputWidget.tsx | 3 +- .../screen/widgets/SelectWidget.tsx | 2 +- frontend/components/ui/select.tsx | 8 +- .../table-list/TableListConfigPanel.tsx | 1890 ++++++----------- 43 files changed, 1191 insertions(+), 1666 deletions(-) diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx index c4eaa89d..d669431d 100644 --- a/frontend/components/screen/ScreenDesigner.tsx +++ b/frontend/components/screen/ScreenDesigner.tsx @@ -87,21 +87,12 @@ interface ScreenDesignerProps { onBackToList: () => void; } -// 패널 설정 (컴포넌트와 편집 2개) +// 패널 설정 (통합 패널 1개) const panelConfigs: PanelConfig[] = [ - // 컴포넌트 패널 (테이블 + 컴포넌트 탭) + // 통합 패널 (컴포넌트 + 편집 탭) { - id: "components", - title: "컴포넌트", - defaultPosition: "left", - defaultWidth: 240, - defaultHeight: 700, - shortcutKey: "c", - }, - // 편집 패널 (속성 + 스타일 & 해상도 탭) - { - id: "properties", - title: "편집", + id: "unified", + title: "패널", defaultPosition: "left", defaultWidth: 240, defaultHeight: 700, @@ -141,14 +132,14 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD const [selectedComponent, setSelectedComponent] = useState(null); - // 컴포넌트 선택 시 속성 패널 자동 열기 + // 컴포넌트 선택 시 통합 패널 자동 열기 const handleComponentSelect = useCallback( (component: ComponentData | null) => { setSelectedComponent(component); - // 컴포넌트가 선택되면 속성 패널 자동 열기 + // 컴포넌트가 선택되면 통합 패널 자동 열기 if (component) { - openPanel("properties"); + openPanel("unified"); } }, [openPanel], @@ -4119,74 +4110,72 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD {/* 좌측 통합 툴바 */} - {/* 열린 패널들 (좌측에서 우측으로 누적) */} - {panelStates.components?.isOpen && ( + {/* 통합 패널 */} + {panelStates.unified?.isOpen && (
-
-

컴포넌트

+
+

패널

-
- { - const dragData = { - type: column ? "column" : "table", - table, - column, - }; - e.dataTransfer.setData("application/json", JSON.stringify(dragData)); - }} - selectedTableName={selectedScreen.tableName} - placedColumns={placedColumns} - /> +
+ + + + 컴포넌트 + + + 편집 + + + + + { + const dragData = { + type: column ? "column" : "table", + table, + column, + }; + e.dataTransfer.setData("application/json", JSON.stringify(dragData)); + }} + selectedTableName={selectedScreen.tableName} + placedColumns={placedColumns} + /> + + + + 0 ? tables[0] : undefined} + currentTableName={selectedScreen?.tableName} + dragState={dragState} + onStyleChange={(style) => { + if (selectedComponent) { + updateComponentProperty(selectedComponent.id, "style", style); + } + }} + currentResolution={screenResolution} + onResolutionChange={handleResolutionChange} + allComponents={layout.components} // 🆕 플로우 위젯 감지용 + /> + +
)} - {panelStates.properties?.isOpen && ( -
-
-

속성

- -
-
- 0 ? tables[0] : undefined} - currentTableName={selectedScreen?.tableName} - dragState={dragState} - onStyleChange={(style) => { - if (selectedComponent) { - updateComponentProperty(selectedComponent.id, "style", style); - } - }} - currentResolution={screenResolution} - onResolutionChange={handleResolutionChange} - allComponents={layout.components} // 🆕 플로우 위젯 감지용 - /> -
-
- )} - - {/* 스타일과 해상도 패널은 속성 패널의 탭으로 통합됨 */} - {/* 메인 캔버스 영역 (스크롤 가능한 컨테이너) - 좌우 최소화, 위아래 넉넉한 여유 */}
{/* Pan 모드 안내 - 제거됨 */} diff --git a/frontend/components/screen/StyleEditor.tsx b/frontend/components/screen/StyleEditor.tsx index cadeb641..95523901 100644 --- a/frontend/components/screen/StyleEditor.tsx +++ b/frontend/components/screen/StyleEditor.tsx @@ -28,17 +28,17 @@ export default function StyleEditor({ style, onStyleChange, className }: StyleEd }; return ( -
+
{/* 테두리 섹션 */} -
+
- +

테두리

- -
-
-
+ +
+
+
@@ -48,10 +48,11 @@ export default function StyleEditor({ style, onStyleChange, className }: StyleEd placeholder="1px" value={localStyle.borderWidth || ""} onChange={(e) => handleStyleChange("borderWidth", e.target.value)} - className="h-8 text-xs" + className="h-6 w-full px-2 py-0 text-xs" + style={{ fontSize: "12px" }} />
-
+
@@ -59,42 +60,52 @@ export default function StyleEditor({ style, onStyleChange, className }: StyleEd value={localStyle.borderStyle || "solid"} onValueChange={(value) => handleStyleChange("borderStyle", value)} > - + - 실선 - 파선 - 점선 - 없음 + + 실선 + + + 파선 + + + 점선 + + + 없음 +
-
-
+
+
-
+
handleStyleChange("borderColor", e.target.value)} - className="h-8 w-14 p-1 text-xs" + className="h-6 w-12 p-1" + style={{ fontSize: "12px" }} /> handleStyleChange("borderColor", e.target.value)} placeholder="#000000" - className="h-8 flex-1 text-xs" + className="h-6 flex-1 text-xs" + style={{ fontSize: "12px" }} />
-
+
@@ -104,7 +115,8 @@ export default function StyleEditor({ style, onStyleChange, className }: StyleEd placeholder="5px" value={localStyle.borderRadius || ""} onChange={(e) => handleStyleChange("borderRadius", e.target.value)} - className="h-8 text-xs" + className="h-6 w-full px-2 py-0 text-xs" + style={{ fontSize: "12px" }} />
@@ -112,38 +124,40 @@ export default function StyleEditor({ style, onStyleChange, className }: StyleEd
{/* 배경 섹션 */} -
+
- +

배경

- -
-
+ +
+
-
+
handleStyleChange("backgroundColor", e.target.value)} - className="h-8 w-14 p-1 text-xs" + className="h-6 w-12 p-1" + style={{ fontSize: "12px" }} /> handleStyleChange("backgroundColor", e.target.value)} placeholder="#ffffff" - className="h-8 flex-1 text-xs" + className="h-6 flex-1 text-xs" + style={{ fontSize: "12px" }} />
-
+
handleStyleChange("backgroundImage", e.target.value)} - className="h-8 text-xs" + className="h-6 w-full px-2 py-0 text-xs" + style={{ fontSize: "12px" }} />
{/* 텍스트 섹션 */} -
+
- +

텍스트

- -
-
-
+ +
+
+
-
+
handleStyleChange("color", e.target.value)} - className="h-8 w-14 p-1 text-xs" + className="h-6 w-12 p-1" + style={{ fontSize: "12px" }} /> handleStyleChange("color", e.target.value)} placeholder="#000000" - className="h-8 flex-1 text-xs" + className="h-6 flex-1 text-xs" + style={{ fontSize: "12px" }} />
-
+
@@ -197,70 +214,71 @@ export default function StyleEditor({ style, onStyleChange, className }: StyleEd placeholder="14px" value={localStyle.fontSize || ""} onChange={(e) => handleStyleChange("fontSize", e.target.value)} - className="h-8 text-xs" + className="h-6 w-full px-2 py-0 text-xs" + style={{ fontSize: "12px" }} />
-
-
@@ -330,7 +330,7 @@ export const CodeConfigPanel: React.FC = ({ value={localConfig.defaultValue || ""} onChange={(e) => updateConfig("defaultValue", e.target.value)} placeholder="기본 코드 내용" - className="font-mono text-xs" + className="font-mono text-xs" style={{ fontSize: "12px" }} rows={4} />
diff --git a/frontend/components/screen/config-panels/DateConfigPanel.tsx b/frontend/components/screen/config-panels/DateConfigPanel.tsx index bbea14d4..7fcacc57 100644 --- a/frontend/components/screen/config-panels/DateConfigPanel.tsx +++ b/frontend/components/screen/config-panels/DateConfigPanel.tsx @@ -75,7 +75,7 @@ export const DateConfigPanel: React.FC = ({ return ( - + 날짜 설정 @@ -95,7 +95,7 @@ export const DateConfigPanel: React.FC = ({ value={localConfig.placeholder || ""} onChange={(e) => updateConfig("placeholder", e.target.value)} placeholder="날짜를 선택하세요" - className="text-xs" + className="text-xs" style={{ fontSize: "12px" }} />
@@ -149,7 +149,7 @@ export const DateConfigPanel: React.FC = ({ type={localConfig.showTime ? "datetime-local" : "date"} value={localConfig.minDate || ""} onChange={(e) => updateConfig("minDate", e.target.value)} - className="flex-1 text-xs" + className="flex-1 text-xs" style={{ fontSize: "12px" }} /> @@ -213,7 +213,7 @@ export const EntityConfigPanel: React.FC = ({ value={localConfig.apiEndpoint || ""} onChange={(e) => updateConfig("apiEndpoint", e.target.value)} placeholder="/api/entities/user" - className="text-xs" + className="text-xs" style={{ fontSize: "12px" }} />
@@ -232,7 +232,7 @@ export const EntityConfigPanel: React.FC = ({ value={localConfig.valueField || ""} onChange={(e) => updateConfig("valueField", e.target.value)} placeholder="id" - className="text-xs" + className="text-xs" style={{ fontSize: "12px" }} />
@@ -245,7 +245,7 @@ export const EntityConfigPanel: React.FC = ({ value={localConfig.labelField || ""} onChange={(e) => updateConfig("labelField", e.target.value)} placeholder="name" - className="text-xs" + className="text-xs" style={{ fontSize: "12px" }} />
@@ -263,13 +263,13 @@ export const EntityConfigPanel: React.FC = ({ value={newFieldName} onChange={(e) => setNewFieldName(e.target.value)} placeholder="필드명" - className="flex-1 text-xs" + className="flex-1 text-xs" style={{ fontSize: "12px" }} /> setNewFieldLabel(e.target.value)} placeholder="라벨" - className="flex-1 text-xs" + className="flex-1 text-xs" style={{ fontSize: "12px" }} /> updateDisplayField(index, "label", e.target.value)} placeholder="라벨" - className="flex-1 text-xs" + className="flex-1 text-xs" style={{ fontSize: "12px" }} /> setNewOptionValue(e.target.value)} placeholder="값" - className="flex-1 text-xs" + className="flex-1 text-xs" style={{ fontSize: "12px" }} /> @@ -278,7 +278,7 @@ export const RadioConfigPanel: React.FC = ({ value={bulkOptions} onChange={(e) => setBulkOptions(e.target.value)} placeholder="한 줄당 하나씩 입력하세요. 라벨만 입력하면 값과 동일하게 설정됩니다. 라벨|값 형식으로 입력하면 별도 값을 설정할 수 있습니다. 예시: 서울 부산 대구시|daegu" - className="h-20 text-xs" + className="h-20 text-xs" style={{ fontSize: "12px" }} />
@@ -186,7 +186,7 @@ export const SelectConfigPanel: React.FC = ({ value={localConfig.emptyMessage || ""} onChange={(e) => updateConfig("emptyMessage", e.target.value)} placeholder="선택 가능한 옵션이 없습니다" - className="text-xs" + className="text-xs" style={{ fontSize: "12px" }} />
@@ -247,19 +247,19 @@ export const SelectConfigPanel: React.FC = ({ value={newOptionLabel} onChange={(e) => setNewOptionLabel(e.target.value)} placeholder="라벨" - className="flex-1 text-xs" + className="flex-1 text-xs" style={{ fontSize: "12px" }} /> setNewOptionValue(e.target.value)} placeholder="값" - className="flex-1 text-xs" + className="flex-1 text-xs" style={{ fontSize: "12px" }} /> @@ -273,7 +273,7 @@ export const SelectConfigPanel: React.FC = ({ value={bulkOptions} onChange={(e) => setBulkOptions(e.target.value)} placeholder="한 줄당 하나씩 입력하세요. 라벨만 입력하면 값과 동일하게 설정됩니다. 라벨|값 형식으로 입력하면 별도 값을 설정할 수 있습니다. 예시: 서울 부산 대구시|daegu" - className="h-20 text-xs" + className="h-20 text-xs" style={{ fontSize: "12px" }} />
@@ -88,7 +88,7 @@ export const TextConfigPanel: React.FC = ({ onChange={(e) => updateConfig("minLength", e.target.value ? parseInt(e.target.value) : undefined)} placeholder="0" min="0" - className="text-xs" + className="text-xs" style={{ fontSize: "12px" }} />
@@ -102,7 +102,7 @@ export const TextConfigPanel: React.FC = ({ onChange={(e) => updateConfig("maxLength", e.target.value ? parseInt(e.target.value) : undefined)} placeholder="100" min="1" - className="text-xs" + className="text-xs" style={{ fontSize: "12px" }} />
@@ -141,7 +141,7 @@ export const TextConfigPanel: React.FC = ({ value={localConfig.pattern || ""} onChange={(e) => updateConfig("pattern", e.target.value)} placeholder="예: [A-Za-z0-9]+" - className="font-mono text-xs" + className="font-mono text-xs" style={{ fontSize: "12px" }} />

JavaScript 정규식 패턴을 입력하세요.

@@ -219,7 +219,7 @@ export const TextConfigPanel: React.FC = ({ minLength={localConfig.minLength} pattern={localConfig.pattern} autoComplete={localConfig.autoComplete} - className="text-xs" + className="text-xs" style={{ fontSize: "12px" }} />
diff --git a/frontend/components/screen/config-panels/TextareaConfigPanel.tsx b/frontend/components/screen/config-panels/TextareaConfigPanel.tsx index 5cd0c825..f700e61d 100644 --- a/frontend/components/screen/config-panels/TextareaConfigPanel.tsx +++ b/frontend/components/screen/config-panels/TextareaConfigPanel.tsx @@ -68,7 +68,7 @@ export const TextareaConfigPanel: React.FC = ({ return ( - + 텍스트영역 설정 @@ -88,7 +88,7 @@ export const TextareaConfigPanel: React.FC = ({ value={localConfig.placeholder || ""} onChange={(e) => updateConfig("placeholder", e.target.value)} placeholder="내용을 입력하세요" - className="text-xs" + className="text-xs" style={{ fontSize: "12px" }} />
@@ -101,7 +101,7 @@ export const TextareaConfigPanel: React.FC = ({ value={localConfig.defaultValue || ""} onChange={(e) => updateConfig("defaultValue", e.target.value)} placeholder="기본 텍스트 내용" - className="text-xs" + className="text-xs" style={{ fontSize: "12px" }} rows={3} /> {localConfig.showCharCount && ( @@ -151,7 +151,7 @@ export const TextareaConfigPanel: React.FC = ({ placeholder="자동 (CSS로 제어)" min={10} max={200} - className="text-xs" + className="text-xs" style={{ fontSize: "12px" }} />

비워두면 CSS width로 제어됩니다.

@@ -203,7 +203,7 @@ export const TextareaConfigPanel: React.FC = ({ }} placeholder="제한 없음" min={0} - className="text-xs" + className="text-xs" style={{ fontSize: "12px" }} />
@@ -221,7 +221,7 @@ export const TextareaConfigPanel: React.FC = ({ }} placeholder="제한 없음" min={1} - className="text-xs" + className="text-xs" style={{ fontSize: "12px" }} />
@@ -333,7 +333,7 @@ export const TextareaConfigPanel: React.FC = ({ resize: localConfig.resizable ? "both" : "none", minHeight: localConfig.autoHeight ? "auto" : undefined, }} - className="text-xs" + className="text-xs" style={{ fontSize: "12px" }} wrap={localConfig.wrap} /> {localConfig.showCharCount && ( diff --git a/frontend/components/screen/dialogs/FlowButtonGroupDialog.tsx b/frontend/components/screen/dialogs/FlowButtonGroupDialog.tsx index 659c5fa1..606a3071 100644 --- a/frontend/components/screen/dialogs/FlowButtonGroupDialog.tsx +++ b/frontend/components/screen/dialogs/FlowButtonGroupDialog.tsx @@ -94,7 +94,7 @@ export const FlowButtonGroupDialog: React.FC = ({ max={100} value={gap} onChange={(e) => setGap(Number(e.target.value))} - className="h-9 text-sm sm:h-10" + className="h-6 w-full px-2 py-0 text-xs" style={{ fontSize: "12px" }} /> {gap}px @@ -109,7 +109,7 @@ export const FlowButtonGroupDialog: React.FC = ({ 정렬 방식 = ({ }} placeholder="추가" disabled={!localValues.enableAdd} - className="h-8 text-sm" + className="h-6 w-full px-2 py-0 text-xs" style={{ fontSize: "12px" }} />
-
-
@@ -1284,7 +1284,7 @@ const DataTableConfigPanelComponent: React.FC = ({
-
-
-
@@ -1521,7 +1521,7 @@ const DataTableConfigPanelComponent: React.FC = ({ - + 컬럼 설정 @@ -1535,7 +1535,7 @@ const DataTableConfigPanelComponent: React.FC = ({
{/* 파일 컬럼 추가 버튼 */} - @@ -1654,7 +1654,7 @@ const DataTableConfigPanelComponent: React.FC = ({ } }} placeholder="표시명을 입력하세요" - className="h-8 text-xs" + className="h-6 w-full px-2 py-0 text-xs" style={{ fontSize: "12px" }} />
@@ -1673,7 +1673,7 @@ const DataTableConfigPanelComponent: React.FC = ({ updateColumn(column.id, { gridColumns: newGridColumns }); }} > - + @@ -1861,7 +1861,7 @@ const DataTableConfigPanelComponent: React.FC = ({ }); }} > - + @@ -1902,7 +1902,7 @@ const DataTableConfigPanelComponent: React.FC = ({ }); }} > - + @@ -1947,7 +1947,7 @@ const DataTableConfigPanelComponent: React.FC = ({ }); }} placeholder="고정값 입력..." - className="h-8 text-xs" + className="h-6 w-full px-2 py-0 text-xs" style={{ fontSize: "12px" }} />
)} @@ -1967,7 +1967,7 @@ const DataTableConfigPanelComponent: React.FC = ({ - + 필터 설정 @@ -1995,7 +1995,7 @@ const DataTableConfigPanelComponent: React.FC = ({ {component.filters.length === 0 ? (
-

필터가 없습니다

+

필터가 없습니다

컬럼을 추가하면 자동으로 필터가 생성됩니다

) : ( @@ -2073,7 +2073,7 @@ const DataTableConfigPanelComponent: React.FC = ({ updateFilter(index, { label: newValue }); }} placeholder="필터 이름 입력..." - className="h-8 text-xs" + className="h-6 w-full px-2 py-0 text-xs" style={{ fontSize: "12px" }} />

@@ -2112,7 +2112,7 @@ const DataTableConfigPanelComponent: React.FC = ({ } }} > - + @@ -2144,7 +2144,7 @@ const DataTableConfigPanelComponent: React.FC = ({ value={filter.gridColumns.toString()} onValueChange={(value) => updateFilter(index, { gridColumns: parseInt(value) })} > - + @@ -2192,7 +2192,7 @@ const DataTableConfigPanelComponent: React.FC = ({ - + 모달 및 페이징 설정 @@ -2258,7 +2258,7 @@ const DataTableConfigPanelComponent: React.FC = ({ }); }} /> -

@@ -2278,7 +2278,7 @@ const DataTableConfigPanelComponent: React.FC = ({ }); }} /> -
@@ -2298,7 +2298,7 @@ const DataTableConfigPanelComponent: React.FC = ({ }); }} /> -
diff --git a/frontend/components/screen/panels/DetailSettingsPanel.tsx b/frontend/components/screen/panels/DetailSettingsPanel.tsx index ee50e54d..14c7e388 100644 --- a/frontend/components/screen/panels/DetailSettingsPanel.tsx +++ b/frontend/components/screen/panels/DetailSettingsPanel.tsx @@ -148,7 +148,8 @@ export const DetailSettingsPanel: React.FC = ({ onUpdateProperty(layoutComponent.id, "zones", newZones); } }} - className="w-full rounded border border-gray-300 px-2 py-1 text-sm" + className="w-full rounded border border-gray-300 px-2 py-1 text-xs" + style={{ fontSize: "12px" }} />
@@ -185,7 +186,8 @@ export const DetailSettingsPanel: React.FC = ({ onUpdateProperty(layoutComponent.id, "zones", newZones); } }} - className="w-full rounded border border-gray-300 px-2 py-1 text-sm" + className="w-full rounded border border-gray-300 px-2 py-1 text-xs" + style={{ fontSize: "12px" }} />
@@ -199,7 +201,8 @@ export const DetailSettingsPanel: React.FC = ({ onChange={(e) => onUpdateProperty(layoutComponent.id, "layoutConfig.grid.gap", parseInt(e.target.value)) } - className="w-full rounded border border-gray-300 px-2 py-1 text-sm" + className="w-full rounded border border-gray-300 px-2 py-1 text-xs" + style={{ fontSize: "12px" }} />
@@ -243,7 +246,8 @@ export const DetailSettingsPanel: React.FC = ({ onUpdateProperty(layoutComponent.id, "zones", updatedZones); } }} - className="w-full rounded border border-gray-300 px-2 py-1 text-sm" + className="w-full rounded border border-gray-300 px-2 py-1 text-xs" + style={{ fontSize: "12px" }} > @@ -302,7 +306,8 @@ export const DetailSettingsPanel: React.FC = ({ onUpdateProperty(layoutComponent.id, "zones", newZones); } }} - className="w-20 rounded border border-gray-300 px-2 py-1 text-sm" + className="w-20 rounded border border-gray-300 px-2 py-1 text-xs" + style={{ fontSize: "12px" }} /> 개
@@ -317,7 +322,8 @@ export const DetailSettingsPanel: React.FC = ({ onChange={(e) => onUpdateProperty(layoutComponent.id, "layoutConfig.flexbox.gap", parseInt(e.target.value)) } - className="w-full rounded border border-gray-300 px-2 py-1 text-sm" + className="w-full rounded border border-gray-300 px-2 py-1 text-xs" + style={{ fontSize: "12px" }} /> @@ -332,7 +338,8 @@ export const DetailSettingsPanel: React.FC = ({ - + diff --git a/frontend/components/screen/panels/FlowButtonGroupPanel.tsx b/frontend/components/screen/panels/FlowButtonGroupPanel.tsx index 83720945..5a28aa70 100644 --- a/frontend/components/screen/panels/FlowButtonGroupPanel.tsx +++ b/frontend/components/screen/panels/FlowButtonGroupPanel.tsx @@ -98,7 +98,7 @@ export const FlowButtonGroupPanel: React.FC = ({ size="sm" variant="ghost" onClick={() => onSelectGroup(groupInfo.buttons.map((b) => b.id))} - className="h-7 px-2 text-xs" + className="h-7 px-2 text-xs" style={{ fontSize: "12px" }} > 선택 @@ -152,7 +152,7 @@ export const FlowButtonGroupPanel: React.FC = ({ {groupInfo.buttons.map((button) => (
diff --git a/frontend/components/screen/panels/GridPanel.tsx b/frontend/components/screen/panels/GridPanel.tsx index 4df77897..16178e57 100644 --- a/frontend/components/screen/panels/GridPanel.tsx +++ b/frontend/components/screen/panels/GridPanel.tsx @@ -68,7 +68,7 @@ export const GridPanel: React.FC = ({ size="sm" variant="outline" onClick={onForceGridUpdate} - className="h-7 px-2 text-xs" + className="h-7 px-2 text-xs" style={{ fontSize: "12px" }} title="현재 해상도에 맞게 모든 컴포넌트를 격자에 재정렬합니다" > @@ -266,7 +266,7 @@ export const GridPanel: React.FC = ({

격자 정보

-
+
해상도: diff --git a/frontend/components/screen/panels/LayoutsPanel.tsx b/frontend/components/screen/panels/LayoutsPanel.tsx index c38082b9..760a8229 100644 --- a/frontend/components/screen/panels/LayoutsPanel.tsx +++ b/frontend/components/screen/panels/LayoutsPanel.tsx @@ -214,7 +214,7 @@ export default function LayoutsPanel({
- {layout.name} + {layout.name} {layout.description && ( diff --git a/frontend/components/screen/panels/PropertiesPanel.tsx b/frontend/components/screen/panels/PropertiesPanel.tsx index 2b10322c..b45bc517 100644 --- a/frontend/components/screen/panels/PropertiesPanel.tsx +++ b/frontend/components/screen/panels/PropertiesPanel.tsx @@ -645,7 +645,7 @@ const PropertiesPanelComponent: React.FC = ({ }} className="border-input bg-background text-primary focus:ring-ring h-4 w-4 rounded border focus:ring-2 focus:ring-offset-2" /> -
@@ -661,7 +661,7 @@ const PropertiesPanelComponent: React.FC = ({ }} className="border-input bg-background text-primary focus:ring-ring h-4 w-4 rounded border focus:ring-2 focus:ring-offset-2" /> -
@@ -942,7 +942,7 @@ const PropertiesPanelComponent: React.FC = ({ ) : (
-

카드 레이아웃은 자동으로 크기가 계산됩니다

+

카드 레이아웃은 자동으로 크기가 계산됩니다

카드 개수와 간격 설정은 상세설정에서 조정하세요

)} diff --git a/frontend/components/screen/panels/ResolutionPanel.tsx b/frontend/components/screen/panels/ResolutionPanel.tsx index 44cc5266..90680f01 100644 --- a/frontend/components/screen/panels/ResolutionPanel.tsx +++ b/frontend/components/screen/panels/ResolutionPanel.tsx @@ -84,7 +84,7 @@ const ResolutionPanel: React.FC = ({ currentResolution, on
handleUpdate("label", e.target.value)} placeholder="라벨" - className="h-6 text-[10px]" + className="h-6 w-full px-2 py-0 text-xs" + style={{ fontSize: "12px" }} + style={{ fontSize: "12px" }} />
-
- +
+ = ({ }} step={40} placeholder="40" - className="h-6 text-[10px]" + className="h-6 w-full px-2 py-0 text-xs" + style={{ fontSize: "12px" }} + style={{ fontSize: "12px" }} />
{/* Placeholder (widget만) */} {selectedComponent.type === "widget" && ( -
- +
+ handleUpdate("placeholder", e.target.value)} placeholder="입력 안내 텍스트" - className="h-6 text-[10px]" + className="h-6 w-full px-2 py-0 text-xs" + style={{ fontSize: "12px" }} + style={{ fontSize: "12px" }} />
)} {/* Title (group/area) */} {(selectedComponent.type === "group" || selectedComponent.type === "area") && ( -
- +
+ handleUpdate("title", e.target.value)} placeholder="제목" - className="h-6 text-[10px]" + className="h-6 w-full px-2 py-0 text-xs" + style={{ fontSize: "12px" }} + style={{ fontSize: "12px" }} />
)} {/* Description (area만) */} {selectedComponent.type === "area" && ( -
- +
+ handleUpdate("description", e.target.value)} placeholder="설명" - className="h-6 text-[10px]" + className="h-6 w-full px-2 py-0 text-xs" + style={{ fontSize: "12px" }} + style={{ fontSize: "12px" }} />
)} - {/* Grid Columns */} - {(selectedComponent as any).gridColumns !== undefined && ( -
- - + {/* Grid Columns + Z-Index (같은 행) */} +
+ {(selectedComponent as any).gridColumns !== undefined && ( +
+ + +
+ )} +
+ + handleUpdate("position.z", parseInt(e.target.value) || 1)} + className="h-6 w-full px-2 py-0 text-xs" + style={{ fontSize: "12px" }} + style={{ fontSize: "12px" }} + />
- )} - - {/* Z-Index */} -
- - handleUpdate("position.z", parseInt(e.target.value) || 1)} - className="h-6 text-[10px]" - />
{/* 라벨 스타일 */} - + 라벨 스타일 - + -
- +
+ handleUpdate("style.labelText", e.target.value)} + className="h-6 w-full px-2 py-0 text-xs" + style={{ fontSize: "12px" }} + style={{ fontSize: "12px" }} />
-
- +
+ handleUpdate("style.labelFontSize", e.target.value)} + className="h-6 w-full px-2 py-0 text-xs" + style={{ fontSize: "12px" }} + style={{ fontSize: "12px" }} />
-
- +
+ handleUpdate("style.labelColor", e.target.value)} + className="h-6 w-full px-2 py-0 text-xs" + style={{ fontSize: "12px" }} + style={{ fontSize: "12px" }} />
-
- - handleUpdate("style.labelMarginBottom", e.target.value)} - /> -
-
- handleUpdate("style.labelDisplay", checked)} - /> - +
+
+ + handleUpdate("style.labelMarginBottom", e.target.value)} + className="h-6 w-full px-2 py-0 text-xs" + style={{ fontSize: "12px" }} + style={{ fontSize: "12px" }} + /> +
+
+ handleUpdate("style.labelDisplay", checked)} + className="h-4 w-4" + /> + +
@@ -357,8 +384,9 @@ export const UnifiedPropertiesPanel: React.FC = ({ handleUpdate("componentConfig.required", checked)} + className="h-4 w-4" /> - +
)} {widget.readonly !== undefined && ( @@ -366,8 +394,9 @@ export const UnifiedPropertiesPanel: React.FC = ({ handleUpdate("componentConfig.readonly", checked)} + className="h-4 w-4" /> - +
)}
@@ -468,7 +497,7 @@ export const UnifiedPropertiesPanel: React.FC = ({
handleUpdate("webType", value)}> - + diff --git a/frontend/components/screen/panels/WebTypeConfigPanel.tsx b/frontend/components/screen/panels/WebTypeConfigPanel.tsx index 9227c269..8c44fb48 100644 --- a/frontend/components/screen/panels/WebTypeConfigPanel.tsx +++ b/frontend/components/screen/panels/WebTypeConfigPanel.tsx @@ -109,7 +109,7 @@ export const WebTypeConfigPanel: React.FC = ({ webType, <>
-
-