[agent-pipeline] pipe-20260315072335-zb1m round-2

frontend/app/(main)/admin/screenMng/screenMngList/page.tsx

@@ -159,11 +159,11 @@ export default function ScreenManagementPage() {
   return (
     <div className="flex h-screen flex-col bg-background overflow-hidden">
       {/* 페이지 헤더 */}
-      <div className="flex-shrink-0 border-b bg-background px-6 py-4">
+      <div className="relative flex-shrink-0 border-b border-border/50 bg-background/95 backdrop-blur-md px-6 py-5">
         <div className="flex items-center justify-between">
           <div>
-            <h1 className="text-2xl font-bold tracking-tight">화면 관리</h1>
+            <h1 className="text-3xl font-bold tracking-tight">화면 관리</h1>
-            <p className="text-sm text-muted-foreground">화면을 그룹별로 관리하고 데이터 관계를 확인합니다</p>
+            <p className="text-sm text-muted-foreground/80">화면을 그룹별로 관리하고 데이터 관계를 확인합니다</p>
           </div>
           <div className="flex items-center gap-2">
             {/* V2 컴포넌트 테스트 버튼 */}
@@ -177,12 +177,12 @@ export default function ScreenManagementPage() {
             </Button>
             {/* 뷰 모드 전환 */}
             <Tabs value={viewMode} onValueChange={(v) => setViewMode(v as ViewMode)}>
-              <TabsList className="h-9">
+              <TabsList className="h-9 bg-muted/50 border border-border/50">
-                <TabsTrigger value="tree" className="gap-1.5 px-3">
+                <TabsTrigger value="tree" className="gap-1.5 px-3 text-xs">
                   <LayoutGrid className="h-4 w-4" />
                   트리
                 </TabsTrigger>
-                <TabsTrigger value="table" className="gap-1.5 px-3">
+                <TabsTrigger value="table" className="gap-1.5 px-3 text-xs">
                   <LayoutList className="h-4 w-4" />
                   테이블
                 </TabsTrigger>
@@ -191,28 +191,29 @@ export default function ScreenManagementPage() {
             <Button variant="outline" size="icon" onClick={loadScreens}>
               <RefreshCw className="h-4 w-4" />
             </Button>
-            <Button onClick={() => setIsCreateOpen(true)} className="gap-2">
+            <Button onClick={() => setIsCreateOpen(true)} className="gap-2 shadow-sm hover:shadow-md transition-shadow">
               <Plus className="h-4 w-4" />
               새 화면
             </Button>
           </div>
         </div>
+        <div className="absolute bottom-0 left-0 right-0 h-[2px] bg-gradient-to-r from-transparent via-primary/50 to-transparent" />
       </div>
 
       {/* 메인 콘텐츠 */}
       {viewMode === "tree" ? (
         <div className="flex-1 overflow-hidden flex">
           {/* 왼쪽: 트리 구조 */}
-          <div className="w-[350px] min-w-[280px] max-w-[450px] flex flex-col border-r bg-background">
+          <div className="w-[350px] min-w-[280px] max-w-[450px] flex flex-col border-r border-border/50 bg-muted/5">
             {/* 검색 */}
-            <div className="flex-shrink-0 p-3 border-b">
+            <div className="flex-shrink-0 p-3 border-b border-border/50">
               <div className="relative">
                 <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                 <Input
                   placeholder="화면 검색..."
                   value={searchTerm}
                   onChange={(e) => setSearchTerm(e.target.value)}
-                  className="pl-9 h-9"
+                  className="pl-9 h-9 bg-muted/30 border-border/50 focus:bg-background transition-colors"
                 />
               </div>
             </div>
@@ -248,7 +249,7 @@ export default function ScreenManagementPage() {
           </div>
 
           {/* 오른쪽: 관계 시각화 (React Flow) */}
-          <div className="flex-1 overflow-hidden">
+          <div className="flex-1 overflow-hidden bg-muted/10">
             <ScreenRelationFlow 
               screen={selectedScreen} 
               selectedGroup={selectedGroup}