[장고] 알림 앱: 상단 네비게이션 바에 알림 메시지 추가하기

소요 시간: 5분 조회수: 150

이 글은 이전에 작성한 알림 앱 구현하기와 이어집니다.

상단 네비게이션 바에서 알림 메시지를 표현하고, 알림 아이콘 클릭 시 팝업 메뉴처럼 메시지를 보여주는 기능을 구현하기 위해 다음과 같은 단계를 따릅니다.


1. 네비게이션 바에 알림 아이콘 추가

base.html 파일에 네비게이션 바에 알림 아이콘을 추가합니다. Bootstrap과 jQuery를 사용하여 팝업 메뉴를 구현합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Forum</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">My Forum</a>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fas fa-bell"></i>
            {% if request.user.notifications.filter(read=False).exists %}
              <span class="badge badge-danger">!</span>
            {% endif %}
          </a>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
            {% for notification in request.user.notifications.all %}
              <a class="dropdown-item {% if not notification.read %}font-weight-bold{% endif %}" href="{% url 'mark_as_read' notification.pk %}">
                {{ notification.message }}
                <small class="text-muted d-block">{{ notification.created_at }}</small>
              </a>
            {% empty %}
              <span class="dropdown-item">No notifications</span>
            {% endfor %}
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'logout' %}">Logout</a>
        </li>
      </ul>
    </div>
  </nav>

  <div class="container mt-4">
    {% block content %}
    {% endblock %}
  </div>
</body>
</html>

위 코드는 네비게이션 바에 알림 아이콘을 추가하고, 새로운 알림이 있을 경우 빨간 점을 표시합니다. 아이콘을 클릭하면 드롭다운 메뉴가 나타나며 알림 목록을 보여줍니다.


2. 알림 목록 및 읽음 처리

알림 목록과 읽음 처리 URL을 구현합니다.

URL 설정

notifications 앱의 urls.py에 알림 목록 및 읽음 처리 URL을 설정합니다.

from django.urls import path
from . import views

urlpatterns = [
    path('notifications/read/<int:pk>/', views.mark_as_read, name='mark_as_read'),
]

뷰 설정

notifications 앱의 views.py에서 알림 읽음 처리 뷰를 작성합니다.


3. 알림 아이콘에 Font Awesome 사용

알림 아이콘을 위해 Font Awesome을 사용합니다. base.html의 head 섹션에 Font Awesome 링크를 추가합니다.

<head>
  <!-- 기존 코드 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>

이제 네비게이션 바에서 알림 아이콘을 클릭하면 팝업 메뉴처럼 알림 메시지를 볼 수 있으며, 새 알림이 있을 경우 아이콘 옆에 빨간 점이 표시됩니다. 알림을 클릭하면 해당 알림이 읽음 처리됩니다.

ㅁㄴㅇㄹ

인기글

장고 리스트