diff --git a/frontend/app/(main)/admin/screenMng/popScreenMngList/page.tsx b/frontend/app/(main)/admin/screenMng/popScreenMngList/page.tsx index d8c10cf6..aec81bb4 100644 --- a/frontend/app/(main)/admin/screenMng/popScreenMngList/page.tsx +++ b/frontend/app/(main)/admin/screenMng/popScreenMngList/page.tsx @@ -285,7 +285,7 @@ export default function PopScreenManagementPage() { ) : (
{/* 왼쪽: 카테고리 트리 + 화면 목록 */} -
+
{/* 검색 */}
diff --git a/frontend/components/pop/management/PopCategoryTree.tsx b/frontend/components/pop/management/PopCategoryTree.tsx index 3ad767e1..705d7163 100644 --- a/frontend/components/pop/management/PopCategoryTree.tsx +++ b/frontend/components/pop/management/PopCategoryTree.tsx @@ -499,6 +499,9 @@ export function PopCategoryTree({ const [movingFromGroupId, setMovingFromGroupId] = useState(null); const [moveSearchTerm, setMoveSearchTerm] = useState(""); + // 미분류 회사코드별 접기/펼치기 + const [expandedCompanyCodes, setExpandedCompanyCodes] = useState>(new Set()); + // 화면 맵 생성 (screen_id로 빠르게 조회) const screensMap = useMemo(() => { const map = new Map(); @@ -517,14 +520,6 @@ export function PopCategoryTree({ // 그룹 목록 조회 const data = await getPopScreenGroups(searchTerm); setGroups(data); - - // 첫 로드 시 루트 그룹들 자동 확장 - if (expandedGroups.size === 0 && data.length > 0) { - const rootIds = data - .filter((g) => g.hierarchy_path === "POP" || g.hierarchy_path?.split("/").length === 2) - .map((g) => g.id); - setExpandedGroups(new Set(rootIds)); - } } catch (error) { console.error("POP 그룹 로드 실패:", error); toast.error("그룹 목록 로드에 실패했습니다."); @@ -934,7 +929,7 @@ export function PopCategoryTree({ } return ( -
+
{/* 헤더 */}

POP 카테고리

@@ -949,7 +944,7 @@ export function PopCategoryTree({
{/* 트리 영역 */} - +
{treeData.length === 0 && ungroupedScreens.length === 0 ? (
@@ -1009,16 +1004,42 @@ export function PopCategoryTree({ return acc; }, {}); const companyKeys = Object.keys(grouped).sort(); - const hasMultipleCompanies = companyKeys.length > 1; - return companyKeys.map((companyCode) => ( + const toggleCompanyCode = (code: string) => { + setExpandedCompanyCodes((prev) => { + const next = new Set(prev); + if (next.has(code)) { + next.delete(code); + } else { + next.add(code); + } + return next; + }); + }; + + return companyKeys.map((companyCode) => { + const isExpanded = expandedCompanyCodes.has(companyCode); + const label = companyCode === "*" ? "최고관리자" : companyCode; + + return (
- {hasMultipleCompanies && ( -
- {companyCode === "*" ? "최고관리자" : companyCode} -
- )} - {grouped[companyCode].map((screen) => ( +
toggleCompanyCode(companyCode)} + > + {isExpanded ? ( + + ) : ( + + )} + + {label} + + + {grouped[companyCode].length} + +
+ {isExpanded && grouped[companyCode].map((screen) => (
onScreenSelect(screen)} onDoubleClick={() => onScreenDesign(screen)} @@ -1078,7 +1099,8 @@ export function PopCategoryTree({
))}
- )); + ); + }); })()}
)}