Combobox
원본: projects/skill-lens/design/components/Combobox/README.md
상태: In Progress, 접근성 △(키보드 이동은 코드 쪽), 다크 ✓, 코드 ✗
검색해서 고르기: 비어 있음, 치는 중, 결과 없음, 고름, 직무는 별칭 일치. 폰은 시트
글을 치면 아래에 추천 목록이 뜨고 하나를 고르는 입력입니다.
쓰는 곳
회사 이름 찾기(공개 자료), 직무 이름 찾기(표준 직무 사전, 별칭 포함).
구성(화면이 넘겨줄 것)
라벨, 플레이스홀더, 출처 문장("공개 자료에서 3곳을 찾았어요"), 항목(이름, 한 줄 정보), 결과 없음 문장, 고른 값.
규칙
- 상태 넷: 비어 있음, 치는 중(일치 글자 굵게, 첫 항목 미리 선택), 결과 없음, 고름(채움 + 완료 점).
- 결과 없음은 오류가 아니라 분기입니다. "'입력값'으로 계속" 링크로 직접 쓰게 둡니다.
- 목록은 다섯까지. 더 찾으려면 글자를 더 칩니다.
- 직무 찾기는 별칭에 일치하면 이름 옆에 "별칭 세일즈"처럼 작게 보입니다(
sl-combo__alias). - 폰에서는 입력란을 누르면 시트가 열리고, 맨 위에 검색란이 고정됩니다.
접근성
- 위아래 화살표, Enter, Esc. 목록은
listbox, 항목은option.
견본 코드
AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.
<!-- @dsCard group="Input" height=1000 width=820 subtitle="검색해서 고르기: 비어 있음, 치는 중, 결과 없음, 고름, 직무는 별칭 일치. 폰은 시트" -->
<style>body{margin:0;padding:var(--space-4);background:var(--surface-sunken)}.g{display:grid;grid-template-columns:300px 300px;gap:var(--space-4);align-items:start}.cell{min-height:270px}.phone{margin-top:var(--space-4);position:relative;width:360px;height:380px;overflow:hidden;border-radius:var(--radius-xl);background:var(--surface-sunken)}</style>
<div class="sl g">
<label class="sl-field"><span class="sl-field__label">회사 이름</span><span class="sl-field__box"><svg class="sl-ico sl-ico--sm" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg><input class="sl-field__input" placeholder="회사 이름을 입력하세요"></span><span class="sl-field__help">공개 자료(DART, 국민연금)에서 찾아요</span></label>
<div class="cell"><div class="sl-combo"><label class="sl-field is-focus"><span class="sl-field__label">회사 이름</span><span class="sl-field__box"><svg class="sl-ico sl-ico--sm" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg><input class="sl-field__input" value="가온"></span></label>
<div class="sl-combo__list" role="listbox"><div class="sl-combo__source">공개 자료에서 3곳을 찾았어요</div>
<div class="sl-combo__item" role="option" aria-selected="true"><span><mark>가온</mark>에듀</span><span class="sl-combo__meta">교육 서비스업, 경기 성남</span></div>
<div class="sl-combo__item" role="option"><span><mark>가온</mark>미디어</span><span class="sl-combo__meta">방송, 서울</span></div>
<div class="sl-combo__item" role="option"><span><mark>가온</mark>전선</span><span class="sl-combo__meta">전기, 인천</span></div></div></div></div>
<div class="cell"><div class="sl-combo"><label class="sl-field is-focus"><span class="sl-field__label">회사 이름</span><span class="sl-field__box"><svg class="sl-ico sl-ico--sm" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg><input class="sl-field__input" value="웅진스킬원"></span></label>
<div class="sl-combo__list"><div class="sl-combo__empty"><b>공개 자료에서 못 찾았어요</b>이 이름을 그대로 쓰고, 정보는 다음 단계에서 직접 적을 수 있어요.<br><button class="sl-btn sl-btn--link sl-btn--flush">'웅진스킬원' 계속</button></div></div></div></div>
<label class="sl-field is-filled"><span class="sl-field__label">회사 이름</span><span class="sl-field__box"><input class="sl-field__input" value="가온에듀"><span class="sl-done" aria-label="확인됨"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span></span><span class="sl-field__help">교육 서비스업, 경기 성남, 약 1,270명</span></label>
<div class="cell"><div class="sl-combo"><label class="sl-field is-focus"><span class="sl-field__label">직무 이름</span><span class="sl-field__box"><svg class="sl-ico sl-ico--sm" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg><input class="sl-field__input" value="세일즈"></span></label>
<div class="sl-combo__list" role="listbox"><div class="sl-combo__source">표준 직무 사전에서 2개를 찾았어요</div>
<div class="sl-combo__item" role="option" aria-selected="true"><span>영업전문가 <span class="sl-combo__alias">별칭 <mark>세일즈</mark></span></span><span class="sl-combo__meta">영업</span></div>
<div class="sl-combo__item" role="option"><span>기술영업 <span class="sl-combo__alias">별칭 <mark>세일즈</mark> 엔지니어</span></span><span class="sl-combo__meta">영업</span></div></div></div></div>
</div>
<div class="sl phone"><div class="sl-scrim"></div><div class="sl-sheet" role="dialog" aria-modal="true"><div class="sl-sheet__handle"></div><div class="sl-sheet__head"><h2 class="sl-sheet__title">회사 찾기</h2></div>
<div class="sl-sheet__search"><label class="sl-field is-focus"><span class="sl-field__box"><svg class="sl-ico sl-ico--sm" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg><input class="sl-field__input" value="가온"></span></label></div>
<div class="sl-sheet__body sl-sheet__body--flush"><div class="sl-combo__source">공개 자료에서 3곳을 찾았어요</div>
<div class="sl-combo__item" role="option" aria-selected="true"><span><mark>가온</mark>에듀</span><span class="sl-combo__meta">교육 서비스업, 성남</span></div>
<div class="sl-combo__item" role="option"><span><mark>가온</mark>미디어</span><span class="sl-combo__meta">방송, 서울</span></div>
<div class="sl-combo__item" role="option"><span><mark>가온</mark>전선</span><span class="sl-combo__meta">전기, 인천</span></div></div></div></div>
이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.