HBEA110_Shell·탭바·알림
(Hereby) 직원 앱 > Shell·탭바·알림
| 앱 | 직원 앱 (Employee App / ESS, 포트 4002) |
| 대상 사용자 | 조건1 [직원(self scope)] |
| 프로토타입 | TBU |
| 관련 정책 | 상단 고정 바(FIG 정책 fixed-header) · [[POL_권한(RBAC)]] |
| Status | review |
| Owner | 카나 (PM) |
개요
직원 앱 공통 Shell — 상단 fixed header(날짜·알림 종·프로필 아바타) + 하단 4탭 탭바 + 알림 패널. 하단 탭바: "근무" / "메신저" / "결재" / "더보기". 메신저 탭에 미읽음 배지. 알림 패널: 헤더 "알림 (3)" + "모두 읽음" + 알림 항목 리스트. 원천 Notification / NotificationDelivery. 모바일 특성: 상단 fixed header(관찰상 날짜·알림·프로필 3요소, 라이브상 종 배지 포함 4요소로 관찰됨) + 하단 탭바 4탭 + 풀페이지 모달 패턴.
문서 히스토리
| 날짜 | 작성자 | 팀 | 변경 내용 |
|---|---|---|---|
| 2026-07-06 | 카나 | PM | 최초 작성 |
| 2026-07-10 | 카나 | PM | 라이브 기능 검토 반영 |
| 2026-07-13 | 카나 | PM | 버튼 행동 명세 보강 |
| 2026-07-21 | 카나 | PM | GC700 깊이 재작성 + fixed-header 정책 반영 |
| 2026-07-21 | 카나 | PM | 셀 스타일 확정판 적용 (콸 승인) |
| 2026-08-18 | 개발 | DEV | 알림 항목 클릭 딥링크 구현 반영(후순위 → 구현, design/employee-notice) |
| 2026-08-18 | 카나 | 라이브 재검증 정정 | 알림 항목 타임스탬프 라이브 표기 = 날짜만 점표기 "2026. 07. 26."(시각 없음). 기존 "2026.07.04 17:03:29"(시각 포함)는 미현행. 헤더 "알림 (n)"·"모두 읽음"은 미읽음 0건 상태라 미노출(0건 시 조건부 노출로 해석) |
| 2026-08-21 | 카나 | PM | PR #574 딥링크 라이브 실증(dev, 콸 지시 검토): CASE01 — "휴가 신청 접수" 클릭 → 결재 > 휴가신청 탭 정상 착지 / CASE02 — "접근 권한 요청" 클릭 → 다이얼로그 제목 "확인"·본문 "관리자에서 확인해 주세요."(앱이름 볼드)·[확인] 1버튼 원문 그대로 확인. 근거 = 커밋+라이브 이중으로 격상 |
Data I/O
Server → Client
| 변수 | DB 엔티티.컬럼 | 값 없을 때 | 비고 |
|---|---|---|---|
| $ | 클라이언트 당일 날짜 파생 | 당일값 필수 | "2026년 7월 6일 월" |
| $ | Employee self (이니셜) | 이니셜 fallback | "최" |
| $ | Notification.isRead=false 카운트 | 0(배지 hide) | "알림 (3)" |
| $ | Notification (제목/본문/타임스탬프) | Empty 문구(TBU) | 타임스탬프 "2026. 07. 26." (날짜만·점표기, 시각 없음 — 2026-08-18 정정) |
| $ | ConversationMember.unreadCount | 0 | "메신저 0" |
Client → Server
| 액션 | 전달 값 | tRPC procedure | 권한 토큰 |
|---|---|---|---|
| 모두 읽음 | (없음) | sdk.notification.markAllRead() (추정) | notification:update.self (추정) |
| 탭 전환 | tabKey (근무/메신저/결재/더보기) | (클라이언트 라우팅) | - |
| 알림 항목 클릭 | NotificationEvent.type (→ 목적지) + 알림 id | sdk.notification.markRead(id) + 클라이언트 라우팅 | notification:read.self (추정) |
markAllRead → Notification.isRead=true. 알림 항목 클릭 → 읽음 처리 + 화면 이동(2026-08-18 구현, 이전 FIG 정책 "후순위"). 목적지는 NotificationEvent.type 하나로 결정되며 표는 @hereby/core/constants의 resolveNotificationTarget 단일 정본(알림 목록·공용 알림 벨·서버 푸시 payload가 공유). markAllRead procedure 확정값 = TBU.
외부 통합 (알림 채널·발송)
| 외부 시스템 | 데이터 | 동기/비동기 | 비고 |
|---|---|---|---|
| 푸시(device_tokens) | platform별 푸시 발송 대상 | 비동기 | NotificationDelivery 추적 |
화면 플로우 (Shell 구조)
Shell·탭바·알림 사양표
| 번호 | 항목/기능명 | 타입 | 사양 및 기능 설명 | 연관/영향 범위 | 비고 |
|---|---|---|---|---|---|
| 00 | 화면 진입 조건 | - | 조건1 [직원 인증]. 모든 탭 공통 프레임. 미인증 시 Shell 미노출(로그인 리다이렉트) | ||
| 01 | 초기 상태 | Output | 상단 fixed header 고정 + 하단 탭바 노출 + 근무 탭 활성. 알림 패널 닫힘 | ||
| 10 | 상단 fixed header | - | 날짜 / 알림 / 프로필 요소 | FIG 정책 fixed-header | 정책 3요소 vs 라이브 4요소(종 배지 포함) 차이 → OQ |
| ㄴ11 | 날짜 헤더 | Text | "2026년 7월 6일 월"(당일 날짜·요일). 당일값 필수. 정책: "당일 날짜 표시" | FIG 정책 fixed-header | |
| ㄴ12 | 알림 종 | Button | • 알림 패널을 여닫는 헤더 버튼. self 알림만 노출 • 클릭 → 알림 패널 토글(열기/닫기) - CASE01 [미읽음>0]: 배지 카운트 표시 - CASE02 [미읽음 0]: 배지 hide | Notification | FIG 정책 fixed-header |
| ㄴ12-3 | ㄴ 정책 소재 | - | 정책: "알림 + 처리대기 통합" / "설정" 포함 / 항목 클릭 시 화면 이동(정책상 후순위였으나 2026-08-18 구현) | FIG 정책 fixed-header | 정책 "처리대기 통합"·"설정" 라이브 미관찰 → OQ |
| ㄴ13 | 프로필 아바타 | Button | • 프로필(더보기) 화면으로 이동하는 헤더 아바타. 이니셜 아바타("최"), 값없음 시 이니셜 fallback • 클릭 → [[HBEA500_더보기]] 화면 이동(FIG 정책) | Employee self · [[HBEA500_더보기]] | FIG 정책 fixed-header |
| 20 | 하단 탭바 | Tab | • 근무/메신저/결재/더보기 4탭을 전환하는 하단 네비게이션. 활성 탭 하이라이트 • 클릭 → 해당 탭 화면 전환 | 4탭 | |
| ㄴ21 | 메신저 미읽음 배지 | Badge | • 메신저 탭 미읽음 카운트 배지("메신저 0"), 0 시 hide • 공지 진입은 메신저 > "대화" 상단 "공지 n" 섹션 경유 | ConversationMember.unreadCount · [[HBEA300_메신저]] | |
| 30 | 알림 패널 | Panel | 헤더 "알림 (3)" + "모두 읽음" + 알림 항목 리스트 | Notification | TBU: 패널 오버레이/풀페이지 형태 |
| ㄴ31 | 알림 헤더 | Text | "알림 (n)" — n = 미읽음 카운트 | 원문 카피 | |
| ㄴ32 | 모두 읽음 | Button | • 알림 전체를 일괄 읽음 처리하는 기능 • 클릭 → 즉시 실행(컨펌 없음), 성공: 전체 읽음 처리·미읽음 카운트 0 | Notification.isRead=true | TBU: 실패 토스트 UI · 알림 0건 시 동작 무의미 |
| ㄴ33 | 알림 항목 | ListItem | • 개별 알림 항목({제목}/{본문}/{타임스탬프 "2026. 07. 26." (날짜만·점표기, 시각 없음 — 2026-08-18 정정)})을 표시하고 해당 화면으로 딥링크하는 요소 • 클릭 → 읽음 처리(즉시·낙관적) + 알림 유형별 화면 이동. 이동이 먼저, 읽음 처리는 뒤(서버 왕복 대기 없음) - CASE01 [목적지 있는 유형]: 해당 화면으로 이동하며 알림 화면은 닫힘 - CASE02 [목적지 없는 유형]: 컨펌 다이얼로그 "{앱이름}에서 확인해 주세요."(제목 「확인」·확인 버튼 1개, 앱이름 볼드) + 읽음 처리, 화면 유지(ㄴ33-2·ㄴ33-3 참조) | Notification · [[HBEA400_결재]] · [[HBEA300_메신저]] | 2026-08-18 구현 |
| ㄴ33-2 | ㄴ 알림 유형별 목적지 | - | • leave_request → 결재 > "휴가신청" / overtime·offsite_work → 결재 > "근무" / incentive → 결재 > "인센티브" / document·certificate → 결재 > "서류관리" / 대화 알림 → 메신저(해당 대화방) | resolveNotificationTarget(@hereby/core/constants) | 표를 늘릴 때 이 행도 함께 갱신 |
| ㄴ33-3 | ㄴ 이동 없는 유형 → 안내 앱 | - | • 직원 앱에 화면이 없는 알림은 이동 대신 안내 다이얼로그를 띄우고, 문구의 앱 이름은 워크스페이스 전환기 표기를 따른다 • "급여관리": memo(급여 시트 셀 메모) · allowance · deduction · education · system+grade_promotion(호봉 승급) • "관리자": permission_request · general(주당 근무시간 초과) • "내부 결재": system+work_type_change(근무형태 변경) | resolveNotificationAppLabel(@hereby/core/constants) | 새 알림 타입은 이동/안내 중 하나를 반드시 가진다(core 단위 테스트가 강제) |
| ㄴ33-E | ㄴ 알림 Empty | Text | 알림 0건 Empty 문구 표시 | Notification | TBU: Empty 원문 미확보 |
| ㄴ34 | ㄴ 알림 유형 (관찰) | - | "휴가 신청 접수"("{유형} 1일 신청이 접수되었습니다") / "접근 권한 요청"("안세희님이 권한을 요청했습니다 (admin): test") | 휴가 = LeaveRequest / 권한요청 = Admin 권한 흐름 | 원문 2종 카피 |
알림 채널·선호 보조표
| 구성 | 원천 | 설명 | 비고 |
|---|---|---|---|
| 이벤트 | NotificationEvent | 도메인 이벤트 → 알림 생성(type/action/title/message) | |
| 채널 선호 | NotificationPreference | per-event / per-channel enabled 토글(in_app 등) | 라이브 상세 TBU |
| mute | NotificationMuteSetting | event/target 단위 음소거 + expiresAt | TBU |
| 발송 이력 | NotificationDelivery | channel/status/isSeen/isRead/isDismissed 추적 | |
| 푸시 토큰 | device_tokens | platform별 푸시 발송 대상 |
권한·상태 분기 요약
| 시나리오 | 트리거 | 결과 | 비고 |
|---|---|---|---|
| CASE01 [미읽음 존재] | 알림 종 배지 표시 → 클릭 | 알림 패널 열림, "알림 (n)" | n>0 |
| CASE02 [모두 읽음 실행] | "모두 읽음" 클릭 | 미읽음 카운트 0, 배지 hide | 컨펌 없음 |
| CASE03 [프로필 클릭] | 상단 프로필 아바타 클릭 | 더보기 화면 이동 | FIG 정책 |
| CASE04 [항목 클릭 · 목적지 있음] | 알림 항목 클릭 | 읽음 처리 + 해당 화면 이동(결재 탭까지 지정) | 2026-08-18 구현 · 라이브 확인 |
| CASE05 [항목 클릭 · 목적지 없음] | memo·permission_request·system 등 클릭 | 컨펌 다이얼로그 "{앱이름}에서 확인해 주세요." + 읽음 처리, 화면 유지 | 직원 앱에 대응 화면 없음 |
Open Question
- FIG 정책 fixed-header "알림 + 처리대기 통합" 표현 vs 라이브 관찰(알림 패널 "알림 (3)"·"모두 읽음"만 관찰, 처리대기 통합 UI 미관찰) — 통합 여부·처리대기 항목 소스 라이브 재확인 필요
- FIG 정책상 알림 종 내 "설정" 진입점 — 라이브 미관찰, 노출 여부 TBU
- 알림 항목 클릭 딥링크 = 2026-08-18 구현(ㄴ33·ㄴ33-2·ㄴ33-3). 잔여: 지금 안내 다이얼로그로 처리 중인 유형 중 직원 앱 화면을 새로 줄 것이 있는지 — 특히 allowance·deduction(수당·공제 승인)은 급여명세서가 후보지만 확정분만 노출돼 방금 승인된 건이 안 보임
- 알림 Empty 상태 원문 문구 = TBU (미확보)
- fixed header 요소 수: 정책 3요소 vs 라이브 4요소(종 배지 포함) 정합 = 확인 필요
- 알림 카테고리/채널/mute 라이브 상세(per-event/per-channel/mute UI) = TBU
- 메신저 배지 vs 알림 배지 집계 규칙 = TBU