수평 바 차트 구현

frontend/components/admin/dashboard/ChartConfigPanel.tsx

@@ -47,19 +47,6 @@ export function ChartConfigPanel({ config, queryResult, onConfigChange, chartTyp
 
   return (
     <div className="space-y-6">
-      <div className="flex items-center gap-2">
-        <Settings className="h-5 w-5 text-blue-600" />
-        <h4 className="text-lg font-semibold text-gray-800">차트 설정</h4>
-      </div>
-
-      {/* 쿼리 결과가 없을 때 */}
-      {!queryResult && (
-        <Alert>
-          <TrendingUp className="h-4 w-4" />
-          <AlertDescription>먼저 SQL 쿼리를 실행하여 데이터를 가져온 후 차트를 설정할 수 있습니다.</AlertDescription>
-        </Alert>
-      )}
-
       {/* 데이터 필드 매핑 */}
       {queryResult && (
         <>

frontend/components/admin/dashboard/DashboardDesigner.tsx

@@ -290,6 +290,8 @@ function getElementTitle(type: ElementType, subtype: ElementSubtype): string {
     switch (subtype) {
       case "bar":
         return "📊 바 차트";
+      case "horizontal-bar":
+        return "📊 수평 바 차트";
       case "pie":
         return "🥧 원형 차트";
       case "line":
@@ -326,6 +328,8 @@ function getElementContent(type: ElementType, subtype: ElementSubtype): string {
     switch (subtype) {
       case "bar":
         return "바 차트가 여기에 표시됩니다";
+      case "horizontal-bar":
+        return "수평 바 차트가 여기에 표시됩니다";
       case "pie":
         return "원형 차트가 여기에 표시됩니다";
       case "line":

frontend/components/admin/dashboard/DashboardSidebar.tsx

@@ -31,6 +31,14 @@ export function DashboardSidebar() {
             onDragStart={handleDragStart}
             className="border-primary border-l-4"
           />
+          <DraggableItem
+            icon="📊"
+            title="수평 바 차트"
+            type="chart"
+            subtype="horizontal-bar"
+            onDragStart={handleDragStart}
+            className="border-l-4 border-blue-500"
+          />
           <DraggableItem
             icon="📚"
             title="누적 바 차트"

frontend/components/admin/dashboard/QueryEditor.tsx

@@ -220,7 +220,6 @@ ORDER BY Q4 DESC;`,
             placeholder="SELECT * FROM your_table WHERE condition = 'value';"
             className="h-40 resize-none font-mono text-sm"
           />
-          <div className="absolute right-3 bottom-3 text-xs text-gray-400">Ctrl+Enter로 실행</div>
         </div>
       </div>
 
@@ -318,19 +317,6 @@ ORDER BY Q4 DESC;`,
       </Card>
     </div>
   );
-
-  // Ctrl+Enter로 쿼리 실행
-  React.useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.ctrlKey && e.key === "Enter") {
-        e.preventDefault();
-        executeQuery();
-      }
-    };
-
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [executeQuery]);
 }
 
 /**

frontend/components/admin/dashboard/charts/Chart.tsx

@@ -2,6 +2,7 @@
 
 import React from "react";
 import { BarChart } from "./BarChart";
+import { HorizontalBarChart } from "./HorizontalBarChart";
 import { LineChart } from "./LineChart";
 import { AreaChart } from "./AreaChart";
 import { PieChart } from "./PieChart";
@@ -43,6 +44,9 @@ export function Chart({ chartType, data, config, width, height }: ChartProps) {
     case "bar":
       return <BarChart data={data} config={config} width={width} height={height} />;
 
+    case "horizontal-bar":
+      return <HorizontalBarChart data={data} config={config} width={width} height={height} />;
+
     case "line":
       return <LineChart data={data} config={config} width={width} height={height} />;
 

frontend/components/admin/dashboard/charts/HorizontalBarChart.tsx

@@ -0,0 +1,201 @@
+"use client";
+
+import React, { useEffect, useRef } from "react";
+import * as d3 from "d3";
+import { ChartConfig, ChartData } from "../types";
+
+interface HorizontalBarChartProps {
+  data: ChartData;
+  config: ChartConfig;
+  width?: number;
+  height?: number;
+}
+
+/**
+ * D3 수평 막대 차트 컴포넌트
+ */
+export function HorizontalBarChart({ data, config, width = 600, height = 400 }: HorizontalBarChartProps) {
+  const svgRef = useRef<SVGSVGElement>(null);
+
+  useEffect(() => {
+    if (!svgRef.current || !data.labels.length || !data.datasets.length) return;
+
+    const svg = d3.select(svgRef.current);
+    svg.selectAll("*").remove();
+
+    const margin = { top: 40, right: 80, bottom: 60, left: 120 };
+    const chartWidth = width - margin.left - margin.right;
+    const chartHeight = height - margin.top - margin.bottom;
+
+    const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
+
+    // Y축 스케일 (카테고리) - 수평이므로 Y축이 카테고리
+    const yScale = d3.scaleBand().domain(data.labels).range([0, chartHeight]).padding(0.2);
+
+    // X축 스케일 (값) - 수평이므로 X축이 값
+    const maxValue = d3.max(data.datasets.flatMap((ds) => ds.data)) || 0;
+    const xScale = d3
+      .scaleLinear()
+      .domain([0, maxValue * 1.1])
+      .range([0, chartWidth])
+      .nice();
+
+    // Y축 그리기 (카테고리)
+    g.append("g").call(d3.axisLeft(yScale)).style("font-size", "12px").selectAll("text").style("text-anchor", "end");
+
+    // X축 그리기 (값)
+    g.append("g")
+      .attr("transform", `translate(0,${chartHeight})`)
+      .call(d3.axisBottom(xScale))
+      .style("font-size", "12px");
+
+    // 그리드 라인
+    if (config.showGrid !== false) {
+      g.append("g")
+        .attr("class", "grid")
+        .call(
+          d3
+            .axisBottom(xScale)
+            .tickSize(chartHeight)
+            .tickFormat(() => ""),
+        )
+        .style("stroke-dasharray", "3,3")
+        .style("stroke", "#e0e0e0")
+        .style("opacity", 0.5);
+    }
+
+    // 색상 팔레트
+    const colors = config.colors || ["#3B82F6", "#EF4444", "#10B981", "#F59E0B"];
+
+    // 막대 그리기
+    const barHeight = yScale.bandwidth() / data.datasets.length;
+
+    data.datasets.forEach((dataset, i) => {
+      const bars = g
+        .selectAll(`.bar-${i}`)
+        .data(dataset.data)
+        .enter()
+        .append("rect")
+        .attr("class", `bar-${i}`)
+        .attr("x", 0)
+        .attr("y", (_, j) => (yScale(data.labels[j]) || 0) + barHeight * i)
+        .attr("width", 0)
+        .attr("height", barHeight)
+        .attr("fill", dataset.color || colors[i % colors.length])
+        .attr("ry", 4);
+
+      // 애니메이션
+      if (config.enableAnimation !== false) {
+        bars
+          .transition()
+          .duration(config.animationDuration || 750)
+          .attr("width", (d) => xScale(d));
+      } else {
+        bars.attr("width", (d) => xScale(d));
+      }
+
+      // 툴팁
+      if (config.showTooltip !== false) {
+        bars
+          .on("mouseover", function (event, d) {
+            d3.select(this).attr("opacity", 0.7);
+
+            const [mouseX, mouseY] = d3.pointer(event, g.node());
+            const tooltipText = `${dataset.label}: ${d}`;
+
+            const tooltip = g
+              .append("g")
+              .attr("class", "tooltip")
+              .attr("transform", `translate(${mouseX},${mouseY - 10})`);
+
+            const text = tooltip
+              .append("text")
+              .attr("text-anchor", "middle")
+              .attr("fill", "white")
+              .attr("font-size", "12px")
+              .attr("dy", "-0.5em")
+              .text(tooltipText);
+
+            const bbox = (text.node() as SVGTextElement).getBBox();
+            const padding = 8;
+
+            tooltip
+              .insert("rect", "text")
+              .attr("x", bbox.x - padding)
+              .attr("y", bbox.y - padding)
+              .attr("width", bbox.width + padding * 2)
+              .attr("height", bbox.height + padding * 2)
+              .attr("fill", "rgba(0,0,0,0.85)")
+              .attr("rx", 6);
+          })
+          .on("mouseout", function () {
+            d3.select(this).attr("opacity", 1);
+            g.selectAll(".tooltip").remove();
+          });
+      }
+    });
+
+    // 차트 제목
+    if (config.title) {
+      svg
+        .append("text")
+        .attr("x", width / 2)
+        .attr("y", 20)
+        .attr("text-anchor", "middle")
+        .style("font-size", "16px")
+        .style("font-weight", "bold")
+        .text(config.title);
+    }
+
+    // X축 라벨
+    if (config.xAxisLabel) {
+      svg
+        .append("text")
+        .attr("x", width / 2)
+        .attr("y", height - 5)
+        .attr("text-anchor", "middle")
+        .style("font-size", "12px")
+        .style("fill", "#666")
+        .text(config.xAxisLabel);
+    }
+
+    // Y축 라벨
+    if (config.yAxisLabel) {
+      svg
+        .append("text")
+        .attr("transform", "rotate(-90)")
+        .attr("x", -height / 2)
+        .attr("y", 15)
+        .attr("text-anchor", "middle")
+        .style("font-size", "12px")
+        .style("fill", "#666")
+        .text(config.yAxisLabel);
+    }
+
+    // 범례
+    if (config.showLegend !== false && data.datasets.length > 1) {
+      const legend = svg.append("g").attr("transform", `translate(${width - margin.right + 10}, ${margin.top})`);
+
+      data.datasets.forEach((dataset, i) => {
+        const legendRow = legend.append("g").attr("transform", `translate(0, ${i * 25})`);
+
+        legendRow
+          .append("rect")
+          .attr("width", 15)
+          .attr("height", 15)
+          .attr("fill", dataset.color || colors[i % colors.length])
+          .attr("rx", 3);
+
+        legendRow
+          .append("text")
+          .attr("x", 20)
+          .attr("y", 12)
+          .style("font-size", "11px")
+          .style("fill", "#666")
+          .text(dataset.label);
+      });
+    }
+  }, [data, config, width, height]);
+
+  return <svg ref={svgRef} width={width} height={height} />;
+}

frontend/components/admin/dashboard/charts/index.ts

@@ -1,5 +1,6 @@
 export { Chart } from "./Chart";
 export { BarChart } from "./BarChart";
+export { HorizontalBarChart } from "./HorizontalBarChart";
 export { LineChart } from "./LineChart";
 export { AreaChart } from "./AreaChart";
 export { PieChart } from "./PieChart";

frontend/components/admin/dashboard/types.ts

@@ -6,6 +6,7 @@ export type ElementType = "chart" | "widget";
 
 export type ElementSubtype =
   | "bar"
+  | "horizontal-bar"
   | "pie"
   | "line"
   | "area"