패턴: 부품이 모여 만드는 흐름
원본: projects/skill-lens/design/patterns.md
컴포넌트는 부품이고, 패턴은 부품이 모여 반복되는 흐름입니다. 온보딩 11장의 상태 화면 대부분은 아래 다섯의 조합입니다.
1. 파일 올리기
DropZone(대기) → LoadingSteps("파일을 읽고 있어요", 단계 셋) → BottomSheet(읽은 결과: StatRow + 확인 필요 행) → 본 화면의 DataTable/ListRow.
- 용량·형식 오류는 DropZone 아래 2번 톤으로. 50MB 초과는 올리기 전에 막음.
- 읽는 중 창을 닫아도 계속됨("창을 닫아도 계속 진행돼요").
2. 확인 필요 처리
StatRow(attention 숫자) → 탭 "확인 필요 N" → DataTable 코랄 행 / ListRow → 행의 주 버튼 → BottomSheet(직무 고르기, 합치기) → Toast("직무를 연결했어요").
- 확인 필요가 0이 되면 StatRow의 attention 카드가 보통 카드로 바뀜. 코랄은 사라져야 "해결됨"이 보임.
- "N명 빼고 계속하기" 링크는 항상 보임(막다른 길 금지).
3. 되돌릴 수 없는 행동
BottomCTA(sl-btn--final) → Dialog(질문 + 무엇이 잠기고 무엇은 고칠 수 있는지) → LoadingSteps("초대를 보내고 있어요") → Completion.
- 확인 창은 이 패턴에서만. 되돌릴 수 있는 행동엔 Dialog 대신 Toast + 되돌리기.
- 일부 실패는 3번 톤 + [N명 보기], 전부 실패는 Completion 대신 3번 톤 화면.
4. AI 제안 수락
ListRow(ai 변형: 렌즈 점 + "렌지가 찾았어요") → [맞아요] 즉시 확정 / [다른 표준] → BottomSheet(검색 + 목록) → Toast.
- 제안은 사용자가 누르기 전까지 확정되지 않음. 화면을 나가면 제안 상태 유지.
- 열 개 이상이면 "전부 맞아요" 한 번 제공(각각 확인 강요 금지). 단, 되돌리기 Toast 필수.
5. 세션 만료·권한 없음
Dialog("30분 동안 쓰지 않아 로그아웃됐어요. 입력한 내용은 저장돼 있어요.") → Entry → 돌아오면 같은 단계.
- 권한 없음은
EmptyState+StateGlyph잠금 + "담당자에게 요청하기" 링크. - 중복 입력 금지(WCAG 3.3.7): 돌아왔을 때 앞 단계 값은 전부 남아 있어야 함.
6. 검토(관리자)
StatRow 필터("검토필요 12") → 명단 행 → ReviewPanel 서랍 → 스킬 수정마다 [반영] [미반영] → [검토완료] 또는 재진단 → Toast → 다음 사람.
- 검토필요가 남아 있으면 결과확정 버튼은 흐리고, 위에
Banner("검토필요 n명이 남았어요" + 목록). - 이상신호가 없는 사람은 명단에서 골라 한 번에 [검토완료](일괄 바).
7. 자기진단(실무자)
내 스킬셋(SkillChip, 빼기와 담기, 직접 만들기) → 한 스킬씩 LevelPicker + AskRenji → 확인 → 제출 → Banner(검토대기).
- 진행 중 값은 서버에 자동으로 저장하고 "저장됨, 10:42"를 보입니다. 다른 기기에서 이어서 할 수 있어야 합니다.
- 경고(예: 모두 같은 레벨)가 있으면 제출 전에 시트로 한 번 확인합니다.
8. 상태 화면
| 상태 | 쓰는 것 |
|---|---|
| 빈 목록 | EmptyState + 다음 행동 하나 |
| 처음 불러오기(1초 넘음) | LoadingSteps |
| 다시 불러오기(1초 안팎) | Skeleton |
| 불러오기 실패 | 그 자리 오류 문구 + 다시 시도 |
| 권한 없음 | EmptyState + StateGlyph 잠금 + 요청 링크 |
| 잠김(확정 뒤, 스킬셋 그대로만) | Banner 잠김 톤, 고치는 입력을 숨기고 이유를 씀 |
| 지난 회차 | 읽기 전용, 행동 버튼 없음, 머리에 회차 표시 |
9. 입력 확인
- 칸을 벗어난 뒤에 확인합니다. 치는 중에는 오류를 띄우지 않습니다.
- 오류는 그 칸 아래에, 무엇을 어떻게 고치면 되는지로.
- 보내기를 눌렀을 때 오류가 여럿이면 첫 오류 칸으로 포커스를 옮깁니다.
- 앞 단계에서 받은 값은 다시 묻지 않습니다.
10. 화면 틀(템플릿)
| 틀 | 구성 | 쓰는 화면 |
|---|---|---|
| 단계 흐름 | Shell + StepProgress + 카드 + 아래 버튼 | 온보딩 |
| 한 항목씩 | Shell + 진행 막대 + 항목 하나 + 이전과 다음 | 자기진단 |
| 목록과 서랍 | AdminShell + 보기 탭 + 도구 줄 + 표 + 서랍 | 실무자 명단, 검토 |
| 결과 보고 | AdminShell + ScoreBreakdown + 스킬 기준 표와 Heatmap + 행동 카드 | 조직 결과, 내 스킬준비도 |
| 세 칸 편집 | 직무 목록 / 필수와 확장 묶음 / 스킬 목록(폰은 탭 셋) | 스킬셋 개선 |
| 문서 | 가운데 읽기 폭 760 + 목차 | 이용약관, 가이드 |
이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.