AdminShell
원본: projects/skill-lens/design/components/AdminShell/README.md
상태: In Progress, 접근성 ✓, 다크 ✓, 코드 ✗
매일 쓰는 관리자 작업 틀 2판: 대메뉴 다섯(홈, 진단, 결과, 강화, 설정) 길잡이 240, 명령 팔레트, 저장한 보기, 필터 칩, 끝까지 붙는 표(36~40px), 합계 고정 바닥, 오른쪽 서랍 400
매일 오래 쓰는 관리자 작업 화면의 틀입니다. 왼쪽 길잡이 240, 위 바 60, 내용 최대 1200, 오른쪽 서랍 400.
쓰는 곳
명단, 결과, 설정처럼 관리자가 매일 쓰는 화면. 온보딩과 진단은 Shell을 씁니다.
구성(화면이 넘겨줄 것)
길잡이 항목(아이콘, 이름, 현재 위치), 위 바(현재 위치, 검색, 사용자), 머리(제목, 설명, 행동 버튼 둘까지), 내용(12칸 격자 sl-col-*).
규칙
- 대메뉴는 다섯 고정: 홈, 진단, 결과, 강화, 설정. 명단, 직무, 스킬은 진단 안의 탭입니다.
- PC: 길잡이 펼침, 행 44, 표 머리와 몸 40(촘촘히 36), 버튼 40, 작은 버튼 32, 기본 글자 13, 제목 28.
- 태블릿: 길잡이가 64 레일로 접히고 크기는 터치(행 56, 버튼 48).
- 폰: 길잡이는 위 줄 왼쪽 메뉴로 열고, 머리의 주 버튼은 아래 고정 띠로 내려갑니다. 표는 카드 목록, 서랍은 아래 시트.
- 넓은 PC(1440 이상): 내용 폭 1200 고정.
- 명령 팔레트(
sl-cmdk)로 이름, 직무, 메뉴에 바로 갑니다. - 저장한 보기(
sl-views)는 머리 아래 탭, 도구 줄(sl-toolbar)에 필터 칩, 정렬, 행 높이. 행을 고르면 도구 줄 자리에 일괄 바(sl-bulk)가 들어옵니다. 둘은 동시에 보이지 않습니다. - 표(
sl-grid)는 카드로 감싸지 않습니다. 머리 고정, 바닥 행에 보는 수와 합계. 행을 누르면 서랍이 열리고, 선택은 체크박스로만. - 행 끝 더 보기 메뉴는 항상 보입니다. 호버에만 나오는 행동은 두지 않습니다.
- 스킬 레벨은
sl-lvl(다섯 칸 + 숫자). 목표에 못 미치면sl-lvl--gap(산호). - 서랍에 열린 행은
is-focus(왼쪽 라임 막대). 라임을 PC에서 쓰는 유일한 자리입니다. - 크롬은 중립. 보라는 현재 길잡이, 보기 탭 밑줄, 필터 칩, 레벨 칸에만.
접근성
- 길잡이는
nav랜드마크, 현재 항목은aria-current. - 정렬된 열은
aria-sort. - 아직 없음: 키보드 행 이동, 열 숨기기와 폭 조절, 표 안 바로 고치기.
이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.