From c557fc5d56eda2cd13ee6dbcc5017e7b0bd43133 Mon Sep 17 00:00:00 2001 From: kjs Date: Tue, 23 Sep 2025 15:30:02 +0900 Subject: [PATCH] =?UTF-8?q?=EC=A0=84=EC=B2=B4=20=ED=99=94=EB=A9=B4=20?= =?UTF-8?q?=EC=98=81=EC=97=AD=20=EB=B0=B0=EA=B2=BD=EC=83=89=EC=9D=84=20?= =?UTF-8?q?=ED=9D=B0=EC=83=89=EC=9C=BC=EB=A1=9C=20=ED=86=B5=EC=9D=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 화면 이외 영역의 회색 배경(bg-gray-50)을 흰색(bg-white)으로 변경 - AppLayout의 전체 배경색을 흰색으로 변경 - 빈 화면일 때의 배경색도 흰색으로 통일 - 화면 전체가 일관된 흰색 배경으로 표시되도록 개선 --- .../app/(main)/screens/[screenId]/page.tsx | 374 +++++++++--------- frontend/components/layout/AppLayout.tsx | 4 +- 2 files changed, 189 insertions(+), 189 deletions(-) diff --git a/frontend/app/(main)/screens/[screenId]/page.tsx b/frontend/app/(main)/screens/[screenId]/page.tsx index 271f1a28..90195801 100644 --- a/frontend/app/(main)/screens/[screenId]/page.tsx +++ b/frontend/app/(main)/screens/[screenId]/page.tsx @@ -147,7 +147,7 @@ export default function ScreenViewPage() { const screenHeight = layout?.screenResolution?.height || 800; return ( -
+
{layout && layout.components.length > 0 ? ( // 캔버스 컴포넌트들을 정확한 해상도로 표시
- {layout.components - .filter((comp) => !comp.parentId) // 최상위 컴포넌트만 렌더링 (그룹 포함) - .map((component) => { - // 그룹 컴포넌트인 경우 특별 처리 - if (component.type === "group") { - const groupChildren = layout.components.filter((child) => child.parentId === component.id); + {layout.components + .filter((comp) => !comp.parentId) // 최상위 컴포넌트만 렌더링 (그룹 포함) + .map((component) => { + // 그룹 컴포넌트인 경우 특별 처리 + if (component.type === "group") { + const groupChildren = layout.components.filter((child) => child.parentId === component.id); - return ( -
- {/* 그룹 제목 */} - {(component as any).title && ( -
{(component as any).title}
- )} - - {/* 그룹 내 자식 컴포넌트들 렌더링 */} - {groupChildren.map((child) => ( -
- { - console.log("📝 폼 데이터 변경:", { fieldName, value }); - setFormData((prev) => { - const newFormData = { - ...prev, - [fieldName]: value, - }; - console.log("📊 전체 폼 데이터:", newFormData); - return newFormData; - }); - }} - screenInfo={{ - id: screenId, - tableName: screen?.tableName, - }} - /> -
- ))} -
- ); - } - - // 라벨 표시 여부 계산 - const templateTypes = ["datatable"]; - const shouldShowLabel = - component.style?.labelDisplay !== false && - (component.label || component.style?.labelText) && - !templateTypes.includes(component.type); - - const labelText = component.style?.labelText || component.label || ""; - const labelStyle = { - fontSize: component.style?.labelFontSize || "14px", - color: component.style?.labelColor || "#374151", - fontWeight: component.style?.labelFontWeight || "500", - backgroundColor: component.style?.labelBackgroundColor || "transparent", - padding: component.style?.labelPadding || "0", - borderRadius: component.style?.labelBorderRadius || "0", - marginBottom: component.style?.labelMarginBottom || "4px", - }; - - // 일반 컴포넌트 렌더링 return ( -
- {/* 라벨을 외부에 별도로 렌더링 */} - {shouldShowLabel && ( -
- {labelText} - {component.required && *} -
+
+ {/* 그룹 제목 */} + {(component as any).title && ( +
{(component as any).title}
)} - {/* 실제 컴포넌트 */} + {/* 그룹 내 자식 컴포넌트들 렌더링 */} + {groupChildren.map((child) => ( +
+ { + console.log("📝 폼 데이터 변경:", { fieldName, value }); + setFormData((prev) => { + const newFormData = { + ...prev, + [fieldName]: value, + }; + console.log("📊 전체 폼 데이터:", newFormData); + return newFormData; + }); + }} + screenInfo={{ + id: screenId, + tableName: screen?.tableName, + }} + /> +
+ ))} +
+ ); + } + + // 라벨 표시 여부 계산 + const templateTypes = ["datatable"]; + const shouldShowLabel = + component.style?.labelDisplay !== false && + (component.label || component.style?.labelText) && + !templateTypes.includes(component.type); + + const labelText = component.style?.labelText || component.label || ""; + const labelStyle = { + fontSize: component.style?.labelFontSize || "14px", + color: component.style?.labelColor || "#374151", + fontWeight: component.style?.labelFontWeight || "500", + backgroundColor: component.style?.labelBackgroundColor || "transparent", + padding: component.style?.labelPadding || "0", + borderRadius: component.style?.labelBorderRadius || "0", + marginBottom: component.style?.labelMarginBottom || "4px", + }; + + // 일반 컴포넌트 렌더링 + return ( +
+ {/* 라벨을 외부에 별도로 렌더링 */} + {shouldShowLabel && (
{ - console.log("🎯 할당된 화면 컴포넌트:", { - id: component.id, - type: component.type, - position: component.position, - size: component.size, - styleWidth: component.style?.width, - styleHeight: component.style?.height, - finalWidth: `${component.size.width}px`, - finalHeight: `${component.size.height}px`, - }); + top: `${component.position.y - 25}px`, // 컴포넌트 위쪽에 라벨 배치 + zIndex: (component.position.z || 1) + 1, + ...labelStyle, }} > - {/* 위젯 컴포넌트가 아닌 경우 DynamicComponentRenderer 사용 */} - {component.type !== "widget" ? ( - { + {labelText} + {component.required && *} +
+ )} + + {/* 실제 컴포넌트 */} +
{ + console.log("🎯 할당된 화면 컴포넌트:", { + id: component.id, + type: component.type, + position: component.position, + size: component.size, + styleWidth: component.style?.width, + styleHeight: component.style?.height, + finalWidth: `${component.size.width}px`, + finalHeight: `${component.size.height}px`, + }); + }} + > + {/* 위젯 컴포넌트가 아닌 경우 DynamicComponentRenderer 사용 */} + {component.type !== "widget" ? ( + { + setFormData((prev) => ({ + ...prev, + [fieldName]: value, + })); + }} + screenId={screenId} + tableName={screen?.tableName} + onRefresh={() => { + console.log("화면 새로고침 요청"); + // 테이블 컴포넌트 강제 새로고침을 위한 키 업데이트 + setRefreshKey((prev) => prev + 1); + // 선택된 행 상태도 초기화 + setSelectedRows([]); + setSelectedRowsData([]); + }} + onClose={() => { + console.log("화면 닫기 요청"); + }} + // 테이블 선택된 행 정보 전달 + selectedRows={selectedRows} + selectedRowsData={selectedRowsData} + onSelectedRowsChange={(newSelectedRows, newSelectedRowsData) => { + setSelectedRows(newSelectedRows); + setSelectedRowsData(newSelectedRowsData); + }} + // 테이블 새로고침 키 전달 + refreshKey={refreshKey} + /> + ) : ( + { + const fieldName = component.columnName || component.id; setFormData((prev) => ({ ...prev, [fieldName]: value, })); - }} - screenId={screenId} - tableName={screen?.tableName} - onRefresh={() => { - console.log("화면 새로고침 요청"); - // 테이블 컴포넌트 강제 새로고침을 위한 키 업데이트 - setRefreshKey((prev) => prev + 1); - // 선택된 행 상태도 초기화 - setSelectedRows([]); - setSelectedRowsData([]); - }} - onClose={() => { - console.log("화면 닫기 요청"); - }} - // 테이블 선택된 행 정보 전달 - selectedRows={selectedRows} - selectedRowsData={selectedRowsData} - onSelectedRowsChange={(newSelectedRows, newSelectedRowsData) => { - setSelectedRows(newSelectedRows); - setSelectedRowsData(newSelectedRowsData); - }} - // 테이블 새로고침 키 전달 - refreshKey={refreshKey} - /> - ) : ( - { - const fieldName = component.columnName || component.id; - setFormData((prev) => ({ + }, + onFormDataChange: (fieldName, value) => { + console.log(`🎯 page.tsx onFormDataChange 호출: ${fieldName} = "${value}"`); + console.log(`📋 현재 formData:`, formData); + setFormData((prev) => { + const newFormData = { ...prev, [fieldName]: value, - })); - }, - onFormDataChange: (fieldName, value) => { - console.log(`🎯 page.tsx onFormDataChange 호출: ${fieldName} = "${value}"`); - console.log(`📋 현재 formData:`, formData); - setFormData((prev) => { - const newFormData = { - ...prev, - [fieldName]: value, - }; - console.log(`📝 업데이트된 formData:`, newFormData); - return newFormData; - }); - }, - isInteractive: true, - formData: formData, - readonly: component.readonly, - required: component.required, - placeholder: component.placeholder, - className: "w-full h-full", - }} - /> - )} -
+ }; + console.log(`📝 업데이트된 formData:`, newFormData); + return newFormData; + }); + }, + isInteractive: true, + formData: formData, + readonly: component.readonly, + required: component.required, + placeholder: component.placeholder, + className: "w-full h-full", + }} + /> + )}
- ); - })} -
+
+ ); + })} +
) : ( // 빈 화면일 때도 깔끔하게 표시
+
{/* MainHeader 컴포넌트 사용 */} {/* 가운데 컨텐츠 영역 */} -
{children}
+
{children}
{/* 프로필 수정 모달 */}