[agent-pipeline] rollback to 784dc73a

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

@@ -40,7 +40,6 @@ export default function ScreenManagementPage() {
   const [loading, setLoading] = useState(true);
   const [searchTerm, setSearchTerm] = useState("");
   const [isCreateOpen, setIsCreateOpen] = useState(false);
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
 
   const tableCount = useMemo(() => new Set(screens.map((s) => s.tableName).filter(Boolean)).size, [screens]);
 
@@ -216,100 +215,64 @@ export default function ScreenManagementPage() {
       {/* 메인 콘텐츠 */}
       {viewMode === "flow" ? (
         <div className="flex-1 overflow-hidden flex">
-          {/* 왼쪽: 트리 구조 (접기/펼치기) */}
+          {/* 왼쪽: 트리 구조 */}
-          <div
+          <div className="w-[350px] min-w-[280px] max-w-[450px] flex flex-col border-r border-border/50 bg-background/80 backdrop-blur-sm">
-            className={`flex flex-col border-r border-border/50 bg-background/80 backdrop-blur-sm transition-all duration-300 ease-in-out ${
+            {/* 검색 */}
-              sidebarCollapsed ? "w-[48px] min-w-[48px]" : "w-[320px] min-w-[280px] max-w-[400px]"
+            <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
-            <div className="flex-shrink-0 flex items-center justify-between p-2 border-b border-border/50">
+                  placeholder="화면 검색..."
-              {!sidebarCollapsed && <span className="text-xs font-medium text-muted-foreground px-1">탐색</span>}
+                  value={searchTerm}
-              <Button
+                  onChange={(e) => setSearchTerm(e.target.value)}
-                variant="ghost"
+                  className="pl-9 h-9 rounded-xl bg-muted/30 border-border/50 focus:bg-background focus:ring-2 focus:ring-primary/30 transition-colors"
-                size="icon"
+                />
-                className="h-7 w-7"
+              </div>
-                onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
-                aria-label={sidebarCollapsed ? "사이드바 펼치기" : "사이드바 접기"}
-              >
-                {sidebarCollapsed ? <PanelLeftOpen className="h-4 w-4" /> : <PanelLeftClose className="h-4 w-4" />}
-              </Button>
             </div>
+            {/* 트리 뷰 */}
+            <div className="flex-1 overflow-hidden">
+              <ScreenGroupTreeView
+                screens={filteredScreens}
+                selectedScreen={selectedScreen}
+                onScreenSelect={handleScreenSelect}
+                onScreenDesign={handleDesignScreen}
+                searchTerm={searchTerm}
+                onGroupSelect={(group) => {
+                  setSelectedGroup(group);
+                  setSelectedScreen(null); // 화면 선택 해제
+                  setFocusedScreenIdInGroup(null); // 포커스 초기화
+                }}
+                onScreenSelectInGroup={(group, screenId) => {
+                  // 그룹 내 화면 클릭 시
+                  const isNewGroup = selectedGroup?.id !== group.id;
                   
-            {!sidebarCollapsed && (
+                  if (isNewGroup) {
-              <>
+                    // 새 그룹 진입: 포커싱 없이 시작 (첫 진입 시 망가지는 문제 방지)
-                {/* 검색 */}
+                    setSelectedGroup(group);
-                <div className="flex-shrink-0 p-3 border-b border-border/50">
+                    setFocusedScreenIdInGroup(null);
-                  <div className="relative">
+                  } else {
-                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                    // 같은 그룹 내에서 다른 화면 클릭: 포커싱 유지
-                    <Input
+                    setFocusedScreenIdInGroup(screenId);
-                      placeholder="화면 검색..."
+                  }
-                      value={searchTerm}
+                  setSelectedScreen(null);
-                      onChange={(e) => setSearchTerm(e.target.value)}
+                }}
-                      className="pl-9 h-9 rounded-xl bg-muted/30 border-border/50 focus:bg-background focus:ring-2 focus:ring-primary/30 transition-colors"
+              />
-                    />
+            </div>
-                  </div>
+            {/* 선택 미리보기 */}
+            {selectedScreen && (
+              <div className="flex-shrink-0 border-t border-border/50 p-3 bg-muted/5">
+                <div className="flex items-center gap-2 mb-2">
+                  <Monitor className="h-4 w-4 text-primary" />
+                  <span className="text-sm font-medium truncate">{selectedScreen.screenName}</span>
                 </div>
-                {/* 트리 뷰 */}
+                <div className="flex items-center gap-3 text-xs text-muted-foreground">
-                <div className="flex-1 overflow-hidden">
+                  <span className="font-mono">{selectedScreen.screenCode}</span>
-                  <ScreenGroupTreeView
+                  <span>{selectedScreen.tableName || "테이블 없음"}</span>
-                    screens={filteredScreens}
-                    selectedScreen={selectedScreen}
-                    onScreenSelect={handleScreenSelect}
-                    onScreenDesign={handleDesignScreen}
-                    searchTerm={searchTerm}
-                    onGroupSelect={(group) => {
-                      setSelectedGroup(group);
-                      setSelectedScreen(null);
-                      setFocusedScreenIdInGroup(null);
-                    }}
-                    onScreenSelectInGroup={(group, screenId) => {
-                      const isNewGroup = selectedGroup?.id !== group.id;
-                      if (isNewGroup) {
-                        setSelectedGroup(group);
-                        setFocusedScreenIdInGroup(null);
-                      } else {
-                        setFocusedScreenIdInGroup(screenId);
-                      }
-                      setSelectedScreen(null);
-                    }}
-                  />
                 </div>
-                {/* 선택 미리보기 */}
+                <div className="flex gap-2 mt-2">
-                {selectedScreen && (
+                  <Button size="sm" variant="outline" className="h-7 text-xs flex-1" onClick={() => handleDesignScreen(selectedScreen)}>
-                  <div className="flex-shrink-0 border-t border-border/50 p-3 bg-muted/5">
+                    편집
-                    <div className="flex items-center gap-2 mb-2">
+                  </Button>
-                      <Monitor className="h-4 w-4 text-primary" />
-                      <span className="text-sm font-medium truncate">{selectedScreen.screenName}</span>
-                    </div>
-                    <div className="flex items-center gap-3 text-xs text-muted-foreground">
-                      <span className="font-mono">{selectedScreen.screenCode}</span>
-                      <span>{selectedScreen.tableName || "테이블 없음"}</span>
-                    </div>
-                    <div className="flex gap-2 mt-2">
-                      <Button size="sm" variant="outline" className="h-7 text-xs flex-1" onClick={() => handleDesignScreen(selectedScreen)}>
-                        편집
-                      </Button>
-                    </div>
-                  </div>
-                )}
-              </>
-            )}
-
-            {/* 접힌 상태: 검색 아이콘 + 화면 수 배지 */}
-            {sidebarCollapsed && (
-              <div className="flex-1 flex flex-col items-center gap-2 py-3">
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-8 w-8"
-                  onClick={() => setSidebarCollapsed(false)}
-                  aria-label="사이드바 펼치기"
-                >
-                  <Search className="h-4 w-4 text-muted-foreground" />
-                </Button>
-                <div className="mt-auto">
-                  <Badge variant="secondary" className="text-[10px]">{screens.length}</Badge>
                 </div>
               </div>
             )}

frontend/components/screen/AnimatedFlowEdge.tsx

@@ -28,7 +28,7 @@ export function AnimatedFlowEdge({
   const strokeColor = (style?.stroke as string) || "hsl(var(--primary))";
   const strokeW = (style?.strokeWidth as number) || 2;
   const isActive = data?.active !== false;
-  const duration: string = typeof data?.duration === "string" ? data.duration : "3s";
+  const duration = data?.duration || "3s";
   const filterId = `edge-glow-${id}`;
 
   return (