Callout 컴포넌트

Callout 컴포넌트는 사용자에게 중요한 정보, 경고, 에러 등을 시각적으로 눈에 띄게 알리기 위한 컴포넌트입니다. 다양한 테마와 스타일을 지원하여 여러 상황에 맞게 사용할 수 있습니다.

정보 알림

여기에 추가 정보를 넣을 수 있습니다.

기본 사용법

<template>
    <callout
        icon="info"
        type="filled"
        theme="info"
        title="정보 알림"
        description="여기에 추가 정보를 넣을 수 있습니다."
    />
</template>

<script setup lang="ts">
import { Callout } from '@/packages/vue-components/src/callouts';
</script>

Props

Prop	타입	필수	기본값	설명
icon	IconTypes	✓	-	표시할 아이콘. @/icons에서 제공되는 아이콘 타입을 사용합니다.
type	'filled' | 'outlined'	✓	-	배경 스타일. filled는 배경색이 있고, outlined는 테두리만 있습니다.
title	string	✓	-	Callout의 제목. HTML을 포함할 수 있습니다.
description	string	-	-	추가 설명 텍스트. 이 값이 제공되면 verbose 모드로 표시됩니다. HTML을 포함할 수 있습니다.
theme	'primary' | 'info' | 'success' | 'warning' | 'error'	✓	-	컬러 테마. 상황에 맞는 색상을 선택할 수 있습니다.

표시 모드

Callout 컴포넌트는 내부적으로 두 가지 표시 모드를 지원합니다:

• Compact 모드: description이 제공되지 않을 때 사용됩니다. 아이콘과 제목만 표시됩니다.
• Verbose 모드: description이 제공될 때 사용됩니다. 아이콘, 제목, 그리고 추가 설명이 표시됩니다.

테마

다음 테마가 지원됩니다:

• primary: 기본 브랜드 색상을 사용합니다.
• info: 정보 제공 목적으로 사용됩니다 (회색 계열).
• success: 성공 또는 긍정적인 메시지에 사용됩니다 (녹색 계열).
• warning: 주의가 필요한 메시지에 사용됩니다 (주황색 계열).
• error: 오류 또는 중요한 경고에 사용됩니다 (빨간색 계열).

스타일 타입

각 테마는 두 가지 스타일로 표시할 수 있습니다:

• filled: 배경색이 적용된 스타일입니다.
• outlined: 테두리만 있는 스타일입니다.

슬롯

컴포넌트 내에 커스텀 콘텐츠를 추가하려면 기본 슬롯을 사용할 수 있습니다.

사용 예시

Info 테마

Info - Filled - Compact

이 기능은 베타 버전입니다. 주의해서 사용하세요.

Info - Filled - Verbose

Info - Outlined - Compact

정보 제공용 Callout입니다. 중요한 정보를 표시할 수 있습니다.

Info - Outlined - Verbose

Success 테마

Success - Filled - Compact

작업이 성공적으로 완료되었습니다. 계속 진행하세요.

Success - Filled - Verbose

Success - Outlined - Compact

작업이 성공적으로 완료되었습니다. 추가 작업이 필요하지 않습니다.

Success - Outlined - Verbose

Warning 테마

Warning - Filled - Compact

이 작업은 되돌릴 수 없습니다. 진행하기 전에 데이터를 백업하세요.

Warning - Filled - Verbose

Warning - Outlined - Compact

제한된 기능입니다. 일부 기능이 정상적으로 동작하지 않을 수 있습니다.

Warning - Outlined - Verbose

Error 테마

Error - Filled - Compact

연결에 실패했습니다. 네트워크 상태를 확인하고 다시 시도해주세요.

Error - Filled - Verbose

Error - Outlined - Compact

오류가 발생했습니다. 시스템 관리자에게 문의하세요.

Error - Outlined - Verbose

Primary 테마

Primary - Filled - Compact

중요한 정보입니다. 여기를 클릭하여 자세한 내용을 확인하세요.

Primary - Filled - Verbose

Primary - Outlined - Compact

문서 링크입니다. 여기를 클릭하여 자세한 문서를 참조하세요.

Primary - Outlined - Verbose