달력과 투두리스트 합침, 배경색변경가능, 위젯끼리 밀어내는 기능과 세밀한 그리드 추가, 범용위젯 복구

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;
 };
 
 /**