TeamWicked Design System / 컴포넌트

검색 입력

현재 목록 또는 전체 제품의 관련 항목 찾기을 위한 컴포넌트.

적용 범위: TeamWicked 자체 브랜드·웹사이트. 호스팅 제품의 외형은 포함하지 않습니다. 공통 동작 규칙을 재사용하며, 다른 체계의 사례는 비교 근거일 뿐 스타일 상속이 아닙니다.

실행형 예제
  • 개발 서버실행 중
  • 테스트 서버중지됨
  • 문서 서버실행 중
3개 예제 서버
TeamWicked 웹사이트 토큰으로 구성한 동작 예제예시 데이터 · API 미연결

목적과 사용

현재 목록 또는 전체 제품의 관련 항목 찾기에 사용합니다. 페이지 이동 메뉴나 값 저장 필드처럼 오해시키지 않습니다.

구성과 변형

검색 범위 라벨, 입력, 실행/지우기, 결과 피드백. 변형의 외형은 각 제품의 기존 토큰을 사용합니다. Carbon의 크기·색·모서리·아이콘을 가져오지 않습니다.

동작 규칙

  • SRC-01 MUST: 검색 범위를 사용자에게 알립니다.
  • SRC-02 MUST: ‘결과 없음’과 ‘검색 실패’를 구분합니다.
  • SRC-03 SHOULD: 한글 IME 조합 중 요청을 과도하게 보내거나 Enter 제출하지 않습니다.
  • SRC-04 MUST: 늦게 끝난 이전 요청이 최신 결과를 덮지 않게 합니다.

콘텐츠 예시

좋음: ‘이 서버의 파일 검색’ / 피함: 검색 범위를 알 수 없는 돋보기.

우리 구현과 연결

TeamWicked 자체 웹사이트의 토큰과 CTA를 사용합니다. vPanel·Pterodactyl·Store의 구현은 WickedHost 체계에 속하며 이 체계의 컴포넌트를 정의하지 않습니다. 실행 예제의 원본 경로는 구현 코드 탭을 확인하세요.

상태와 검증

빈 쿼리·특수문자·한글·빠른 변경·지연·0건·권한 제한을 확인합니다.

일반·hover·focus·실행 중·실패·성공·disabled·read-only 중 해당하는 상태를 기록합니다. 해당하지 않는 상태를 임의로 만들지 말고 이유를 남깁니다. 검증 체크리스트에 증거를 연결합니다.

출처와 적용 범위

원본 확인 범위와 운영 적용 여부를 구분합니다. 실행형 예제의 동작 확인은 모든 운영 화면의 접근성 검증을 의미하지 않습니다.

Markdown 원본 다운로드