From afe4074d372d9a9c1cde57308d637e0dcf555c71 Mon Sep 17 00:00:00 2001
From: dohyeons <ddhhss0603@gmail.com>
Date: Thu, 23 Oct 2025 14:27:27 +0900
Subject: [PATCH] =?UTF-8?q?=EC=A0=9C=EB=AA=A9=20=EB=B0=8F=20=ED=97=A4?=
 =?UTF-8?q?=EB=8D=94=20=EC=84=A4=EC=A0=95=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CustomMetricConfigSidebar.tsx             | 49 ++++++++++++++++---
 1 file changed, 43 insertions(+), 6 deletions(-)

diff --git a/frontend/components/admin/dashboard/widgets/custom-metric/CustomMetricConfigSidebar.tsx b/frontend/components/admin/dashboard/widgets/custom-metric/CustomMetricConfigSidebar.tsx
index c08fd501..0a1dd39b 100644
--- a/frontend/components/admin/dashboard/widgets/custom-metric/CustomMetricConfigSidebar.tsx
+++ b/frontend/components/admin/dashboard/widgets/custom-metric/CustomMetricConfigSidebar.tsx
@@ -35,6 +35,8 @@ export default function CustomMetricConfigSidebar({
   );
   const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
   const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
+  const [customTitle, setCustomTitle] = useState<string>(element.customTitle || element.title || "");
+  const [showHeader, setShowHeader] = useState<boolean>(element.showHeader !== false);
 
   // 쿼리 실행 결과 처리
   const handleQueryTest = (result: any) => {
@@ -136,6 +138,8 @@ export default function CustomMetricConfigSidebar({
   // 저장
   const handleSave = () => {
     onApply({
+      customTitle: customTitle,
+      showHeader: showHeader,
       customMetricConfig: {
         metrics,
       },
@@ -170,31 +174,64 @@ export default function CustomMetricConfigSidebar({
       {/* 본문: 스크롤 가능 영역 */}
       <div className="flex-1 overflow-y-auto p-3">
         <div className="space-y-3">
+          {/* 헤더 설정 */}
+          <div className="rounded-lg bg-white p-3 shadow-sm">
+            <div className="mb-2 text-[10px] font-semibold tracking-wide text-gray-500 uppercase">헤더 설정</div>
+            <div className="space-y-2">
+              {/* 제목 입력 */}
+              <div>
+                <label className="mb-0.5 block text-[9px] font-medium text-gray-500">제목</label>
+                <Input
+                  value={customTitle}
+                  onChange={(e) => setCustomTitle(e.target.value)}
+                  placeholder="위젯 제목을 입력하세요"
+                  className="h-8 text-xs"
+                  style={{ fontSize: "12px" }}
+                />
+              </div>
+
+              {/* 헤더 표시 여부 */}
+              <div className="flex items-center justify-between">
+                <label className="text-[9px] font-medium text-gray-500">헤더 표시</label>
+                <button
+                  onClick={() => setShowHeader(!showHeader)}
+                  className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${
+                    showHeader ? "bg-primary" : "bg-gray-300"
+                  }`}
+                >
+                  <span
+                    className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                      showHeader ? "translate-x-5" : "translate-x-0.5"
+                    }`}
+                  />
+                </button>
+              </div>
+            </div>
+          </div>
+
           {/* 데이터 소스 타입 선택 */}
           <div className="rounded-lg bg-white p-3 shadow-sm">
             <div className="mb-2 text-[10px] font-semibold tracking-wide text-gray-500 uppercase">데이터 소스 타입</div>
             <div className="grid grid-cols-2 gap-2">
               <button
                 onClick={() => handleDataSourceTypeChange("database")}
-                className={`flex h-20 flex-col items-center justify-center gap-2 rounded border transition-all ${
+                className={`flex h-16 items-center justify-center rounded border transition-all ${
                   dataSourceType === "database"
                     ? "border-primary bg-primary/5 text-primary"
                     : "border-gray-200 bg-gray-50 text-gray-600 hover:border-gray-300"
                 }`}
               >
-                <span className="text-2xl">🗄️</span>
-                <span className="text-xs font-medium">데이터베이스</span>
+                <span className="text-sm font-medium">데이터베이스</span>
               </button>
               <button
                 onClick={() => handleDataSourceTypeChange("api")}
-                className={`flex h-20 flex-col items-center justify-center gap-2 rounded border transition-all ${
+                className={`flex h-16 items-center justify-center rounded border transition-all ${
                   dataSourceType === "api"
                     ? "border-primary bg-primary/5 text-primary"
                     : "border-gray-200 bg-gray-50 text-gray-600 hover:border-gray-300"
                 }`}
               >
-                <span className="text-2xl">🌐</span>
-                <span className="text-xs font-medium">REST API</span>
+                <span className="text-sm font-medium">REST API</span>
               </button>
             </div>
           </div>