12그리드 컬럼 디자인 및 캔버스 변경

frontend/components/admin/dashboard/DashboardCanvas.tsx

@@ -48,7 +48,7 @@ export const DashboardCanvas = forwardRef<HTMLDivElement, DashboardCanvasProps>(
       onSelectElement,
       onSelectMultiple,
       onConfigureElement,
-      backgroundColor = "#f9fafb",
+      backgroundColor = "transparent",
       canvasWidth = 1560,
       canvasHeight = 768,
     },
@@ -466,7 +466,7 @@ export const DashboardCanvas = forwardRef<HTMLDivElement, DashboardCanvasProps>(
     return (
       <div
         ref={ref}
-        className={`relative w-full rounded-lg shadow-inner ${isDragOver ? "bg-blue-50/50" : ""} `}
+        className={`relative w-full ${isDragOver ? "bg-blue-50/50" : ""} `}
         style={{
           backgroundColor,
           height: `${canvasHeight}px`,
@@ -497,13 +497,14 @@ export const DashboardCanvas = forwardRef<HTMLDivElement, DashboardCanvasProps>(
           horizontalGuidelines.map((y, yIdx) => (
             <div
               key={`grid-box-${xIdx}-${yIdx}`}
-              className="pointer-events-none absolute border"
+              className="pointer-events-none absolute"
               style={{
                 left: `${x}px`,
                 top: `${y}px`,
                 width: `${boxSize}px`,
                 height: `${boxSize}px`,
-                borderColor: GRID_CONFIG.GUIDELINE_COLOR,
+                backgroundColor: "#ffffff",
+                boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
                 zIndex: 0,
               }}
             />

frontend/components/admin/dashboard/DashboardDesigner.tsx

@@ -47,7 +47,7 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
   const [dashboardId, setDashboardId] = useState<string | null>(initialDashboardId || null);
   const [dashboardTitle, setDashboardTitle] = useState<string>("");
   const [isLoading, setIsLoading] = useState(false);
-  const [canvasBackgroundColor, setCanvasBackgroundColor] = useState<string>("#f9fafb");
+  const [canvasBackgroundColor, setCanvasBackgroundColor] = useState<string>("transparent");
   const canvasRef = useRef<HTMLDivElement>(null);
 
   // 저장 모달 상태
@@ -218,7 +218,7 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
       // 기본 크기 설정 (서브그리드 기준)
       const gridConfig = calculateGridConfig(canvasConfig.width);
       const subGridSize = gridConfig.SUB_GRID_SIZE;
-      
+
       // 서브그리드 기준 기본 크기 (픽셀)
       let defaultWidth = subGridSize * 10; // 기본 위젯: 서브그리드 10칸
       let defaultHeight = subGridSize * 10; // 기본 위젯: 서브그리드 10칸
@@ -550,7 +550,7 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
         {/* overflow-auto 제거 - 외부 페이지 스크롤 사용 */}
         <div className="flex flex-1 items-start justify-center bg-gray-100 p-8">
           <div
-            className="relative shadow-2xl"
+            className="relative"
             style={{
               width: `${canvasConfig.width}px`,
               minHeight: `${canvasConfig.height}px`,