DiffView
자동 정리 문장과 내 수정을 나란히 비교.
- 라이브러리 전용
개요
미리보기
온보딩 가이드 설명 · 4 changes
3월부터 고객 온보딩 가이드를가이드 정리했다초안을 썼다.
4 unchanged lines
담당: 운영팀
범위: 신규 고객 12곳
기간: 3월–5월
형식: 문서와 체크리스트
검토: 매주 목요일금요일 오후오전
예시
상태
한 열
온보딩 가이드 설명 · 4 changes
3월부터 고객 온보딩
가이드를가이드정리했다초안을 썼다.4 unchanged lines
담당: 운영팀
범위: 신규 고객 12곳
기간: 3월–5월
형식: 문서와 체크리스트
검토: 매주
목요일금요일오후오전두 열
온보딩 가이드 설명 · 4 changes
Before
3월부터 고객 온보딩
가이드를정리했다.4 unchanged lines
담당: 운영팀
범위: 신규 고객 12곳
기간: 3월–5월
형식: 문서와 체크리스트
검토: 매주
목요일오후Now
3월부터 고객 온보딩 가이드 초안을 썼다.
4 unchanged lines
담당: 운영팀
범위: 신규 고객 12곳
기간: 3월–5월
형식: 문서와 체크리스트
검토: 매주 금요일 오전
변경 없는 줄 펼침
온보딩 가이드 설명 · 4 changes
3월부터 고객 온보딩
가이드를가이드정리했다초안을 썼다.담당: 운영팀
범위: 신규 고객 12곳
기간: 3월–5월
형식: 문서와 체크리스트
검토: 매주
목요일금요일오후오전되돌리기 안내
온보딩 가이드 설명 · 4 changes
되돌려도 지금 열 수 없는 원문은 다시 일치로 바뀌지 않아요.
3월부터 고객 온보딩
가이드를가이드정리했다초안을 썼다.4 unchanged lines
담당: 운영팀
범위: 신규 고객 12곳
기간: 3월–5월
형식: 문서와 체크리스트
검토: 매주
목요일금요일오후오전차이 없음 (영문 표본)
온보딩 가이드 설명 · Nothing has changed.
이렇게 · 이렇게 하지 않기
- 이렇게 되돌리기 전에 무엇이 바뀌는지 보여줄 때 쓴다. 기본으로 남는 쪽은 “내 수정”이다.
- 이렇게 추가와 삭제는 색 외에 +/− 기호와 밑줄·취소선으로도 구분한다.
- 이렇게 예전 문장으로 되돌려도 지금 열 수 없는 원문은 “원문 일치”가 되지 않는다고 함께 쓴다.
- 이렇게 21st 참고: AI Prompt Diff(elements- — Unified/Split 전환, “+4 −3” 머리글), File Diff(kvnkld — 줄 번호와 +/−), Commit(syeddhasnainn — 접힘), Github Inline Diff(jatin-yadav05). 코드 diff의 고정폭·줄 번호는 문장 비교에 맞지 않아 뺐고, 단어 단위 비교와 “다음 변경” 이동을 더했다.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
before | string | 3월부터 고객 온보딩 가이드를 정리했다.
담당: 운영팀
범위: 신규 고객 12곳
기간: 3월–5월
형식: 문서와 체크리스트
검토: 매주 목요일 오후 | 이전 글(자동 정리본 또는 수정 전 문장). 줄 단위, 그다음 단어 단위로 비교한다. |
after | string | 3월부터 고객 온보딩 가이드 초안을 썼다.
담당: 운영팀
범위: 신규 고객 12곳
기간: 3월–5월
형식: 문서와 체크리스트
검토: 매주 금요일 오전 | 지금 글(보통 내 수정, 기본으로 남는 쪽). |
mode? | 'inline' | 'side-by-side' | inline | inline은 한 열에 <del>/<ins>. side-by-side는 “이전”·“지금” 두 열(768px 미만이면 inline). |
collapsedUnchanged? | boolean | true | 바뀌지 않은 4줄 이상을 “변경 없음 n줄”로 접는다(<details>). |
title | ReactNode | 온보딩 가이드 설명 | 제목. 뒤에 변경 수가 붙는다(“· 변경 3곳”). |
note? | ReactNode | | 제목 아래 한 줄(되돌리기가 하는 일과 하지 않는 일). 비우면 없음. |
Intl.Segmenter | — | — | 단어 비교는 UI 로캘의 단어 경계를 쓴다(한국어·중국어 포함). 아주 긴 글은 줄 통째 교체로 표시한다. |
| 그 밖의 속성 | — | — | id, aria-* 등 네이티브 section 속성은 그대로 전달된다. className·style·children은 받지 않는다. |
접근성
키보드: “이전 변경”·“다음 변경” 버튼이 해당 변경(tabindex=-1)으로 초점을 옮긴다. 접힌 구간은 <summary>로 펼친다.
- <del>/<ins> 안에 보조기기 전용 “삭제:”·“추가:”가 있다. 화면의 +/− 기호는 대체 텍스트가 비어 있어 두 번 읽히지 않는다.
- 변경 수는 제목에 있다(“변경 3곳”). 두 열은 각각 <section aria-label="이전|지금">.
- forced-colors에서는 기호·밑줄·취소선·테두리로 구분한다. 모션 없음.