HBSA200_Dashboard Shell (헤더 + 탭 네비)
(Hereby) 시스템 관리 > [[HBSA000]] > Dashboard Shell
| 앱 | System Admin (포트 4100) |
| 부모 화면 | [[HBSA000]] |
| 대상 사용자 | 플랫폼 운영자(OPERATOR) |
| 프로토타입 | TBU |
| 관련 정책 | [[POL_권한(RBAC)]] |
| Status | draft (코드 기반 — 라이브 실사 불가: dev 라우트 AccessDenied 격리, 2026-08-25 확인) |
| Owner | 카나 |
개요
콘솔 JWT 유효(!isLoading && authenticated) 시 노출되는 콘솔 셸. 상단 헤더(운영자 표기 + 로그아웃) + 좌측 공용 LNB 사이드바(lnbSidebar — admin과 동일 컴포넌트, lnbConfig 3개 섹션 × 8메뉴) + 본문(전폭, 표는 자체 가로 스크롤) + provision 모달 슬롯으로 구성된다. LNB는 접힘 68px / 펼침 208px 전환·접힘 플라이아웃·툴팁 내장, 반응형 3단(모바일 드로어/태블릿 레일 강제/PC 사용자 설정)은 admin syncLnbViewport() 기준 구현. 메뉴 id·해시 라우팅(#organizations/...)·switchTab 분기는 구 탭 체계와 동일 유지.
이력: 최초 작성 시점(8/25)엔 상단
ds-tab-nav수평 8탭이었으나, feat/system-admin-lnb-layout(#584)이 8/29 develop 머지되어 LNB 사이드바로 전환 — 구max-w-3xl~6xl본문 상한도 제거(전폭). 라이브 미실사(라우트 격리) — 코드·explainer(2026-08-21-system-admin-lnb-layout.md) 기준.
문서 히스토리
| 날짜 | 작성자 | 팀 | 변경 내용 |
|---|---|---|---|
| 2026-08-25 | 카나 | 콸 | 최초 작성 (redesign PR #583 코드 census 기반, 라이브 미실사) |
| 2026-09-01 | 카나 | PM | LNB 사이드바 전환 반영(#584 머지 8/29) — 수평 탭 서술 대체, 접힘/펼침·반응형 3단·전폭 본문 |
| 2026-09-23 | 카나 | PM | 운영자 세션 관리(「로그인된 브라우저」 모달·자동 로그아웃 예고·좁은 화면 헤더) 반영(27c905a·1757ca8·61e2b6e, #825·#841) + 「지문 기록 관리」 탭 신설 1행 추가(578c2d4·e5fa456·e86d6e7·6464374, #835·#838·#844) + 탭 select 표시 동기화(28413f2·3836807, #839·#842) — 커밋 근거, 라이브 실사 이월(TBU) |
| 2026-09-23 | 카나 | PM | 「AI 모니터링」 탭 신설(딥링크 #ai-monitor/<엔드포인트>/<조직>/<대화> · 콘솔 ai:read, c40e844 #863) + 「앱 버전」 탭 Bundle 목록 페이지네이션(2fd3cc0 #866) · 「Bundle 분배 소스 › 연결 확인」 CloudFront 단계 결함 수정(821bb67 #864) · Bundle 후보 인덱스(c1f2668 #871, 백엔드) 반영 — 커밋 근거, 라이브 실사 이월(TBU) |
| 2026-10-01 | 카나 | PM | AI 모니터링 요약에 「직원 앱 월 토큰」·「직원 앱 오늘 호출」 행, 직원 앱 대화 상세 본문 비공개 안내 반영(bccb5ada, #925) — 커밋 근거, 라이브 실사 이월(TBU) |
| 2026-10-02 | 카나 | PM | AI 모니터링 대화 상세에 CS 리포트 신고 답변 강조(598ee51b, #1000) + 「앱 백엔드」 탭 행 20-12 추가 — 병원 코드 조직 연결·동기화 배지·「동기화」 버튼(49cd4e65, #973) — 커밋 근거, 라이브 실사 이월(TBU) - 카나/PM |
| 2026-10-03 | 카나 | PM | AI 모니터링 요약에 문서 안내 배지 2종 + 상태 3종(현재/운영 검토 버전) 추가 20-10(e13018b7, #1023) · 「앱 백엔드」 병원 코드에 works 가입 링크(/works/join?code=) 연계 각주 20-12(#1018) — 커밋 근거, 라이브 실사 이월(TBU) - 카나/PM |
Data I/O
Server → Client
| 변수 | 소스 | 값 없을 때 | 비고 |
|---|---|---|---|
currentUser.username | 로그인 응답 email | - | 헤더 @{username} |
activeTab | 초기값 "organizations" | - | 탭 전환 상태 |
tabError | 탭 로드 실패 메시지 | hide | 상단 red 배너 |
Client → Server
| 액션 | 전달 값 | 콘솔 REST | 권한 게이트 |
|---|---|---|---|
| 탭 전환 | tab.id | 각 탭 loader(switchTab) | JWT |
| 로그아웃 | - | 클라이언트 JWT 폐기(logout()) | - |
코드 근거: src/views/dashboard.html, src/app.ts(tabs 배열).
화면 플로우
Shell 사양표
| 번호 | 항목/기능명 | 타입 | 사양 및 기능 설명 | 연관/영향 범위 | 비고 |
|---|---|---|---|---|---|
| 00 | 화면 진입 조건 | - | 조건1 [!isLoading && authenticated] 시 노출. 미인증 시 [[HBSA100]] | init() | |
| 01 | 초기 상태 | Output | activeTab = "organizations" 로 [[HBSA210]] 먼저 표시 | - | |
| 10 | 헤더 | - | 좌: green dot + "hereby-sysadmin" / 우: "@{username}" + logout | - | |
| 11 | ㄴ 로그아웃 | Button | • 아이콘("ic-logout") + "logout" (red) • 클릭 → logout() → [[HBSA100]] 복귀 | JWT 폐기 | 서버 세션(엔드포인트 자격) 유지 여부 TBU |
| 12 | ㄴ 로그인된 브라우저 | Modal | • 상단에서 여는 「로그인된 브라우저」 모달 — 본인 계정의 활성 세션 목록 확인 • 세션을 하나씩 로그아웃하거나 현재 브라우저를 제외하고 모두 로그아웃 • GET /api/auth/session/list · POST /api/auth/session/revoke/:id · POST /api/auth/session/revoke-others | [[HBSA100]] 「로그인 상태 유지」 | 신설 (코드 반영: 27c905a, #825) · 모달 진입 버튼 위치·행 표기 실측 = 갱신 대기 · TBU: 라이브 실사 이월 |
| 13 | ㄴ 헤더 반응형(좁은 화면) | - | • 375px 에서 헤더 오른쪽 버튼 묶음이 줄지 않아 제목이 한 글자씩 세로로 깨지던 것 수정 — 제목 truncate • md 미만에서 이메일·버튼 라벨 숨김(아이콘 버튼만 노출) | - | 수정 (코드 반영: 61e2b6e) · TBU: 라이브 실사 이월 |
| 15 | 자동 로그아웃 예고 | Popup | • 세션 만료 1분 전부터 카운트다운 팝업(DS 컨펌 다이얼로그) 노출, 「계속 사용」 선택 시 유휴 시간 연장 • 화면 활동(마우스·키보드·스크롤)이 있으면 5분마다 자동 연장 — 보고만 있어도 끊기지 않음 • 30초 주기 점검 + 탭 복귀·화면 진입 점검에서 만료(유휴·절대)되었거나 다른 브라우저에서 로그아웃·폐기된 세션을 잡아 [[HBSA100]] 로그인 화면으로 초기화하고 이유 안내 • 서버: GET /api/auth/session/status(유휴 시간을 늘리지 않는 상태 조회) · POST /api/auth/session/touch(연장) · /me 에 sessionStatus(유휴 만료·절대 만료·서버 시각) 추가 | session-watch.ts(클라이언트 순수 컨트롤러) · [[HBSA100]] | 신설 (코드 반영: 1757ca8, #841) · 안내 문구 실측 = 갱신 대기 · TBU: 라이브 실사 이월 |
| 20 | 탭 네비게이션 | Tab | [List] tabs 배열 렌더. activeTab === tab.id 시 tab-active. 클릭 → switchTab(tab.id) | src/app.ts tabs | 수평 스크롤(shrink-0) |
| 20-1 | ㄴ Organizations | Tab | id="organizations" label "Organizations" → [[HBSA210]] | - | |
| 20-2 | ㄴ Attendance | Tab | id="attendance" label "Attendance" → [[HBSA220]] | - | 새로고침 직후 엔드포인트·조직 select 가 「-- 선택 --」로 남던 것 수정(option 렌더 후 x-effect="syncSelectValue(...)" 로 값 재적용) · 기록 목록 「마지막 변경」 시각을 조직 타임존 "YYYY-MM-DD HH:mm:ss" 표기로 변경 (28413f2, #839) |
| 20-3 | ㄴ Secom Sync | Tab | id="secom-sync" label "Secom Sync" → [[HBSA230]] | - | |
| 20-4 | ㄴ External Integrations | Tab | id="integrations" label "External Integrations" → [[HBSA240]] | - | |
| 20-5 | ㄴ Sheet Templates | Tab | id="sheet-templates" label "Sheet Templates" → [[HBSA250]] | - | |
| 20-6 | ㄴ Holidays | Tab | id="national-holidays" label "Holidays" → [[HBSA260]] | - | |
| 20-7 | ㄴ Platform Staff | Tab | id="platform-staff" label "Platform Staff" → [[HBSA270]] | - | |
| 20-8 | ㄴ Endpoints | Tab | id="endpoints" label "Endpoints" → [[HBSA280]] | - | |
| 20-9 | ㄴ 지문 기록 관리 | Tab | label "지문 기록 관리"(secom-events) — 출근 지문(세콤) 기록 테스트 데이터 등록·수정·소프트 삭제 및 해당 직원·날짜 근태 재계산 탭 | attendance:manage 권한 · secom_events | 신규 탭 — 전용 사양서 미작성(HBSA 신규 화면 후보) (코드 반영: 578c2d4 #835 · e5fa456 #838 · e86d6e7 #844 · 6464374) · 탭 select 표시 동기화·원본 코드 유지 수정 동반(28413f2 #839 · 3836807 #842) · 메뉴 id·LNB 노출 위치 = 갱신 대기 · TBU: 라이브 실사 이월 |
| 20-10 | ㄴ AI 모니터링 | Tab | • label "AI 모니터링"(id ai-monitor, LNB 「조직」 섹션 — 「지문 기록 관리」와 「세콤 동기화」 사이) — 조직별 AI 대화·품질 지표·오류 조회 탭• 클릭 → switchTab('ai-monitor') → 엔드포인트·조직·기간 선택 후 서브탭(요약 · 품질 지표 / 대화 조회 / 오류)• 딥링크 #ai-monitor/<엔드포인트>/<조직> 진입 시 해당 조직 요약을 열고, #ai-monitor/<엔드포인트>/<조직>/<대화> 는 대화 상세까지 바로 엶- CS 리포트 「AI 대화 열기」로 열면 신고된 답변 말풍선 강조 + 라벨 "CS 리포트에서 신고된 답변"·스크롤, 상세 닫으면 해제(598ee51b, #1000 · [[HBSA210]] A2-2) | 콘솔 ai:read 권한(보안 카탈로그 4곳) · systemAdminRead.aiSummary/aiConversations/aiConversationDetail/aiErrors · [[HBSA210]] AI 블록 | 신규 탭 — 전용 사양서 미작성(HBSA 신규 화면 후보) · 세부 사양 = 갱신 대기 (코드 반영: c40e844, #863) · 요약에 「적용 모델」 추가(3c66d8b) · 조회도 감사 로그에 기록 · 요약에 「직원 앱 월 토큰」·「직원 앱 오늘 호출」, 직원 앱 대화 상세는 본문 미표시 "직원 앱 대화는 본문을 표시하지 않아요(직원 본인만 조회). 모듈·모델·토큰·지연·도구 호출·오류로 진단해 주세요."(bccb5ada, #925) · 요약 배지 "문서 안내 설정 켜짐/꺼짐"·"문서 안내 사용 가능/불가" + 상태 3종(「문서 안내 상태」·「현재 문서 버전」·「운영 검토 버전」, 미설정 시 "미설정") 추가(e13018b7, #1023 · [[HBSA210]] 85) · TBU: 라이브 실사 이월 |
| 20-11 | ㄴ 앱 버전 | Tab | • label "앱 버전"(id app-versions, LNB 「플랫폼」 섹션) — 「Bundle 분배 소스」 + 「S3 Bundle 목록」 구성• 클릭 → switchTab('app-versions') → 탭 화면• 「S3 Bundle 목록」에 페이지네이션 신설 — 「페이지당」 30/50/100/"전체 (최대 1,000건)" + 첫·이전·번호·다음·마지막 버튼. 앱 변경·플랫폼(iOS/Android) 전환 시 1페이지로 복귀 - 건수 라벨은 S3 스캔 완료 전 「확인된」, 완료 후 「총」 | bundleVersionPage* · bundle-version-pagination.ts | 페이지네이션 신설 · 전용 사양서 미작성(신규 화면 후보) · 세부 사양 = 갱신 대기 (코드 반영: 2fd3cc0, #866) · 「Bundle 분배 소스 › 연결 확인」이 S3 단계는 통과하고 CloudFront HEAD 단계에서만 「연결할 수 없어요」로 실패하던 결함 수정(821bb67, #864) · Bundle 후보 인덱스로 목록 조회 성능 개선은 백엔드 — 화면 영향 = 갱신 대기(c1f2668, #871) · TBU: 라이브 실사 이월 |
| 20-12 | ㄴ 앱 백엔드 | Tab | • label "앱 백엔드"(id app-backends, LNB 「플랫폼」 섹션 — 「엔드포인트」와 「앱 버전」 사이) — 「공개 백엔드」 + 「병원 코드」 구성• 클릭 → switchTab('app-backends') → 탭 화면• 「병원 코드」에 조직 연결·동기화 신설: 코드 추가 폼 「코드를 쓰는 조직」(기본 "연결 안 함(디스커버리 전용)", 조직당 1개) · 목록 「조직」·「동기화」 컬럼 · 행 「동기화」 버튼 - 동기화 배지: "동기화됨" / "변경 대기" / "대기" / "실패" / "충돌" / "미동기화" / "대상 아님" (마우스오버 = 마지막 오류 또는 적용 시각) - 등록·저장 후 반영 실패 시 "…조직 API 서버 반영은 실패했어요: {원인}. 「동기화」로 다시 시도할 수 있어요." | /api/app-backends/codes/*/sync · hospital-code:sync · 관리자 직원 앱 도입 {회사코드} | 기존 탭 — 전용 사양서 미작성(HBSA 신규 화면 후보) · 세부 사양 = 갱신 대기 (코드 반영: 49cd4e65, #973 MED-840) · 병원 코드는 works 가입 링크 https://{랜딩 호스트}/works/join?code={병원코드}로 앱 설치·자동 연결에 쓰임([[HBEA100]] 00-1, #1018) · TBU: 라이브 실사 이월 |
| 30 | 에러 배너 | Alert | tabError 존재 시 상단 red 배너에 텍스트 표시 | 각 탭 로더 | |
| 40 | 콘텐츠 영역 | - | main 스크롤 영역에 8탭 include + provision 모달([[HBSA211]]) 슬롯 | - | |
| 50 | 로딩 상태 | Spinner | isLoading 시 별도 로딩 화면("연결 중...", orange 스피너) | loading.html | init 중 |
권한 / 상태 요약
| 시나리오 | 트리거 | 결과 | 비고 |
|---|---|---|---|
case01 [탭 전환] | 탭 클릭 | 해당 탭 로더 실행·렌더 | |
case02 [로드 실패] | 프로시저 오류 | tabError 배너 | |
case03 [로그아웃] | logout 클릭 | Signin 복귀 |
OQ
- SUPPORT 계정의 탭 가시성 차등 여부 = 코드상 탭 배열 고정, 역할별 hide 로직 미발견 TBU
- 로그아웃 시 서버 세션·볼트 자격증명 정리 여부 = TBU