Components
컴포넌트(Component)는 일관된 디자인 원칙에 따라 설계된 재사용 가능한 UI 요소입니다. 현장 폰·품질관리자 태블릿·관제 웹 어디서나 같은 사용자 경험을 주도록 components.css 하나로 렌더링되며, 모든 예시는 실제 CSS 로 그린 것입니다. 각 페이지는 정의 → 사용/비사용 → 해부도 → 변형 → 상태 → 치수 → Do/Don't → 접근성 → 문구 → 코드 순서로 같은 형식을 따릅니다.
홈일지경보더보기
버튼
℃
기준 75.0℃ 이상냉동창고 A
-18.4℃
기준 안 · 3분 전
정상주의경보부적합
✓제출
✓검토
승인
| 센서 | 온도 (℃) | 상태 |
|---|---|---|
| 냉동창고 A | -18.4 | 정상 |
| 냉장 1 | 7.3 | 이탈 |
| 냉장 2 | 3.1 | 정상 |
리포트 반려
2026-09-29 (화) 일일 리포트를 작성자에게 돌려보냅니다.
리포트를 제출했습니다 · 검토 대기
아직 작성한 일지가 없습니다
오늘 점검을 마치면 여기서 결재를 올릴 수 있습니다.
~
FNA 스마트해썹 · (주)한결식품
금속검출기 점검 일지
2026-09-29 (화)
CCP2-PT-20260929
CCP2-PT-20260929
| 시각 | 라인 | Fe | SUS | 판정 |
|---|---|---|---|---|
| 08:00 | 1 | ○ | ○ | 적합 |
| 12:00 | 1 | ○ | ○ | 적합 |
| 12:00 | 3 | ○ | ✕ | 부적합 |
작성 김현장검토 이품질승인 최공장장
- 김현장12:00 기록 정정
- 중심온도
7.52℃75.2℃
- 김현장12:00 기록 작성
페이지네이션
페이지 형식
- 정의 — 무엇이고 무엇이 아닌지 한 문단.
- 언제 쓰고 언제 쓰지 않나 — 변형별 쓰는 자리와 피할 자리.
- 해부도 — 번호는 예시 바깥 거터에, 점선 상자와 안내선으로 요소를 가리킵니다.
- 변형 · 상태 · 치수 — 실제 CSS 로 렌더링한 예시와 px 표.
- Do · Don't · 접근성 · 문구 · 코드 — 원칙의 적용 사례, KWCAG 대응, 라벨 표, 복사해 쓰는 마크업.
상태 배지 제안 (소스 미반영) 이 붙은 컴포넌트(빈 상태 · 서명 패드 · 날짜/기간 · 인쇄 양식 · 수정 이력 · 페이지네이션)는 site/src/assets/proposed.css 의 참고 구현이며 채택되면 components.css 로 옮깁니다.
안정마지막 갱신 담당 디자인시스템 TF · jjo831@farmzone.kr소스 components.css · site/src/assets/proposed.css (제안 6종)Components · FNA 디자인 시스템 v1.0