Alert

Alert 컴포넌트는 사용자에게 중요한 정보를 전달할 때 사용하는 알림 컴포넌트입니다. 현대적인 글래스 효과와 부드러운 애니메이션을 제공합니다.

기본 사용법

정보

이것은 정보 알림입니다. 중요한 정보를 전달할 때 사용합니다.

성공

작업이 성공적으로 완료되었습니다!

주의

이 작업은 되돌릴 수 없습니다. 신중하게 진행해주세요.

오류

오류가 발생했습니다. 다시 시도해주세요.

Props

Prop	Type	Default	Description
type	'info' | 'success' | 'warning' | 'error'	'info'	알림의 타입
title	string	-	알림의 제목 (선택사항)
icon	string	-	커스텀 아이콘 (선택사항)

사용 예시

기본 알림

<Alert type="info">이것은 기본 정보 알림입니다.</Alert>

제목이 있는 알림

<Alert type="success" title="설치 완료">
  패키지가 성공적으로 설치되었습니다.
</Alert>

커스텀 아이콘

<Alert type="warning" title="주의" icon="🚨">
  이 작업은 되돌릴 수 없습니다.
</Alert>

오류 메시지

<Alert type="error" title="오류 발생" icon="💥">
  네트워크 연결에 실패했습니다. 인터넷 연결을 확인해주세요.
</Alert>

특징

✨ 현대적인 디자인

• 글래스 효과: backdrop-filter: blur(20px) 적용
• 그라데이션 배경: 각 타입별 아름다운 그라데이션 효과
• 부드러운 그림자: 다층 그림자로 깊이감 표현
• 호버 애니메이션: translateY(-2px) 변환과 아이콘 바운스 효과

🎨 타입별 특징

• Info: 파란색 그라데이션, 정보 전달용
• Success: 초록색 그라데이션, 성공 메시지용
• Warning: 주황색 그라데이션, 주의사항용
• Error: 빨간색 그라데이션, 오류 메시지용

🌙 다크 모드 지원

• 자동 색상 조정
• 일관된 사용자 경험
• 완벽한 테마 호환성

📱 반응형 디자인

• 모바일에서 최적화된 크기
• 적응형 패딩과 폰트 크기
• 터치 친화적 인터페이스

💫 애니메이션 효과

• 알림 페이드인: 페이지 로드 시 부드러운 등장
• 호버 효과: 마우스 오버 시 자연스러운 변환
• 아이콘 바운스: 호버 시 아이콘 바운스 애니메이션
• 부드러운 전환: 모든 상태 변화에 자연스러운 전환

🎯 접근성

• 명확한 색상 구분
• 적절한 대비 비율
• 스크린 리더 호환
• 키보드 네비게이션 지원

스타일링

Alert 컴포넌트는 CSS 변수를 통해 커스터마이징할 수 있습니다:

:root {
  --page-alert-border-radius: 16px;
  --page-alert-padding: 20px 24px;
  --page-alert-gap: 16px;
}

브라우저 지원

• Chrome 88+
• Firefox 85+
• Safari 14+
• Edge 88+

모던 브라우저에서 최적의 성능을 제공합니다.