80 lines
2.7 KiB
TypeScript
80 lines
2.7 KiB
TypeScript
import React from "react";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Grid3X3 } from "lucide-react";
|
|
import { GridSettings } from "@/types/screen-management";
|
|
|
|
interface GridPanelProps {
|
|
gridSettings: GridSettings;
|
|
onGridSettingsChange: (settings: GridSettings) => void;
|
|
}
|
|
|
|
/**
|
|
* 격자 설정 패널 (10px 고정 격자)
|
|
*
|
|
* 사용자 설정:
|
|
* - 격자 표시 ON/OFF
|
|
* - 격자 스냅 ON/OFF
|
|
*
|
|
* 자동 설정 (변경 불가):
|
|
* - 격자 크기: 10px 고정
|
|
* - 격자 간격: 10px 고정
|
|
*/
|
|
export function GridPanel({ gridSettings, onGridSettingsChange }: GridPanelProps) {
|
|
const updateSetting = <K extends keyof GridSettings>(key: K, value: GridSettings[K]) => {
|
|
onGridSettingsChange({
|
|
...gridSettings,
|
|
[key]: value,
|
|
});
|
|
};
|
|
|
|
return (
|
|
<Card className="w-full">
|
|
<CardHeader className="space-y-1 pb-3">
|
|
<div className="flex items-center gap-2">
|
|
<Grid3X3 className="h-4 w-4" />
|
|
<CardTitle className="text-base">격자 설정</CardTitle>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{/* 격자 표시 */}
|
|
<div className="flex items-center justify-between">
|
|
<Label htmlFor="showGrid" className="flex items-center gap-2 text-sm font-medium">
|
|
<Grid3X3 className="h-4 w-4 text-muted-foreground" />
|
|
격자 표시
|
|
</Label>
|
|
<Checkbox
|
|
id="showGrid"
|
|
checked={gridSettings.showGrid ?? false}
|
|
onCheckedChange={(checked) => updateSetting("showGrid", checked as boolean)}
|
|
/>
|
|
</div>
|
|
|
|
{/* 격자 스냅 */}
|
|
<div className="flex items-center justify-between">
|
|
<Label htmlFor="snapToGrid" className="flex items-center gap-2 text-sm font-medium">
|
|
<Grid3X3 className="h-4 w-4 text-muted-foreground" />
|
|
격자 스냅
|
|
</Label>
|
|
<Checkbox
|
|
id="snapToGrid"
|
|
checked={gridSettings.snapToGrid}
|
|
onCheckedChange={(checked) => updateSetting("snapToGrid", checked as boolean)}
|
|
/>
|
|
</div>
|
|
|
|
{/* 격자 정보 (읽기 전용) */}
|
|
<div className="mt-4 rounded-md bg-muted p-3 text-xs text-muted-foreground">
|
|
<p className="font-medium mb-1">🔧 격자 시스템</p>
|
|
<ul className="space-y-0.5">
|
|
<li>• 격자 크기: <span className="font-semibold">10px 고정</span></li>
|
|
<li>• 컴포넌트는 10px 단위로 배치됩니다</li>
|
|
<li>• 격자 스냅을 끄면 자유롭게 배치 가능</li>
|
|
</ul>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|