From c0be2f352823670458d416c98dc7e4fccd78b2cb Mon Sep 17 00:00:00 2001
From: DDD1542 <puget159@naver.com>
Date: Sun, 15 Mar 2026 19:57:17 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=A0=91=EB=8A=94=20=EC=82=AC=EC=9D=B4?=
 =?UTF-8?q?=EB=93=9C=EB=B0=94=20=EA=B5=AC=ED=98=84=20(v5=20=ED=8C=8C?=
 =?UTF-8?q?=EC=9D=B4=ED=94=84=EB=9D=BC=EC=9D=B8=20=ED=9B=84=EC=86=8D)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- sidebarCollapsed 상태 + 조건부 렌더링
- PanelLeftOpen/PanelLeftClose 아이콘 토글
- collapsed 시 아이콘 컬럼 표시

Made-with: Cursor
---
 .../admin/screenMng/screenMngList/page.tsx    | 111 +++++++++++-------
 1 file changed, 69 insertions(+), 42 deletions(-)

diff --git a/frontend/app/(main)/admin/screenMng/screenMngList/page.tsx b/frontend/app/(main)/admin/screenMng/screenMngList/page.tsx
index 4be1e746..0b74b2ee 100644
--- a/frontend/app/(main)/admin/screenMng/screenMngList/page.tsx
+++ b/frontend/app/(main)/admin/screenMng/screenMngList/page.tsx
@@ -41,6 +41,7 @@ export default function ScreenManagementPage() {
   const [searchTerm, setSearchTerm] = useState("");
   const [isCreateOpen, setIsCreateOpen] = useState(false);
   const [isDetailOpen, setIsDetailOpen] = useState(false);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
 
   const tableCount = useMemo(() => new Set(screens.map((s) => s.tableName).filter(Boolean)).size, [screens]);
 
@@ -217,49 +218,75 @@ export default function ScreenManagementPage() {
       {/* 메인 콘텐츠 */}
       {viewMode === "flow" ? (
         <div className="flex-1 overflow-hidden flex">
-          {/* 왼쪽: 트리 구조 */}
-          <div className="w-[350px] min-w-[280px] max-w-[450px] flex flex-col border-r border-border/50 bg-background/80 backdrop-blur-sm">
-            {/* 검색 */}
-            <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 rounded-xl bg-muted/30 border-border/50 focus:bg-background focus:ring-2 focus:ring-primary/30 transition-colors"
-                />
+          {/* 왼쪽: 트리 구조 (접기/펼기 지원) */}
+          <div 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 flex items-center justify-between p-2 border-b border-border/50">
+              {!sidebarCollapsed && <span className="text-xs font-medium text-muted-foreground px-1">탐색</span>}
+              <Button
+                variant="ghost"
+                size="icon"
+                className={`h-7 w-7 ${sidebarCollapsed ? "mx-auto" : "ml-auto"}`}
+                onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
+              >
+                {sidebarCollapsed ? <PanelLeftOpen className="h-4 w-4" /> : <PanelLeftClose className="h-4 w-4" />}
+              </Button>
+            </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)}>
+                  <Search className="h-4 w-4 text-muted-foreground" />
+                </Button>
+                <div className="mt-auto pb-2">
+                  <Badge variant="secondary" className="text-[10px] px-1.5">{screens.length}</Badge>
+                </div>
               </div>
-            </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;
-                  
-                  if (isNewGroup) {
-                    // 새 그룹 진입: 포커싱 없이 시작 (첫 진입 시 망가지는 문제 방지)
-                    setSelectedGroup(group);
-                    setFocusedScreenIdInGroup(null);
-                  } else {
-                    // 같은 그룹 내에서 다른 화면 클릭: 포커싱 유지
-                    setFocusedScreenIdInGroup(screenId);
-                  }
-                  setSelectedScreen(null);
-                }}
-              />
-            </div>
+            )}
+            {/* 사이드바 펼침 시 전체 UI */}
+            {!sidebarCollapsed && (
+              <>
+                {/* 검색 */}
+                <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 rounded-xl bg-muted/30 border-border/50 focus:bg-background focus:ring-2 focus:ring-primary/30 transition-colors"
+                    />
+                  </div>
+                </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;
+                      if (isNewGroup) {
+                        setSelectedGroup(group);
+                        setFocusedScreenIdInGroup(null);
+                      } else {
+                        setFocusedScreenIdInGroup(screenId);
+                      }
+                      setSelectedScreen(null);
+                    }}
+                  />
+                </div>
+              </>
+            )}
           </div>
 
           {/* 오른쪽: 관계 시각화 (React Flow) */}