정렬 가이드라인 구현

frontend/components/report/designer/ReportDesignerCanvas.tsx

@@ -20,6 +20,7 @@ export function ReportDesignerCanvas() {
     showGrid,
     gridSize,
     snapValueToGrid,
+    alignmentGuides,
   } = useReportDesigner();
 
   const [{ isOver }, drop] = useDrop(() => ({
@@ -109,6 +110,32 @@ export function ReportDesignerCanvas() {
           }}
           onClick={handleCanvasClick}
         >
+          {/* 정렬 가이드라인 렌더링 */}
+          {alignmentGuides.vertical.map((x, index) => (
+            <div
+              key={`v-${index}`}
+              className="pointer-events-none absolute top-0 bottom-0"
+              style={{
+                left: `${x}px`,
+                width: "1px",
+                backgroundColor: "#ef4444",
+                zIndex: 9999,
+              }}
+            />
+          ))}
+          {alignmentGuides.horizontal.map((y, index) => (
+            <div
+              key={`h-${index}`}
+              className="pointer-events-none absolute right-0 left-0"
+              style={{
+                top: `${y}px`,
+                height: "1px",
+                backgroundColor: "#ef4444",
+                zIndex: 9999,
+              }}
+            />
+          ))}
+
           {/* 컴포넌트 렌더링 */}
           {components.map((component) => (
             <CanvasComponent key={component.id} component={component} />