눈금자(Ruler) 표시 기능 구현

frontend/components/report/designer/ReportDesignerToolbar.tsx

@@ -28,6 +28,7 @@ import {
   ChevronUp,
   Lock,
   Unlock,
+  Ruler as RulerIcon,
 } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useReportDesigner } from "@/contexts/ReportDesignerContext";
@@ -83,6 +84,8 @@ export function ReportDesignerToolbar() {
     toggleLock,
     lockComponents,
     unlockComponents,
+    showRuler,
+    setShowRuler,
   } = useReportDesigner();
   const [showPreview, setShowPreview] = useState(false);
   const [showSaveAsTemplate, setShowSaveAsTemplate] = useState(false);
@@ -211,6 +214,16 @@ export function ReportDesignerToolbar() {
             <Grid3x3 className="h-4 w-4" />
             {snapToGrid && showGrid ? "Grid ON" : "Grid OFF"}
           </Button>
+          <Button
+            variant={showRuler ? "default" : "outline"}
+            size="sm"
+            onClick={() => setShowRuler(!showRuler)}
+            className="gap-2"
+            title="눈금자 표시 켜기/끄기"
+          >
+            <RulerIcon className="h-4 w-4" />
+            {showRuler ? "눈금자 ON" : "눈금자 OFF"}
+          </Button>
           <Button
             variant="outline"
             size="sm"