UI 가이드

다크 모드

ScTag ​

ScTag는 태그 형태로 표시되는 컴포넌트입니다.
텍스트 중심의 정보 표현 외에도 색상 커스터마이징, 크기 조절, 삭제 버튼 제공 등의 유연한 구성이 가능합니다.

✅ 기본 사용법 ​

태그 1
태그 2
태그 3
vue
<sc-tag value="태그 1" />
<sc-tag value="태그 2" />
<sc-tag value="태그 3" />

✨ 사용 예시 모음 ​

▸ 닫기 버튼 있는 태그 ​

close-btn : 버튼추가, @close : 닫기 버튼이 눌렸을때 이벤트

One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
Eleven
Twelve
Thirteen
Fourteen
Fifteen
Sixteen
Seventeen
Eighteen
Nineteen
Twenty
결과 : [ "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten", "Eleven", "Twelve", "Thirteen", "Fourteen", "Fifteen", "Sixteen", "Seventeen", "Eighteen", "Nineteen", "Twenty" ]
vue
<div class="flex flex-wrap gap-2">
  <sc-tag v-for="tag in tags" :key="tag" :value="tag" close-btn @close="onClose" />
</div>

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

<script setup>
const tags = ref([
'One',
'Two',
'Three',
'Four',
'Five',
'Six',
'Seven',
'Eight',
'Nine',
'Ten',
'Eleven',
'Twelve',
'Thirteen',
'Fourteen',
'Fifteen',
'Sixteen',
'Seventeen',
'Eighteen',
'Nineteen',
'Twenty',
]);

const onClose = (deleteValue) => {
tags.value = tags.value.filter((tag) => tag !== deleteValue);
};
</script>

▸ 크기 Size ​

One
Two
Three
One
Two
Three
vue
<div>
  <sc-tag value="One" size="small" />
  <sc-tag value="Two" size="medium" color="blue" />
  <sc-tag value="Three" size="large" color="red" />
  <sc-tag value="One" size="small" close-btn />
  <sc-tag value="Two" size="medium" color="blue" close-btn />
  <sc-tag value="Three" size="large" color="red" close-btn />
</div>

▸ 색상 지정 Color ​

미리 정해진 색상 또는 hex 컬러코드(#ffcc00) 를 입력하여 색상을 입힐 수 있습니다.

One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
vue
<div>
  <sc-tag value="One" />
  <sc-tag value="Two" color="black" />
  <sc-tag value="Three" color="blue" />
  <sc-tag value="Four" color="green" />
  <sc-tag value="Five" color="red" />
  <sc-tag value="Six" color="yellow" />
  <sc-tag value="Seven" color="#ffcc00" />
  <sc-tag value="Eight" color="#17B675" />
  <sc-tag value="Nine" color="#443084" />
  <sc-tag value="Ten" color="#dddddd" />
</div>

<div class="mt-5 flex flex-wrap gap-2">
  <sc-tag close-btn value="One" />
  <sc-tag close-btn value="Two" color="black" />
  <sc-tag close-btn value="Three" color="blue" />
  <sc-tag close-btn value="Four" color="green" />
  <sc-tag close-btn value="Five" color="red" />
  <sc-tag close-btn value="Six" color="yellow" />
  <sc-tag close-btn value="Seven" color="#ffcc00" />
  <sc-tag close-btn value="Eight" color="#17B675" />
  <sc-tag close-btn value="Nine" color="#443084" />
  <sc-tag close-btn value="Ten" color="#dddddd" />
</div>

🛠️ 속성 (Props) ​

이름타입기본값설명
valuestring-태그 안에 표시할 텍스트 (필수)
colorstring'light'배경색 이름 혹은 HEX 코드 (#xxxxxx) 지원
size'small' | 'medium' | 'large''medium'태그의 크기
closeBtnbooleanfalse닫기 버튼 노출 여부

📤 이벤트 (Emits) ​

이벤트 이름설명
click태그 클릭 시 발생 (정의된 로직 없음)
close닫기 버튼 클릭 시 발생, value가 함께 전달됨

🔳 슬롯 (Slots) ​

해당 컴포넌트는 슬롯을 지원하지 않으며, value props를 통해 텍스트를 입력합니다.

🎨 스타일 클래스 ​

클래스 이름설명
sc-tag기본 태그 래퍼
small작은 크기 스타일
medium중간 크기 스타일
large큰 크기 스타일
close닫기 버튼 영역