From ca001408f8e045218b43e859974cba7b2b103c80 Mon Sep 17 00:00:00 2001
From: DDD1542 <puget159@naver.com>
Date: Wed, 11 Mar 2026 16:36:06 +0900
Subject: [PATCH] [agent-pipeline] pipe-20260311071246-rhvz round-5

---
 .../v2/config-panels/V2DateConfigPanel.tsx    | 169 +++++++++--------
 .../v2/config-panels/V2GroupConfigPanel.tsx   | 174 +++++++++---------
 2 files changed, 174 insertions(+), 169 deletions(-)

diff --git a/frontend/components/v2/config-panels/V2DateConfigPanel.tsx b/frontend/components/v2/config-panels/V2DateConfigPanel.tsx
index 6d7ba5d7..8e3e2494 100644
--- a/frontend/components/v2/config-panels/V2DateConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2DateConfigPanel.tsx
@@ -9,7 +9,6 @@ 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 { Separator } from "@/components/ui/separator";
 import { Checkbox } from "@/components/ui/checkbox";
 
 interface V2DateConfigPanelProps {
@@ -21,134 +20,136 @@ export const V2DateConfigPanel: React.FC<V2DateConfigPanelProps> = ({
   config,
   onChange,
 }) => {
-  // 설정 업데이트 핸들러
   const updateConfig = (field: string, value: any) => {
     onChange({ ...config, [field]: value });
   };
 
   return (
-    <div className="space-y-4">
-      {/* 날짜 타입 */}
-      <div className="space-y-2">
-        <Label className="text-xs font-medium">날짜 타입</Label>
-        <Select
-          value={config.dateType || config.type || "date"}
-          onValueChange={(value) => updateConfig("dateType", value)}
-        >
-          <SelectTrigger className="h-8 text-xs">
-            <SelectValue placeholder="타입 선택" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="date">날짜</SelectItem>
-            <SelectItem value="time">시간</SelectItem>
-            <SelectItem value="datetime">날짜+시간</SelectItem>
-          </SelectContent>
-        </Select>
+    <div className="space-y-1">
+      {/* DATE TYPE 섹션 */}
+      <div className="border-b border-border/50 pb-3 mb-3">
+        <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">DATE TYPE</h4>
+        <div className="flex items-center justify-between py-1.5">
+          <span className="text-xs text-muted-foreground">날짜 타입</span>
+          <div className="w-[140px]">
+            <Select
+              value={config.dateType || config.type || "date"}
+              onValueChange={(value) => updateConfig("dateType", value)}
+            >
+              <SelectTrigger className="h-7 text-xs">
+                <SelectValue placeholder="타입 선택" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="date">날짜</SelectItem>
+                <SelectItem value="time">시간</SelectItem>
+                <SelectItem value="datetime">날짜+시간</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
       </div>
 
-      <Separator />
-
-      {/* 플레이스홀더 */}
-      <div className="space-y-2">
-        <Label className="text-xs font-medium">플레이스홀더</Label>
-        <Input
-          value={config.placeholder || ""}
-          onChange={(e) => updateConfig("placeholder", e.target.value)}
-          placeholder="날짜 선택"
-          className="h-8 text-xs"
-        />
-        <p className="text-muted-foreground text-[10px]">날짜가 선택되지 않았을 때 표시할 텍스트</p>
+      {/* PLACEHOLDER 섹션 */}
+      <div className="border-b border-border/50 pb-3 mb-3">
+        <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">PLACEHOLDER</h4>
+        <div className="flex items-center justify-between py-1.5">
+          <span className="text-xs text-muted-foreground">안내 텍스트</span>
+          <div className="w-[140px]">
+            <Input
+              value={config.placeholder || ""}
+              onChange={(e) => updateConfig("placeholder", e.target.value)}
+              placeholder="날짜 선택"
+              className="h-7 text-xs"
+            />
+          </div>
+        </div>
       </div>
 
-      <Separator />
-
-      {/* 표시 형식 */}
-      <div className="space-y-2">
-        <Label className="text-xs font-medium">표시 형식</Label>
-        <Select
-          value={config.format || "YYYY-MM-DD"}
-          onValueChange={(value) => updateConfig("format", value)}
-        >
-          <SelectTrigger className="h-8 text-xs">
-            <SelectValue placeholder="형식 선택" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="YYYY-MM-DD">YYYY-MM-DD</SelectItem>
-            <SelectItem value="YYYY/MM/DD">YYYY/MM/DD</SelectItem>
-            <SelectItem value="DD/MM/YYYY">DD/MM/YYYY</SelectItem>
-            <SelectItem value="MM/DD/YYYY">MM/DD/YYYY</SelectItem>
-            <SelectItem value="YYYY년 MM월 DD일">YYYY년 MM월 DD일</SelectItem>
-            {(config.dateType === "time" || config.dateType === "datetime") && (
-              <>
-                <SelectItem value="HH:mm">HH:mm</SelectItem>
-                <SelectItem value="HH:mm:ss">HH:mm:ss</SelectItem>
-                <SelectItem value="YYYY-MM-DD HH:mm">YYYY-MM-DD HH:mm</SelectItem>
-                <SelectItem value="YYYY-MM-DD HH:mm:ss">YYYY-MM-DD HH:mm:ss</SelectItem>
-              </>
-            )}
-          </SelectContent>
-        </Select>
+      {/* FORMAT 섹션 */}
+      <div className="border-b border-border/50 pb-3 mb-3">
+        <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">FORMAT</h4>
+        <div className="flex items-center justify-between py-1.5">
+          <span className="text-xs text-muted-foreground">표시 형식</span>
+          <div className="w-[140px]">
+            <Select
+              value={config.format || "YYYY-MM-DD"}
+              onValueChange={(value) => updateConfig("format", value)}
+            >
+              <SelectTrigger className="h-7 text-xs">
+                <SelectValue placeholder="형식 선택" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="YYYY-MM-DD">YYYY-MM-DD</SelectItem>
+                <SelectItem value="YYYY/MM/DD">YYYY/MM/DD</SelectItem>
+                <SelectItem value="DD/MM/YYYY">DD/MM/YYYY</SelectItem>
+                <SelectItem value="MM/DD/YYYY">MM/DD/YYYY</SelectItem>
+                <SelectItem value="YYYY년 MM월 DD일">YYYY년 MM월 DD일</SelectItem>
+                {(config.dateType === "time" || config.dateType === "datetime") && (
+                  <>
+                    <SelectItem value="HH:mm">HH:mm</SelectItem>
+                    <SelectItem value="HH:mm:ss">HH:mm:ss</SelectItem>
+                    <SelectItem value="YYYY-MM-DD HH:mm">YYYY-MM-DD HH:mm</SelectItem>
+                    <SelectItem value="YYYY-MM-DD HH:mm:ss">YYYY-MM-DD HH:mm:ss</SelectItem>
+                  </>
+                )}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
       </div>
 
-      <Separator />
-
-      {/* 날짜 범위 제한 */}
-      <div className="space-y-3">
-        <Label className="text-xs font-medium">날짜 범위 제한</Label>
-        <div className="grid grid-cols-2 gap-2">
-          <div className="space-y-2">
+      {/* DATE RANGE 섹션 */}
+      <div className="border-b border-border/50 pb-3 mb-3">
+        <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">DATE RANGE</h4>
+        <div className="flex gap-2">
+          <div className="flex-1">
             <Label className="text-[10px] text-muted-foreground">최소 날짜</Label>
             <Input
               type="date"
               value={config.minDate || ""}
               onChange={(e) => updateConfig("minDate", e.target.value)}
-              className="h-8 text-xs"
+              className="h-7 text-xs"
             />
           </div>
-          <div className="space-y-2">
+          <div className="flex-1">
             <Label className="text-[10px] text-muted-foreground">최대 날짜</Label>
             <Input
               type="date"
               value={config.maxDate || ""}
               onChange={(e) => updateConfig("maxDate", e.target.value)}
-              className="h-8 text-xs"
+              className="h-7 text-xs"
             />
           </div>
         </div>
       </div>
 
-      <Separator />
+      {/* OPTIONS 섹션 */}
+      <div className="border-b border-border/50 pb-3 mb-3">
+        <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">OPTIONS</h4>
 
-      {/* 추가 옵션 */}
-      <div className="space-y-3">
-        <Label className="text-xs font-medium">추가 옵션</Label>
-        
-        <div className="flex items-center space-x-2">
+        <div className="flex items-center justify-between py-1.5">
+          <span className="text-xs text-muted-foreground">기간 선택 (시작~종료)</span>
           <Checkbox
-            id="range"
             checked={config.range || false}
             onCheckedChange={(checked) => updateConfig("range", checked)}
           />
-          <label htmlFor="range" className="text-xs">기간 선택 (시작~종료)</label>
         </div>
 
-        <div className="flex items-center space-x-2">
+        <div className="flex items-center justify-between py-1.5">
+          <span className="text-xs text-muted-foreground">오늘 버튼 표시</span>
           <Checkbox
-            id="showToday"
             checked={config.showToday !== false}
             onCheckedChange={(checked) => updateConfig("showToday", checked)}
           />
-          <label htmlFor="showToday" className="text-xs">오늘 버튼 표시</label>
         </div>
 
         {(config.dateType === "datetime" || config.dateType === "time") && (
-          <div className="flex items-center space-x-2">
+          <div className="flex items-center justify-between py-1.5">
+            <span className="text-xs text-muted-foreground">초 단위 표시</span>
             <Checkbox
-              id="showSeconds"
               checked={config.showSeconds || false}
               onCheckedChange={(checked) => updateConfig("showSeconds", checked)}
             />
-            <label htmlFor="showSeconds" className="text-xs">초 단위 표시</label>
           </div>
         )}
       </div>
@@ -159,5 +160,3 @@ export const V2DateConfigPanel: React.FC<V2DateConfigPanelProps> = ({
 V2DateConfigPanel.displayName = "V2DateConfigPanel";
 
 export default V2DateConfigPanel;
-
-
diff --git a/frontend/components/v2/config-panels/V2GroupConfigPanel.tsx b/frontend/components/v2/config-panels/V2GroupConfigPanel.tsx
index 6c3750bf..190d4015 100644
--- a/frontend/components/v2/config-panels/V2GroupConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2GroupConfigPanel.tsx
@@ -9,7 +9,6 @@ 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 { Separator } from "@/components/ui/separator";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Button } from "@/components/ui/button";
 import { Plus, Trash2 } from "lucide-react";
@@ -23,12 +22,10 @@ export const V2GroupConfigPanel: React.FC<V2GroupConfigPanelProps> = ({
   config,
   onChange,
 }) => {
-  // 설정 업데이트 핸들러
   const updateConfig = (field: string, value: any) => {
     onChange({ ...config, [field]: value });
   };
 
-  // 탭 관리
   const tabs = config.tabs || [];
 
   const addTab = () => {
@@ -48,46 +45,54 @@ export const V2GroupConfigPanel: React.FC<V2GroupConfigPanelProps> = ({
   };
 
   return (
-    <div className="space-y-4">
-      {/* 그룹 타입 */}
-      <div className="space-y-2">
-        <Label className="text-xs font-medium">그룹 타입</Label>
-        <Select
-          value={config.groupType || config.type || "section"}
-          onValueChange={(value) => updateConfig("groupType", value)}
-        >
-          <SelectTrigger className="h-8 text-xs">
-            <SelectValue placeholder="타입 선택" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="section">섹션</SelectItem>
-            <SelectItem value="tabs">탭</SelectItem>
-            <SelectItem value="accordion">아코디언</SelectItem>
-            <SelectItem value="card">카드 섹션</SelectItem>
-            <SelectItem value="modal">모달</SelectItem>
-            <SelectItem value="form-modal">폼 모달</SelectItem>
-          </SelectContent>
-        </Select>
+    <div className="space-y-1">
+      {/* GROUP TYPE 섹션 */}
+      <div className="border-b border-border/50 pb-3 mb-3">
+        <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">GROUP TYPE</h4>
+        <div className="flex items-center justify-between py-1.5">
+          <span className="text-xs text-muted-foreground">그룹 타입</span>
+          <div className="w-[140px]">
+            <Select
+              value={config.groupType || config.type || "section"}
+              onValueChange={(value) => updateConfig("groupType", value)}
+            >
+              <SelectTrigger className="h-7 text-xs">
+                <SelectValue placeholder="타입 선택" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="section">섹션</SelectItem>
+                <SelectItem value="tabs">탭</SelectItem>
+                <SelectItem value="accordion">아코디언</SelectItem>
+                <SelectItem value="card">카드 섹션</SelectItem>
+                <SelectItem value="modal">모달</SelectItem>
+                <SelectItem value="form-modal">폼 모달</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
       </div>
 
-      <Separator />
-
-      {/* 제목 */}
-      <div className="space-y-2">
-        <Label className="text-xs font-medium">제목</Label>
-        <Input
-          value={config.title || ""}
-          onChange={(e) => updateConfig("title", e.target.value)}
-          placeholder="그룹 제목"
-          className="h-8 text-xs"
-        />
+      {/* TITLE 섹션 */}
+      <div className="border-b border-border/50 pb-3 mb-3">
+        <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">TITLE</h4>
+        <div className="flex items-center justify-between py-1.5">
+          <span className="text-xs text-muted-foreground">제목</span>
+          <div className="w-[140px]">
+            <Input
+              value={config.title || ""}
+              onChange={(e) => updateConfig("title", e.target.value)}
+              placeholder="그룹 제목"
+              className="h-7 text-xs"
+            />
+          </div>
+        </div>
       </div>
 
-      {/* 탭 설정 */}
+      {/* TABS 섹션 - 탭 타입일 때만 */}
       {config.groupType === "tabs" && (
-        <div className="space-y-2">
-          <div className="flex items-center justify-between">
-            <Label className="text-xs font-medium">탭 목록</Label>
+        <div className="border-b border-border/50 pb-3 mb-3">
+          <div className="flex items-center justify-between py-2">
+            <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">TABS</h4>
             <Button
               type="button"
               variant="ghost"
@@ -99,9 +104,9 @@ export const V2GroupConfigPanel: React.FC<V2GroupConfigPanelProps> = ({
               추가
             </Button>
           </div>
-          <div className="space-y-2 max-h-40 overflow-y-auto">
+          <div className="space-y-1.5 max-h-40 overflow-y-auto">
             {tabs.map((tab: any, index: number) => (
-              <div key={index} className="flex items-center gap-2">
+              <div key={index} className="flex items-center gap-1.5">
                 <Input
                   value={tab.id || ""}
                   onChange={(e) => updateTab(index, "id", e.target.value)}
@@ -134,82 +139,85 @@ export const V2GroupConfigPanel: React.FC<V2GroupConfigPanelProps> = ({
         </div>
       )}
 
-      {/* 섹션/아코디언 옵션 */}
+      {/* SECTION OPTIONS 섹션 - 섹션/아코디언일 때 */}
       {(config.groupType === "section" || config.groupType === "accordion" || !config.groupType) && (
-        <div className="space-y-3">
-          <div className="flex items-center space-x-2">
+        <div className="border-b border-border/50 pb-3 mb-3">
+          <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">SECTION OPTIONS</h4>
+
+          <div className="flex items-center justify-between py-1.5">
+            <span className="text-xs text-muted-foreground">접기/펴기 가능</span>
             <Checkbox
-              id="collapsible"
               checked={config.collapsible || false}
               onCheckedChange={(checked) => updateConfig("collapsible", checked)}
             />
-            <label htmlFor="collapsible" className="text-xs">접기/펴기 가능</label>
           </div>
 
           {config.collapsible && (
-            <div className="flex items-center space-x-2">
+            <div className="flex items-center justify-between py-1.5">
+              <span className="text-xs text-muted-foreground">기본으로 펼침</span>
               <Checkbox
-                id="defaultOpen"
                 checked={config.defaultOpen !== false}
                 onCheckedChange={(checked) => updateConfig("defaultOpen", checked)}
               />
-              <label htmlFor="defaultOpen" className="text-xs">기본으로 펼침</label>
             </div>
           )}
         </div>
       )}
 
-      {/* 모달 옵션 */}
+      {/* MODAL OPTIONS 섹션 - 모달/폼모달일 때 */}
       {(config.groupType === "modal" || config.groupType === "form-modal") && (
-        <div className="space-y-3">
-          <div className="space-y-2">
-            <Label className="text-xs font-medium">모달 크기</Label>
-            <Select
-              value={config.modalSize || "md"}
-              onValueChange={(value) => updateConfig("modalSize", value)}
-            >
-              <SelectTrigger className="h-8 text-xs">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="sm">작게 (400px)</SelectItem>
-                <SelectItem value="md">보통 (600px)</SelectItem>
-                <SelectItem value="lg">크게 (800px)</SelectItem>
-                <SelectItem value="xl">매우 크게 (1000px)</SelectItem>
-                <SelectItem value="full">전체 화면</SelectItem>
-              </SelectContent>
-            </Select>
+        <div className="border-b border-border/50 pb-3 mb-3">
+          <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">MODAL OPTIONS</h4>
+
+          <div className="flex items-center justify-between py-1.5">
+            <span className="text-xs text-muted-foreground">모달 크기</span>
+            <div className="w-[140px]">
+              <Select
+                value={config.modalSize || "md"}
+                onValueChange={(value) => updateConfig("modalSize", value)}
+              >
+                <SelectTrigger className="h-7 text-xs">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="sm">작게 (400px)</SelectItem>
+                  <SelectItem value="md">보통 (600px)</SelectItem>
+                  <SelectItem value="lg">크게 (800px)</SelectItem>
+                  <SelectItem value="xl">매우 크게 (1000px)</SelectItem>
+                  <SelectItem value="full">전체 화면</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
           </div>
 
-          <div className="flex items-center space-x-2">
+          <div className="flex items-center justify-between py-1.5">
+            <span className="text-xs text-muted-foreground">닫기 버튼 표시</span>
             <Checkbox
-              id="closeable"
               checked={config.closeable !== false}
               onCheckedChange={(checked) => updateConfig("closeable", checked)}
             />
-            <label htmlFor="closeable" className="text-xs">닫기 버튼 표시</label>
           </div>
 
-          <div className="flex items-center space-x-2">
+          <div className="flex items-center justify-between py-1.5">
+            <span className="text-xs text-muted-foreground">배경 클릭으로 닫기</span>
             <Checkbox
-              id="backdrop"
               checked={config.backdrop !== false}
               onCheckedChange={(checked) => updateConfig("backdrop", checked)}
             />
-            <label htmlFor="backdrop" className="text-xs">배경 클릭으로 닫기</label>
           </div>
         </div>
       )}
 
-      {/* 헤더 표시 여부 */}
-      <Separator />
-      <div className="flex items-center space-x-2">
-        <Checkbox
-          id="showHeader"
-          checked={config.showHeader !== false}
-          onCheckedChange={(checked) => updateConfig("showHeader", checked)}
-        />
-        <label htmlFor="showHeader" className="text-xs">헤더 표시</label>
+      {/* DISPLAY 섹션 */}
+      <div className="border-b border-border/50 pb-3 mb-3">
+        <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">DISPLAY</h4>
+        <div className="flex items-center justify-between py-1.5">
+          <span className="text-xs text-muted-foreground">헤더 표시</span>
+          <Checkbox
+            checked={config.showHeader !== false}
+            onCheckedChange={(checked) => updateConfig("showHeader", checked)}
+          />
+        </div>
       </div>
     </div>
   );
@@ -218,5 +226,3 @@ export const V2GroupConfigPanel: React.FC<V2GroupConfigPanelProps> = ({
 V2GroupConfigPanel.displayName = "V2GroupConfigPanel";
 
 export default V2GroupConfigPanel;
-
-