캔버스 크기 조절

2025-10-13 18:09:20 +09:00 · 2025-10-13 18:09:20 +09:00 · 3672bbd997
parent 39e3aa14cb
commit 3672bbd997
4 changed files with 37 additions and 77 deletions
--- a/frontend/components/admin/dashboard/DashboardCanvas.tsx
+++ b/frontend/components/admin/dashboard/DashboardCanvas.tsx
@ -36,30 +36,6 @@ export const DashboardCanvas = forwardRef<HTMLDivElement, DashboardCanvasProps>(
    ref,
  ) => {
    const [isDragOver, setIsDragOver] = useState(false);
-    const [cellSize, setCellSize] = useState(60);
-
-    // 화면 크기에 따라 셀 크기 동적 계산
-    useEffect(() => {
-      const updateCellSize = () => {
-        if (!ref || typeof ref === "function" || !ref.current) return;
-
-        const container = ref.current.parentElement;
-        if (!container) return;
-
-        // 컨테이너 너비에서 여백 제외
-        const availableWidth = container.clientWidth - 32; // 좌우 패딩
-
-        // 12 컬럼 + 11개 gap을 고려한 셀 크기 계산
-        const calculatedCellSize = Math.floor((availableWidth - 11 * GRID_CONFIG.GAP) / GRID_CONFIG.COLUMNS);
-
-        setCellSize(calculatedCellSize);
-      };
-
-      updateCellSize();
-      window.addEventListener("resize", updateCellSize);
-
-      return () => window.removeEventListener("resize", updateCellSize);
-    }, [ref]);

    // 드래그 오버 처리
    const handleDragOver = useCallback((e: React.DragEvent) => {
@ -93,16 +69,16 @@ export const DashboardCanvas = forwardRef<HTMLDivElement, DashboardCanvasProps>(
          const rawX = e.clientX - rect.left + (ref.current?.scrollLeft || 0);
          const rawY = e.clientY - rect.top + (ref.current?.scrollTop || 0);

-          // 그리드에 스냅 (동적 셀 크기 사용)
-          const snappedX = snapToGrid(rawX, cellSize);
-          const snappedY = snapToGrid(rawY, cellSize);
+          // 그리드에 스냅 (고정 셀 크기 사용)
+          const snappedX = snapToGrid(rawX, GRID_CONFIG.CELL_SIZE);
+          const snappedY = snapToGrid(rawY, GRID_CONFIG.CELL_SIZE);

          onCreateElement(dragData.type, dragData.subtype, snappedX, snappedY);
        } catch (error) {
          // console.error('드롭 데이터 파싱 오류:', error);
        }
      },
-      [ref, onCreateElement, cellSize],
+      [ref, onCreateElement],
    );

    // 캔버스 클릭 시 선택 해제
@ -115,19 +91,20 @@ export const DashboardCanvas = forwardRef<HTMLDivElement, DashboardCanvasProps>(
      [onSelectElement],
    );

-    // 그리드 크기 계산 (동적)
-    const cellWithGap = cellSize + GRID_CONFIG.GAP;
+    // 고정 그리드 크기
+    const cellWithGap = GRID_CONFIG.CELL_SIZE + GRID_CONFIG.GAP;
    const gridSize = `${cellWithGap}px ${cellWithGap}px`;

    return (
      <div
        ref={ref}
-        className={`relative min-h-full w-full bg-gray-50 ${isDragOver ? "bg-blue-50/50" : ""} `}
+        className={`relative min-h-screen rounded-lg bg-gray-50 shadow-inner ${isDragOver ? "bg-blue-50/50" : ""} `}
        style={{
-          // 12 컬럼 그리드 배경 (동적 크기)
+          width: `${GRID_CONFIG.CANVAS_WIDTH}px`,
+          // 12 컬럼 그리드 배경
          backgroundImage: `
-            linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px),
-            linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px)
+            linear-gradient(rgba(59, 130, 246, 0.15) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(59, 130, 246, 0.15) 1px, transparent 1px)
          `,
          backgroundSize: gridSize,
          backgroundPosition: "0 0",
@ -144,7 +121,7 @@ export const DashboardCanvas = forwardRef<HTMLDivElement, DashboardCanvasProps>(
            key={element.id}
            element={element}
            isSelected={selectedElement === element.id}
-            cellSize={cellSize}
+            cellSize={GRID_CONFIG.CELL_SIZE}
            onUpdate={onUpdateElement}
            onRemove={onRemoveElement}
            onSelect={onSelectElement}
--- a/frontend/components/admin/dashboard/DashboardDesigner.tsx
+++ b/frontend/components/admin/dashboard/DashboardDesigner.tsx
@ -23,32 +23,8 @@ export default function DashboardDesigner() {
  const [dashboardId, setDashboardId] = useState<string | null>(null);
  const [dashboardTitle, setDashboardTitle] = useState<string>("");
  const [isLoading, setIsLoading] = useState(false);
-  const [cellSize, setCellSize] = useState(60);
  const canvasRef = useRef<HTMLDivElement>(null);

-  // 화면 크기에 따라 셀 크기 동적 계산
-  useEffect(() => {
-    const updateCellSize = () => {
-      if (!canvasRef.current) return;
-
-      const container = canvasRef.current.parentElement;
-      if (!container) return;
-
-      // 컨테이너 너비에서 여백 제외
-      const availableWidth = container.clientWidth - 32;
-
-      // 12 컬럼 + 11개 gap을 고려한 셀 크기 계산
-      const calculatedCellSize = Math.floor((availableWidth - 11 * GRID_CONFIG.GAP) / GRID_CONFIG.COLUMNS);
-
-      setCellSize(calculatedCellSize);
-    };
-
-    updateCellSize();
-    window.addEventListener("resize", updateCellSize);
-
-    return () => window.removeEventListener("resize", updateCellSize);
-  }, []);
-
  // URL 파라미터에서 대시보드 ID 읽기 및 데이터 로드
  React.useEffect(() => {
    const params = new URLSearchParams(window.location.search);
@ -100,12 +76,12 @@ export default function DashboardDesigner() {
    }
  };

-  // 새로운 요소 생성 (그리드 기반 기본 크기)
+  // 새로운 요소 생성 (고정 그리드 기반 기본 크기)
  const createElement = useCallback(
    (type: ElementType, subtype: ElementSubtype, x: number, y: number) => {
      // 기본 크기: 차트는 4x3 셀, 위젯은 2x2 셀
      const defaultCells = type === "chart" ? { width: 4, height: 3 } : { width: 2, height: 2 };
-      const cellWithGap = cellSize + GRID_CONFIG.GAP;
+      const cellWithGap = GRID_CONFIG.CELL_SIZE + GRID_CONFIG.GAP;

      const defaultWidth = defaultCells.width * cellWithGap - GRID_CONFIG.GAP;
      const defaultHeight = defaultCells.height * cellWithGap - GRID_CONFIG.GAP;
@ -124,7 +100,7 @@ export default function DashboardDesigner() {
      setElementCounter((prev) => prev + 1);
      setSelectedElement(newElement.id);
    },
-    [elementCounter, cellSize],
+    [elementCounter],
  );

  // 요소 업데이트
@ -253,25 +229,29 @@ export default function DashboardDesigner() {
  return (
    <div className="flex h-full bg-gray-50">
      {/* 캔버스 영역 */}
-      <div className="relative flex-1 overflow-auto border-r-2 border-gray-300">
+      <div className="relative flex-1 overflow-auto border-r-2 border-gray-300 bg-gray-100">
        {/* 편집 중인 대시보드 표시 */}
        {dashboardTitle && (
-          <div className="bg-accent0 absolute top-2 left-2 z-10 rounded-lg px-3 py-1 text-sm font-medium text-white shadow-lg">
+          <div className="bg-accent0 absolute top-6 left-6 z-10 rounded-lg px-3 py-1 text-sm font-medium text-white shadow-lg">
            📝 편집 중: {dashboardTitle}
          </div>
        )}

        <DashboardToolbar onClearCanvas={clearCanvas} onSaveLayout={saveLayout} />
-        <DashboardCanvas
-          ref={canvasRef}
-          elements={elements}
-          selectedElement={selectedElement}
-          onCreateElement={createElement}
-          onUpdateElement={updateElement}
-          onRemoveElement={removeElement}
-          onSelectElement={setSelectedElement}
-          onConfigureElement={openConfigModal}
-        />
+
+        {/* 캔버스 중앙 정렬 컨테이너 */}
+        <div className="flex justify-center p-4">
+          <DashboardCanvas
+            ref={canvasRef}
+            elements={elements}
+            selectedElement={selectedElement}
+            onCreateElement={createElement}
+            onUpdateElement={updateElement}
+            onRemoveElement={removeElement}
+            onSelectElement={setSelectedElement}
+            onConfigureElement={openConfigModal}
+          />
+        </div>
      </div>

      {/* 사이드바 */}
--- a/frontend/components/admin/dashboard/DashboardSidebar.tsx
+++ b/frontend/components/admin/dashboard/DashboardSidebar.tsx
@ -17,7 +17,7 @@ export function DashboardSidebar() {
  };

  return (
-    <div className="w-[348px] overflow-y-auto border-l border-gray-200 bg-white p-6">
+    <div className="w-[370px] overflow-y-auto border-l border-gray-200 bg-white p-6">
      {/* 차트 섹션 */}
      <div className="mb-8">
        <h3 className="mb-4 border-b-2 border-green-500 pb-3 text-lg font-semibold text-gray-800">📊 차트 종류</h3>
--- a/frontend/components/admin/dashboard/gridUtils.ts
+++ b/frontend/components/admin/dashboard/gridUtils.ts
@ -5,13 +5,16 @@
 * - 스냅 기능
 */

-// 그리드 설정
+// 그리드 설정 (고정 크기)
 export const GRID_CONFIG = {
  COLUMNS: 12,
-  CELL_SIZE: 60, // 60px 정사각형 셀
+  CELL_SIZE: 132, // 고정 셀 크기
  GAP: 8, // 셀 간격
  SNAP_THRESHOLD: 15, // 스냅 임계값 (px)
  ELEMENT_PADDING: 4, // 요소 주위 여백 (px)
+  CANVAS_WIDTH: 1682, // 고정 캔버스 너비 (실제 측정값)
+  // 계산식: (132 + 8) × 12 - 8 = 1672px (그리드)
+  // 추가 여백 10px 포함 = 1682px
 } as const;

 /**