FNA Design System

검색 · 기간

이력·리포트·경보 목록은 기간 필터가 먼저, 검색은 그 안에서. 한 화면의 모든 차트·표·건수는 같은 기간을 보고, 필터는 URL 에 남아 심사 때 그대로 재현됩니다.

~

구조

줄내용비고
1. 기간프리셋 알약(오늘·7일·30일·90일·직접 입력) + 범위 입력화면당 하나, 맨 위
2. 범위 필터사업장 · 센서/라인 · 상태(정상·주의·경보·부적합) · 결재 상태select 또는 알약 다중 선택. 폰에서는 "필터" 버튼 → 시트
3. 검색텍스트 검색(센서명·담당자·문서 ID·사유)필터 결과 안에서. 폰은 앱바 우측 검색 아이콘
4. 결과 요약"1,284건 · 09-23 ~ 09-29 · 냉동 A, 경보" + 필터 초기화적용 중 필터를 칩으로 반복

화면

데스크톱 — 필터 줄 + 결과 요약 + 표
~
3건· 09-23 ~ 09-29냉동창고 A ✕경보 ✕
발생센서최고 (℃)지속확인
09-29 12:40냉동창고 A-13.818분박현장 12:58
09-26 03:12냉동창고 A-14.641분이품질 03:55
09-24 15:07냉동창고 A-14.99분박현장 15:20
폰 — 기간 알약 + 필터 버튼(적용 수) + 검색 아이콘
경보 이력
3건 · 냉동창고 A · 경보
09-29 12:40
18분 · 확인 박현장
-13.8℃
09-26 03:12
41분 · 확인 이품질
-14.6℃

규칙

  • 기본 기간: 관제 현황 오늘 · 이력·경보 7일 · 리포트 목록 30일. 최대 90일(그 이상은 월 리포트).
  • 기간을 바꾸면 그 화면의 모든 카드·차트·표·건수가 함께 바뀐다. 카드마다 다른 기간 금지.
  • 필터는 즉시 적용(적용 버튼 없음), 폰 시트에서만 "적용" 버튼. 적용된 필터는 칩으로 반복하고 ✕ 로 하나씩 해제.
  • 검색은 필터 결과 안에서 부분 일치, 300ms 디바운스, 2자 이상. 검색어는 결과에서 강조(<mark>).
  • 모든 상태는 URL 쿼리(?from=&to=&site=&sensor=&status=&q=)에 반영 — 뒤로가기·북마크·심사관 링크 공유.
  • 결과 0건은 빈 상태 "없음(필터)" + 필터 초기화 버튼. 필터가 없으면 "처음" 유형.
  • 시니어 모드: 필터 없음. 오늘/어제/그저께 큰 카드만.

Do · Don't

3건냉동창고 A ✕경보 ✕
Do 적용 중 필터를 칩으로 반복 + 건수
3건
Don't 필터가 접혀 무엇이 걸렸는지 안 보임
7일 → 냉동창고 A → 경보 → "박현장"
Do 검색 전에 기간·범위 필터
"냉동" 검색 → 12,480건
Don't 전체 기간 텍스트 검색부터서버 부하와 결과 폭주

문구

위치문구
결과 요약3건 · 09-23 ~ 09-29 · 냉동창고 A, 경보
검색 placeholder담당자 · 문서 ID · 사유
0건이 조건에 맞는 경보가 없습니다 · 기간을 넓히거나 필터를 확인하세요
범위 초과최대 90일까지 조회할 수 있습니다. 월 리포트에서 더 긴 기간을 볼 수 있습니다
필터 버튼필터 (2) · 필터 초기화 · 적용

안정마지막 갱신 담당 디자인시스템 TF · jjo831@farmzone.kr소스 screens/History/HistoryScreen.tsx · docs/dataviz.md §5Patterns · FNA 디자인 시스템 v1.0