Notification 알림

우측 상단(네 모서리 모두 가능)의 알림 카드로, 잠시 머물러야 하는 피드백 정보를 담습니다: 제목 / 본문 / 시맨틱 아이콘 / 닫기 / 자동 사라짐 / 쌓기. 명령형 서비스 API(LhNotification.success(...)).

기본 사용법

vue

<script setup lang="ts">
import { LhNotification } from '@lh-ui/vue3'

const showBasic = () => {
  LhNotification.info({ title: '동기화 완료', content: '3개 변경사항이 클라우드에 동기화됨' })
}
</script>

<template>
  <LhButton @click="showBasic">알림 열기</LhButton>
</template>

vue

<script>
import { LhNotification } from '@lh-ui/vue3'

export default {
  methods: {
    showBasic() {
      LhNotification.info({ title: '동기화 완료', content: '3개 변경사항이 클라우드에 동기화됨' })
    },
  },
}
</script>

<template>
  <LhButton @click="showBasic">알림 열기</LhButton>
</template>

시맨틱 유형

vue

<script setup lang="ts">
import { LhNotification } from '@lh-ui/vue3'

const showInfo = () => LhNotification.info({ title: '알림', content: '내용' })
const showSuccess = () => LhNotification.success({ title: '성공', content: '백업 완료' })
const showWarning = () => LhNotification.warning({ title: '경고', content: '저장 공간 부족' })
const showDanger = () => LhNotification.danger({ title: '실패', content: '네트워크 연결 끊김' })
</script>

<template>
  <div class="demo-notification-row">
    <LhButton @click="showInfo">정보</LhButton>
    <LhButton @click="showSuccess">성공</LhButton>
    <LhButton @click="showWarning">경고</LhButton>
    <LhButton @click="showDanger">위험</LhButton>
  </div>
</template>

vue

<script>
import { LhNotification } from '@lh-ui/vue3'

export default {
  methods: {
    showInfo() {
      LhNotification.info({ title: '알림', content: '내용' })
    },
    showSuccess() {
      LhNotification.success({ title: '성공', content: '백업 완료' })
    },
    showWarning() {
      LhNotification.warning({ title: '경고', content: '저장 공간 부족' })
    },
    showDanger() {
      LhNotification.danger({ title: '실패', content: '네트워크 연결 끊김' })
    },
  },
}
</script>

<template>
  <div class="demo-notification-row">
    <LhButton @click="showInfo">정보</LhButton>
    <LhButton @click="showSuccess">성공</LhButton>
    <LhButton @click="showWarning">경고</LhButton>
    <LhButton @click="showDanger">위험</LhButton>
  </div>
</template>

팝업 위치

position이 네 모서리를 지원합니다.

vue

<script setup lang="ts">
import { LhNotification } from '@lh-ui/vue3'

const showAt = (position) => {
  LhNotification.info({ title: '위치 예시', content: position, duration: 3000, position })
}
</script>

<template>
  <div class="demo-notification-row">
    <LhButton @click="showAt('top-right')">오른쪽 위</LhButton>
    <LhButton @click="showAt('top-left')">왼쪽 위</LhButton>
    <LhButton @click="showAt('bottom-right')">오른쪽 아래</LhButton>
    <LhButton @click="showAt('bottom-left')">왼쪽 아래</LhButton>
  </div>
</template>

vue

<script>
import { LhNotification } from '@lh-ui/vue3'

export default {
  methods: {
    showAt(position) {
      LhNotification.info({ title: '위치 예시', content: position, duration: 3000, position })
    },
  },
}
</script>

<template>
  <div class="demo-notification-row">
    <LhButton @click="showAt('top-right')">오른쪽 위</LhButton>
    <LhButton @click="showAt('top-left')">왼쪽 위</LhButton>
    <LhButton @click="showAt('bottom-right')">오른쪽 아래</LhButton>
    <LhButton @click="showAt('bottom-left')">왼쪽 아래</LhButton>
  </div>
</template>

클릭 가능한 알림

onClick을 넘기면 카드가 버튼 시맨틱을 갖게 되어 Tab으로 포커스할 수 있고 Enter / Space로 트리거할 수 있습니다.

vue

<script setup lang="ts">
import { LhNotification } from '@lh-ui/vue3'

const showClickable = () => {
  LhNotification.info({
    title: '새 버전 확인',
    content: '클릭하여 업데이트 로그 보기',
    duration: 0,
    onClick: () => window.open('#', '_blank'),
  })
}
</script>

<template>
  <LhButton @click="showClickable">동작이 있는 알림</LhButton>
</template>

vue

<script>
import { LhNotification } from '@lh-ui/vue3'

export default {
  methods: {
    showClickable() {
      LhNotification.info({
        title: '새 버전 확인',
        content: '클릭하여 업데이트 로그 보기',
        duration: 0,
        onClick: () => window.open('#', '_blank'),
      })
    },
  },
}
</script>

<template>
  <LhButton @click="showClickable">동작이 있는 알림</LhButton>
</template>

닫기 버튼

show-close로 닫기 버튼 표시를 제어하고(기본 표시), close-label로 그 접근성 이름을 커스터마이징합니다.

vue

<script setup lang="ts">
import { LhNotification } from '@lh-ui/vue3'

const notifyClosable = () => LhNotification.info({ title: '알림', content: '수동으로 닫을 수 있습니다', showClose: true, closeLabel: '확인했습니다, 닫기' })
const notifyNoClose = () => LhNotification.info({ title: '알림', content: '자동으로 닫힐 때까지 기다려야 합니다', showClose: false })
</script>

<template>
  <LhButton @click="notifyClosable">닫기 버튼 표시</LhButton>
  <LhButton @click="notifyNoClose">닫기 버튼 없음</LhButton>
</template>

vue

<script>
import { LhNotification } from '@lh-ui/vue3'

export default {
  methods: {
    notifyClosable() {
      LhNotification.info({ title: '알림', content: '수동으로 닫을 수 있습니다', showClose: true, closeLabel: '확인했습니다, 닫기' })
    },
    notifyNoClose() {
      LhNotification.info({ title: '알림', content: '자동으로 닫힐 때까지 기다려야 합니다', showClose: false })
    },
  },
}
</script>

<template>
  <LhButton @click="notifyClosable">닫기 버튼 표시</LhButton>
  <LhButton @click="notifyNoClose">닫기 버튼 없음</LhButton>
</template>

API

LhNotification Props

프로퍼티	설명	타입	기본값
type	시맨틱 유형	`"success" \| "warning" \| "error" \| "info" \| "danger"`	`'info'`
title	제목	`string`	—
content	본문 내용	`string`	—
showClose	닫기 버튼 표시 여부	`boolean`	`true`
closeLabel	닫기 버튼의 접근성 이름(넘기지 않으면 언어 팩 `notification.close` 사용)	`string`	—
onClick	카드 클릭 콜백(넘기면 카드가 button 시맨틱으로 표시)	`() => void`	—
sx	sx 빠른 레이아웃 속성	`LhSxProps`	—

서비스 메서드: LhNotification(options) / LhNotification.success/info/warning/danger(options), { close } 핸들을 반환합니다; 그 외에 LhNotification.close(id), LhNotification.closeAll(), LhNotification.config({ duration, offset, appendTo })가 있습니다.

Events

이벤트	설명	콜백 매개변수
close	항목의 닫기 버튼을 클릭할 때 발생	—

명령형 사용에서는 닫기(자동 닫힘과 수동 닫기 포함)를 Options의 onClose 콜백으로 감지합니다.

Options

프로퍼티	설명	타입	기본값
title	제목	`string`	—
content	본문 내용	`string`	—
type	시맨틱 유형	`'success' \| 'warning' \| 'error' \| 'info' \| 'danger'`	`'info'`
duration	자동으로 닫히는 시간(ms), `0`이면 자동 닫힘 없음	`number`	`4500`
position	팝업 위치	`'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left'`	`'top-right'`
showClose	닫기 버튼 표시 여부	`boolean`	`true`
sx	sx 빠른 레이아웃 속성	`LhSxProps`	—
onClick	카드 클릭 콜백	`() => void`	—
onClose	닫은 이후의 콜백	`() => void`	—

접근성

각 위치의 컨테이너는 role="region" + aria-live="polite"이며, 새 알림은 부드럽게 읽히고 포커스를 빼앗지 않습니다
onClick을 넘긴 카드는 role="button"이며 Tab으로 포커스할 수 있고 Enter / Space로 트리거합니다
닫기 버튼에 aria-label이 있습니다(언어 팩 notification.close, closeLabel로 덮어쓰기 가능)
쌓임 이동은 CSS 전환으로 처리됩니다; 애니메이션은 prefers-reduced-motion을 존중합니다

타입 정의

이 컴포넌트가 외부로 노출하는 TypeScript 타입 구조는 다음과 같습니다(packages/components/notification/src/types.ts와 @lh-ui/share/core/* 소스에서 자동 추출, 각 항목을 클릭하여 전체 정의를 펼쳐 볼 수 있습니다; 프로퍼티 설명은 위쪽 Props 표를 참고하세요):

LhNotificationOptions

/** 서비스 옵션 */
export interface LhNotificationOptions {
  /** 제목 */
  title: string
  /** 본문 내용 */
  content?: string
  /** 시맨틱 유형, 기본값 info */
  type?: LhNotificationType
  /** 자동으로 닫히는 시간(ms), 0이면 자동 닫힘 없음(기본 4500) */
  duration?: number
  /** 팝업 위치(기본 top-right) */
  position?: LhNotificationPosition
  /** 닫기 버튼 표시 여부(기본 true) */
  showClose?: boolean
  /** 빠른 레이아웃 속성 */
  sx?: LhSxProps
  /** 카드 클릭 콜백(넘기면 카드가 포커스 가능하고 button 시맨틱으로 표시) */
  onClick?: () => void
  /** 닫은 이후(자동과 수동 포함)의 콜백 */
  onClose?: () => void
}

LhNotificationHandle

/** 서비스 핸들 */
export interface LhNotificationHandle {
  close: () => void
}

LhNotificationConfig

/** 전역 기본 설정 항목(LhNotification.config) */
export interface LhNotificationConfig {
  duration?: number
  offset?: number
  /** 마운트 컨테이너(기본값 body) */
  appendTo?: string | HTMLElement
}

LhNotificationProps

/** 항목 컴포넌트 props(서비스 내부 렌더링; 선언형으로 단독 사용도 가능) */
export interface LhNotificationProps {
  type?: LhNotificationType
  title: string
  content?: string
  showClose?: boolean
  /** 닫기 버튼의 접근성 이름(넘기지 않으면 언어 팩 notification.close 사용) */
  closeLabel?: string
  /** 넘기면 카드가 클릭 가능 */
  onClick?: () => void
  sx?: LhSxProps
}

LhNotificationType _{(출처: @lh-ui/share/core/notification)}

/** 알림 시맨틱 유형(네 가지 시맨틱, loading 없음) */
export type LhNotificationType =
  (typeof LH_TYPES_CONST)[keyof typeof LH_TYPES_CONST]

LhNotificationRecord _{(출처: @lh-ui/share/core/notification)}

/** 서비스 큐에서 단일 알림의 레코드 형태 */
export interface LhNotificationRecord {
  id: number
  type: LhNotificationType
  title: string
  content: string
  /** 자동으로 닫히는 시간(ms), 0이면 자동 닫힘 없음 */
  duration: number
  position: LhNotificationPosition
  showClose: boolean
  sx?: LhSxProps
  onClick?: () => void
  onClose?: () => void
}

LhNotificationPosition _{(출처: @lh-ui/share/core/notification)}

/** 알림 팝업 위치(네 모서리) */
export type LhNotificationPosition =
  | 'top-right'
  | 'top-left'
  | 'bottom-right'
  | 'bottom-left'

상수

이 컴포넌트에서 사용하는 공개 상수는 다음과 같습니다(Props 표의 타입/기본값 열에서 같은 이름의 항목을 클릭하면 이곳으로 이동합니다):

LH_NOTIFICATION_POSITION_CONST _{(출처: @lh-ui/share/core/notification)}

/** 위치 상수 */
export const LH_NOTIFICATION_POSITION_CONST = {
  'top-right': 'top-right',
  'top-left': 'top-left',
  'bottom-right': 'bottom-right',
  'bottom-left': 'bottom-left',
} as const

LH_NOTIFICATION_DURATION_DEFAULT _{(출처: @lh-ui/share/core/notification)}

/** 기본 자동 닫힘 시간(알림은 메시지보다 더 오래 머무름) */
export const LH_NOTIFICATION_DURATION_DEFAULT = 4500

LH_NOTIFICATION_GAP_DEFAULT _{(출처: @lh-ui/share/core/notification)}

/** 쌓임 간격 px */
export const LH_NOTIFICATION_GAP_DEFAULT = 16

Notification 알림 ​

기본 사용법 ​

시맨틱 유형 ​

팝업 위치 ​

클릭 가능한 알림 ​

닫기 버튼 ​

API ​

LhNotification Props ​

Events ​

Options ​

접근성 ​

타입 정의 ​

상수 ​