diff --git a/frontend/app/(main)/admin/screenMng/screenMngList/page.tsx b/frontend/app/(main)/admin/screenMng/screenMngList/page.tsx
index e5d26eef..3631aa19 100644
--- a/frontend/app/(main)/admin/screenMng/screenMngList/page.tsx
+++ b/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" ? (
- {/* 왼쪽: 트리 구조 (접기/펼치기) */}
-
- {/* 사이드바 토글 */}
-
- {!sidebarCollapsed &&
탐색 }
-
setSidebarCollapsed(!sidebarCollapsed)}
- aria-label={sidebarCollapsed ? "사이드바 펼치기" : "사이드바 접기"}
- >
- {sidebarCollapsed ? : }
-
+ {/* 왼쪽: 트리 구조 */}
+
+ {/* 검색 */}
+
-
- {!sidebarCollapsed && (
- <>
- {/* 검색 */}
-
-
-
- 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"
- />
-
+ {/* 트리 뷰 */}
+
+ {
+ 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);
+ }}
+ />
+
+ {/* 선택 미리보기 */}
+ {selectedScreen && (
+
+
+
+ {selectedScreen.screenName}
- {/* 트리 뷰 */}
-
-
{
- 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);
- }}
- />
+
+ {selectedScreen.screenCode}
+ {selectedScreen.tableName || "테이블 없음"}
- {/* 선택 미리보기 */}
- {selectedScreen && (
-
-
-
- {selectedScreen.screenName}
-
-
- {selectedScreen.screenCode}
- {selectedScreen.tableName || "테이블 없음"}
-
-
- handleDesignScreen(selectedScreen)}>
- 편집
-
-
-
- )}
- >
- )}
-
- {/* 접힌 상태: 검색 아이콘 + 화면 수 배지 */}
- {sidebarCollapsed && (
-
-
setSidebarCollapsed(false)}
- aria-label="사이드바 펼치기"
- >
-
-
-
-
{screens.length}
+
+ handleDesignScreen(selectedScreen)}>
+ 편집
+
)}
diff --git a/frontend/components/screen/AnimatedFlowEdge.tsx b/frontend/components/screen/AnimatedFlowEdge.tsx
index f5d8781a..dc33dcfa 100644
--- a/frontend/components/screen/AnimatedFlowEdge.tsx
+++ b/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 (