ai-dev-portal/public/js/notifications.js

// 알림(🔔) 종 — 드롭다운 열기/닫기 · 목록 fetch · 안 읽은 배지 · 60초 폴링.
// 서버 API: GET /api/notifications → { unread, items }, POST /api/notifications/read-all.
import { $, toast } from "./util.js";

const POLL_MS = 60000; // 배지 폴링 주기(60초)

// 종류별 아이콘(가벼운 이모지) · 알림 문구 · 이동 링크.
const ICONS = { heart: "❤️", star: "⭐", comment: "💬", announcement: "📢" };

function itemText(n) {
  const who = n.actor_name || "누군가";
  const proj = n.project_title || "프로젝트";
  if (n.kind === "heart") return who + '님이 «' + proj + '»에 좋아요를 남겼어요';
  if (n.kind === "star") return who + '님이 «' + proj + '»을(를) 즐겨찾기했어요';
  if (n.kind === "comment") return who + '님이 «' + proj + '»에 댓글을 남겼어요';
  if (n.kind === "announcement") return "새 공지: " + (n.announcement_title || "");
  return "새 알림";
}

function itemHref(n) {
  if (n.kind === "announcement") return "/announcements";
  if (n.project_id) return "/projects/" + n.project_id;
  return "#";
}

// 상대 시간(방금/N분 전/N시간 전/N일 전/날짜).
function relTime(iso) {
  const t = new Date(iso).getTime();
  if (!t) return "";
  const s = Math.max(0, (Date.now() - t) / 1000);
  if (s < 60) return "방금";
  if (s < 3600) return Math.floor(s / 60) + "분 전";
  if (s < 86400) return Math.floor(s / 3600) + "시간 전";
  if (s < 7 * 86400) return Math.floor(s / 86400) + "일 전";
  const d = new Date(t);
  return d.getFullYear() + "." + String(d.getMonth() + 1).padStart(2, "0") + "." + String(d.getDate()).padStart(2, "0");
}

// 목록 렌더 — textContent 로만 채워 XSS 방지.
function renderList(listEl, items) {
  listEl.textContent = "";
  if (!items || !items.length) {
    const empty = document.createElement("div");
    empty.className = "notif-empty";
    empty.textContent = "아직 알림이 없어요";
    listEl.appendChild(empty);
    return;
  }
  items.forEach((n) => {
    const a = document.createElement("a");
    a.className = "notif-item" + (n.is_read ? "" : " unread");
    a.href = itemHref(n);
    const ico = document.createElement("span");
    ico.className = "notif-item-ico";
    ico.textContent = ICONS[n.kind] || "🔔";
    const body = document.createElement("span");
    body.className = "notif-item-body";
    const text = document.createElement("span");
    text.className = "notif-item-text";
    text.textContent = itemText(n);
    const time = document.createElement("span");
    time.className = "notif-item-time";
    time.textContent = relTime(n.created_at);
    body.appendChild(text);
    body.appendChild(time);
    a.appendChild(ico);
    a.appendChild(body);
    listEl.appendChild(a);
  });
}

function setBadge(badgeEl, n) {
  const count = +n || 0;
  if (count > 0) {
    badgeEl.textContent = count > 99 ? "99+" : String(count);
    badgeEl.hidden = false;
  } else {
    badgeEl.hidden = true;
  }
}

function apiGet() {
  return fetch("/api/notifications", { headers: { "X-Requested-With": "fetch", "Accept": "application/json" } })
    .then((r) => (r.ok ? r.json() : Promise.reject(r.status)));
}

function apiReadAll() {
  return fetch("/api/notifications/read-all", {
    method: "POST",
    headers: { "X-Requested-With": "fetch", "Accept": "application/json" },
  }).then((r) => (r.ok ? r.json() : Promise.reject(r.status)));
}

export function initNotifications() {
  const btn = $("#notifBtn"), pop = $("#notifPop"), badge = $("#notifBadge"),
    list = $("#notifList"), readAll = $("#notifReadAll");
  if (!btn || !pop || !badge || !list) return; // 비로그인 등 종이 없으면 무동작

  // 드롭다운 열 때: 목록을 받아 렌더한 뒤 모두 읽음 처리 → 배지 초기화.
  function openPanel() {
    apiGet()
      .then((data) => {
        renderList(list, data.items);
        setBadge(badge, data.unread);
        if (data.unread > 0) apiReadAll().then(() => setBadge(badge, 0)).catch(() => {});
      })
      .catch(() => {
        list.textContent = "";
        const err = document.createElement("div");
        err.className = "notif-empty";
        err.textContent = "알림을 불러오지 못했어요";
        list.appendChild(err);
      });
  }

  btn.addEventListener("click", (e) => {
    e.stopPropagation();
    const willOpen = pop.hidden;
    pop.hidden = !willOpen;
    btn.setAttribute("aria-expanded", willOpen ? "true" : "false");
    if (willOpen) openPanel();
  });

  // 바깥 클릭 시 닫기(사용자 메뉴와 동일 패턴).
  document.addEventListener("click", (e) => {
    if (!pop.hidden && !pop.contains(e.target) && !btn.contains(e.target)) {
      pop.hidden = true;
      btn.setAttribute("aria-expanded", "false");
    }
  });

  if (readAll) {
    readAll.addEventListener("click", (e) => {
      e.stopPropagation();
      apiReadAll()
        .then(() => {
          setBadge(badge, 0);
          list.querySelectorAll(".notif-item.unread").forEach((el) => el.classList.remove("unread"));
        })
        .catch(() => toast("처리에 실패했어요. 다시 시도해 주세요."));
    });
  }

  // 최초 1회 + 주기적 폴링: 배지 숫자만 갱신(드롭다운이 닫혀 있을 때).
  function refreshBadge() {
    apiGet().then((data) => { if (pop.hidden) setBadge(badge, data.unread); }).catch(() => {});
  }
  refreshBadge();
  setInterval(refreshBadge, POLL_MS);
}