49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import { GridConfig } from "@/types/report";
|
|
|
|
interface GridLayerProps {
|
|
gridConfig: GridConfig;
|
|
pageWidth: number;
|
|
pageHeight: number;
|
|
}
|
|
|
|
export function GridLayer({ gridConfig, pageWidth, pageHeight }: GridLayerProps) {
|
|
if (!gridConfig.visible) return null;
|
|
|
|
const { cellWidth, cellHeight, columns, rows, gridColor, gridOpacity } = gridConfig;
|
|
|
|
// SVG로 그리드 선 렌더링
|
|
return (
|
|
<svg className="pointer-events-none absolute inset-0" width={pageWidth} height={pageHeight} style={{ zIndex: 0 }}>
|
|
{/* 세로 선 */}
|
|
{Array.from({ length: columns + 1 }).map((_, i) => (
|
|
<line
|
|
key={`v-${i}`}
|
|
x1={i * cellWidth}
|
|
y1={0}
|
|
x2={i * cellWidth}
|
|
y2={pageHeight}
|
|
stroke={gridColor}
|
|
strokeOpacity={gridOpacity}
|
|
strokeWidth={1}
|
|
/>
|
|
))}
|
|
|
|
{/* 가로 선 */}
|
|
{Array.from({ length: rows + 1 }).map((_, i) => (
|
|
<line
|
|
key={`h-${i}`}
|
|
x1={0}
|
|
y1={i * cellHeight}
|
|
x2={pageWidth}
|
|
y2={i * cellHeight}
|
|
stroke={gridColor}
|
|
strokeOpacity={gridOpacity}
|
|
strokeWidth={1}
|
|
/>
|
|
))}
|
|
</svg>
|
|
);
|
|
}
|