Callout 컴포넌트

Callout은 중요한 상태, 경고, 에러, 가이드성 메시지를 전달하는 컴포넌트입니다.
아이콘, 타이틀, 설명, 메타 정보, 액션, 닫기 버튼은 모두 prop 또는 slot으로 제어할 수 있고, title / description / meta prop은 내부적으로 v-html로 렌더링됩니다.

Playground

아래 인터페이스에서 아이콘, 컬러, 타입, 설명, 버튼 구성을 직접 바꿔보면서 확인할 수 있습니다.

Basic

theme

type

layout

icon style

title HTML

Icon

icon

Meta

meta HTML

compact와 banner는 우측 inline, titleAndDescription은 하단 stacked로 표시됩니다.

Description

description HTML 원격 점검 메뉴 내에서 알림 발생 규칙(APM EVENT 룰)을 관리할 수 있습니다. <a href='#'>자세히 보기</a>

compact와 banner에서는 description이 렌더링되지 않습니다.

Action

button type

leading icon

trailing icon

button text

Close

닫기 버튼 표시 여부만 제어합니다.

Preview

APM 에이전트가 설치되지 않아 확인할 수 없는 차트들이 있습니다. 가이드 보기

JENNIFER Kubernetes 버전 1.0.47

마지막 발생 이벤트: 없음

Usage

<template>
    <Callout
        :icon="ICON_TYPE.info"
        theme="info"
        type="filled"
        layout="titleAndDescription"
        title="APM 에이전트가 설치되지 않아 확인할 수 없는 차트들이 있습니다."
        description="원격 점검 메뉴 내에서 알림 발생 규칙(APM EVENT 룰)을 관리할 수 있습니다. <a href='#'>자세히 보기</a>"
        meta="JENNIFER Kubernetes 버전 1.0.47"
        :action="{ text: '업그레이드', type: 'outlined' }"
        closeable
    />
</template>

<script setup lang="ts">
import { Callout, ICON_TYPE } from '@jennifersoft/vue-components-v2';
</script>

Props

Prop	타입	기본값	설명
icon	IconTypes	-	기본 아이콘입니다. #icon slot이 있으면 slot이 우선합니다.
type	'filled' | 'outlined'	'filled'	배경/외곽선 스타일입니다.
layout	'banner' | 'compact' | 'titleAndDescription'	undefined	콘텐츠 배치 방식입니다. 주어지지 않으면 설명 유무에 따라 compact 또는 titleAndDescription으로 추론됩니다.
theme	'primary' | 'info' | 'success' | 'warning' | 'error'	'primary'	상태 색상 타입입니다.
iconStyle	'plain' | 'contained'	'plain'	아이콘을 그대로 노출할지, 원형 배경 안에 넣을지 제어합니다.
title	string	''	제목입니다. v-html로 렌더링됩니다. #title slot이 있으면 slot이 우선합니다.
description	string	undefined	설명입니다. v-html로 렌더링됩니다. #description slot이 있으면 slot이 우선합니다.
meta	string	''	우측 또는 하단의 메타 정보입니다. v-html로 렌더링됩니다. #meta slot이 있으면 slot이 우선합니다.
action	string | CalloutAction	undefined	기본 액션 버튼입니다. #actions slot 또는 기본 슬롯과 함께 사용할 수 있습니다.
closeable	boolean	false	기본 닫기 버튼 표시 여부입니다. #close slot이 있으면 커스텀 닫기 UI를 사용할 수 있습니다.
closeButtonAriaLabel	string	'Close callout'	기본 닫기 버튼의 접근성 레이블입니다.

CalloutAction

필드	타입	기본값	설명
text	string	-	버튼 라벨입니다.
type	ButtonType	'outlined'	버튼 스타일입니다.
size	Size	'small'	버튼 크기입니다.
leadingIcon	IconTypes	undefined	버튼 앞 아이콘입니다.
trailingIcon	IconTypes	undefined	버튼 뒤 아이콘입니다.
disabled	boolean	false	버튼 비활성화 여부입니다.

Events

이벤트	설명
action	기본 액션 버튼을 클릭했을 때 발생합니다.
close	기본 닫기 버튼을 클릭했을 때 발생합니다.

Slots

Slot	설명
icon	아이콘 영역을 커스텀합니다.
title	제목 영역을 커스텀합니다.
description	설명 영역을 커스텀합니다.
meta	메타 정보 영역을 커스텀합니다.
actions	우측 액션 영역을 커스텀합니다. action, close slot prop을 받을 수 있습니다.
close	닫기 영역을 커스텀합니다. close slot prop을 받을 수 있습니다.
default	기존 호환용 액션 영역 슬롯입니다. actions와 동일한 위치에 렌더링됩니다.

Examples

기준 테마와 타입 조합별 예시는 아래처럼 확인할 수 있습니다. 각 섹션은 Compact, Banner, Title And Description 조합으로 구성되어 있습니다.

Info Filled

Compact

APM 에이전트가 설치되지 않아 확인할 수 없는 차트들이 있습니다.

Banner

APM 에이전트가 설치되지 않아 확인할 수 없는 차트들이 있습니다.

JENNIFER Kubernetes 버전 1.0.47

Title And Description

원격 점검 메뉴를 보고 계신가요?

원격 점검 메뉴 내에서 알림 발생 규칙(APM EVENT 룰)을 관리할 수 있습니다. 자세히 보기

JENNIFER Kubernetes 버전 1.0.47

Info Outlined

Compact

설치되지 않은 구성 요소가 있어 일부 차트는 비어 있을 수 있습니다.

Banner

설치 가이드를 확인한 뒤 필요한 에이전트를 추가하세요.

JENNIFER Kubernetes 버전 1.0.47

Title And Description

일부 데이터가 보이지 않는 이유를 확인해보세요.

필수 구성 요소가 누락된 경우 시계열 차트가 비어 보일 수 있습니다. 설치 문서

JENNIFER Kubernetes 버전 1.0.47

Success Filled

Compact

에이전트 연결이 정상적으로 완료되었습니다.

Banner

연결이 완료되었습니다. 추가 설정을 진행할 수 있습니다.

JENNIFER Kubernetes 버전 1.0.47

Title And Description

모든 필수 구성이 정상적으로 적용되었습니다.

클러스터와 APM 에이전트 연결이 완료되어 데이터를 수집할 수 있습니다. 상세 설정

JENNIFER Kubernetes 버전 1.0.47

Success Outlined

Compact

업데이트가 성공적으로 반영되었습니다.

Banner

반영된 설정을 확인하고 다음 단계를 진행하세요.

JENNIFER Kubernetes 버전 1.0.47

Title And Description

변경 사항이 시스템에 안전하게 반영되었습니다.

적용된 설정은 다음 배포 시점부터 반영됩니다. 변경 내역

JENNIFER Kubernetes 버전 1.0.47

Warning Filled

Compact

권장되지 않는 구성이 포함되어 있습니다.

Banner

일부 설정이 권장값과 다릅니다. 확인이 필요합니다.

JENNIFER Kubernetes 버전 1.0.47

Title And Description

잠재적인 성능 저하 요인이 감지되었습니다.

현재 설정으로는 이벤트가 누락될 수 있습니다. 권장 설정 보기

JENNIFER Kubernetes 버전 1.0.47

Warning Outlined

Compact

현재 환경에서는 일부 기능이 제한될 수 있습니다.

Banner

제약 사항을 검토하고 운영 정책을 다시 확인하세요.

JENNIFER Kubernetes 버전 1.0.47

Title And Description

이 설정은 운영 환경에 적용하기 전에 검토가 필요합니다.

감지된 조건에 따라 알림 누락 또는 지연이 발생할 수 있습니다. 운영 가이드

JENNIFER Kubernetes 버전 1.0.47

Error Filled

Compact

에이전트 연결에 실패했습니다.

Banner

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

JENNIFER Kubernetes 버전 1.0.47

Title And Description

연결이 끊어져 현재 데이터를 가져올 수 없습니다.

네트워크 또는 인증 설정에 문제가 있을 수 있습니다. 문제 해결 가이드

JENNIFER Kubernetes 버전 1.0.47

Error Outlined

Compact

요청 처리 중 오류가 발생했습니다.

Banner

오류 로그를 확인한 뒤 다시 시도해주세요.

JENNIFER Kubernetes 버전 1.0.47

Title And Description

시스템 오류로 인해 요청을 완료할 수 없습니다.

반복 발생 시 관리자에게 문의하거나 로그를 첨부해 주세요. 오류 로그

JENNIFER Kubernetes 버전 1.0.47

Primary Filled

Compact

새로운 기능을 사용할 수 있습니다.

Banner

업데이트된 메뉴 구조와 설정 흐름을 확인해보세요.

JENNIFER Kubernetes 버전 1.0.47

Title And Description

새롭게 바뀐 구성 방식으로 더 빠르게 설정할 수 있습니다.

이번 버전에서는 안내 문구와 설정 흐름이 개선되었습니다. 릴리즈 노트

JENNIFER Kubernetes 버전 1.0.47

Primary Outlined

Compact

구성 가이드를 확인하고 다음 단계를 진행하세요.

Banner

필수 문서를 먼저 확인하면 설정 시간을 줄일 수 있습니다.

JENNIFER Kubernetes 버전 1.0.47

Title And Description

문서를 기반으로 필요한 구성을 순서대로 진행하세요.

설치, 연결, 알림 설정까지 한 번에 점검할 수 있습니다. 문서 열기

JENNIFER Kubernetes 버전 1.0.47

Notes

• title, description, meta prop은 모두 v-html로 렌더링되므로 외부 입력을 그대로 넣을 때는 호출부에서 sanitize가 필요합니다.
• layout을 주지 않으면 description 유무에 따라 compact 또는 titleAndDescription으로 자동 결정됩니다. banner는 명시적으로 지정해야 합니다.
• compact와 banner는 meta를 inline으로 표시하고, titleAndDescription은 meta를 하단에 stacked로 표시합니다.
• compact와 banner는 description을 렌더링하지 않고, titleAndDescription에서만 description이 표시됩니다.
• action, closeable, meta, iconStyle, layout은 기존 API를 깨지 않도록 optional 확장으로 추가된 인터페이스입니다.