ReviewPanel
원본: projects/skill-lens/design/components/ReviewPanel/README.md
상태: Experimental(초안), 접근성 △, 다크 ✓, 코드 ✗
시험(0.18): 검토 서랍. 사람 사이 이동(J/K), 반영과 미반영(A/R), 처리한 항목은 한 줄로 접힘. 실무자가 고른 레벨은 잠긴 글, 바뀐 것마다 조직 표준 / 실무자 제안 / 반영과 미반영, 끝에 검토완료
실무자의 스킬 수정 한 건을 검토할 때 쓰는 표시 규칙입니다. 서랍의 화면 흐름(순서, 아래 고정 행동, 다음 사람으로 넘기기)은 화면 설계 단계 후보로 옮겼습니다(archived/screen-candidates/ReviewPanel-flow.md).
쓰는 곳
검토 서랍 안의 스킬 수정 한 건.
구성(화면이 넘겨줄 것)
스킬 이름, 실무자가 고른 레벨, 조직 표준 글, 실무자 제안 글, 출처, 처리 상태.
규칙
- 머리에 남은 사람 수(
sl-review__count)와 이전, 다음 사람 이동(J/K)을 둡니다. 지금 항목의 [반영] [미반영]은 A/R 단축키(sl-kbd로 표시). 처리한 항목(is-done)은 한 줄로 접힙니다. - 실무자가 고른 레벨은 잠긴 글("실무자 선택 Lv 5" + 잠금 아이콘)로만 보입니다. 바꾸는 입력을 두지 않습니다(P3).
- 수정 전후는 세 칸: 조직 표준 / 실무자 제안 / [미반영] [반영]. 폰은 위아래로 쌓습니다.
- 추가, 삭제, 수정은 색만이 아니라 "추가", "삭제", "수정" 꼬리를 붙입니다. 더한 글은 밑줄, 뺀 글은 취소선, 안 바뀐 글은 흐리게.
- 실무자 제안에는 출처를 적습니다(실무자, 렌지 제안을 실무자가 고름 등).
- 미반영 사유는 선택입니다. 반영과 미반영은 한 건씩 정하고 일괄로 하지 않습니다.
- 반영 대기가 남아도 검토완료(사람 단위)는 할 수 있습니다. 막히는 것은 결과확정(회차 단위)입니다(도메인 규칙 6).
- 이상신호는 그 이름 그대로 쓰고, 판정이 아니라는 설명 한 줄을 붙입니다.
접근성
- 꼬리 글이 상태를 말하므로 색은 보조입니다. 잠금 아이콘은
aria-hidden, 글 "실무자 선택"이 뜻을 전합니다.
견본 코드
AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.
<!-- @dsCard group="Layout" height=900 width=960 subtitle="시험(0.18): 검토 서랍. 사람 사이 이동(J/K), 반영과 미반영(A/R), 처리한 항목은 한 줄로 접힘. 실무자가 고른 레벨은 잠긴 글, 바뀐 것마다 조직 표준 / 실무자 제안 / 반영과 미반영, 끝에 검토완료" -->
<style>body{margin:0;padding:var(--space-6);background:var(--canvas)}.stack{display:flex;flex-direction:column;gap:var(--space-4)}.row2{display:flex;flex-wrap:wrap;gap:var(--space-6);align-items:flex-start}.ph{width:390px;max-width:100%}.pc{width:880px;max-width:100%}.cap{font:600 12px/16px var(--font-sans);color:var(--ink-muted);margin:0 0 6px}.ph-screen{padding:var(--space-5);border-radius:var(--radius-xl);background:var(--surface-raised);box-shadow:0 0 0 1px var(--border)}</style><div class="sl"><div class="sl-review" role="dialog" aria-label="김하나 검토">
<div class="sl-review__head"><b>김하나</b><span>B2B 영업</span><span class="sl-status sl-status--attention"><i></i>검토필요</span><span class="sl-review__nav"><span class="sl-review__count">검토필요 3 / 12명</span><button class="sl-btn sl-btn--secondary sl-btn--sm" aria-label="이전 사람">이전<span class="sl-kbd">K</span></button><button class="sl-btn sl-btn--secondary sl-btn--sm" aria-label="다음 사람">다음<span class="sl-kbd">J</span></button></span></div>
<div class="sl-banner sl-banner--warn"><span><b>이상신호 1건:</b> 레벨 설명을 고치고 5를 골랐어요<br><small>이상신호는 다시 볼 곳을 알려 주는 표시예요. 판정이 아니에요.</small></span></div>
<div class="sl-review__item"><div class="sl-review__title">데이터 분석<span class="sl-chip sl-chip--neutral">수정</span><span class="sl-review__lock"><svg class="sl-ico sl-ico--sm" viewBox="0 0 24 24" aria-hidden="true"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>실무자 선택 <b>Lv 5</b></span></div>
<div class="sl-review__diff"><div class="sl-review__col"><small>조직 표준</small>지표를 설계해 <span class="is-same">의사결정에 써요</span></div><div class="sl-review__col"><small>실무자 제안(출처: 실무자)</small>지표를 설계해 <ins>팀 전체 보고 체계를 바꿔요</ins> <span class="sl-chip sl-chip--brand">수정</span></div></div>
<div class="sl-review__acts"><button class="sl-btn sl-btn--link sl-btn--quiet">미반영 사유</button><button class="sl-btn sl-btn--secondary sl-btn--sm">미반영<span class="sl-kbd">R</span></button><button class="sl-btn sl-btn--primary sl-btn--sm">반영<span class="sl-kbd">A</span></button></div></div>
<div class="sl-review__item"><div class="sl-review__title">현장 문제 개선<span class="sl-chip sl-chip--neutral">추가</span><span class="sl-review__lock"><svg class="sl-ico sl-ico--sm" viewBox="0 0 24 24" aria-hidden="true"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>실무자 선택 <b>Lv 3</b></span></div>
<div class="sl-review__diff"><div class="sl-review__col"><small>조직 표준</small><span class="is-same">없음(표준에 없는 스킬)</span></div><div class="sl-review__col"><small>실무자 제안(출처: 렌지 제안을 실무자가 고름)</small><ins>현장 문제를 찾아 개선안을 내요</ins> <span class="sl-chip sl-chip--brand">추가</span></div></div>
<div class="sl-review__acts"><button class="sl-btn sl-btn--link sl-btn--quiet">미반영 사유</button><button class="sl-btn sl-btn--secondary sl-btn--sm">미반영</button><button class="sl-btn sl-btn--primary sl-btn--sm">반영</button></div></div>
<div class="sl-review__item is-done"><div class="sl-review__title">SQL<span class="sl-chip sl-chip--neutral">삭제</span><span class="sl-review__lock"><svg class="sl-ico sl-ico--sm" viewBox="0 0 24 24" aria-hidden="true"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>실무자 선택 <b>없음</b></span></div>
<div class="sl-review__diff"><div class="sl-review__col"><small>조직 표준</small><span class="is-same">원하는 자료를 직접 뽑아요</span></div><div class="sl-review__col"><small>실무자 제안(출처: 실무자)</small><del>원하는 자료를 직접 뽑아요</del> <span class="sl-chip sl-chip--neutral">삭제</span></div></div>
<div class="sl-review__acts"><span class="sl-status sl-status--done"><i></i>반영됨</span></div></div>
<div class="sl-review__foot"><button class="sl-btn sl-btn--secondary">재진단 요청</button><button class="sl-btn sl-btn--primary">검토완료</button></div>
</div></div>이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.