From 4c19d3a6eb92cdae9e0041335798511ae788a28e Mon Sep 17 00:00:00 2001
From: DDD1542 <puget159@naver.com>
Date: Sun, 15 Mar 2026 17:18:18 +0900
Subject: [PATCH] [agent-pipeline] pipe-20260315080636-1tpd round-3

---
 .../components/screen/ScreenGroupTreeView.tsx | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/frontend/components/screen/ScreenGroupTreeView.tsx b/frontend/components/screen/ScreenGroupTreeView.tsx
index 65375419..46a96847 100644
--- a/frontend/components/screen/ScreenGroupTreeView.tsx
+++ b/frontend/components/screen/ScreenGroupTreeView.tsx
@@ -1107,7 +1107,7 @@ export function ScreenGroupTreeView({
               {/* 그룹 헤더 */}
               <div
                 className={cn(
-                  "flex items-center gap-2 rounded-md px-2 py-1.5 cursor-pointer hover:bg-accent transition-colors",
+                  "flex items-center gap-2 rounded-lg px-2 py-1.5 cursor-pointer hover:bg-muted/40 transition-colors",
                   "text-sm font-medium group/item",
                   isMatching && "bg-primary/5 dark:bg-primary/10" // 검색 일치 하이라이트 (연한 배경)
                 )}
@@ -1158,7 +1158,8 @@ export function ScreenGroupTreeView({
 
               {/* 그룹 내 하위 그룹들 */}
               {isExpanded && childGroups.length > 0 && (
-                <div className="ml-6 mt-1 space-y-0.5">
+                <div className="relative ml-6 mt-1 space-y-0.5">
+                  <div className="absolute left-[14px] top-0 bottom-0 w-px bg-border/40" />
                   {childGroups.map((childGroup) => {
                     const childGroupId = String(childGroup.id);
                     const isChildExpanded = expandedGroups.has(childGroupId) || shouldAutoExpandForSearch.has(childGroup.id); // 검색 시 상위 그룹만 자동 확장
@@ -1173,7 +1174,7 @@ export function ScreenGroupTreeView({
                         {/* 중분류 헤더 */}
                         <div
                           className={cn(
-                            "flex items-center gap-2 rounded-md px-2 py-1.5 cursor-pointer hover:bg-accent transition-colors",
+                            "flex items-center gap-2 rounded-lg px-2 py-1.5 cursor-pointer hover:bg-muted/40 transition-colors",
                             "text-xs font-medium group/item",
                             isChildMatching && "bg-primary/5 dark:bg-primary/10"
                           )}
@@ -1223,7 +1224,8 @@ export function ScreenGroupTreeView({
 
                         {/* 중분류 내 손자 그룹들 (소분류) */}
                         {isChildExpanded && grandChildGroups.length > 0 && (
-                          <div className="ml-6 mt-1 space-y-0.5">
+                          <div className="relative ml-6 mt-1 space-y-0.5">
+                            <div className="absolute left-[14px] top-0 bottom-0 w-px bg-border/30" />
                             {grandChildGroups.map((grandChild) => {
                               const grandChildId = String(grandChild.id);
                               const isGrandExpanded = expandedGroups.has(grandChildId) || shouldAutoExpandForSearch.has(grandChild.id); // 검색 시 상위 그룹만 자동 확장
@@ -1235,7 +1237,7 @@ export function ScreenGroupTreeView({
                                   {/* 소분류 헤더 */}
                                   <div
                                     className={cn(
-                                      "flex items-center gap-2 rounded-md px-2 py-1.5 cursor-pointer hover:bg-accent transition-colors",
+                                      "flex items-center gap-2 rounded-lg px-2 py-1.5 cursor-pointer hover:bg-muted/40 transition-colors",
                                       "text-xs group/item",
                                       isGrandMatching && "bg-primary/5 dark:bg-primary/10"
                                     )}
@@ -1297,7 +1299,7 @@ export function ScreenGroupTreeView({
                                             className={cn(
                                               "flex items-center gap-2 rounded-md px-2 py-1.5 cursor-pointer transition-colors duration-150",
                                               "text-xs hover:bg-muted/60",
-                                              selectedScreen?.screenId === screen.screenId && "bg-accent shadow-sm"
+                                              selectedScreen?.screenId === screen.screenId && "bg-primary/10 border-l-2 border-primary"
                                             )}
                                             onClick={() => handleScreenClickInGroup(screen, grandChild)}
                                             onDoubleClick={() => handleScreenDoubleClick(screen)}
@@ -1333,7 +1335,7 @@ export function ScreenGroupTreeView({
                                   className={cn(
                                     "flex items-center gap-2 rounded-md px-2 py-1.5 cursor-pointer transition-colors duration-150",
                                     "text-xs hover:bg-muted/60",
-                                    selectedScreen?.screenId === screen.screenId && "bg-accent shadow-sm"
+                                    selectedScreen?.screenId === screen.screenId && "bg-primary/10 border-l-2 border-primary"
                                   )}
                                   onClick={() => handleScreenClickInGroup(screen, childGroup)}
                                   onDoubleClick={() => handleScreenDoubleClick(screen)}
@@ -1369,7 +1371,7 @@ export function ScreenGroupTreeView({
                         className={cn(
                           "flex items-center gap-2 rounded-md px-2 py-1.5 cursor-pointer transition-colors duration-150",
                           "text-sm hover:bg-muted/60 group/screen",
-                          selectedScreen?.screenId === screen.screenId && "bg-accent shadow-sm"
+                          selectedScreen?.screenId === screen.screenId && "bg-primary/10 border-l-2 border-primary"
                         )}
                         onClick={() => handleScreenClickInGroup(screen, group)}
                         onDoubleClick={() => handleScreenDoubleClick(screen)}
@@ -1394,7 +1396,7 @@ export function ScreenGroupTreeView({
           <div className="mb-1">
             <div
               className={cn(
-                "flex items-center gap-2 rounded-md px-2 py-1.5 cursor-pointer hover:bg-accent transition-colors",
+                "flex items-center gap-2 rounded-lg px-2 py-1.5 cursor-pointer hover:bg-muted/40 transition-colors",
                 "text-sm font-medium text-muted-foreground"
               )}
               onClick={() => toggleGroup("ungrouped")}
@@ -1419,7 +1421,7 @@ export function ScreenGroupTreeView({
                     className={cn(
                       "flex items-center gap-2 rounded-md px-2 py-1.5 cursor-pointer transition-colors duration-150",
                       "text-sm hover:bg-muted/60",
-                      selectedScreen?.screenId === screen.screenId && "bg-accent shadow-sm"
+                      selectedScreen?.screenId === screen.screenId && "bg-primary/10 border-l-2 border-primary"
                     )}
                     onClick={() => handleScreenClick(screen)}
                     onDoubleClick={() => handleScreenDoubleClick(screen)}