@ehfuse/alerts

시작하기

@ehfuse/alerts는 Material Design 스타일의 React 알림 및 다이얼로그 컴포넌트 라이브러리입니다.

📋 목차

설치

npm을 사용하여 패키지를 설치합니다:

npm install @ehfuse/alerts

기본 설정

라이브러리는 별도의 초기 설정이 필요하지 않습니다. 바로 import해서 사용할 수 있습니다.

import {
    SuccessAlert,
    InfoAlert,
    WarningAlert,
    ErrorAlert,
} from "@ehfuse/alerts";

첫 번째 알림

가장 간단한 형태의 알림을 만들어보겠습니다:

import { SuccessAlert } from "@ehfuse/alerts";

function App() {
    const handleClick = () => {
        SuccessAlert("작업이 성공적으로 완료되었습니다!");
    };

    return <button onClick={handleClick}>성공 알림 표시</button>;
}

다양한 알림 타입

import {
    SuccessAlert,
    InfoAlert,
    WarningAlert,
    ErrorAlert,
} from "@ehfuse/alerts";

function AlertExample() {
    return (
        <div>
            <button onClick={() => SuccessAlert("성공 메시지")}>
                성공 알림
            </button>

            <button onClick={() => InfoAlert("정보 메시지")}>정보 알림</button>

            <button onClick={() => WarningAlert("경고 메시지")}>
                경고 알림
            </button>

            <button onClick={() => ErrorAlert("오류 메시지")}>오류 알림</button>
        </div>
    );
}

제목과 함께 사용

SuccessAlert("성공", "파일이 성공적으로 업로드되었습니다.");
InfoAlert("알림", "새로운 업데이트가 있습니다.");
WarningAlert("주의", "디스크 공간이 부족합니다.");
ErrorAlert("오류", "네트워크 연결을 확인해주세요.");

다이얼로그 사용

⚠️ 중요: 다이얼로그를 사용하기 전에 먼저 AlertProvider로 애플리케이션을 감싸야 합니다.

AlertProvider 설정

다이얼로그 기능을 사용하려면 애플리케이션의 최상위 레벨에서 AlertProvider를 설정해야 합니다:

import React from "react";
import { AlertProvider } from "@ehfuse/alerts";

function App() {
    return (
        <AlertProvider>
            {/* 앱의 나머지 컴포넌트들 */}
            <YourAppComponents />
        </AlertProvider>
    );
}

export default App;

기본 알림 다이얼로그

import { AlertDialog } from "@ehfuse/alerts";

function DialogExample() {
    const showDialog = () => {
        AlertDialog({
            title: "알림",
            message: "작업이 완료되었습니다.",
            onConfirm: () => console.log("확인 클릭"),
        });
    };

    return <button onClick={showDialog}>다이얼로그 표시</button>;
}

확인/취소 다이얼로그

ConfirmDialog는 두 가지 방식으로 사용할 수 있습니다:

1. Promise 방식 (추천):

import { ConfirmDialog } from "@ehfuse/alerts";

function ConfirmExample() {
    const showConfirm = async () => {
        const result = await ConfirmDialog({
            title: "삭제 확인",
            message: "정말로 이 항목을 삭제하시겠습니까?",
            confirmText: "삭제",
            cancelText: "취소",
        });

        if (result) {
            console.log("사용자가 삭제를 확인했습니다.");
        } else {
            console.log("사용자가 취소했습니다.");
        }
    };

    return <button onClick={showConfirm}>삭제 확인</button>;
}

2. 콜백 방식 (AlertDialog와 동일):

function ConfirmExample() {
    const showConfirm = () => {
        ConfirmDialog({
            title: "삭제 확인",
            message: "정말로 이 항목을 삭제하시겠습니까?",
            confirmText: "삭제",
            cancelText: "취소",
            onConfirm: () => {
                console.log("사용자가 삭제를 확인했습니다.");
            },
            onCancel: () => {
                console.log("사용자가 취소했습니다.");
            },
        });
    };

    return <button onClick={showConfirm}>삭제 확인</button>;
}

동적 알림 업데이트

알림을 표시한 후 내용을 실시간으로 변경할 수 있습니다:

import { InfoAlert, updateAlert } from "@ehfuse/alerts";

function SimpleProgressExample() {
    const handleProgress = async () => {
        // 알림 생성 및 ID 받기
        const alertId = InfoAlert({
            message: "작업 시작...",
            autoHide: false,
        });

        // 간단한 업데이트
        await new Promise((resolve) => setTimeout(resolve, 1000));
        updateAlert(alertId, {
            message: "작업 진행 중...",
        });

        await new Promise((resolve) => setTimeout(resolve, 1000));
        updateAlert(alertId, {
            message: "✅ 작업 완료!",
            autoHide: true,
            delay: 2000,
        });
    };

    return <button onClick={handleProgress}>간단한 진행률</button>;
}

updateAlert 함수로 다음 속성들을 동적으로 변경할 수 있습니다:

다음 단계

기본 사용법을 익혔다면 다음 내용들을 살펴보세요:

위치 및 스타일링

고급 기능

이런 고급 기능들은 예제 문서에서 상세히 다루고 있습니다.

관련 문서

🌐 온라인 문서

📱 오프라인 접근

패키지 설치 후 node_modules/@ehfuse/alerts/docs/ 경로에서도 문서를 확인할 수 있습니다.