격자에 맞게 컴포넌트 배치
This commit is contained in:
kjs
181
frontend/components/screen/GridControls.tsx
Normal file
181
frontend/components/screen/GridControls.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
52
frontend/components/ui/slider.tsx
Normal file
52
frontend/components/ui/slider.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface SliderProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
||||
value?: number[];
|
||||
onValueChange?: (value: number[]) => void;
|
||||
min?: number;
|
||||
max?: number;
|
||||
step?: number;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const Slider = React.forwardRef<HTMLInputElement, SliderProps>(
|
||||
({ className, value = [0], onValueChange, min = 0, max = 100, step = 1, ...props }, ref) => {
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const newValue = parseFloat(e.target.value);
|
||||
onValueChange?.([newValue]);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={cn("relative flex w-full touch-none items-center select-none", className)}>
|
||||
<input
|
||||
ref={ref}
|
||||
type="range"
|
||||
min={min}
|
||||
max={max}
|
||||
step={step}
|
||||
value={value[0]}
|
||||
onChange={handleChange}
|
||||
className={cn(
|
||||
"relative h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-200 outline-none",
|
||||
"focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none",
|
||||
"disabled:cursor-not-allowed disabled:opacity-50",
|
||||
// WebKit 스타일
|
||||
"[&::-webkit-slider-track]:h-2 [&::-webkit-slider-track]:rounded-lg [&::-webkit-slider-track]:bg-gray-200",
|
||||
"[&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-0 [&::-webkit-slider-thumb]:bg-blue-600 [&::-webkit-slider-thumb]:shadow-sm",
|
||||
// Firefox 스타일
|
||||
"[&::-moz-range-track]:h-2 [&::-moz-range-track]:rounded-lg [&::-moz-range-track]:border-0 [&::-moz-range-track]:bg-gray-200",
|
||||
"[&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-blue-600 [&::-moz-range-thumb]:shadow-sm",
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
Slider.displayName = "Slider";
|
||||
|
||||
export { Slider };
|
||||
Reference in New Issue
Block a user