chpark/wace_rps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

테스트테이블 생성 및 오류 수정

Browse Source
This commit is contained in:
kjs
2025-09-19 02:15:21 +09:00
parent ddcecfd5e2
commit f7d884568b
20 changed files with 1024 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/common/ScreenModal.tsx
+58 -21
View File
@@ -1,7 +1,7 @@
"use client";
import React, { useState, useEffect } from "react";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
import { InteractiveScreenViewerDynamic } from "@/components/screen/InteractiveScreenViewerDynamic";
import { screenApi } from "@/lib/api/screen";
import { ComponentData } from "@/types/screen";
@@ -45,24 +45,60 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
let maxWidth = 800; // 최소 너비
let maxHeight = 600; // 최소 높이
components.forEach((component) => {
const x = parseFloat(component.style?.positionX || "0");
const y = parseFloat(component.style?.positionY || "0");
const width = parseFloat(component.style?.width || "100");
const height = parseFloat(component.style?.height || "40");
console.log("🔍 화면 크기 계산 시작:", { componentsCount: components.length });
components.forEach((component, index) => {
// position과 size는 BaseComponent에서 별도 속성으로 관리
const x = parseFloat(component.position?.x?.toString() || "0");
const y = parseFloat(component.position?.y?.toString() || "0");
const width = parseFloat(component.size?.width?.toString() || "100");
const height = parseFloat(component.size?.height?.toString() || "40");
// 컴포넌트의 오른쪽 끝과 아래쪽 끝 계산
const rightEdge = x + width;
const bottomEdge = y + height;
maxWidth = Math.max(maxWidth, rightEdge + 50); // 여백 추가
maxHeight = Math.max(maxHeight, bottomEdge + 50); // 여백 추가
console.log(
`📏 컴포넌트 ${index + 1} (${component.id}): x=${x}, y=${y}, w=${width}, h=${height}, rightEdge=${rightEdge}, bottomEdge=${bottomEdge}`,
);
const newMaxWidth = Math.max(maxWidth, rightEdge + 100); // 여백 증가
const newMaxHeight = Math.max(maxHeight, bottomEdge + 100); // 여백 증가
if (newMaxWidth > maxWidth || newMaxHeight > maxHeight) {
console.log(`🔄 크기 업데이트: ${maxWidth}×${maxHeight} → ${newMaxWidth}×${newMaxHeight}`);
maxWidth = newMaxWidth;
maxHeight = newMaxHeight;
}
});
return {
width: Math.min(maxWidth, window.innerWidth * 0.9), // 화면의 90%를 넘지 않도록
height: Math.min(maxHeight, window.innerHeight * 0.8), // 화면의 80%를 넘지 않도록
console.log("📊 컴포넌트 기반 계산 결과:", { maxWidth, maxHeight });
// 브라우저 크기 제한 확인 (더욱 관대하게 설정)
const maxAllowedWidth = window.innerWidth * 0.98; // 95% -> 98%
const maxAllowedHeight = window.innerHeight * 0.95; // 90% -> 95%
console.log("📐 크기 제한 정보:", {
계산된크기: { maxWidth, maxHeight },
브라우저제한: { maxAllowedWidth, maxAllowedHeight },
브라우저크기: { width: window.innerWidth, height: window.innerHeight },
});
// 컴포넌트 기반 크기를 우선 적용하되, 브라우저 제한을 고려
const finalDimensions = {
width: Math.min(maxWidth, maxAllowedWidth),
height: Math.min(maxHeight, maxAllowedHeight),
};
console.log("✅ 최종 화면 크기:", finalDimensions);
console.log("🔧 크기 적용 분석:", {
width적용: maxWidth <= maxAllowedWidth ? "컴포넌트기준" : "브라우저제한",
height적용: maxHeight <= maxAllowedHeight ? "컴포넌트기준" : "브라우저제한",
컴포넌트크기: { maxWidth, maxHeight },
최종크기: finalDimensions,
});
return finalDimensions;
};
// 전역 모달 이벤트 리스너
@@ -154,17 +190,17 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
};
}
// 헤더 높이와 패딩을 고려한 전체 높이 계산
const headerHeight = 60; // DialogHeader + 패딩
// 헤더 높이와 패딩을 고려한 전체 높이 계산 (실제 측정값 기반)
const headerHeight = 80; // DialogHeader + 패딩 (더 정확한 값)
const totalHeight = screenDimensions.height + headerHeight;
return {
className: "overflow-hidden p-0",
style: {
width: `${screenDimensions.width + 48}px`, // 헤더 패딩과 여백 고려
height: `${Math.min(totalHeight, window.innerHeight * 0.8)}px`,
maxWidth: "90vw",
maxHeight: "80vh",
width: `${Math.min(screenDimensions.width + 48, window.innerWidth * 0.98)}px`, // 브라우저 제한 적용
height: `${Math.min(totalHeight, window.innerHeight * 0.95)}px`, // 브라우저 제한 적용
maxWidth: "98vw", // 안전장치
maxHeight: "95vh", // 안전장치
},
};
};
@@ -176,9 +212,10 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
<DialogContent className={`${modalStyle.className} ${className || ""}`} style={modalStyle.style}>
<DialogHeader className="border-b px-6 py-4">
<DialogTitle>{modalState.title}</DialogTitle>
<DialogDescription>{loading ? "화면을 불러오는 중입니다..." : "화면 내용을 표시합니다."}</DialogDescription>
</DialogHeader>
<div className="flex-1 overflow-hidden p-4">
<div className="flex-1 p-4">
{loading ? (
<div className="flex h-full items-center justify-center">
<div className="text-center">
@@ -188,7 +225,7 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
</div>
) : screenData ? (
<div
className="relative overflow-hidden bg-white"
className="relative bg-white"
style={{
width: screenDimensions?.width || 800,
height: screenDimensions?.height || 600,
@@ -202,13 +239,13 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
formData={formData}
onFormDataChange={(fieldName, value) => {
console.log(`🎯 ScreenModal onFormDataChange 호출: ${fieldName} = "${value}"`);
console.log(`📋 현재 formData:`, formData);
console.log("📋 현재 formData:", formData);
setFormData((prev) => {
const newFormData = {
...prev,
[fieldName]: value,
};
console.log(`📝 ScreenModal 업데이트된 formData:`, newFormData);
console.log("📝 ScreenModal 업데이트된 formData:", newFormData);
return newFormData;
});
}}