SaveStatus
원본: projects/skill-lens/design/components/SaveStatus/README.md
상태: Experimental(시험), 접근성 △, 다크 ✓, 코드 ✗
시험(0.17): 저장 상태 한 줄. 방금 저장됨, 시각, 저장 중, 저장 안 됨 + 다시 시도
자기진단에서 고른 값이 저장됐는지 한 줄로 보입니다.
쓰는 곳
자기진단처럼 고른 값이 바로 저장되는 곳. 놓는 자리는 화면 설계에서 정합니다.
구성(화면이 넘겨줄 것)
상태(방금 저장됨, 시각, 저장 중, 저장 안 됨)와 다시 시도 처리.
규칙
- 바꾼 뒤 1~2초에 저장하고, 다음 스킬로 갈 때는 바로 저장합니다.
- 저장되기 전에는 그 스킬을 끝난 것으로 보이지 않습니다.
- 1분 안은 "방금 저장됨", 그 뒤는 "13:04 저장됨"(content.md 숫자와 날짜).
- 실패하면 빨간 글 "저장되지 않음, 다시 시도". 고른 값은 화면에 남깁니다.
접근성
role="status". 실패만 다시 알리고, 저장될 때마다 읽지는 않게 코드에서 조절합니다(확인 안 함).
견본 코드
AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.
<!-- @dsCard group="Feedback" height=140 subtitle="시험(0.17): 저장 상태 한 줄. 방금 저장됨, 시각, 저장 중, 저장 안 됨 + 다시 시도" -->
<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 stack"><span class="sl-save" role="status"><svg class="sl-ico sl-ico--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>방금 저장됨</span><span class="sl-save" role="status"><svg class="sl-ico sl-ico--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>13:04 저장됨</span><span class="sl-save is-saving" role="status"><svg class="sl-ico sl-ico--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>저장 중</span><span class="sl-save is-error" role="status"><svg class="sl-ico sl-ico--sm" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg>저장되지 않음, <button class="sl-btn sl-btn--link">다시 시도</button></span></div>이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.