UI 가이드

다크 모드

ScTextField ​

ScTextField는 다양한 텍스트 입력 UI를 제공하는 공통 입력 컴포넌트입니다.
v-model을 통한 양방향 바인딩과 함께, 라벨, 플레이스홀더, 에러 메시지, 접두/접미 아이콘, 클리어 버튼 등의 기능을 지원합니다.

✅ 기본 사용법 ​

결과 :
vue
<div class="w-[150px] mt-5">
  <sc-text-field placeholder="입력해주세요" v-model="value" />
</div>

<div class="mt-5 text-sm">결과 : {{ value }}</div>

※ ScTextField는 전역으로 등록되어 있으므로 import 없이 사용할 수 있습니다.

✨ 사용 예시 모음 ​

▸ 사이즈 ​

결과 :
vue
<div class="w-[150px] mt-5">
  <sc-text-field placeholder="입력해주세요" v-model="value" size="small" />
</div>

<div class="w-[150px] mt-5">
  <sc-text-field placeholder="입력해주세요" v-model="value" size="medium" />
</div>

<div class="w-[150px] mt-5">
  <sc-text-field placeholder="입력해주세요" v-model="value" rounded large />
</div>

<div class="mt-5 text-sm">결과 : {{ value }}</div>

▸ 아이콘 ​

x아이콘을 누르거나 esc키를 누르면 clear이벤트가 전달됩니다.
검색 아이콘을 누르거나 enter키를 누르면 @search 이벤트가 발생합니다.

결과 : 안녕하세요
vue
<div class="w-[180px] mt-5">
  <sc-text-field
    placeholder="입력해주세요"
    v-model="text"
    @search="onSearch"
    medium
    clearable
    searchable
  />
</div>

<div class="w-[180px] mt-5">
  <sc-text-field
    placeholder="입력해주세요"
    v-model="text"
    @search="onSearch"
    medium
    clearable
    searchable
    rounded
  />
</div>
<div class="mt-5 text-sm">결과 : {{ text }}</div>

▸ disabled 비활성화 ​

vue
<sc-text-field placeholder="입력해주세요" v-model="text" disabled />

▸ readonly 읽기전용 ​

vue
<sc-text-field placeholder="입력해주세요" v-model="text" readonly />

▸ placeholder 플레이스홀더 ​

vue
<sc-text-field v-model="email" placeholder="이메일을 입력하세요." />

▸ mask 마스크 정규식 ​

Mask 표현식 입니다. #(숫자), A(대문자), a(소문자), N(숫자/대문자), n(숫자/소문자)와 특수기호의 조합으로 표현합니다.

표현식의 preset으로 number, english, korean 그리고 /로 시작 / 끝나는 정규식을 사용할 수 있습니다.

숫자만 mask="number"

결과 :
vue
<sc-text-field class="w-[200px]" placeholder="숫자" v-model="mask.number" mask="number" />
<div class="mt-5 text-sm">결과 : {{ mask.number }}</div>

영어/숫자만 mask="english"

결과 :
vue
<sc-text-field class="w-[200px]" placeholder="알파벳, 숫자" v-model="mask.english" mask="english" />
<div class="mt-5 text-sm">결과 : {{ mask.english }}</div>

한글/숫자만 mask="korean"

결과 :
vue
<sc-text-field class="w-[200px]" placeholder="한글, 숫자" v-model="mask.korean" mask="korean" />
<div class="mt-5 text-sm">결과 : {{ mask.korean }}</div>

정규식 mask="/[0-9]+/"

결과 :
vue
<sc-text-field class="w-[200px]" placeholder="정규식 숫자만 /[0-9]+/" v-model="mask.value1" mask="/[0-9]+/" />
<div class="mt-5 text-sm">결과 : {{ mask.value1 }}</div>

표현식 mask="####"

결과 :
vue
<sc-text-field class="w-[200px]" placeholder="숫자 최대 4개" v-model="mask.value2" mask="####" />
<div class="mt-5 text-sm">결과 : {{ mask.value2 }}</div>

표현식 mask="aAaAaA"

결과 :
vue
<sc-text-field class="w-[350px]" placeholder="소문자,대문자,소문자,대문자,소문자,대문자" v-model="mask.value3" mask="aAaAaA" />
<div class="mt-5 text-sm">결과 : {{ mask.value3 }}</div>

🛠️ 속성 (Props) ​

이름타입기본값설명
modelValuestring''입력 값 (v-model)
typestring'text'입력 타입
placeholderstring''플레이스홀더 문구
disabledbooleanfalse비활성화 여부
readonlybooleanfalse읽기 전용 여부
maskstring | RegExpundefined마스크 정규식 또는 preset
searchablebooleanfalse검색 아이콘 표시 여부
clearablebooleanfalse클리어 아이콘 표시 여부
size'small' | 'medium''medium'입력 크기
roundedbooleanfalse둥근 스타일 여부

📤 이벤트 (Emits) ​

이벤트 이름설명
update:modelValue입력 값 변경 (v-model)
search검색 아이콘 클릭 or Enter 시
clear클리어 버튼 클릭 or ESC 시

🔳 슬롯 (Slots) ​

현재 ScTextField는 슬롯을 지원하지 않습니다.

🎨 스타일 클래스 ​

클래스 이름설명
sc-text-field전체 wrapper 클래스
sc-text-field--disabled비활성화 상태
sc-text-field--readonly읽기 전용 상태
sc-text-field--clearable클리어 버튼이 있는 경우
sc-text-field--searchable검색 아이콘이 있는 경우
sc-text-field--rounded둥근 스타일인 경우
sc-text-field--small작은 사이즈 적용
sc-text-field--medium중간 사이즈 적용

📝 기타 참고사항 ​

  • mask는 "number", "english", "korean" preset 또는 정규식 문자열, RegExp 타입을 지원
  • 검색(Search)은 Enter 키 또는 돋보기 아이콘 클릭 시 @search 이벤트 발생
  • 클리어(Clear)는 ESC 키 또는 X 버튼 클릭 시 @clear 이벤트 발생