FNA Design System

날짜 · 기간 선택

기간 프리셋(오늘·7일·30일·90일)이 먼저, 직접 입력은 그다음. 일지 화면은 하루 단위 이전/다음 이동, 이력 화면은 시작~끝 범위. 한 화면의 모든 차트와 표는 같은 기간을 봅니다.

~

제안 컴포넌트: .fna-daterange / .fna-cal 은 components.css 에 없습니다. 기존 화면은 네이티브 <input type="date"> 와 RN DateTimePicker 를 쓰고 있으며, 이 규격은 그 위에 얹는 프리셋·이동·범위 표시 규칙입니다.

정의

세 가지 형태가 있습니다. 기간 프리셋 + 범위 입력(이력·차트 필터), 하루 이동(일지: ◀ 9월 29일 (화) ▶), 달력(범위를 눈으로 고를 때, 기록 있는 날 표시). 날짜 표기는 표기 규칙을 따릅니다.

언제 쓰고 언제 쓰지 않나

  • 필터 줄에서는 프리셋을 먼저 보여주고, 직접 입력은 마지막 알약("직접 입력")을 눌렀을 때만 펼친다.
  • 일지처럼 하루가 단위인 화면은 범위가 아니라 ◀ ▶ 이동. 미래 날짜로는 못 간다.
  • 시니어 모드에서는 달력 대신 "오늘 / 어제 / 그저께" 큰 카드 세 개.

해부도 — 기간 필터

~
  1. 프리셋 알약오늘 · 7일 · 30일 · 90일 순서 고정. 기본값은 화면마다 정해진 하나(관제 오늘, 이력 7일)
  2. 직접 입력누르면 범위 입력이 펼쳐지고 프리셋 선택이 풀린다
  3. 범위 입력시작 ~ 끝, 네이티브 date. 끝 < 시작이면 오류 문장

변형

하루 이동 (일지)
9월 29일 (화)
코드
<div class="fna-daterange__nav"><button class="fna-btn fna-btn--outline fna-btn--icon" aria-label="이전 날"><svg class="icon-row" viewBox="0 0 24 24"><path d="m15 5-7 7 7 7"/></svg></button><span class="fna-daterange__label">9월 29일 (화)</span><button class="fna-btn fna-btn--outline fna-btn--icon" aria-label="다음 날" disabled><svg class="icon-row" viewBox="0 0 24 24"><path d="m9 5 7 7-7 7"/></svg></button><button class="fna-btn fna-btn--text fna-btn--sm">오늘</button></div>
달력 — 범위 선택 · 기록 있는 날 점 · 미래 비활성
2026년 9월
일월화수목금토
시니어 — 날짜는 큰 카드 셋

상태

상태표현
프리셋 선택알약 primary 채움. 범위 입력은 그 기간으로 채워져 읽기 전용
직접 입력알약 "직접 입력" 활성, 입력 편집 가능
오류끝 < 시작: 두 입력 aria-invalid + "종료일은 시작일 이후여야 합니다" · 90일 초과: "최대 90일까지 조회할 수 있습니다"
미래달력 셀 disabled + 취소선, 다음 날 버튼 disabled
기록 있음날짜 아래 5px 점(정상 ok · 부적합 nonconform)

치수

항목값
프리셋 알약.4em 1em · 13/700 · 간격 8
범위 입력40 · min-width 9.5em · tabular-nums
하루 이동 버튼40 × 40 아웃라인 · 라벨 min 8em 가운데
달력 폭 · 셀≤320 · 7열 · 셀 ≥32 (큰글씨 48) · 간격 2
선택·범위시작/끝 primary · 사이 primary-container · 오늘 1.5px 링
최대 범위90일 (그 이상은 월 리포트)

Do · Don't

Do 프리셋 먼저, 한 화면 한 기간
카드 A: 8월 · 카드 B: 최근 7일 · 카드 C: 달력 팝업
Don't 차트마다 다른 기간 · 달력부터 열기
9월 29일 (화)
Do 날짜 표기 통일: 2026-09-29 (화) / 9월 29일 (화)
09/29/2026
Don't 09/29/2026 · 2026.9.29 · Sep 29

접근성

  • 네이티브 type="date" 를 기본으로(모바일 OS 피커 이용). 달력 위젯은 role="grid", 화살표 이동, Enter 선택, 셀에 aria-label="9월 29일 화요일, 기록 있음".
  • 이전/다음 버튼 aria-label, 비활성 이유는 툴팁·힌트("미래 날짜는 선택할 수 없습니다").
  • 선택 상태는 색 + 굵기 + 라운드 형태. 기록 점은 툴팁·aria-label 로도 전달.

문구

프리셋: 오늘 · 7일 · 30일 · 90일 · 직접 입력. 상대 표기: 방금 전 · 3분 전 · 2시간 전 · 어제 · 3일 전(agoText). 절대 표기: 2026-09-29 (화) 12:40, 시니어는 9월 29일 (화)(koreanDate). 오류: "종료일은 시작일 이후여야 합니다", "최대 90일까지 조회할 수 있습니다".

코드

<div class="fna-daterange" role="group" aria-label="조회 기간">
  <div class="fna-tabs fna-tabs--pill"><button class="fna-tab is-active">오늘</button><button class="fna-tab">7일</button>…<button class="fna-tab">직접 입력</button></div>
  <div class="fna-daterange__inputs"><input class="fna-input" type="date" aria-label="시작일"><span class="fna-daterange__sep">~</span><input class="fna-input" type="date" aria-label="종료일" max="2026-09-29"></div>
</div>
<div class="fna-daterange__nav"><button class="fna-btn fna-btn--outline fna-btn--icon" aria-label="이전 날">…</button><span class="fna-daterange__label">9월 29일 (화)</span><button … aria-label="다음 날" disabled>…</button></div>

제안 (소스 미반영)마지막 갱신 담당 디자인시스템 TF · jjo831@farmzone.kr소스 제안 — proposed.css .fna-daterange · .fna-cal · docs/dataviz.md §5 필터 · senior/status.ts koreanDateComponents · FNA 디자인 시스템 v1.0