From 2d832c56b675be5d1b6bff4c9c50cd8905ab9531 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 10 Nov 2025 15:17:33 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=B0=A8=EC=A7=80=20=EC=BB=AC=EB=9F=BC?=
 =?UTF-8?q?=20=EC=88=98=EB=A5=BC=20=ED=94=BD=EC=85=80=20=EA=B8=B0=EB=B0=98?=
 =?UTF-8?q?=20=EB=84=88=EB=B9=84=20=EC=9E=85=EB=A0=A5=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD=20(10px=20=EB=8B=A8=EC=9C=84)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../screen/panels/UnifiedPropertiesPanel.tsx  | 52 ++++++++-----------
 1 file changed, 22 insertions(+), 30 deletions(-)

diff --git a/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx b/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx
index 178eb8a2..d790dfaa 100644
--- a/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx
+++ b/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx
@@ -401,38 +401,30 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
           </div>
         )}
 
-        {/* Grid Columns + Z-Index (같은 행) */}
+        {/* Width + Z-Index (같은 행) */}
         <div className="grid grid-cols-2 gap-2">
-          {(selectedComponent as any).gridColumns !== undefined && (
-            <div className="space-y-1">
-              <Label className="text-xs">차지 컬럼 수</Label>
-              <div className="flex items-center gap-1">
-                <Input
-                  type="number"
-                  min={1}
-                  max={gridSettings?.columns || 12}
-                  step="1"
-                  value={(selectedComponent as any).gridColumns || 1}
-                  onChange={(e) => {
-                    const value = parseInt(e.target.value, 10);
-                    const maxColumns = gridSettings?.columns || 12;
-                    if (!isNaN(value) && value >= 1 && value <= maxColumns) {
-                      handleUpdate("gridColumns", value);
-                      
-                      // width를 퍼센트로 계산하여 업데이트
-                      const widthPercent = (value / maxColumns) * 100;
-                      handleUpdate("style.width", `${widthPercent}%`);
-                    }
-                  }}
-                  className="h-6 w-full px-2 py-0 text-xs"
-                  style={{ fontSize: "12px" }}
-                />
-                <span className="text-muted-foreground text-[10px] whitespace-nowrap">
-                  /{gridSettings?.columns || 12}
-                </span>
-              </div>
+          <div className="space-y-1">
+            <Label className="text-xs">너비 (px)</Label>
+            <div className="flex items-center gap-1">
+              <Input
+                type="number"
+                min={10}
+                max={3840}
+                step="10"
+                value={selectedComponent.size?.width || 100}
+                onChange={(e) => {
+                  const value = parseInt(e.target.value, 10);
+                  if (!isNaN(value) && value >= 10) {
+                    // 10px 단위로 스냅
+                    const snappedValue = Math.round(value / 10) * 10;
+                    handleUpdate("size.width", snappedValue);
+                  }
+                }}
+                className="h-6 w-full px-2 py-0 text-xs"
+                style={{ fontSize: "12px" }}
+              />
             </div>
-          )}
+          </div>
           <div className="space-y-1">
             <Label className="text-xs">Z-Index</Label>
             <Input