fix: 컬럼 수, 간격, 여백 설정 완전 제거 (10px 고정)

frontend/components/screen/panels/GridPanel.tsx

@@ -7,23 +7,20 @@ 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 { Grid3X3, RotateCcw, Eye, EyeOff, Zap } 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; // 해상도 정보 추가
+  screenResolution?: ScreenResolution;
 }
 
 export const GridPanel: React.FC<GridPanelProps> = ({
   gridSettings,
   onGridSettingsChange,
   onResetGrid,
-  onForceGridUpdate,
   screenResolution,
 }) => {
   const updateSetting = (key: keyof GridSettings, value: any) => {
@@ -33,32 +30,6 @@ export const GridPanel: React.FC<GridPanelProps> = ({
     });
   };
 
-  // 최대 컬럼 수 계산 (최소 컬럼 너비 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">
       {/* 헤더 */}
@@ -69,25 +40,10 @@ export const GridPanel: React.FC<GridPanelProps> = ({
             <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>
+          <Button size="sm" variant="outline" onClick={onResetGrid} className="h-7 px-2 text-xs">
+            <RotateCcw className="mr-1 h-3 w-3" />
+            초기화
+          </Button>
         </div>
 
         {/* 주요 토글들 */}
@@ -128,63 +84,25 @@ export const GridPanel: React.FC<GridPanelProps> = ({
 
       {/* 설정 영역 */}
       <div className="flex-1 space-y-4 overflow-y-auto p-4">
-        {/* 격자 구조 - 10px 단위 */}
+        {/* 10px 단위 스냅 안내 */}
         <div className="space-y-3">
-          <h4 className="text-xs font-semibold">격자 크기 (10px 단위)</h4>
+          <h4 className="text-xs font-semibold">격자 시스템</h4>
 
           <div className="bg-muted/50 rounded-md p-3">
             <p className="text-xs text-muted-foreground">
-              모든 컴포넌트는 10px 단위로 배치되고 크기가 조정됩니다.
+              모든 컴포넌트는 10px 단위로 자동 배치됩니다.
             </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={10}
-              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={10}
-              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>
+          <h4 className="text-xs font-semibold">격자 스타일</h4>
 
           <div>
-            <Label htmlFor="gridColor" className="text-sm font-medium">
+            <Label htmlFor="gridColor" className="text-xs font-medium">
               격자 색상
             </Label>
             <div className="mt-1 flex items-center space-x-2">
@@ -200,13 +118,13 @@ export const GridPanel: React.FC<GridPanelProps> = ({
                 value={gridSettings.gridColor || "#d1d5db"}
                 onChange={(e) => updateSetting("gridColor", e.target.value)}
                 placeholder="#d1d5db"
-                className="flex-1"
+                className="flex-1 text-xs"
               />
             </div>
           </div>
 
           <div>
-            <Label htmlFor="gridOpacity" className="mb-2 block text-sm font-medium">
+            <Label htmlFor="gridOpacity" className="mb-2 block text-xs font-medium">
               격자 투명도: {Math.round((gridSettings.gridOpacity || 0.5) * 100)}%
             </Label>
             <Slider
@@ -218,7 +136,7 @@ export const GridPanel: React.FC<GridPanelProps> = ({
               onValueChange={([value]) => updateSetting("gridOpacity", value)}
               className="w-full"
             />
-            <div className="mt-1 flex justify-between text-xs text-gray-500">
+            <div className="mt-1 flex justify-between text-xs text-muted-foreground">
               <span>10%</span>
               <span>100%</span>
             </div>
@@ -229,52 +147,46 @@ export const GridPanel: React.FC<GridPanelProps> = ({
 
         {/* 미리보기 */}
         <div className="space-y-3">
-          <h4 className="font-medium text-gray-900">미리보기</h4>
+          <h4 className="text-xs font-semibold">미리보기</h4>
 
           <div
-            className="rounded-md border border-gray-200 bg-white p-4"
+            className="rounded-md border 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",
+              backgroundSize: gridSettings.showGrid ? "10px 10px" : "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>
+              <span className="text-primary text-xs">10px 격자</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>
-
-        {/* 해상도 정보 */}
+      <div className="border-t bg-muted/30 p-3">
         {screenResolution && (
-          <>
-            <Separator />
-            <div className="space-y-2">
-              <h4 className="text-xs font-semibold">화면 정보</h4>
+          <div className="space-y-2">
+            <h4 className="text-xs font-semibold">화면 정보</h4>
 
-              <div className="space-y-2 text-xs">
-                <div className="flex justify-between">
-                  <span className="text-muted-foreground">해상도:</span>
-                  <span className="font-mono">
-                    {screenResolution.width} × {screenResolution.height}
-                  </span>
-                </div>
+            <div className="space-y-2 text-xs">
+              <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 text-primary">10px</span>
-                </div>
+              <div className="flex justify-between">
+                <span className="text-muted-foreground">격자 단위:</span>
+                <span className="font-mono text-primary">10px</span>
               </div>
             </div>
-          </>
+          </div>
         )}
       </div>
     </div>