스낵바 Snackbar
스낵바는 사용자 행동에 대한 결과나 서비스 이용 중 발생한 중요도 낮은 메시지를 추가 행동과 함께 제공하는데 사용한다. 사용자의 주요 흐름을 방해하지 않으면서, 되돌리기 또는 다시 시도 등과 같이 간단한 조치를 포함한다.
기본
<KrdsSnackbar />를 App.vue에 한 번만 두고, 어느 컴포넌트에서든 useSnackbar().show({ title, message, icon, action, onAction })로 띄웁니다. action에 버튼 이름을 주면 텍스트 작업 버튼이 생기고, 누르면 스낵바를 닫고 onAction을 부릅니다(onAction에서 다시 show()하면 새 스낵바가 뜹니다). 닫기 버튼이나 hide()로 닫으며, 기본으로는 자동으로 사라지지 않고 duration(ms)을 주면 그 시간 뒤 닫힙니다. icon은 메시지 뜻을 강조할 때만 씁니다(ico-success-fill, ico-information-fill, ico-error-fill). 화면낭독기가 읽도록 role="status" 영역은 항상 두고 표시할 때만 내용을 넣습니다. 화면 하단에 고정되므로 예제를 별도 화면(iframe)에 띄웁니다.
vue
<script setup lang="ts">
import { ref } from 'vue'
import { KrdsButton, KrdsSnackbar, useSnackbar } from '@krds.ui/vue'
// 실제 앱에서는 <KrdsSnackbar />를 App.vue에 한 번만 두고, 각 화면에서 useSnackbar()로 띄웁니다
const snackbar = useSnackbar()
const sent = ref(0)
const send = () => {
sent.value++
snackbar.show({
title: '전송 완료',
message: `신청서를 ${sent.value}건 보냈습니다.`,
action: '목록으로',
onAction: () => alert('목록으로 이동')
})
}
const fail = () =>
snackbar.show({
icon: 'ico-error-fill',
title: '전송 실패',
message: '네트워크 오류로 보내지 못했습니다.',
action: '다시 시도',
onAction: send
})
</script>
<template>
<div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap">
<KrdsButton variant="primary" @click="send">신청서 보내기</KrdsButton>
<KrdsButton variant="secondary" @click="fail">실패 상황</KrdsButton>
<KrdsSnackbar />
</div>
</template>사용 지침
- 되돌리기, 다시 시도, 목록 이동처럼 사용자가 즉시 할 수 있는 간단한 조치를 메시지와 함께 줄 때 씁니다. 작업 버튼은 1개만 둡니다.
- 작업 버튼이 있으면
duration을 주지 않습니다. 시간이 지나 닫히면 키보드·화면낭독기 사용자가 작업 버튼에 닿기 전에 사라질 수 있습니다. - 중요하거나 긴급한 메시지, 두 문장 이상의 설명은 긴급 공지나 모달을 씁니다. 추가 행동이 없는 한 줄 알림은 토스트를 씁니다.
- 한 페이지에 스낵바를 하나만 표시하고, 여러 개를 겹치거나 쌓지 않습니다. 떠 있는 동안 다시
show()하면 내용이 바뀝니다. 토스트와 같은 자리에 뜨므로 토스트와 함께 띄우지 않습니다. - 하단 탭바나 플로팅 버튼과 겹치지 않게 앱 CSS에서
.krds-snackbar { --krds-snackbar--bottom: 8rem }처럼 위치를 조정합니다. - 원본 KRDS에 구현이 없는 컴포넌트로, 가이드의 구조·위치와 디자인 토큰으로 만들었습니다.