336 lines
12 KiB
TypeScript
336 lines
12 KiB
TypeScript
"use client";
|
||
|
||
import React from "react";
|
||
import { Label } from "@/components/ui/label";
|
||
import { Input } from "@/components/ui/input";
|
||
import { Checkbox } from "@/components/ui/checkbox";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Separator } from "@/components/ui/separator";
|
||
import { Slider } from "@/components/ui/slider";
|
||
import { Grid3X3, RotateCcw, Eye, EyeOff, Zap, RefreshCw } from "lucide-react";
|
||
import { GridSettings, ScreenResolution } from "@/types/screen";
|
||
import { calculateGridInfo } from "@/lib/utils/gridUtils";
|
||
|
||
interface GridPanelProps {
|
||
gridSettings: GridSettings;
|
||
onGridSettingsChange: (settings: GridSettings) => void;
|
||
onResetGrid: () => void;
|
||
onForceGridUpdate?: () => void; // 강제 격자 재조정 추가
|
||
screenResolution?: ScreenResolution; // 해상도 정보 추가
|
||
}
|
||
|
||
export const GridPanel: React.FC<GridPanelProps> = ({
|
||
gridSettings,
|
||
onGridSettingsChange,
|
||
onResetGrid,
|
||
onForceGridUpdate,
|
||
screenResolution,
|
||
}) => {
|
||
const updateSetting = (key: keyof GridSettings, value: any) => {
|
||
onGridSettingsChange({
|
||
...gridSettings,
|
||
[key]: value,
|
||
});
|
||
};
|
||
|
||
// 최대 컬럼 수 계산 (최소 컬럼 너비 30px 기준)
|
||
const MIN_COLUMN_WIDTH = 30;
|
||
const maxColumns = screenResolution
|
||
? Math.floor((screenResolution.width - gridSettings.padding * 2 + gridSettings.gap) / (MIN_COLUMN_WIDTH + gridSettings.gap))
|
||
: 24;
|
||
const safeMaxColumns = Math.max(1, Math.min(maxColumns, 100)); // 최대 100개로 제한
|
||
|
||
// 실제 격자 정보 계산
|
||
const actualGridInfo = screenResolution
|
||
? calculateGridInfo(screenResolution.width, screenResolution.height, {
|
||
columns: gridSettings.columns,
|
||
gap: gridSettings.gap,
|
||
padding: gridSettings.padding,
|
||
snapToGrid: gridSettings.snapToGrid || false,
|
||
})
|
||
: null;
|
||
|
||
// 실제 표시되는 컬럼 수 계산 (항상 설정된 개수를 표시하되, 너비가 너무 작으면 경고)
|
||
const actualColumns = gridSettings.columns;
|
||
|
||
// 컬럼이 너무 작은지 확인
|
||
const isColumnsTooSmall =
|
||
screenResolution && actualGridInfo
|
||
? actualGridInfo.columnWidth < MIN_COLUMN_WIDTH
|
||
: false;
|
||
|
||
return (
|
||
<div className="flex h-full flex-col">
|
||
{/* 헤더 */}
|
||
<div className="border-b p-4">
|
||
<div className="mb-3 flex items-center justify-between">
|
||
<div className="flex items-center gap-2">
|
||
<Grid3X3 className="text-muted-foreground h-4 w-4" />
|
||
<h3 className="text-sm font-semibold">격자 설정</h3>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-1.5">
|
||
{onForceGridUpdate && (
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
onClick={onForceGridUpdate}
|
||
className="h-7 px-2 text-xs" style={{ fontSize: "12px" }}
|
||
title="현재 해상도에 맞게 모든 컴포넌트를 격자에 재정렬합니다"
|
||
>
|
||
<RefreshCw className="mr-1 h-3 w-3" />
|
||
재정렬
|
||
</Button>
|
||
)}
|
||
|
||
<Button size="sm" variant="outline" onClick={onResetGrid} className="h-7 px-2 text-xs">
|
||
<RotateCcw className="mr-1 h-3 w-3" />
|
||
초기화
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 주요 토글들 */}
|
||
<div className="space-y-2.5">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-2">
|
||
{gridSettings.showGrid ? (
|
||
<Eye className="text-primary h-3.5 w-3.5" />
|
||
) : (
|
||
<EyeOff className="text-muted-foreground h-3.5 w-3.5" />
|
||
)}
|
||
<Label htmlFor="showGrid" className="text-xs font-medium">
|
||
격자 표시
|
||
</Label>
|
||
</div>
|
||
<Checkbox
|
||
id="showGrid"
|
||
checked={gridSettings.showGrid}
|
||
onCheckedChange={(checked) => updateSetting("showGrid", checked)}
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-2">
|
||
<Zap className="text-primary h-3.5 w-3.5" />
|
||
<Label htmlFor="snapToGrid" className="text-xs font-medium">
|
||
격자 스냅
|
||
</Label>
|
||
</div>
|
||
<Checkbox
|
||
id="snapToGrid"
|
||
checked={gridSettings.snapToGrid}
|
||
onCheckedChange={(checked) => updateSetting("snapToGrid", checked)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 설정 영역 */}
|
||
<div className="flex-1 space-y-4 overflow-y-auto p-4">
|
||
{/* 격자 구조 */}
|
||
<div className="space-y-3">
|
||
<h4 className="text-xs font-semibold">격자 구조</h4>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="columns" className="text-xs font-medium">
|
||
컬럼 수
|
||
</Label>
|
||
<div className="flex items-center gap-2">
|
||
<Input
|
||
id="columns"
|
||
type="number"
|
||
min={1}
|
||
max={safeMaxColumns}
|
||
value={gridSettings.columns}
|
||
onChange={(e) => {
|
||
const value = parseInt(e.target.value, 10);
|
||
if (!isNaN(value) && value >= 1 && value <= safeMaxColumns) {
|
||
updateSetting("columns", value);
|
||
}
|
||
}}
|
||
className="h-8 text-xs"
|
||
/>
|
||
<span className="text-muted-foreground text-xs">/ {safeMaxColumns}</span>
|
||
</div>
|
||
<Slider
|
||
id="columns-slider"
|
||
min={1}
|
||
max={safeMaxColumns}
|
||
step={1}
|
||
value={[gridSettings.columns]}
|
||
onValueChange={([value]) => updateSetting("columns", value)}
|
||
className="w-full"
|
||
/>
|
||
<div className="text-muted-foreground flex justify-between text-xs">
|
||
<span>1열</span>
|
||
<span>{safeMaxColumns}열</span>
|
||
</div>
|
||
{isColumnsTooSmall && (
|
||
<p className="text-xs text-amber-600">
|
||
⚠️ 컬럼 너비가 너무 작습니다 (최소 {MIN_COLUMN_WIDTH}px 권장)
|
||
</p>
|
||
)}
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="gap" className="text-xs font-medium">
|
||
간격: <span className="text-primary">{gridSettings.gap}px</span>
|
||
</Label>
|
||
<Slider
|
||
id="gap"
|
||
min={0}
|
||
max={40}
|
||
step={2}
|
||
value={[gridSettings.gap]}
|
||
onValueChange={([value]) => updateSetting("gap", value)}
|
||
className="w-full"
|
||
/>
|
||
<div className="text-muted-foreground flex justify-between text-xs">
|
||
<span>0px</span>
|
||
<span>40px</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="padding" className="text-xs font-medium">
|
||
여백: <span className="text-primary">{gridSettings.padding}px</span>
|
||
</Label>
|
||
<Slider
|
||
id="padding"
|
||
min={0}
|
||
max={60}
|
||
step={4}
|
||
value={[gridSettings.padding]}
|
||
onValueChange={([value]) => updateSetting("padding", value)}
|
||
className="w-full"
|
||
/>
|
||
<div className="text-muted-foreground flex justify-between text-xs">
|
||
<span>0px</span>
|
||
<span>60px</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<Separator />
|
||
|
||
{/* 격자 스타일 */}
|
||
<div className="space-y-4">
|
||
<h4 className="font-medium text-gray-900">격자 스타일</h4>
|
||
|
||
<div>
|
||
<Label htmlFor="gridColor" className="text-sm font-medium">
|
||
격자 색상
|
||
</Label>
|
||
<div className="mt-1 flex items-center space-x-2">
|
||
<Input
|
||
id="gridColor"
|
||
type="color"
|
||
value={gridSettings.gridColor || "#d1d5db"}
|
||
onChange={(e) => updateSetting("gridColor", e.target.value)}
|
||
className="h-8 w-12 rounded border p-1"
|
||
/>
|
||
<Input
|
||
type="text"
|
||
value={gridSettings.gridColor || "#d1d5db"}
|
||
onChange={(e) => updateSetting("gridColor", e.target.value)}
|
||
placeholder="#d1d5db"
|
||
className="flex-1"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<Label htmlFor="gridOpacity" className="mb-2 block text-sm font-medium">
|
||
격자 투명도: {Math.round((gridSettings.gridOpacity || 0.5) * 100)}%
|
||
</Label>
|
||
<Slider
|
||
id="gridOpacity"
|
||
min={0.1}
|
||
max={1}
|
||
step={0.1}
|
||
value={[gridSettings.gridOpacity || 0.5]}
|
||
onValueChange={([value]) => updateSetting("gridOpacity", value)}
|
||
className="w-full"
|
||
/>
|
||
<div className="mt-1 flex justify-between text-xs text-gray-500">
|
||
<span>10%</span>
|
||
<span>100%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<Separator />
|
||
|
||
{/* 미리보기 */}
|
||
<div className="space-y-3">
|
||
<h4 className="font-medium text-gray-900">미리보기</h4>
|
||
|
||
<div
|
||
className="rounded-md border border-gray-200 bg-white p-4"
|
||
style={{
|
||
backgroundImage: gridSettings.showGrid
|
||
? `linear-gradient(to right, ${gridSettings.gridColor || "#d1d5db"} 1px, transparent 1px),
|
||
linear-gradient(to bottom, ${gridSettings.gridColor || "#d1d5db"} 1px, transparent 1px)`
|
||
: "none",
|
||
backgroundSize: gridSettings.showGrid ? `${100 / gridSettings.columns}% 20px` : "none",
|
||
opacity: gridSettings.gridOpacity || 0.5,
|
||
}}
|
||
>
|
||
<div className="bg-primary/20 flex h-16 items-center justify-center rounded border-2 border-dashed border-blue-300">
|
||
<span className="text-primary text-xs">컴포넌트 예시</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 푸터 */}
|
||
<div className="border-t border-gray-200 bg-gray-50 p-3">
|
||
<div className="text-muted-foreground text-xs">💡 격자 설정은 실시간으로 캔버스에 반영됩니다 </div>
|
||
|
||
{/* 해상도 및 격자 정보 */}
|
||
{screenResolution && actualGridInfo && (
|
||
<>
|
||
<Separator />
|
||
<div className="space-y-3">
|
||
<h4 className="font-medium text-gray-900">격자 정보</h4>
|
||
|
||
<div className="space-y-2 text-xs" style={{ fontSize: "12px" }}>
|
||
<div className="flex justify-between">
|
||
<span className="text-muted-foreground">해상도:</span>
|
||
<span className="font-mono">
|
||
{screenResolution.width} × {screenResolution.height}
|
||
</span>
|
||
</div>
|
||
|
||
<div className="flex justify-between">
|
||
<span className="text-muted-foreground">컬럼 너비:</span>
|
||
<span className={`font-mono ${isColumnsTooSmall ? "text-destructive" : "text-gray-900"}`}>
|
||
{actualGridInfo.columnWidth.toFixed(1)}px
|
||
{isColumnsTooSmall && " (너무 작음)"}
|
||
</span>
|
||
</div>
|
||
|
||
<div className="flex justify-between">
|
||
<span className="text-muted-foreground">사용 가능 너비:</span>
|
||
<span className="font-mono">
|
||
{(screenResolution.width - gridSettings.padding * 2).toLocaleString()}px
|
||
</span>
|
||
</div>
|
||
|
||
{isColumnsTooSmall && (
|
||
<div className="rounded-md bg-yellow-50 p-2 text-xs text-yellow-800">
|
||
💡 컬럼이 너무 작습니다. 컬럼 수를 줄이거나 간격을 줄여보세요.
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default GridPanel;
|