From 71beae8e245dbdec35fec7048fd82ae391d9e588 Mon Sep 17 00:00:00 2001 From: dohyeons Date: Tue, 28 Oct 2025 13:42:23 +0900 Subject: [PATCH 1/8] =?UTF-8?q?=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- backend-node/src/services/batchService.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/backend-node/src/services/batchService.ts b/backend-node/src/services/batchService.ts index 07cdd61c..247b1ab8 100644 --- a/backend-node/src/services/batchService.ts +++ b/backend-node/src/services/batchService.ts @@ -449,7 +449,10 @@ export class BatchService { // 기존 배치 설정 확인 (회사 권한 체크 포함) const existing = await this.getBatchConfigById(id, userCompanyCode); if (!existing.success) { - return existing as ApiResponse; + return { + success: false, + message: existing.message, + }; } const existingConfig = await queryOne( From 28ecc311283491e3a6f1d2f69808dd76d8cc8160 Mon Sep 17 00:00:00 2001 From: dohyeons Date: Tue, 28 Oct 2025 15:02:37 +0900 Subject: [PATCH 2/8] =?UTF-8?q?=EC=9C=84=EC=A0=AF=EC=9D=98=20=EC=B5=9C?= =?UTF-8?q?=EC=86=8C=20=ED=81=AC=EA=B8=B0=EB=A5=BC=201x1=20=EB=A1=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../admin/dashboard/CanvasElement.tsx | 6 +++--- .../admin/dashboard/charts/ChartRenderer.tsx | 12 +++++------ .../admin/dashboard/charts/PieChart.tsx | 2 +- .../admin/dashboard/widgets/AnalogClock.tsx | 18 ++++++++--------- .../admin/dashboard/widgets/DigitalClock.tsx | 8 ++++---- .../dashboard/widgets/CustomMetricWidget.tsx | 20 ++++++++++--------- 6 files changed, 34 insertions(+), 32 deletions(-) diff --git a/frontend/components/admin/dashboard/CanvasElement.tsx b/frontend/components/admin/dashboard/CanvasElement.tsx index 33b1d801..fbdbfc73 100644 --- a/frontend/components/admin/dashboard/CanvasElement.tsx +++ b/frontend/components/admin/dashboard/CanvasElement.tsx @@ -353,9 +353,9 @@ export function CanvasElement({ let newX = resizeStart.elementX; let newY = resizeStart.elementY; - // 최소 크기 설정: 달력은 2x3, 나머지는 2x2 - const minWidthCells = 2; - const minHeightCells = element.type === "widget" && element.subtype === "calendar" ? 3 : 2; + // 최소 크기 설정: 모든 위젯 1x1 + const minWidthCells = 1; + const minHeightCells = 1; const minWidth = cellSize * minWidthCells; const minHeight = cellSize * minHeightCells; diff --git a/frontend/components/admin/dashboard/charts/ChartRenderer.tsx b/frontend/components/admin/dashboard/charts/ChartRenderer.tsx index 94efd190..3cd5afbe 100644 --- a/frontend/components/admin/dashboard/charts/ChartRenderer.tsx +++ b/frontend/components/admin/dashboard/charts/ChartRenderer.tsx @@ -242,12 +242,12 @@ export function ChartRenderer({ element, data, width, height = 200 }: ChartRende // D3 차트 렌더링 const actualWidth = width !== undefined ? width : containerWidth; - // 원형 차트는 더 큰 크기가 필요 (최소 400px) + // 최소 크기 제약 완화 (1x1 위젯 지원) const isCircularChart = element.subtype === "pie" || element.subtype === "donut"; - const minWidth = isCircularChart ? 400 : 200; - const finalWidth = Math.max(actualWidth - 20, minWidth); - // 원형 차트는 범례 공간을 위해 더 많은 여백 필요 - const finalHeight = Math.max(height - (isCircularChart ? 60 : 20), 300); + const minWidth = 35; // 최소 너비 35px + const finalWidth = Math.max(actualWidth - 4, minWidth); + // 최소 높이도 35px로 설정 + const finalHeight = Math.max(height - (isCircularChart ? 10 : 4), 35); console.log("🎨 ChartRenderer:", { elementSubtype: element.subtype, @@ -263,7 +263,7 @@ export function ChartRenderer({ element, data, width, height = 200 }: ChartRende }); return ( -
+
- +
+ {/* 시계판 배경 */} @@ -70,7 +70,7 @@ export function AnalogClock({ time, theme, timezone, customColor }: AnalogClockP y={y} textAnchor="middle" dominantBaseline="middle" - fontSize="20" + fontSize="16" fontWeight="bold" fill={colors.number} > @@ -86,7 +86,7 @@ export function AnalogClock({ time, theme, timezone, customColor }: AnalogClockP x2={100 + 40 * Math.cos((hourAngle * Math.PI) / 180)} y2={100 + 40 * Math.sin((hourAngle * Math.PI) / 180)} stroke={colors.hourHand} - strokeWidth="6" + strokeWidth="5" strokeLinecap="round" /> @@ -97,7 +97,7 @@ export function AnalogClock({ time, theme, timezone, customColor }: AnalogClockP x2={100 + 60 * Math.cos((minuteAngle * Math.PI) / 180)} y2={100 + 60 * Math.sin((minuteAngle * Math.PI) / 180)} stroke={colors.minuteHand} - strokeWidth="4" + strokeWidth="3" strokeLinecap="round" /> @@ -108,18 +108,18 @@ export function AnalogClock({ time, theme, timezone, customColor }: AnalogClockP x2={100 + 75 * Math.cos((secondAngle * Math.PI) / 180)} y2={100 + 75 * Math.sin((secondAngle * Math.PI) / 180)} stroke={colors.secondHand} - strokeWidth="2" + strokeWidth="1.5" strokeLinecap="round" /> {/* 중심점 */} - - + + {/* 타임존 표시 */} {timezoneLabel && ( -
+
{timezoneLabel}
)} diff --git a/frontend/components/admin/dashboard/widgets/DigitalClock.tsx b/frontend/components/admin/dashboard/widgets/DigitalClock.tsx index eb8b9cba..5ed506c5 100644 --- a/frontend/components/admin/dashboard/widgets/DigitalClock.tsx +++ b/frontend/components/admin/dashboard/widgets/DigitalClock.tsx @@ -56,21 +56,21 @@ export function DigitalClock({ return (
{/* 날짜 표시 (compact 모드에서는 숨김) */} {!compact && showDate && dateString && ( -
{dateString}
+
{dateString}
)} {/* 시간 표시 */} -
+
{timeString}
{/* 타임존 표시 */} -
+
{timezoneLabel}
diff --git a/frontend/components/dashboard/widgets/CustomMetricWidget.tsx b/frontend/components/dashboard/widgets/CustomMetricWidget.tsx index 52c8411c..90d763d0 100644 --- a/frontend/components/dashboard/widgets/CustomMetricWidget.tsx +++ b/frontend/components/dashboard/widgets/CustomMetricWidget.tsx @@ -374,9 +374,9 @@ export default function CustomMetricWidget({ element }: CustomMetricWidgetProps) } return ( -
+
{/* 콘텐츠 영역 - 스크롤 없이 자동으로 크기 조정 */} -
+
{/* 그룹별 카드 (활성화 시) */} {isGroupByMode && groupedCards.map((card, index) => { @@ -388,10 +388,12 @@ export default function CustomMetricWidget({ element }: CustomMetricWidgetProps) return (
-
{card.label}
-
{card.value.toLocaleString()}
+
{card.label}
+
+ {card.value.toLocaleString()} +
); })} @@ -404,12 +406,12 @@ export default function CustomMetricWidget({ element }: CustomMetricWidgetProps) return (
-
{metric.label}
-
+
{metric.label}
+
{formattedValue} - {metric.unit} + {metric.unit}
); From 3f3779c25e02f7a9db39db86befa09815afa3568 Mon Sep 17 00:00:00 2001 From: dohyeons Date: Tue, 28 Oct 2025 15:09:29 +0900 Subject: [PATCH 3/8] =?UTF-8?q?=EC=9C=84=EC=A0=AF=20=ED=97=A4=EB=8D=94=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../admin/dashboard/CanvasElement.tsx | 14 +++++++------- .../components/dashboard/DashboardViewer.tsx | 18 +++++++++--------- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/frontend/components/admin/dashboard/CanvasElement.tsx b/frontend/components/admin/dashboard/CanvasElement.tsx index fbdbfc73..38eb2038 100644 --- a/frontend/components/admin/dashboard/CanvasElement.tsx +++ b/frontend/components/admin/dashboard/CanvasElement.tsx @@ -732,7 +732,7 @@ export function CanvasElement({ onMouseDown={handleMouseDown} > {/* 헤더 */} -
+
{/* 차트 타입 전환 드롭다운 (차트일 경우만) */} {element.type === "chart" && ( @@ -743,7 +743,7 @@ export function CanvasElement({ }} > e.stopPropagation()} onMouseDown={(e) => e.stopPropagation()} > @@ -772,7 +772,7 @@ export function CanvasElement({ )} {/* 제목 */} {!element.type || element.type !== "chart" ? ( - {element.customTitle || element.title} + {element.customTitle || element.title} ) : null}
@@ -780,18 +780,18 @@ export function CanvasElement({
{/* 내용 */} -
+
{element.type === "chart" ? ( // 차트 렌더링
@@ -807,7 +807,7 @@ export function CanvasElement({ element={element} data={chartData || undefined} width={element.size.width} - height={element.size.height - 45} + height={element.size.height - 32} /> )}
diff --git a/frontend/components/dashboard/DashboardViewer.tsx b/frontend/components/dashboard/DashboardViewer.tsx index 4ad23fa8..9ed55dc4 100644 --- a/frontend/components/dashboard/DashboardViewer.tsx +++ b/frontend/components/dashboard/DashboardViewer.tsx @@ -379,8 +379,8 @@ function ViewerElement({ element, data, isLoading, onRefresh, isMobile, canvasWi style={{ minHeight: "300px" }} > {element.showHeader !== false && ( -
-

{element.customTitle || element.title}

+
+

{element.customTitle || element.title}

)} -
+
{!isMounted ? (
@@ -441,8 +441,8 @@ function ViewerElement({ element, data, isLoading, onRefresh, isMobile, canvasWi }} > {element.showHeader !== false && ( -
-

{element.customTitle || element.title}

+
+

{element.customTitle || element.title}

)} -
+
{!isMounted ? (
@@ -475,7 +475,7 @@ function ViewerElement({ element, data, isLoading, onRefresh, isMobile, canvasWi element={element} data={data} width={undefined} - height={element.showHeader !== false ? element.size.height - 50 : element.size.height} + height={element.showHeader !== false ? element.size.height - 32 : element.size.height} /> ) : ( renderWidget(element) From e1c40b23fb1a6529f61bb0c9b5ac3ff107dff14f Mon Sep 17 00:00:00 2001 From: dohyeons Date: Tue, 28 Oct 2025 15:36:37 +0900 Subject: [PATCH 4/8] =?UTF-8?q?=EC=BB=A4=EC=8A=A4=ED=85=80=20=EC=B9=B4?= =?UTF-8?q?=EB=93=9C=20=EB=B0=B0=EC=B9=98=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../dashboard/widgets/CustomMetricWidget.tsx | 75 ++++++++++--------- 1 file changed, 39 insertions(+), 36 deletions(-) diff --git a/frontend/components/dashboard/widgets/CustomMetricWidget.tsx b/frontend/components/dashboard/widgets/CustomMetricWidget.tsx index 90d763d0..9c23c714 100644 --- a/frontend/components/dashboard/widgets/CustomMetricWidget.tsx +++ b/frontend/components/dashboard/widgets/CustomMetricWidget.tsx @@ -373,50 +373,53 @@ export default function CustomMetricWidget({ element }: CustomMetricWidgetProps) ); } + // 위젯 높이에 따라 레이아웃 결정 (세로 1칸이면 가로, 2칸 이상이면 세로) + // 실제 측정된 1칸 높이: 119px + const isHorizontalLayout = element?.size?.height && element.size.height <= 130; // 1칸 여유 (119px + 약간의 마진) + return ( -
- {/* 콘텐츠 영역 - 스크롤 없이 자동으로 크기 조정 */} -
- {/* 그룹별 카드 (활성화 시) */} - {isGroupByMode && - groupedCards.map((card, index) => { - // 색상 순환 (6가지 색상) - const colorKeys = Object.keys(colorMap) as Array; - const colorKey = colorKeys[index % colorKeys.length]; - const colors = colorMap[colorKey]; - - return ( -
-
{card.label}
-
- {card.value.toLocaleString()} -
-
- ); - })} - - {/* 일반 지표 카드 (항상 표시) */} - {metrics.map((metric) => { - const colors = colorMap[metric.color as keyof typeof colorMap] || colorMap.gray; - const formattedValue = metric.calculatedValue.toFixed(metric.decimals); +
+ {/* 그룹별 카드 (활성화 시) */} + {isGroupByMode && + groupedCards.map((card, index) => { + // 색상 순환 (6가지 색상) + const colorKeys = Object.keys(colorMap) as Array; + const colorKey = colorKeys[index % colorKeys.length]; + const colors = colorMap[colorKey]; return (
-
{metric.label}
-
- {formattedValue} - {metric.unit} -
+
{card.label}
+
{card.value.toLocaleString()}
); })} -
+ + {/* 일반 지표 카드 (항상 표시) */} + {metrics.map((metric) => { + const colors = colorMap[metric.color as keyof typeof colorMap] || colorMap.gray; + const formattedValue = metric.calculatedValue.toFixed(metric.decimals); + + return ( +
+
{metric.label}
+
+ {formattedValue} + {metric.unit} +
+
+ ); + })}
); } From dcb32f26b033d232aae7f7c9de75b2ef566188e1 Mon Sep 17 00:00:00 2001 From: dohyeons Date: Tue, 28 Oct 2025 15:42:53 +0900 Subject: [PATCH 5/8] =?UTF-8?q?=EC=BF=BC=EB=A6=AC=EB=A5=BC=20=EC=83=88?= =?UTF-8?q?=EB=A1=9C=20=EC=8B=A4=ED=96=89=ED=95=98=EB=A9=B4=20=EA=B8=B0?= =?UTF-8?q?=EC=A1=B4=20=EC=BB=AC=EB=9F=BC=20=EC=84=A4=EC=A0=95=EC=9D=B4=20?= =?UTF-8?q?=EC=B4=88=EA=B8=B0=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../widgets/ListWidgetConfigSidebar.tsx | 29 ++++++++----------- 1 file changed, 12 insertions(+), 17 deletions(-) diff --git a/frontend/components/admin/dashboard/widgets/ListWidgetConfigSidebar.tsx b/frontend/components/admin/dashboard/widgets/ListWidgetConfigSidebar.tsx index 62db5cef..cd72b044 100644 --- a/frontend/components/admin/dashboard/widgets/ListWidgetConfigSidebar.tsx +++ b/frontend/components/admin/dashboard/widgets/ListWidgetConfigSidebar.tsx @@ -94,24 +94,19 @@ export function ListWidgetConfigSidebar({ element, isOpen, onClose, onApply }: L const handleQueryTest = useCallback((result: QueryResult) => { setQueryResult(result); - // 쿼리 결과의 컬럼을 자동으로 listConfig.columns에 추가 (기존 컬럼은 유지) - setListConfig((prev) => { - const existingFields = prev.columns.map((col) => col.field); - const newColumns = result.columns - .filter((col) => !existingFields.includes(col)) - .map((col, idx) => ({ - id: `col_${Date.now()}_${idx}`, - field: col, - label: col, - visible: true, - align: "left" as const, - })); + // 쿼리 실행 시마다 컬럼 설정 초기화 (새로운 쿼리 결과로 덮어쓰기) + const newColumns = result.columns.map((col, idx) => ({ + id: `col_${Date.now()}_${idx}`, + field: col, + label: col, + visible: true, + align: "left" as const, + })); - return { - ...prev, - columns: [...prev.columns, ...newColumns], - }; - }); + setListConfig((prev) => ({ + ...prev, + columns: newColumns, + })); }, []); // 컬럼 설정 변경 From 7c3db548bcd5de2ebd80a640a162003762a46ce9 Mon Sep 17 00:00:00 2001 From: dohyeons Date: Tue, 28 Oct 2025 17:48:56 +0900 Subject: [PATCH 6/8] =?UTF-8?q?=EC=9C=84=EC=A0=AF=EC=9D=84=20=EC=B2=98?= =?UTF-8?q?=EC=9D=8C=20=EC=B6=94=EA=B0=80=ED=95=A0=20=EB=95=8C=20=EC=82=AC?= =?UTF-8?q?=EC=9D=B4=EB=93=9C=EB=B0=94=20=EC=97=B4=EB=A6=AC=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/components/admin/dashboard/DashboardDesigner.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/frontend/components/admin/dashboard/DashboardDesigner.tsx b/frontend/components/admin/dashboard/DashboardDesigner.tsx index 5b39a8f7..07303e24 100644 --- a/frontend/components/admin/dashboard/DashboardDesigner.tsx +++ b/frontend/components/admin/dashboard/DashboardDesigner.tsx @@ -271,6 +271,10 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D setElements((prev) => [...prev, newElement]); setElementCounter((prev) => prev + 1); setSelectedElement(newElement.id); + + // 새 요소 생성 시 자동으로 설정 사이드바 열기 + setSidebarElement(newElement); + setSidebarOpen(true); }, [elementCounter, canvasConfig], ); From 86f561c484452f03adf789530b9e617079d5b591 Mon Sep 17 00:00:00 2001 From: dohyeons Date: Tue, 28 Oct 2025 17:51:59 +0900 Subject: [PATCH 7/8] =?UTF-8?q?=EC=9C=84=EC=A0=AF=20=ED=81=AC=EA=B8=B0=20?= =?UTF-8?q?=EC=B4=88=EA=B3=BC=20=EC=8B=9C=20=EC=88=A8=EA=B8=B0=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/components/admin/dashboard/CanvasElement.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/components/admin/dashboard/CanvasElement.tsx b/frontend/components/admin/dashboard/CanvasElement.tsx index 38eb2038..9f723165 100644 --- a/frontend/components/admin/dashboard/CanvasElement.tsx +++ b/frontend/components/admin/dashboard/CanvasElement.tsx @@ -721,7 +721,7 @@ export function CanvasElement({
Date: Tue, 28 Oct 2025 18:55:30 +0900 Subject: [PATCH 8/8] =?UTF-8?q?=EC=9A=94=EC=86=8C=20=ED=81=B4=EB=A6=AD?= =?UTF-8?q?=ED=95=98=EB=A9=B4=20=EC=B9=B4=EB=A9=94=EB=9D=BC=20=EC=8B=9C?= =?UTF-8?q?=EC=95=BC=20=EB=B3=80=EA=B2=BD=ED=95=98=EB=8F=84=EB=A1=9D=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../widgets/yard-3d/Yard3DCanvas.tsx | 80 +++++++++++++++++++ .../dashboard/widgets/yard-3d/YardEditor.tsx | 27 ++++++- 2 files changed, 105 insertions(+), 2 deletions(-) diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/Yard3DCanvas.tsx b/frontend/components/admin/dashboard/widgets/yard-3d/Yard3DCanvas.tsx index b5af2630..7e9cddec 100644 --- a/frontend/components/admin/dashboard/widgets/yard-3d/Yard3DCanvas.tsx +++ b/frontend/components/admin/dashboard/widgets/yard-3d/Yard3DCanvas.tsx @@ -31,6 +31,7 @@ interface Yard3DCanvasProps { onPlacementDrag?: (id: number, position: { x: number; y: number; z: number }) => void; gridSize?: number; // 그리드 크기 (기본값: 5) onCollisionDetected?: () => void; // 충돌 감지 시 콜백 + focusOnPlacementId?: number | null; // 카메라가 포커스할 요소 ID } // 좌표를 그리드 칸의 중심에 스냅 (마인크래프트 스타일) @@ -467,6 +468,75 @@ function MaterialBox({ } // 3D 씬 컴포넌트 +// 카메라 포커스 컨트롤러 +function CameraFocusController({ + focusOnPlacementId, + placements, + orbitControlsRef, +}: { + focusOnPlacementId?: number | null; + placements: YardPlacement[]; + orbitControlsRef: React.RefObject; +}) { + const { camera } = useThree(); + + useEffect(() => { + console.log("🎥 CameraFocusController triggered"); + console.log(" - focusOnPlacementId:", focusOnPlacementId); + console.log(" - orbitControlsRef.current:", orbitControlsRef.current); + console.log(" - placements count:", placements.length); + + if (focusOnPlacementId && orbitControlsRef.current) { + const targetPlacement = placements.find((p) => p.id === focusOnPlacementId); + console.log(" - targetPlacement:", targetPlacement); + + if (targetPlacement) { + console.log("✅ Starting camera animation to:", targetPlacement.material_name || targetPlacement.id); + + const controls = orbitControlsRef.current; + const targetPosition = new THREE.Vector3( + targetPlacement.position_x, + targetPlacement.position_y, + targetPlacement.position_z, + ); + + // 카메라 위치 계산 (요소 위에서 약간 비스듬히) + const cameraOffset = new THREE.Vector3(15, 15, 15); + const newCameraPosition = targetPosition.clone().add(cameraOffset); + + // 부드러운 애니메이션으로 카메라 이동 + const startPos = camera.position.clone(); + const startTarget = controls.target.clone(); + const duration = 1000; // 1초 + const startTime = Date.now(); + + const animate = () => { + const elapsed = Date.now() - startTime; + const progress = Math.min(elapsed / duration, 1); + + // easeInOutCubic 이징 함수 + const eased = progress < 0.5 ? 4 * progress * progress * progress : 1 - Math.pow(-2 * progress + 2, 3) / 2; + + // 카메라 위치 보간 + camera.position.lerpVectors(startPos, newCameraPosition, eased); + + // 카메라 타겟 보간 + controls.target.lerpVectors(startTarget, targetPosition, eased); + controls.update(); + + if (progress < 1) { + requestAnimationFrame(animate); + } + }; + + animate(); + } + } + }, [focusOnPlacementId, placements, camera, orbitControlsRef]); + + return null; +} + function Scene({ placements, selectedPlacementId, @@ -474,12 +544,20 @@ function Scene({ onPlacementDrag, gridSize = 5, onCollisionDetected, + focusOnPlacementId, }: Yard3DCanvasProps) { const [isDraggingAny, setIsDraggingAny] = useState(false); const orbitControlsRef = useRef(null); return ( <> + {/* 카메라 포커스 컨트롤러 */} + + {/* 조명 */} @@ -551,6 +629,7 @@ export default function Yard3DCanvas({ onPlacementDrag, gridSize = 5, onCollisionDetected, + focusOnPlacementId, }: Yard3DCanvasProps) { const handleCanvasClick = (e: any) => { // Canvas의 빈 공간을 클릭했을 때만 선택 해제 @@ -577,6 +656,7 @@ export default function Yard3DCanvas({ onPlacementDrag={onPlacementDrag} gridSize={gridSize} onCollisionDetected={onCollisionDetected} + focusOnPlacementId={focusOnPlacementId} /> diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/YardEditor.tsx b/frontend/components/admin/dashboard/widgets/yard-3d/YardEditor.tsx index a9fea2f3..726239f0 100644 --- a/frontend/components/admin/dashboard/widgets/yard-3d/YardEditor.tsx +++ b/frontend/components/admin/dashboard/widgets/yard-3d/YardEditor.tsx @@ -38,6 +38,7 @@ export default function YardEditor({ layout, onBack }: YardEditorProps) { const [placements, setPlacements] = useState([]); const [originalPlacements, setOriginalPlacements] = useState([]); // 원본 데이터 보관 const [selectedPlacement, setSelectedPlacement] = useState(null); + const [focusPlacementId, setFocusPlacementId] = useState(null); // 카메라 포커스할 요소 ID const [isLoading, setIsLoading] = useState(true); const [isSaving, setIsSaving] = useState(false); const [showConfigPanel, setShowConfigPanel] = useState(false); @@ -203,9 +204,30 @@ export default function YardEditor({ layout, onBack }: YardEditorProps) { }; // 요소 선택 (3D 캔버스 또는 목록에서) - const handleSelectPlacement = (placement: YardPlacement) => { + const handleSelectPlacement = (placement: YardPlacement | null) => { + console.log("📍 handleSelectPlacement called with:", placement); + + if (!placement) { + // 빈 공간 클릭 시 선택 해제 + console.log(" → Deselecting (null placement)"); + setSelectedPlacement(null); + setShowConfigPanel(false); + setFocusPlacementId(null); + return; + } + + console.log(" → Selecting placement:", placement.id, placement.material_name); setSelectedPlacement(placement); setShowConfigPanel(false); // 선택 시에는 설정 패널 닫기 + + console.log(" → Setting focusPlacementId to:", placement.id); + setFocusPlacementId(placement.id); // 카메라 포커스 + + // 카메라 애니메이션 완료 후 focusPlacementId 초기화 (재클릭 시 다시 포커스 가능) + setTimeout(() => { + console.log(" → Clearing focusPlacementId"); + setFocusPlacementId(null); + }, 1100); // 애니메이션 시간(1000ms)보다 약간 길게 }; // 설정 버튼 클릭 @@ -500,8 +522,9 @@ export default function YardEditor({ layout, onBack }: YardEditorProps) { handleSelectPlacement(placement as YardPlacement)} + onPlacementClick={(placement) => handleSelectPlacement(placement as YardPlacement | null)} onPlacementDrag={handlePlacementDrag} + focusOnPlacementId={focusPlacementId} onCollisionDetected={() => { toast({ title: "배치 불가",