← 목록으로
📝 Prompt
알림 센터 데모
🔔
5
알림
모두 읽음
⚙️
전체
읽지 않음
멘션
오늘
김
김철수님이 회의에 초대했습니다
"Q1 리뷰 회의"에 참석해 주세요. 내일 오후 2시 회의실 A
2분 전
수락
×
이
이영희님이 회원님을 언급했습니다
"프로젝트 마감일 관련해서 @홍길동님 의견 부탁드립니다"
1시간 전
×
✓
작업이 완료되었습니다
"데이터 백업" 작업이 성공적으로 완료되었습니다.
3시간 전
×
어제
📢
시스템 점검 안내
내일 새벽 2시~4시 시스템 점검이 예정되어 있습니다.
1일 전
×
⚠️
결제 실패
월간 구독 결제에 실패했습니다. 결제 수단을 확인해주세요.
1일 전
결제 수단 변경
×
🎉
모든 알림을 확인했습니다!
새로운 알림이 없습니다
알림 센터 기능
읽지 않은 알림은 파란색 배경으로 표시
벨 아이콘에 읽지 않은 알림 개수 배지 표시
필터링: 전체, 읽지 않음, 멘션
시간별 그룹화: 오늘, 어제, 이번 주
알림 타입별 아이콘: 사용자, 시스템, 성공, 오류
액션 버튼: 수락, 결제 등 알림별 액션
호버 시 삭제 버튼 표시
"모두 읽음" 기능
💡
팁:
오른쪽 상단의 벨 아이콘을 클릭하여 알림 패널을 열어보세요!
40. 알림 센터 드롭다운 Design a notification center dropdown: **Trigger Button**: - Bell icon: 24px - Badge: red dot or count - Position: header, right area **Dropdown Panel**: - Width: 380px - Max-height: 480px - Position: right-aligned below trigger - Shadow: xl - Border-radius: 12px **Header**: - Title: "Notifications" - Actions: "Mark all read", Settings icon - Filter tabs: All, Unread, Mentions **Notification Item**: - Padding: 16px - Border-bottom: 1px gray-100 - Hover: gray-50 background - Unread: blue dot indicator, bold title **Item Structure**: - Avatar/icon (40px) left - Content middle: title, description, time - Action button right (optional) - Swipe to dismiss (mobile) **Notification Types**: - User mention: avatar + "mentioned you in..." - System: colored icon + message - Action required: with CTA button - Success/error: status icon **Time Display**: - Relative: "2 min ago", "1 hour ago" - Group by: Today, Yesterday, This Week **Empty State**: - Illustration - "All caught up!" message **Footer**: - "View all notifications" link - Links to notification settings **Animations**: - New notification: slide in from top - Mark read: fade transition - Dropdown: fade + scale Tech: React + Headless UI Popover + Tailwind
디자인 프롬프트
×