수정 이력

HACCP 기록은 고치는 것이 아니라 덧붙이는 것입니다. 누가·언제·무엇을·왜 바꿨는지 원래 값과 함께 남기고, 승인된 문서의 정정은 별지로 인쇄됩니다.

김현장12:00 기록 정정12:18
중심온도
~~7.52℃~~75.2℃
김현장12:00 기록 작성12:03

제안 컴포넌트: .fna-history 는 components.css 에 없습니다. 경보 센터의 "확인 이력"과 결재 카드의 서명 줄이 같은 구조를 쓰므로 공통화했습니다.

정의

수정 이력은 한 문서(일지·리포트·센서 설정)에 일어난 변경을 시간순으로 보여주는 세로 목록입니다. 항목마다 행위자·행위·시각이 한 줄, 값이 바뀌었으면 이전 → 이후 diff, 사유가 있으면 한 줄 더. 생성·정정·제출·검토·승인·반려·경보 확인이 항목 종류입니다.

언제 쓰고 언제 쓰지 않나

결재 문서 상세, 센서 기준값 변경, 경보 조치 기록 — 심사관이 "이 값은 누가 언제 바꿨나"를 물을 수 있는 모든 곳.
목록 화면에는 마지막 항목 한 줄만("이품질 검토 완료 · 18:40").
시스템 자동 기록(센서 수신)은 이력에 넣지 않는다 — 데이터가 곧 기록이다.

해부도

김현장12:00 기록 정정09-29 12:18
중심온도
~~7.52℃~~75.2℃
소수점 위치 입력 실수
김현장12:00 기록 작성09-29 12:03

점 · 선종류별 색: 생성 primary · 정정 warning · 승인 success · 반려 error · 기타 테두리만
행위자 + 행위이름 800 + 행위 문구 secondary. 역할은 툴팁
시각오른쪽 끝, MM-DD HH:mm tabular. 오늘이면 HH:mm 만
diff항목명 · 이전(취소선 error) → 이후(굵게 success). 값은 단위 포함
사유정정·반려에는 필수. "사유 · " 접두

변형

결재 문서 전체 이력 (최신이 위)

최공장장최종 승인 · 문서 잠김09-30 08:30
이품질검토 완료09-29 18:40
김현장다시 제출 (검토요청)09-29 18:02
김현장12:00 기록 정정09-29 17:50
중심온도
~~7.52℃~~75.2℃
판정
~~부적합~~적합
소수점 위치 입력 실수 (반려 사유 반영)
이품질반려09-29 16:10
기록 값 오류(온도/기준 재확인 필요)
김현장제출 (검토요청)09-29 15:40
김현장일지 작성 시작09-29 08:02

코드

<ol class="fna-history">
    <li class="fna-history__item is-approve"><div class="fna-history__head"><span class="fna-history__who">최공장장</span><span class="fna-history__what">최종 승인 · 문서 잠김</span><time class="fna-history__when">09-30 08:30</time></div></li>
    <li class="fna-history__item"><div class="fna-history__head"><span class="fna-history__who">이품질</span><span class="fna-history__what">검토 완료</span><time class="fna-history__when">09-29 18:40</time></div></li>
    <li class="fna-history__item"><div class="fna-history__head"><span class="fna-history__who">김현장</span><span class="fna-history__what">다시 제출 (검토요청)</span><time class="fna-history__when">09-29 18:02</time></div></li>
    <li class="fna-history__item is-edit"><div class="fna-history__head"><span class="fna-history__who">김현장</span><span class="fna-history__what">12:00 기록 정정</span><time class="fna-history__when">09-29 17:50</time></div><dl class="fna-history__diff"><dt>중심온도</dt><dd><del>7.52℃</del><ins>75.2℃</ins></dd><dt>판정</dt><dd><del>부적합</del><ins>적합</ins></dd></dl><p class="fna-history__reason">소수점 위치 입력 실수 (반려 사유 반영)</p></li>
    <li class="fna-history__item is-reject"><div class="fna-history__head"><span class="fna-history__who">이품질</span><span class="fna-history__what">반려</span><time class="fna-history__when">09-29 16:10</time></div><p class="fna-history__reason">기록 값 오류(온도/기준 재확인 필요)</p></li>
    <li class="fna-history__item"><div class="fna-history__head"><span class="fna-history__who">김현장</span><span class="fna-history__what">제출 (검토요청)</span><time class="fna-history__when">09-29 15:40</time></div></li>
    <li class="fna-history__item is-create"><div class="fna-history__head"><span class="fna-history__who">김현장</span><span class="fna-history__what">일지 작성 시작</span><time class="fna-history__when">09-29 08:02</time></div></li>
  </ol>

경보 확인 이력 (AlarmCenter)

박현장경보 확인 및 조치 기록12:58
사유
냉동고 문 열림 12분
조치
문 닫힘 확인, 성에 제거 후 −18℃ 복귀
시스템온도 이탈 경보 발생 · −13.8℃ (기준 −22~−15)12:40

코드

<ol class="fna-history">
    <li class="fna-history__item is-approve"><div class="fna-history__head"><span class="fna-history__who">박현장</span><span class="fna-history__what">경보 확인 및 조치 기록</span><time class="fna-history__when">12:58</time></div><dl class="fna-history__diff"><dt>사유</dt><dd>냉동고 문 열림 12분</dd><dt>조치</dt><dd>문 닫힘 확인, 성에 제거 후 −18℃ 복귀</dd></dl></li>
    <li class="fna-history__item is-reject"><div class="fna-history__head"><span class="fna-history__who">시스템</span><span class="fna-history__what">온도 이탈 경보 발생 · −13.8℃ (기준 −22~−15)</span><time class="fna-history__when">12:40</time></div></li>
  </ol>

목록에서는 한 줄

승인 완료최공장장 · 09-30 08:30· 정정 1건

상태

이력은 추가만 되고 편집·삭제되지 않습니다. 정정 항목은 접기/펼치기(diff 가 3항목 이상일 때 기본 접힘). 승인 이후 항목은 없으며 "문서 잠김"이 마지막 항목입니다.

치수

항목	값
점	12 · 테두리 2 · 세로선 2 (border)
항목 간격	16
본문 들여쓰기	32
글자	13 (시각 12) · diff 12
diff 상자	패딩 8/10 · surface-low · 라운드 8

Do · Don't

중심온도: ~~7.52℃~~75.2℃

Do 이전 값이 남는다

중심온도: 75.2℃ (수정됨)

Don't 덮어쓰기 — 이후 값만

소수점 위치 입력 실수

Do 정정에는 사유 필수

김현장 수정 · 17:50

Don't '수정' 한 단어

접근성

<ol> 시간 역순, 항목에 <time datetime>. 점 색은 장식이며 행위 문구가 뜻을 전달.
diff 는 <del>/<ins> 로 스크린리더가 "삭제됨/삽입됨"을 읽는다. 색(error/success) 외에 취소선·굵기.
접힌 diff 는 <details> 로 키보드 접근.

문구

종류	행위 문구
생성	일지 작성 시작 · 12:00 기록 작성
정정	12:00 기록 정정 + 사유
결재	제출 (검토요청) · 다시 제출 · 검토 완료 · 최종 승인 · 문서 잠김 · 반려 + 사유
경보	온도 이탈 경보 발생 · 값 (기준) · 경보 확인 및 조치 기록
설정	기준 온도 변경 (−20 → −18℃) + 사유

코드

<ol class="fna-history" aria-label="수정 이력">
  <li class="fna-history__item is-edit">
    <div class="fna-history__head"><span class="fna-history__who">김현장</span><span class="fna-history__what">12:00 기록 정정</span><time class="fna-history__when" datetime="2026-09-29T17:50">09-29 17:50</time></div>
    <dl class="fna-history__diff"><dt>중심온도</dt><dd><del>7.52℃</del><ins>75.2℃</ins></dd></dl>
    <p class="fna-history__reason">소수점 위치 입력 실수</p>
  </li>
</ol>
<!-- 종류: is-create is-edit is-approve is-reject (기본: 제출·검토·확인) -->

제안 (소스 미반영)마지막 갱신 2026-09-29담당 디자인시스템 TF · jjo831@farmzone.kr소스 제안 — proposed.css .fna-history · Rules 기록 무결성 · AlarmCenterScreen 확인 이력Components · FNA 디자인 시스템 v1.0