Merge branch 'jskim-node' of http://39.117.244.52:3000/kjs/ERP-node into gbpark-node

frontend/lib/registry/components/v2-split-line/SplitLineConfigPanel.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import React from "react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+
+interface SplitLineConfigPanelProps {
+  config: any;
+  onConfigChange: (config: any) => void;
+}
+
+/**
+ * SplitLine 설정 패널
+ */
+export const SplitLineConfigPanel: React.FC<SplitLineConfigPanelProps> = ({ config, onConfigChange }) => {
+  const currentConfig = config || {};
+
+  const handleChange = (key: string, value: any) => {
+    onConfigChange({
+      ...currentConfig,
+      [key]: value,
+    });
+  };
+
+  return (
+    <div className="space-y-4 p-4">
+      <h3 className="text-sm font-semibold">스플릿선 설정</h3>
+
+      {/* 드래그 리사이즈 허용 */}
+      <div className="flex items-center justify-between">
+        <Label className="text-xs">드래그 리사이즈</Label>
+        <Switch
+          checked={currentConfig.resizable ?? true}
+          onCheckedChange={(checked) => handleChange("resizable", checked)}
+        />
+      </div>
+
+      {/* 분할선 스타일 */}
+      <div className="space-y-2">
+        <Label className="text-xs">분할선 두께 (px)</Label>
+        <Input
+          type="number"
+          value={currentConfig.lineWidth || 4}
+          onChange={(e) => handleChange("lineWidth", parseInt(e.target.value) || 4)}
+          className="h-8 text-xs"
+          min={1}
+          max={12}
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label className="text-xs">분할선 색상</Label>
+        <div className="flex items-center gap-2">
+          <input
+            type="color"
+            value={currentConfig.lineColor || "#e2e8f0"}
+            onChange={(e) => handleChange("lineColor", e.target.value)}
+            className="h-8 w-8 cursor-pointer rounded border"
+          />
+          <Input
+            value={currentConfig.lineColor || "#e2e8f0"}
+            onChange={(e) => handleChange("lineColor", e.target.value)}
+            className="h-8 flex-1 text-xs"
+            placeholder="#e2e8f0"
+          />
+        </div>
+      </div>
+
+      <p className="text-[10px] text-muted-foreground">
+        캔버스에서 스플릿선의 X 위치가 초기 분할 지점이 됩니다.
+        런타임에서 드래그하면 좌우 컴포넌트가 함께 이동합니다.
+      </p>
+    </div>
+  );
+};
+
+export default SplitLineConfigPanel;