App Patterns
패턴
대시보드 화면을 조립하는 레이아웃 패턴입니다 — 페이지 헤더 · 빈 상태 · 액션 행 · 서비스 행 · 폼 그리드. 컴포넌트(.shell 토큰)를 다크 표면 위에 배치하는 실효 규칙을 그대로 재현했습니다.
페이지 헤더
.pagehead — eyebrow(11px/.16em 대문자) + h1 + 우측 액션. align-items:flex-end 으로 베이스라인 정렬.
Golden Hour
.pagehead · .eyebrow(11/.16em/700/muted) · justify-between · flex-end
빈 상태
데이터가 없을 때 중앙 정렬 muted. 컨테이너 크기에 따라 .empty · .pane-empty · .dist-empty 3단계.
좌측에서 플랫폼을 추가하세요
.empty(28px) · .pane-empty(22/12·12px·1.8) · .dist-empty(54/24·.ico 34px/.25)
액션 행
.actions-row — 폼·푸터의 버튼 그룹. gap:10px · flex-wrap · margin-top:6px.
.actions-row · align-items:center · gap 10 · wrap
서비스 행
.svc-row — 링크 에디터. dot(10px) + name(min 120) + url(ellipsis). surface-2 배경, radius 6.
.svc-row · .svc-dot(10) · .svc-name(700/min120) · .svc-url(12px·ellipsis)
폼 그리드
.form-grid — 설정·생성 폼의 표준 컨테이너. gap:14px · max-width:760 으로 줄길이 제한.
.form-grid · grid · gap 14 · max-width 760
온보딩 스텝퍼
.steps — 가입 심사 3단계(접수 · 검토 중 · 오픈). dot(28px)에 아이콘, li:before 2px 연결선. 완료=.done(green), 현재=.cur(accent 보더). 상단은 .ban 성공 배너.
- 신청 접수정보를 받았습니다.
- 검토 중운영팀이 신청 내용을 확인하고 있습니다.
- 워크스페이스 오픈승인되면 owner 로 워크스페이스가 열립니다.
.ban(green .08/.3·#86efac) · .steps · .dot(28)·.dot.done(green)·.dot.cur(accent) · li:before(2px line)
운영자 배너 (impersonation)
운영자가 사용자 시점으로 볼 때 화면 하단에 고정되는 빨간 필($_SESSION['impersonator'] 일 때만). accent(#6B3FF6) 배경 · radius 999 · 운영자명 + 돌아가기 링크. 실제로는 position:fixed; bottom:18px.
fixed bottom 18 · accent pill · 운영자명 + /admin/stop-impersonate 링크
사용 규칙
- · 모든 화면 상단은
.pagehead(eyebrow + h1 + 우측 액션)로 시작 - · 폼은
.form-grid(max 760)로 줄길이 제한 - · 빈 상태는 컨테이너 크기에 맞춰 empty / pane-empty / dist-empty 선택
- · 버튼 묶음은
.actions-row로 일관 간격(10px)
- · 페이지 제목을 eyebrow 없이 본문 텍스트로 대체
- · 폼을 전체 너비로 펼쳐 한 줄이 760px 초과
- · 빈 상태에 강조색·아이콘 남발(muted 중앙 정렬 원칙 위배)
- ·
.svc-url줄바꿈 허용(ellipsis 한 줄 고정)