세부타입설정

frontend/components/screen/panels/PropertiesPanel.tsx

@@ -203,14 +203,6 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
     positionZ: selectedComponent?.position.z?.toString() || "1",
     width: selectedComponent?.size?.width?.toString() || "0",
     height: selectedComponent?.size?.height?.toString() || "0",
-    gridColumns:
-      selectedComponent?.gridColumns?.toString() ||
-      (selectedComponent?.type === "layout" && (selectedComponent as any)?.layoutType === "card-layout"
-        ? "8"
-        : selectedComponent?.type === "component" &&
-            (selectedComponent as any)?.componentConfig?.type === "card-display"
-          ? "8"
-          : "1"),
     labelText: selectedComponent?.style?.labelText || selectedComponent?.label || "",
     labelFontSize: selectedComponent?.style?.labelFontSize || "12px",
     labelColor: selectedComponent?.style?.labelColor || "#212121",
@@ -224,7 +216,32 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
   });
 
   // 너비 드롭다운 로컬 상태 - 실시간 업데이트를 위한 별도 관리
-  const calculateWidthSpan = (width: string | number | undefined): string => {
+  const calculateWidthSpan = (width: string | number | undefined, gridColumns?: number): string => {
+    // gridColumns 값이 있으면 우선 사용
+    if (gridColumns) {
+      const columnsToSpan: Record<number, string> = {
+        1: "twelfth", // 1/12
+        2: "small", // 2/12
+        3: "quarter", // 3/12
+        4: "third", // 4/12
+        5: "five-twelfths", // 5/12
+        6: "half", // 6/12
+        7: "seven-twelfths", // 7/12
+        8: "twoThirds", // 8/12
+        9: "threeQuarters", // 9/12
+        10: "five-sixths", // 10/12
+        11: "eleven-twelfths", // 11/12
+        12: "full", // 12/12
+      };
+
+      const span = columnsToSpan[gridColumns];
+      if (span) {
+        console.log("🎯 calculateWidthSpan - gridColumns 사용:", { gridColumns, span });
+        return span;
+      }
+    }
+
+    // gridColumns가 없으면 style.width에서 계산
     if (!width) return "half";
 
     if (typeof width === "string" && width.includes("%")) {
@@ -260,6 +277,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
         }
       }
 
+      console.log("🎯 calculateWidthSpan - width% 사용:", { width, percent, closestSpan });
       return closestSpan;
     }
 
@@ -267,14 +285,19 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
   };
 
   const [localWidthSpan, setLocalWidthSpan] = useState<string>(() =>
-    calculateWidthSpan(selectedComponent?.style?.width),
+    calculateWidthSpan(selectedComponent?.style?.width, (selectedComponent as any)?.gridColumns),
   );
 
-  // 컴포넌트 또는 style.width가 변경될 때 로컬 상태 업데이트
+  // 컴포넌트 또는 style.width, gridColumns가 변경될 때 로컬 상태 업데이트
   useEffect(() => {
-    const newSpan = calculateWidthSpan(selectedComponent?.style?.width);
+    const newSpan = calculateWidthSpan(selectedComponent?.style?.width, (selectedComponent as any)?.gridColumns);
     setLocalWidthSpan(newSpan);
-  }, [selectedComponent?.id, selectedComponent?.style?.width]);
+    console.log("🔄 localWidthSpan 업데이트:", {
+      gridColumns: (selectedComponent as any)?.gridColumns,
+      width: selectedComponent?.style?.width,
+      newSpan,
+    });
+  }, [selectedComponent?.id, selectedComponent?.style?.width, (selectedComponent as any)?.gridColumns]);
 
   useEffect(() => {
     selectedComponentRef.current = selectedComponent;
@@ -768,6 +791,32 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
 
                       // 컴포넌트 속성 업데이트
                       onUpdateProperty("style.width", newWidth);
+
+                      // gridColumns도 자동 계산하여 업데이트 (1/12 = 1컬럼, 2/12 = 2컬럼, ...)
+                      const columnsMap: Record<string, number> = {
+                        twelfth: 1,
+                        small: 2,
+                        quarter: 3,
+                        third: 4,
+                        "five-twelfths": 5,
+                        half: 6,
+                        "seven-twelfths": 7,
+                        twoThirds: 8,
+                        threeQuarters: 9,
+                        "five-sixths": 10,
+                        "eleven-twelfths": 11,
+                        full: 12,
+                        // 레거시 호환
+                        sixth: 2,
+                        label: 3,
+                        medium: 4,
+                        large: 8,
+                        input: 9,
+                        "two-thirds": 8,
+                        "three-quarters": 9,
+                      };
+                      const gridColumns = columnsMap[value] || 6;
+                      onUpdateProperty("gridColumns", gridColumns);
                     }}
                   >
                     <SelectTrigger className="mt-1">
@@ -912,32 +961,6 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
                 placeholder="1"
               />
             </div>
-
-            <div>
-              <Label htmlFor="gridColumns" className="text-sm font-medium">
-                그리드 컬럼 수 (1-12)
-              </Label>
-              <Input
-                id="gridColumns"
-                type="number"
-                min="1"
-                max="12"
-                value={localInputs.gridColumns}
-                onChange={(e) => {
-                  const newValue = e.target.value;
-                  const numValue = Number(newValue);
-                  if (numValue >= 1 && numValue <= 12) {
-                    setLocalInputs((prev) => ({ ...prev, gridColumns: newValue }));
-                    onUpdateProperty("gridColumns", numValue);
-                  }
-                }}
-                placeholder="1"
-                className="mt-1"
-              />
-              <div className="mt-1 text-xs text-gray-500">
-                이 컴포넌트가 차지할 그리드 컬럼 수를 설정합니다 (기본: 1)
-              </div>
-            </div>
           </div>
         </div>