격자에 맞게 컴포넌트 배치

frontend/components/screen/GridControls.tsx

@@ -0,0 +1,181 @@
+"use client";
+
+import { useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Slider } from "@/components/ui/slider";
+import { Grid, Settings, RotateCcw } from "lucide-react";
+
+interface GridSettings {
+  columns: number;
+  gap: number;
+  padding: number;
+  snapToGrid: boolean;
+}
+
+interface GridControlsProps {
+  gridSettings: GridSettings;
+  onGridSettingsChange: (settings: GridSettings) => void;
+  className?: string;
+}
+
+export default function GridControls({ gridSettings, onGridSettingsChange, className }: GridControlsProps) {
+  const [localSettings, setLocalSettings] = useState<GridSettings>(gridSettings);
+
+  const handleSettingChange = (key: keyof GridSettings, value: number | boolean) => {
+    const newSettings = { ...localSettings, [key]: value };
+    setLocalSettings(newSettings);
+    onGridSettingsChange(newSettings);
+  };
+
+  const resetToDefault = () => {
+    const defaultSettings: GridSettings = {
+      columns: 12,
+      gap: 16,
+      padding: 16,
+      snapToGrid: true,
+    };
+    setLocalSettings(defaultSettings);
+    onGridSettingsChange(defaultSettings);
+  };
+
+  return (
+    <Card className={className}>
+      <CardHeader className="pb-3">
+        <CardTitle className="flex items-center space-x-2 text-sm">
+          <Grid className="h-4 w-4" />
+          <span>격자 설정</span>
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* 격자 열 개수 */}
+        <div className="space-y-2">
+          <Label htmlFor="columns" className="text-xs font-medium">
+            격자 열 개수
+          </Label>
+          <div className="flex items-center space-x-2">
+            <Slider
+              id="columns"
+              min={1}
+              max={24}
+              step={1}
+              value={[localSettings.columns]}
+              onValueChange={(value) => handleSettingChange("columns", value[0])}
+              className="flex-1"
+            />
+            <Input
+              type="number"
+              min={1}
+              max={24}
+              value={localSettings.columns}
+              onChange={(e) => handleSettingChange("columns", parseInt(e.target.value) || 12)}
+              className="w-16 text-xs"
+            />
+          </div>
+          <div className="text-xs text-gray-500">현재: {localSettings.columns}열</div>
+        </div>
+
+        {/* 격자 간격 */}
+        <div className="space-y-2">
+          <Label htmlFor="gap" className="text-xs font-medium">
+            격자 간격 (px)
+          </Label>
+          <div className="flex items-center space-x-2">
+            <Slider
+              id="gap"
+              min={0}
+              max={32}
+              step={2}
+              value={[localSettings.gap]}
+              onValueChange={(value) => handleSettingChange("gap", value[0])}
+              className="flex-1"
+            />
+            <Input
+              type="number"
+              min={0}
+              max={32}
+              value={localSettings.gap}
+              onChange={(e) => handleSettingChange("gap", parseInt(e.target.value) || 16)}
+              className="w-16 text-xs"
+            />
+          </div>
+        </div>
+
+        {/* 여백 */}
+        <div className="space-y-2">
+          <Label htmlFor="padding" className="text-xs font-medium">
+            캔버스 여백 (px)
+          </Label>
+          <div className="flex items-center space-x-2">
+            <Slider
+              id="padding"
+              min={0}
+              max={48}
+              step={4}
+              value={[localSettings.padding]}
+              onValueChange={(value) => handleSettingChange("padding", value[0])}
+              className="flex-1"
+            />
+            <Input
+              type="number"
+              min={0}
+              max={48}
+              value={localSettings.padding}
+              onChange={(e) => handleSettingChange("padding", parseInt(e.target.value) || 16)}
+              className="w-16 text-xs"
+            />
+          </div>
+        </div>
+
+        {/* 격자 스냅 */}
+        <div className="flex items-center justify-between">
+          <Label htmlFor="snapToGrid" className="text-xs font-medium">
+            격자에 맞춤
+          </Label>
+          <Button
+            variant={localSettings.snapToGrid ? "default" : "outline"}
+            size="sm"
+            onClick={() => handleSettingChange("snapToGrid", !localSettings.snapToGrid)}
+            className="h-6 px-2 text-xs"
+          >
+            {localSettings.snapToGrid ? "ON" : "OFF"}
+          </Button>
+        </div>
+
+        {/* 격자 변경 안내 */}
+        <div className="rounded-md bg-blue-50 p-2 text-xs text-blue-700">
+          <div className="font-medium">💡 격자 변경 시 자동 조정</div>
+          <div className="mt-1 text-blue-600">
+            격자 설정을 변경하면 기존 컴포넌트들이 새 격자에 맞춰 자동으로 위치와 크기가 조정됩니다.
+          </div>
+        </div>
+
+        {/* 격자 미리보기 */}
+        <div className="space-y-2">
+          <Label className="text-xs font-medium">격자 미리보기</Label>
+          <div className="rounded border bg-gray-50 p-2">
+            <div
+              className="grid h-16 gap-px"
+              style={{
+                gridTemplateColumns: `repeat(${localSettings.columns}, 1fr)`,
+                gap: `${Math.max(1, localSettings.gap / 4)}px`,
+              }}
+            >
+              {Array.from({ length: localSettings.columns }).map((_, i) => (
+                <div key={i} className="rounded-sm bg-blue-200" />
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* 초기화 버튼 */}
+        <Button variant="outline" size="sm" onClick={resetToDefault} className="w-full text-xs">
+          <RotateCcw className="mr-1 h-3 w-3" />
+          기본값으로 초기화
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}