컴포넌트 화면편집기에 배치

frontend/components/screen/config-panels/ChartConfigPanel.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import React from "react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { ComponentData } from "@/types/screen";
+
+interface ChartConfigPanelProps {
+  component: ComponentData;
+  onUpdateProperty: (path: string, value: any) => void;
+}
+
+export const ChartConfigPanel: React.FC<ChartConfigPanelProps> = ({ component, onUpdateProperty }) => {
+  const config = component.componentConfig || {};
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <Label htmlFor="chart-title">차트 제목</Label>
+        <Input
+          id="chart-title"
+          value={config.title || "차트 제목"}
+          onChange={(e) => onUpdateProperty("componentConfig.title", e.target.value)}
+          placeholder="차트 제목을 입력하세요"
+        />
+      </div>
+
+      <div>
+        <Label htmlFor="chart-type">차트 타입</Label>
+        <Select
+          value={config.chartType || "bar"}
+          onValueChange={(value) => onUpdateProperty("componentConfig.chartType", value)}
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="차트 타입 선택" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="bar">바 차트 (Bar)</SelectItem>
+            <SelectItem value="line">라인 차트 (Line)</SelectItem>
+            <SelectItem value="pie">파이 차트 (Pie)</SelectItem>
+            <SelectItem value="area">영역 차트 (Area)</SelectItem>
+            <SelectItem value="scatter">산점도 (Scatter)</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div>
+        <Label htmlFor="chart-data-source">데이터 소스</Label>
+        <Input
+          id="chart-data-source"
+          value={config.dataSource || ""}
+          onChange={(e) => onUpdateProperty("componentConfig.dataSource", e.target.value)}
+          placeholder="데이터 소스 URL 또는 API 엔드포인트"
+        />
+      </div>
+
+      <div>
+        <Label htmlFor="chart-x-axis">X축 라벨</Label>
+        <Input
+          id="chart-x-axis"
+          value={config.xAxisLabel || ""}
+          onChange={(e) => onUpdateProperty("componentConfig.xAxisLabel", e.target.value)}
+          placeholder="X축 라벨"
+        />
+      </div>
+
+      <div>
+        <Label htmlFor="chart-y-axis">Y축 라벨</Label>
+        <Input
+          id="chart-y-axis"
+          value={config.yAxisLabel || ""}
+          onChange={(e) => onUpdateProperty("componentConfig.yAxisLabel", e.target.value)}
+          placeholder="Y축 라벨"
+        />
+      </div>
+    </div>
+  );
+};