관리자 콘솔 화면 레이아웃 규약
전결규정 목록(2026-10)을 기준으로 관리자 콘솔의 모든 메뉴 화면을 같은 결로 통일한다. 공통 규칙은 client/src/index.css의 .pf-admin-content 레이어가 소유하고, 화면은 그 규칙을 따르기만 한다.
원칙
- 최외곽 박스 자제 — 화면 전체를 감싸는 카드(흰 배경·테두리·그림자·둥근 모서리)를 두지 않는다. 콘텐츠 영역(
.pf-admin-content)이 배경을 소유하고, 패널 루트의 외곽 박스는 CSS가 걷어낸다. - 사방 여백 24px — 여백은 콘텐츠 영역이 소유한다(
.pf-admin-content { padding: 24px }). 패널 루트의 자체 패딩(p-5·p-6·p-7등)·최대폭·가운데 정렬은 CSS가 0으로 만든다. - 갈색 팔레트 제거 — 과거의 갈색 계열 텍스트/테두리/배경 클래스는 CSS가 네이비 계열로 매핑한다. 강조 텍스트
#1f3a5f, 보조 텍스트#526274, 테두리#c9d7e5, 배경#f5f9fc/#ffffff. (경고·위험 같은 의미색(amber/red)은 유지한다.) - 버튼은 새 ant design 유형 —
PortalButton(portal-foundation)을 쓴다. 레거시 클래스 (editorial-button,pf-admin-action)는 CSS가 같은 결로 바꾼다. 아이콘 전용 버튼은variant="ghost". - 아이콘 테두리선 삭제 — 아이콘만 든 버튼은 테두리·배경 없이 그린다(CSS
button:has(> svg:only-child)). - 히어로 영역 삭제 — 큰 제목·배지·마케팅 문구가 들어간 소개 배너는 두지 않는다. 상단에는 제목 한 줄(
text-xl font-semibold text-[#1f3a5f]) + 설명 한 줄(text-sm text-[#526274]) 만 둔다.
화면에서 할 일
- 루트는
<section className="...">(외곽 박스·패딩 없이)로 두고, 상단에 제목/설명 한 줄만 남긴다. - 동작 버튼은
PortalButton으로, 아이콘 전용은variant="ghost"+aria-label로. - 색은 위 팔레트만 쓴다(새 갈색 hex를 추가하지 않는다).
참고
- 적용 범위:
client/src/components/AdminWorkspace.tsx의menu에 등록된 모든 관리자 메뉴 화면. - 일부 화면은 portal-foundation 공용 컴포넌트(예:
DirectoryManagement,PortalMenuManagement)를 그대로 쓰므로, 그 내부 스타일은 공용 패키지 소유다(이 규약은 감싸는 여백·외곽·색에만 적용된다).