+
);
}
diff --git a/frontend/components/admin/dashboard/DashboardSidebar.tsx b/frontend/components/admin/dashboard/DashboardSidebar.tsx
index 6c03b398..4ae3b3be 100644
--- a/frontend/components/admin/dashboard/DashboardSidebar.tsx
+++ b/frontend/components/admin/dashboard/DashboardSidebar.tsx
@@ -157,14 +157,13 @@ export function DashboardSidebar() {
subtype="map-summary"
onDragStart={handleDragStart}
/>
- {/* 주석: 다른 분이 범용 리스트 작업 중 - 충돌 방지를 위해 임시 주석처리 */}
- {/* */}
+ />
+ 데이터 위젯리스트 위젯
- 지도
+ {/* 지도 */}
+ 커스텀 지도 카드
+ {/* 커스텀 목록 카드 */}
+ 커스텀 상태 카드일반 위젯
@@ -198,12 +201,13 @@ export function DashboardTopMenu({
문서리스크 알림
-
+ {/* 범용 위젯으로 대체 가능하여 주석처리 */}
+ {/* 차량 관리차량 상태차량 목록차량 위치
-
+ */}
diff --git a/frontend/components/admin/dashboard/collisionUtils.ts b/frontend/components/admin/dashboard/collisionUtils.ts
new file mode 100644
index 00000000..ff597eda
--- /dev/null
+++ b/frontend/components/admin/dashboard/collisionUtils.ts
@@ -0,0 +1,162 @@
+/**
+ * 대시보드 위젯 충돌 감지 및 자동 재배치 유틸리티
+ */
+
+import { DashboardElement } from "./types";
+
+export interface Rectangle {
+ x: number;
+ y: number;
+ width: number;
+ height: number;
+}
+
+/**
+ * 두 사각형이 겹치는지 확인 (여유있는 충돌 감지)
+ * @param rect1 첫 번째 사각형
+ * @param rect2 두 번째 사각형
+ * @param cellSize 한 그리드 칸의 크기 (기본: 130px)
+ */
+export function isColliding(rect1: Rectangle, rect2: Rectangle, cellSize: number = 130): boolean {
+ // 겹친 영역 계산
+ const overlapX = Math.max(
+ 0,
+ Math.min(rect1.x + rect1.width, rect2.x + rect2.width) - Math.max(rect1.x, rect2.x)
+ );
+ const overlapY = Math.max(
+ 0,
+ Math.min(rect1.y + rect1.height, rect2.y + rect2.height) - Math.max(rect1.y, rect2.y)
+ );
+
+ // 큰 그리드의 절반(cellSize/2 ≈ 65px) 이상 겹쳐야 충돌로 간주
+ const collisionThreshold = Math.floor(cellSize / 2);
+ return overlapX >= collisionThreshold && overlapY >= collisionThreshold;
+}
+
+/**
+ * 특정 위젯과 충돌하는 다른 위젯들을 찾기
+ */
+export function findCollisions(
+ element: DashboardElement,
+ allElements: DashboardElement[],
+ cellSize: number = 130,
+ excludeId?: string
+): DashboardElement[] {
+ const elementRect: Rectangle = {
+ x: element.position.x,
+ y: element.position.y,
+ width: element.size.width,
+ height: element.size.height,
+ };
+
+ return allElements.filter((other) => {
+ if (other.id === element.id || other.id === excludeId) {
+ return false;
+ }
+
+ const otherRect: Rectangle = {
+ x: other.position.x,
+ y: other.position.y,
+ width: other.size.width,
+ height: other.size.height,
+ };
+
+ return isColliding(elementRect, otherRect, cellSize);
+ });
+}
+
+/**
+ * 충돌을 해결하기 위해 위젯을 아래로 이동
+ */
+export function resolveCollisionVertically(
+ movingElement: DashboardElement,
+ collidingElement: DashboardElement,
+ gridSize: number = 10
+): { x: number; y: number } {
+ // 충돌하는 위젯 아래로 이동
+ const newY = collidingElement.position.y + collidingElement.size.height + gridSize;
+
+ return {
+ x: collidingElement.position.x,
+ y: Math.round(newY / gridSize) * gridSize, // 그리드에 스냅
+ };
+}
+
+/**
+ * 여러 위젯의 충돌을 재귀적으로 해결
+ */
+export function resolveAllCollisions(
+ elements: DashboardElement[],
+ movedElementId: string,
+ subGridSize: number = 10,
+ canvasWidth: number = 1560,
+ cellSize: number = 130,
+ maxIterations: number = 50
+): DashboardElement[] {
+ let result = [...elements];
+ let iterations = 0;
+
+ // 이동한 위젯부터 시작
+ const movedIndex = result.findIndex((el) => el.id === movedElementId);
+ if (movedIndex === -1) return result;
+
+ // Y 좌표로 정렬 (위에서 아래로 처리)
+ const sortedIndices = result
+ .map((el, idx) => ({ el, idx }))
+ .sort((a, b) => a.el.position.y - b.el.position.y)
+ .map((item) => item.idx);
+
+ while (iterations < maxIterations) {
+ let hasCollision = false;
+
+ for (const idx of sortedIndices) {
+ const element = result[idx];
+ const collisions = findCollisions(element, result, cellSize);
+
+ if (collisions.length > 0) {
+ hasCollision = true;
+
+ // 첫 번째 충돌만 처리 (가장 위에 있는 것)
+ const collision = collisions.sort((a, b) => a.position.y - b.position.y)[0];
+
+ // 충돌하는 위젯을 아래로 이동
+ const collisionIdx = result.findIndex((el) => el.id === collision.id);
+ if (collisionIdx !== -1) {
+ const newY = element.position.y + element.size.height + subGridSize;
+
+ result[collisionIdx] = {
+ ...result[collisionIdx],
+ position: {
+ ...result[collisionIdx].position,
+ y: Math.round(newY / subGridSize) * subGridSize,
+ },
+ };
+ }
+ }
+ }
+
+ if (!hasCollision) break;
+ iterations++;
+ }
+
+ return result;
+}
+
+/**
+ * 위젯이 캔버스 경계를 벗어나지 않도록 제한
+ */
+export function constrainToCanvas(
+ element: DashboardElement,
+ canvasWidth: number,
+ canvasHeight: number,
+ gridSize: number = 10
+): { x: number; y: number } {
+ const maxX = canvasWidth - element.size.width;
+ const maxY = canvasHeight - element.size.height;
+
+ return {
+ x: Math.max(0, Math.min(Math.round(element.position.x / gridSize) * gridSize, maxX)),
+ y: Math.max(0, Math.min(Math.round(element.position.y / gridSize) * gridSize, maxY)),
+ };
+}
+
diff --git a/frontend/components/admin/dashboard/gridUtils.ts b/frontend/components/admin/dashboard/gridUtils.ts
index 54149222..3864e861 100644
--- a/frontend/components/admin/dashboard/gridUtils.ts
+++ b/frontend/components/admin/dashboard/gridUtils.ts
@@ -8,9 +8,10 @@
// 기본 그리드 설정 (FHD 기준)
export const GRID_CONFIG = {
COLUMNS: 12, // 모든 해상도에서 12칸 고정
- GAP: 8, // 셀 간격 고정
- SNAP_THRESHOLD: 15, // 스냅 임계값 (px)
+ GAP: 5, // 셀 간격 고정
+ SNAP_THRESHOLD: 10, // 스냅 임계값 (px)
ELEMENT_PADDING: 4, // 요소 주위 여백 (px)
+ SUB_GRID_DIVISIONS: 5, // 각 그리드 칸을 5x5로 세분화 (세밀한 조정용)
// CELL_SIZE와 CANVAS_WIDTH는 해상도에 따라 동적 계산
} as const;
@@ -23,14 +24,23 @@ export function calculateCellSize(canvasWidth: number): number {
return Math.floor((canvasWidth + GRID_CONFIG.GAP) / GRID_CONFIG.COLUMNS) - GRID_CONFIG.GAP;
}
+/**
+ * 서브 그리드 크기 계산 (세밀한 조정용)
+ */
+export function calculateSubGridSize(cellSize: number): number {
+ return Math.floor(cellSize / GRID_CONFIG.SUB_GRID_DIVISIONS);
+}
+
/**
* 해상도별 그리드 설정 계산
*/
export function calculateGridConfig(canvasWidth: number) {
const cellSize = calculateCellSize(canvasWidth);
+ const subGridSize = calculateSubGridSize(cellSize);
return {
...GRID_CONFIG,
CELL_SIZE: cellSize,
+ SUB_GRID_SIZE: subGridSize,
CANVAS_WIDTH: canvasWidth,
};
}
@@ -51,15 +61,18 @@ export const getCanvasWidth = () => {
};
/**
- * 좌표를 가장 가까운 그리드 포인트로 스냅 (여백 포함)
+ * 좌표를 서브 그리드에 스냅 (세밀한 조정 가능)
* @param value - 스냅할 좌표값
- * @param cellSize - 셀 크기 (선택사항, 기본값은 GRID_CONFIG.CELL_SIZE)
- * @returns 스냅된 좌표값 (여백 포함)
+ * @param subGridSize - 서브 그리드 크기 (선택사항, 기본값: cellSize/3 ≈ 43px)
+ * @returns 스냅된 좌표값
*/
-export const snapToGrid = (value: number, cellSize: number = GRID_CONFIG.CELL_SIZE): number => {
- const cellWithGap = cellSize + GRID_CONFIG.GAP;
- const gridIndex = Math.round(value / cellWithGap);
- return gridIndex * cellWithGap + GRID_CONFIG.ELEMENT_PADDING;
+export const snapToGrid = (value: number, subGridSize?: number): number => {
+ // 서브 그리드 크기가 지정되지 않으면 기본 그리드 크기의 1/3 사용 (3x3 서브그리드)
+ const snapSize = subGridSize ?? Math.floor(GRID_CONFIG.CELL_SIZE / 3);
+
+ // 서브 그리드 단위로 스냅
+ const gridIndex = Math.round(value / snapSize);
+ return gridIndex * snapSize;
};
/**
diff --git a/frontend/components/admin/dashboard/widgets/CalendarWidget.tsx b/frontend/components/admin/dashboard/widgets/CalendarWidget.tsx
index 4f54ac65..b5638f94 100644
--- a/frontend/components/admin/dashboard/widgets/CalendarWidget.tsx
+++ b/frontend/components/admin/dashboard/widgets/CalendarWidget.tsx
@@ -8,6 +8,7 @@ import { generateCalendarDays, getMonthName, navigateMonth } from "./calendarUti
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Button } from "@/components/ui/button";
import { Settings, ChevronLeft, ChevronRight, Calendar } from "lucide-react";
+import { useDashboard } from "@/contexts/DashboardContext";
interface CalendarWidgetProps {
element: DashboardElement;
@@ -21,11 +22,19 @@ interface CalendarWidgetProps {
* - 내장 설정 UI
*/
export function CalendarWidget({ element, onConfigUpdate }: CalendarWidgetProps) {
+ // Context에서 선택된 날짜 관리
+ const { selectedDate, setSelectedDate } = useDashboard();
+
// 현재 표시 중인 년/월
const today = new Date();
const [currentYear, setCurrentYear] = useState(today.getFullYear());
const [currentMonth, setCurrentMonth] = useState(today.getMonth());
const [settingsOpen, setSettingsOpen] = useState(false);
+
+ // 날짜 클릭 핸들러
+ const handleDateClick = (date: Date) => {
+ setSelectedDate(date);
+ };
// 기본 설정값
const config = element.calendarConfig || {
@@ -98,7 +107,15 @@ export function CalendarWidget({ element, onConfigUpdate }: CalendarWidgetProps)
{/* 달력 콘텐츠 */}