Feedback
사용자 행동이나 시스템 상태에 대한 결과를 즉시 전달해요. 화면 흐름을 방해하지 않고 상황을 인지시켜요 — Tooltip · Toast.
Tooltip
특정 요소에 대한 보조 설명을 짧게 제공해요. 트리거에 마우스를 올리거나 포커스하면 나타나요 (순수 CSS · RSC-safe). side·align 으로 8방향을 지원해요.
위쪽 설명아래쪽 설명오른쪽 설명이 값은 기기의 고유 식별자예요
tsx
import { Tooltip } from '@openiot/ui'
<Tooltip content="보조 설명" side="top">
<button>hover me</button>
</Tooltip>Toast
작업 결과나 상태 변화를 간단한 메시지로 알려요. 화면 하단에 잠시 노출돼요. icon·action 을 조합할 수 있어요.
토스트 메시지가 나왔어요.
저장을 완료했어요.
항목을 삭제했어요.
실제 사용은 ToastProvider + useToast() 로 큐·자동 닫힘을 처리해요.
tsx
import { ToastProvider, useToast } from '@openiot/ui'
// 앱 루트
<ToastProvider>{children}</ToastProvider>
// 컴포넌트
const { toast } = useToast()
toast({ message: '저장했어요.', icon: <CircleCheckFilledIcon className="text-success" /> })Props
Tooltip
| Prop | Type | Default | 설명 |
|---|---|---|---|
| content | ReactNode | — | 말풍선 내용 (텍스트/이미지) |
| side | 'top' | 'bottom' | 'left' | 'right' | 'top' | 표시 방향 |
| align | 'start' | 'center' | 'end' | 'center' | 교차축 정렬 |
Toast
| Prop | Type | Default | 설명 |
|---|---|---|---|
| Toast.icon | ReactNode | — | 선행 아이콘 (색은 아이콘에 지정) |
| Toast.action | ReactNode | — | 후행 텍스트 액션 |
| useToast().toast | (options) => void | — | 큐에 토스트 추가 |
| ToastOptions.duration | number | 3000 | 자동 닫힘 ms |