HBMD200_연간 흐름

(Hereby) 경영 대시보드 > [[HBMD100_Shell·사이드바]] > 운영현황 > 연간 흐름

개요

운영현황 상단의 "연간 흐름" 섹션이다. 선택 연도의 월별 청구 · 인건비 · 차액 추이를 라인 차트로 보여준다.
연도 선택(2026~2024) + series 토글(청구/인건비/차액) + 차트 + 범례 설명으로 구성된다. 청구 라인과 인건비 라인 사이 간격이 차액이며, 그 사이 영역을 흑자(초록)/적자(빨강)로 채워 시각화한다.
차트 y축 예시값은 **예시값(월 선택·연도 종속)**이며 구조 검증용이다.
⚠ 2026-08-18 라이브 augment: 운영현황에 신규 "연간 비교" 섹션 관찰(설명 "두 해의 청구 · 인건비 · 차액을 월별로 비교해요", 데이터 부족 시 안내 "연간 비교는 두 해 이상의 데이터가 필요해요. 지난해 청구 금액을 입력하면 올해와 나란히 비교해 드려요."). 청구 데이터 0 상태에선 연간 흐름의 차액 시리즈·차액 계산은 조건부 숨김(안내 "청구 금액이 없어 차액(영업손익)을 계산할 수 없어요...").

날짜	작성자	팀	변경 내용
2026-07-06	카나	PM	최초 작성
2026-07-10	카나	PM	라이브 기능 검토 반영
2026-07-21	카나	PM	GC700 깊이 재작성 + 확정 스타일
2026-08-18	카나	라이브 재검증 정정	신규 "연간 비교" 섹션 관찰(augment). 청구 0 상태 차액 시리즈 조건부 숨김 안내 확인

변수	엔티티.컬럼	값 없을 때	비고
$	연도 (예 "2026년")	current year	연도 select 2024-2026
$	월별 청구/인건비/차액 (MonthlyKpi[], 추정)	empty	라인 차트 소스

액션	전달 값	tRPC procedure	권한 토큰
연도 변경	year	해당 연도 trend 재조회	TBU
series 토글	seriesKey (청구/인건비/차액)	차트 series 표시 전환 (client)	-

번호	항목/기능명	타입	사양 및 기능 설명	연관/영향 범위	비고
00	노출 조건	-	• "운영현황" 진입 시 상단 노출	MonthlyKpi
10	제목	Text	• 섹션 제목 "연간 흐름"
20	설명	Text	• 섹션 설명 원문 "월별 청구 · 인건비 · 차액 추이예요"
30	연도 선택	Dropdown	• 조회 연도를 고르는 기능 "2026년" / "2025년" / "2024년" • 클릭 시: 해당 연도 trend 재조회	selectedYear
40	series 토글	Button group	• 차트에 표시할 시리즈를 켜고 끄는 기능 "청구" / "인건비" / "차액" • 클릭 시: 차트 series 표시 전환(client)	chart series
50	차트	Chart	• 월별 청구/인건비/차액 추이 라인 차트. x축 "1월"에서 "6월", y축 예시값 "-26백만 / 40백만 / 106백만 / 171백만 / 237백만"(월 선택·연도 종속) • 청구·인건비 두 선 사이 영역 채움	MonthlyKpi[]	예시값(월 선택 종속) · 7/14-16 코드 변경 반영 대기 — 라이브 확인 필요 (Chart.js 실데이터 플로우차트 전환 가능성)
60	범례 설명	Text	• 차트 범례 원문 "두 선 사이 영역은 흑자(초록) · 적자(빨강) / 단위: 백만원 · 청구 · 인건비 사이 간격 = 차액"		census 원문

시나리오	트리거	결과	비고
`CASE01 [연도 변경]`	연도 Dropdown 선택	해당 연도 trend 재조회	read-only
`CASE02 [series 토글]`	청구/인건비/차액 버튼	차트 series 표시 전환	client