사용자에게 알림을 제공하는 시스템을 의미합니다. 사용자 입장에서는 바텀시트, 모달 등의 형태로 제공됩니다.

Pre-requisites

History API

브라우저의 세션 히스토리에 접근할 수 있도록 합니다. 사용자의 기록을 앞뒤로 탐색하고 제어할 수 있습니다.

Notification 하나의 대상은 하나의 히스토리를 쌓게 됩니다. 이를 활용해 AOS 물리 백버튼을 대응합니다.

Promise

코드의 실행 흐름에서 비동기처리를 유연하게 처리하기 위한 API 입니다.

Notification 내부의 비동기 로직을 대응합니다. (바텀시트의 종료 대기)

Directory Architecture

root/
└── apps/
    └── app/
    └── web/    
└── packages/
    └── common/
        └── components/
            ├── Notification/
            │   ├── Notification.ts
            │   ├── NotificationService.ts
            │   ├── notificationAtom.ts

Detailed Analysis

%% Notification
graph LR
%% __START
    subgraph Notification
        NotificationItem1
        NotificationItem2
        NotificationItem3
    end

    Notification -.-> |get| NotificationAtom
    Notify.show -.-> |add| NotificationAtom
    Notification -.-> |add| HistoryStack
    Notification -.-> |remove| HistoryStack

    APP --> NotificationService

    subgraph NotificationService
        Notify.show
        Notify.alert
        Notify.success
        Notify.info
    end

    Notification -.- onpopstate
%% __END

NotificationService

알림 표시를 위한 메소드를 제공합니다.

// 기본 사용
Notify.success('작업이 성공적으로 완료되었습니다');

// Promise 활용
await Notify.info('처리 중입니다...').promise;
console.log('알림이 닫혔습니다');

// 수동 닫기
const { close } = Notify.warning('주의하세요');
setTimeout(close, 3000); // 3초 후 자동 닫기

// 콜백 활용
Notify.error('오류가 발생했습니다', {
  onClose: () => console.log('오류 알림이 닫혔습니다')
});

// 커스텀 ID 지정
Notify.alert('중요 공지사항', { id: 'important-notice' });