fix(header,announcements): 헤더 종·관리자 뱃지 순서 교체 + 공지 수정폼 겹침 수정

- 헤더 우측: 알림 종 → 관리자 뱃지 → 프로필 순으로 변경(관리자 뱃지가 프로필 바로 왼쪽)
- 공지 화면 '관리자 공지 모아보기' 서브 문구 제거
- 공지 수정폼이 hidden 이어도 항상 보여 보기/수정이 2단으로 겹치던 버그 수정
  (.ann-form 의 display:flex 가 [hidden] 기본 규칙을 이기던 문제 → .ann-form[hidden]{display:none})

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

public/css/components.css

@@ -165,12 +165,18 @@
 
 /* 한줄 소개 */
 .profile-bio-row { margin-top: 10px; display: flex; align-items: center; gap: 8px; }
+/* hidden 속성이 켜져 있으면 확실히 숨긴다 (display:flex 가 [hidden] 기본 규칙을 이겨 항상 보이던 버그 방지). */
+.profile-bio-row[hidden] { display: none; }
 .profile-bio { margin: 0; font-size: 13.5px; color: var(--fg2); line-height: 1.5; word-break: keep-all; overflow-wrap: break-word; }
 .profile-bio.is-empty { color: var(--fg3); font-style: italic; }
 .profile-bio-edit { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--border); background: var(--card); color: var(--fg3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
 .profile-bio-edit:hover { color: var(--fg); border-color: var(--fg3); }
-.profile-bio-form { margin-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.profile-bio-save { color: var(--link); border-color: var(--link); }
-.profile-bio-form input { flex: 1 1 240px; min-width: 0; padding: 6px 10px; font-size: 13.5px; color: var(--fg); background: var(--card); border: 1px solid var(--border); border-radius: 8px; }
+.profile-bio-save:hover { background: var(--link); color: #fff; border-color: var(--link); }
+.profile-bio-form { margin-top: 10px; display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
+/* hidden 속성이 켜져 있으면 확실히 숨긴다 (display:flex 가 [hidden] 기본 규칙을 이겨 항상 보이던 버그 방지). */
+.profile-bio-form[hidden] { display: none; }
+.profile-bio-form input { flex: 1 1 auto; min-width: 0; padding: 6px 10px; font-size: 13.5px; color: var(--fg); background: var(--card); border: 1px solid var(--border); border-radius: 8px; }
 .profile-bio-form input:focus { outline: none; border-color: var(--link); }
 
 /* ===================== 프로필 사진 크롭 모달 ===================== */
@@ -185,3 +191,30 @@
 .crop-zoom { margin-top: 14px; display: flex; align-items: center; gap: 10px; color: var(--fg2); }
 .crop-zoom input[type=range] { flex: 1; accent-color: var(--link); }
 .crop-hint { margin: 10px 0 0; font-size: 11.5px; color: var(--fg3); line-height: 1.5; }
+
+/* ===================== 공지사항(📢) 페이지 ===================== */
+/* 작성/수정 공용 폼 */
+.ann-form { display: flex; flex-direction: column; gap: 10px; background: var(--panel); border: 1px solid var(--border-soft); border-radius: 12px; padding: 16px; }
+/* hidden 속성이 켜져 있으면 확실히 숨긴다 (display:flex 가 [hidden] 기본 규칙을 이겨 수정폼이 항상 보이던 버그 방지). */
+.ann-form[hidden] { display: none; }
+.ann-form-new { margin-bottom: 24px; }
+.ann-input-title, .ann-input-body {
+  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 14px; color: var(--fg);
+  background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; outline: none;
+}
+.ann-input-title { font-weight: 600; }
+.ann-input-body { resize: vertical; line-height: 1.55; }
+.ann-input-title:focus, .ann-input-body:focus { border-color: var(--link); }
+.ann-form-actions { display: flex; align-items: center; gap: 8px; }
+
+.ann-empty { padding: 28px; text-align: center; color: var(--fg2); font-size: 14px; background: var(--panel); border: 1px solid var(--border-soft); border-radius: 12px; }
+
+.ann-list { display: flex; flex-direction: column; gap: 14px; }
+.ann-item { background: var(--card); border: 1px solid var(--border-soft); border-radius: 12px; padding: 18px 20px; }
+.ann-item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
+.ann-item-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--fg); word-break: break-word; }
+.ann-item-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
+.ann-del:hover { color: var(--danger); border-color: var(--danger); }
+.ann-meta { margin-top: 5px; font-size: 12px; color: var(--fg2); }
+.ann-body { margin-top: 12px; }
+.ann-item .ann-edit { margin-top: 4px; }

public/css/layout.css

@@ -64,6 +64,40 @@ html[data-aidev-theme="dark"] .theme-ico-sun { display: inline-flex; }
 .usermenu-item:hover { background: var(--panel); }
 .usermenu-ico { display: inline-flex; color: var(--fg2); }
 
+/* ===================== 알림(🔔) 종 ===================== */
+.notif { position: relative; }
+.notif-btn { position: relative; } /* 배지 기준 */
+/* 안 읽은 수 배지 — 종 우상단 빨강 pill */
+.notif-badge {
+  position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px;
+  display: inline-flex; align-items: center; justify-content: center;
+  background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; line-height: 1;
+  border-radius: 999px; border: 1px solid var(--hbg); box-sizing: border-box;
+}
+.notif-badge[hidden] { display: none; }
+/* 드롭다운 패널 — 사용자 메뉴 팝오버와 동일 패턴(더 넓게) */
+.notif-pop {
+  position: absolute; top: 46px; right: 0; width: min(340px, calc(100vw - 32px));
+  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
+  box-shadow: 0 8px 24px var(--shadow-strong); padding: 6px; z-index: 320; animation: aidev-pop .14s ease-out;
+}
+.notif-pop[hidden] { display: none; }
+.notif-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 8px; border-bottom: 1px solid var(--divider); margin-bottom: 4px; }
+.notif-title { font-size: 13px; font-weight: 700; color: var(--fg); }
+.notif-readall { background: transparent; border: 0; cursor: pointer; font-family: inherit; font-size: 12px; color: var(--link); padding: 2px 4px; }
+.notif-readall:hover { text-decoration: underline; }
+.notif-list { max-height: 360px; overflow-y: auto; }
+.notif-item { display: flex; gap: 9px; align-items: flex-start; padding: 9px 10px; border-radius: 8px; text-decoration: none; color: var(--fg); }
+.notif-item:hover { background: var(--panel); }
+.notif-item.unread { background: var(--attn-bg); }
+.notif-item-ico { flex: 0 0 auto; font-size: 15px; line-height: 1.3; }
+.notif-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.notif-item-text { font-size: 12.5px; line-height: 1.4; color: var(--fg); word-break: break-word; }
+.notif-item-time { font-size: 11px; color: var(--fg3); }
+.notif-empty { padding: 22px 10px; text-align: center; color: var(--fg3); font-size: 12.5px; }
+.notif-foot { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px; margin-top: 4px; border-top: 1px solid var(--divider); font-size: 12.5px; font-weight: 600; color: var(--link); text-decoration: none; }
+.notif-foot:hover { background: var(--panel); border-radius: 6px; }
+
 /* ===================== 메인 / 섹션 ===================== */
 .main { max-width: 1180px; margin: 0 auto; padding: 32px 24px 64px; }
 .section { margin-bottom: 40px; }

public/css/responsive.css

@@ -26,6 +26,7 @@
   .icon-btn, .modal-close { width: 44px; height: 44px; }
   .hdr-link, .usermenu-btn { min-height: 44px; }
   .profile-bio-edit    { width: 40px; height: 40px; }   /* 배지형이라 44는 과함 */
+  .profile-bio-form .profile-bio-edit { width: 32px; height: 32px; }  /* 폼 안 check/x 는 인풋과 한 줄 유지 */
   .profile-avatar-edit { width: 36px; height: 36px; }
   .filter-tab, .sort-tab, .vis-opt, .react-btn, .readme-btn,
   .toggle-share-btn, .share-mini-btn, .new-proj-btn, .feed-star-btn,

public/js/announcements.js

@@ -0,0 +1,31 @@
+// 공지 페이지 — 항목별 인라인 수정 폼 토글. (삭제 확인은 comments.js 의 [data-confirm] 핸들러가 처리)
+// 문서 위임이라 공지 페이지가 아닌 곳에서 로드돼도 해당 요소가 없으면 무동작 → 전 페이지 안전.
+import { $ } from "./util.js";
+
+export function initAnnouncements() {
+  document.addEventListener("click", (e) => {
+    // 수정 열기: 보기 숨기고 수정 폼 표시.
+    const eb = e.target.closest("[data-ann-edit]");
+    if (eb) {
+      const id = eb.getAttribute("data-ann-edit");
+      const view = $('[data-ann-view="' + id + '"]');
+      const form = $('[data-ann-editform="' + id + '"]');
+      if (view) view.hidden = true;
+      if (form) {
+        form.hidden = false;
+        const t = $(".ann-input-title", form);
+        if (t) t.focus();
+      }
+      return;
+    }
+    // 수정 취소: 폼 숨기고 보기 복원.
+    const cb = e.target.closest("[data-ann-cancel]");
+    if (cb) {
+      const id = cb.getAttribute("data-ann-cancel");
+      const view = $('[data-ann-view="' + id + '"]');
+      const form = $('[data-ann-editform="' + id + '"]');
+      if (form) form.hidden = true;
+      if (view) view.hidden = false;
+    }
+  });
+}

public/js/main.js

@@ -6,6 +6,8 @@ import { initReactions } from "./reactions.js";
 import { initModals, openDetail } from "./modals.js";
 import { initComments } from "./comments.js";
 import { initFeed, initMyFilter } from "./feed.js";
+import { initNotifications } from "./notifications.js";
+import { initAnnouncements } from "./announcements.js";
 
 // 서버가 <body data-*> 로 전달한 1회성 신호 처리
 function initSignals() {
@@ -50,6 +52,8 @@ function boot() {
   initComments();
   initFeed();
   initMyFilter();
+  initNotifications();
+  initAnnouncements();
   initSignals();
   consoleArt();
 }

public/js/notifications.js

@@ -0,0 +1,150 @@
+// 알림(🔔) 종 — 드롭다운 열기/닫기 · 목록 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);
+}

public/js/profile.js

@@ -28,7 +28,7 @@ function initBio() {
     e.preventDefault();
     const bio = input.value.trim().slice(0, 80);
     const saveBtn = $("#bioSave");
-    if (saveBtn) { saveBtn.disabled = true; saveBtn.textContent = "저장 중…"; }
+    if (saveBtn) saveBtn.disabled = true;
     try {
       const res = await fetch("/profile/bio", {
         method: "POST",
@@ -43,7 +43,7 @@ function initBio() {
     } catch (err) {
       toast("저장에 실패했어요");
     } finally {
-      if (saveBtn) { saveBtn.disabled = false; saveBtn.textContent = "저장"; }
+      if (saveBtn) saveBtn.disabled = false;
     }
   });
 }

schema.sql

@@ -64,3 +64,31 @@ CREATE TABLE IF NOT EXISTS stars (
   created_at  timestamptz NOT NULL DEFAULT now(),
   PRIMARY KEY (project_id, sabun)
 );
+
+-- 공지 (관리자가 작성해 전 직원에게 알림으로 전달. 별도 모아보기 페이지 /announcements)
+CREATE TABLE IF NOT EXISTS announcements (
+  id           bigint GENERATED ALWAYS AS IDENTITY PRIMARY KEY,
+  author_sabun text NOT NULL REFERENCES users(sabun),
+  title        text NOT NULL,
+  body         text NOT NULL DEFAULT '',
+  created_at   timestamptz NOT NULL DEFAULT now(),
+  updated_at   timestamptz NOT NULL DEFAULT now()
+);
+CREATE INDEX IF NOT EXISTS idx_announcements_created ON announcements(created_at DESC);
+
+-- 알림 (통합 인박스) — 반응(❤️/⭐)·댓글·공지를 한 테이블로.
+--  recipient_sabun: 받는 사람 / actor_sabun: 행위자(공지는 작성 관리자, 시스템성이면 NULL 가능)
+--  kind: 'heart' | 'star' | 'comment' | 'announcement'
+--  project_id / announcement_id: 알림이 가리키는 대상(각각 삭제 시 CASCADE 로 정리)
+CREATE TABLE IF NOT EXISTS notifications (
+  id              bigint GENERATED ALWAYS AS IDENTITY PRIMARY KEY,
+  recipient_sabun text NOT NULL REFERENCES users(sabun),
+  actor_sabun     text REFERENCES users(sabun),
+  kind            text NOT NULL,
+  project_id      bigint REFERENCES projects(id)      ON DELETE CASCADE,
+  announcement_id bigint REFERENCES announcements(id) ON DELETE CASCADE,
+  is_read         boolean NOT NULL DEFAULT false,
+  created_at      timestamptz NOT NULL DEFAULT now()
+);
+-- 종 드롭다운/배지 조회: 받는 사람별 최신순.
+CREATE INDEX IF NOT EXISTS idx_notifications_recipient ON notifications(recipient_sabun, created_at DESC);

src/auth.js

@@ -82,3 +82,12 @@ export function requireAuth(req, res, next) {
   // OIDC 미준비(discovery 실패)면 안내 페이지로 폴백
   return res.redirect("/login?error=" + encodeURIComponent("로그인 서비스를 사용할 수 없습니다. 잠시 후 다시 시도해 주세요."));
 }
+
+// 관리자 전용 가드. requireAuth 뒤(또는 로그인 상태)에서 관리자만 통과.
+// 관리자 판별은 Keycloak 그룹 기준(req.session.user.isAdmin). 공지 작성/수정/삭제 등에 사용.
+export function requireAdmin(req, res, next) {
+  if (req.session.user && req.session.user.isAdmin) return next();
+  if (!req.session.user) return requireAuth(req, res, next); // 미로그인은 로그인부터
+  if (req.path.startsWith("/api/")) return res.status(403).json({ error: "forbidden" });
+  return res.redirect("/?toast=" + encodeURIComponent("관리자만 접근할 수 있습니다."));
+}

src/db.js

@@ -200,3 +200,112 @@ export async function toggleStar({ projectId, sabun }) {
   const { rows } = await q(`SELECT count(*)::int AS c FROM stars WHERE project_id=$1`, [projectId]);
   return { on, count: rows[0].c };
 }
+
+// ===================== 알림(🔔) =====================
+
+// 프로젝트에 반응(❤️/⭐)·댓글이 달리면 프로젝트 주인에게 알림.
+// 본인 행위(주인===행위자)엔 알림하지 않는다. 같은 (받는사람,행위자,프로젝트,종류)의
+// "안 읽은" 알림이 이미 있으면 skip → 좋아요 껐다 켜기 반복 도배 방지.
+export async function notifyProjectOwner({ projectId, actor, kind }) {
+  const { rows } = await q(`SELECT owner_sabun FROM projects WHERE id=$1`, [projectId]);
+  const owner = rows[0] && rows[0].owner_sabun;
+  if (!owner || owner === actor) return;
+  await q(
+    `INSERT INTO notifications (recipient_sabun, actor_sabun, kind, project_id)
+     SELECT $1, $2, $3, $4
+      WHERE NOT EXISTS (
+        SELECT 1 FROM notifications
+         WHERE recipient_sabun=$1 AND actor_sabun=$2 AND kind=$3 AND project_id=$4 AND NOT is_read
+      )`,
+    [owner, actor, kind, projectId]
+  );
+}
+
+// 종 드롭다운용 최근 알림 목록. 행위자 이름/프로젝트 제목/공지 제목을 함께 조인.
+export async function listNotifications(sabun, limit = 20) {
+  const { rows } = await q(
+    `SELECT n.*, a.name AS actor_name, p.title AS project_title, an.title AS announcement_title
+       FROM notifications n
+       LEFT JOIN users a         ON a.sabun = n.actor_sabun
+       LEFT JOIN projects p      ON p.id    = n.project_id
+       LEFT JOIN announcements an ON an.id  = n.announcement_id
+      WHERE n.recipient_sabun=$1
+      ORDER BY n.created_at DESC
+      LIMIT $2`,
+    [sabun, limit]
+  );
+  return rows;
+}
+
+// 안 읽은 알림 수(배지).
+export async function countUnread(sabun) {
+  const { rows } = await q(
+    `SELECT count(*)::int AS c FROM notifications WHERE recipient_sabun=$1 AND NOT is_read`,
+    [sabun]
+  );
+  return rows[0].c;
+}
+
+// 안 읽은 알림 모두 읽음 처리. 처리 행 수 반환.
+export async function markAllRead(sabun) {
+  const { rowCount } = await q(
+    `UPDATE notifications SET is_read=true WHERE recipient_sabun=$1 AND NOT is_read`,
+    [sabun]
+  );
+  return rowCount;
+}
+
+// ===================== 공지(📢) =====================
+
+// 공지 목록(최신순). 작성자 이름 조인.
+export async function listAnnouncements(limit = 100) {
+  const { rows } = await q(
+    `SELECT an.*, u.name AS author_name
+       FROM announcements an JOIN users u ON u.sabun=an.author_sabun
+      ORDER BY an.created_at DESC
+      LIMIT $1`,
+    [limit]
+  );
+  return rows;
+}
+
+// 단일 공지.
+export async function getAnnouncement(id) {
+  const { rows } = await q(
+    `SELECT an.*, u.name AS author_name
+       FROM announcements an JOIN users u ON u.sabun=an.author_sabun
+      WHERE an.id=$1`,
+    [id]
+  );
+  return rows[0] || null;
+}
+
+// 공지 등록 → 새 id 반환. 이어서 작성자를 제외한 전 직원에게 알림 fan-out.
+export async function addAnnouncement({ author, title, body }) {
+  const { rows } = await q(
+    `INSERT INTO announcements (author_sabun, title, body) VALUES ($1,$2,$3) RETURNING id`,
+    [author, title, body || ""]
+  );
+  const id = rows[0].id;
+  await q(
+    `INSERT INTO notifications (recipient_sabun, actor_sabun, kind, announcement_id)
+     SELECT sabun, $1, 'announcement', $2 FROM users WHERE sabun <> $1`,
+    [author, id]
+  );
+  return id;
+}
+
+// 공지 수정(관리자). 적용 행 수 반환.
+export async function updateAnnouncement({ id, title, body }) {
+  const { rowCount } = await q(
+    `UPDATE announcements SET title=$2, body=$3, updated_at=now() WHERE id=$1`,
+    [id, title, body || ""]
+  );
+  return rowCount;
+}
+
+// 공지 삭제(관리자). 연결된 notifications 는 FK ON DELETE CASCADE 로 함께 삭제. 삭제 행 수 반환.
+export async function deleteAnnouncement({ id }) {
+  const { rowCount } = await q(`DELETE FROM announcements WHERE id=$1`, [id]);
+  return rowCount;
+}

src/helpers.js

@@ -29,6 +29,10 @@ const OCTICONS = {
   trash: '<path d="M11 1.75V3h2.25a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75ZM4.496 6.675l.66 6.6a.25.25 0 0 0 .249.225h5.19a.25.25 0 0 0 .249-.225l.66-6.6a.75.75 0 0 1 1.492.149l-.66 6.6A1.748 1.748 0 0 1 10.595 15h-5.19a1.75 1.75 0 0 1-1.741-1.575l-.66-6.6a.75.75 0 1 1 1.492-.15ZM6.5 1.75V3h3V1.75a.25.25 0 0 0-.25-.25h-2.5a.25.25 0 0 0-.25.25Z"/>',
   book: '<path d="M0 1.75A.75.75 0 0 1 .75 1h4.253c1.227 0 2.317.59 3 1.501A3.743 3.743 0 0 1 11.006 1h4.245a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75h-4.507a2.25 2.25 0 0 0-1.591.659l-.622.621a.75.75 0 0 1-1.06 0l-.622-.621A2.25 2.25 0 0 0 5.258 13H.75a.75.75 0 0 1-.75-.75Zm7.251 10.324.004-5.073-.002-2.253A2.25 2.25 0 0 0 5.003 2.5H1.5v9h3.757a3.75 3.75 0 0 1 1.994.574ZM8.755 4.75l-.004 7.322a3.752 3.752 0 0 1 1.992-.572H14.5v-9h-3.495a2.25 2.25 0 0 0-2.25 2.25Z"/>',
   pencil: '<path d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61Zm.176 4.823L9.75 4.81l-6.286 6.287a.253.253 0 0 0-.064.108l-.558 1.953 1.953-.558a.253.253 0 0 0 .108-.064Zm1.238-3.763a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354Z"/>',
+  // 종(알림) — Octicon bell-16
+  bell: '<path d="M8 16a2 2 0 0 0 1.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 0 0 8 16ZM3 5a5 5 0 0 1 10 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.519 1.519 0 0 1 13.482 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947Zm5-3.5A3.5 3.5 0 0 0 4.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01l.001.006c0 .002.002.004.004.006l.006.004.007.001h10.964l.007-.001.006-.004.004-.006.001-.007a.017.017 0 0 0-.003-.01l-1.703-2.554a1.745 1.745 0 0 1-.294-.97V5A3.5 3.5 0 0 0 8 1.5Z"/>',
+  // 확성기(공지) — Octicon megaphone-16
+  megaphone: '<path d="M3.75 8H2.5A1.5 1.5 0 0 1 1 6.5v-1A1.5 1.5 0 0 1 2.5 4h1.25l6.767-2.71a.75.75 0 0 1 1.03.696v8.028a.75.75 0 0 1-1.03.696L3.75 8Zm-1.25-2.5v1c0 .009.007.016.016.016H3.5V4.484h-.984A.016.016 0 0 0 2.5 4.5Zm2.5.06v.88l5.75 2.302V3.258L5 5.56ZM4.5 9.25a.75.75 0 0 1 .728.568l.542 2.17c.048.19.09.38.09.512 0 .8-.649 1.5-1.5 1.5h-.375A1.5 1.5 0 0 1 3 12.5c0-.283.036-.55.09-.762l.542-2.17a.75.75 0 0 1 .728-.568h.14Z"/>',
 };
 
 // 인라인 SVG 아이콘 문자열. fill 기본은 currentColor(부모 색 상속).

src/server.js

@@ -5,7 +5,7 @@ import { fileURLToPath } from "url";
 import path from "path";
 import { config } from "./config.js";
 import { toolsForUser } from "./sites.js";
-import { initOidc, loginRedirect, handleCallback, requireAuth, oidcReady, logoutUrl } from "./auth.js";
+import { initOidc, loginRedirect, handleCallback, requireAuth, requireAdmin, oidcReady, logoutUrl } from "./auth.js";
 import { icon, identicon, identiconSvg, avatar, adminBadge, langColor, langFromTags, renderMarkdown, mdPlain } from "./helpers.js";
 import { fetchMainLang, fetchReadme } from "./gitea.js";
 import * as db from "./db.js";
@@ -243,9 +243,12 @@ app.get("/projects/:id", requireAuth, async (req, res) => {
 
 // --- 반응: ❤️ 좋아요 / ⭐ 즐겨찾기 ---
 async function reactionHandler(kind, req, res) {
+  const me = req.session.user.sabun;
   const result = await (kind === "heart"
-    ? db.toggleHeart({ projectId: req.params.id, sabun: req.session.user.sabun })
+    ? db.toggleHeart({ projectId: req.params.id, sabun: me })
-    : db.toggleStar({ projectId: req.params.id, sabun: req.session.user.sabun }));
+    : db.toggleStar({ projectId: req.params.id, sabun: me }));
+  // 새로 켠 경우에만 프로젝트 주인에게 알림(본인 프로젝트/중복은 db 에서 걸러짐).
+  if (result.on) await db.notifyProjectOwner({ projectId: req.params.id, actor: me, kind });
   if (isAjax(req)) return res.json(result);
   res.redirect(safeBack(req.get("Referer"), "/"));
 }
@@ -282,12 +285,14 @@ app.post("/projects/:id/comments", requireAuth, async (req, res) => {
   const body = (req.body.body || "").trim();
   if (!body) return res.redirect(back);
   const parentId = req.body.parent_id ? Number(req.body.parent_id) : null;
-  await db.addComment({
+  const created = await db.addComment({
     projectId: req.params.id,
     author: req.session.user.sabun,
     body,
     parentId: parentId || null,
   });
+  // 댓글이 실제로 등록됐으면 프로젝트 주인에게 알림(본인 댓글/중복은 db 에서 걸러짐).
+  if (created) await db.notifyProjectOwner({ projectId: req.params.id, actor: req.session.user.sabun, kind: "comment" });
   // 이스터에그 신호
   let egg = "";
   if (/\blgtm\b/i.test(body)) egg = "lgtm";
@@ -302,6 +307,53 @@ app.post("/comments/:id/delete", requireAuth, async (req, res) => {
   res.redirect(safeBack(req.body.return_to, req.get("Referer") || "/"));
 });
 
+// --- 알림(🔔) API — 종 드롭다운/폴링 공용 ---
+// 최근 알림 목록 + 안 읽은 수. app.js 가 X-Requested-With:fetch 로 호출.
+app.get("/api/notifications", requireAuth, async (req, res) => {
+  const me = req.session.user.sabun;
+  const [items, unread] = await Promise.all([db.listNotifications(me, 20), db.countUnread(me)]);
+  res.json({ unread, items });
+});
+
+// 안 읽은 알림 모두 읽음 처리 → { unread: 0 }
+app.post("/api/notifications/read-all", requireAuth, async (req, res) => {
+  await db.markAllRead(req.session.user.sabun);
+  res.json({ unread: 0 });
+});
+
+// --- 공지(📢) 모아보기 페이지 (전체 열람 가능, 작성 폼은 관리자에게만) ---
+app.get("/announcements", requireAuth, async (req, res) => {
+  const announcements = await db.listAnnouncements();
+  res.render("announcements", {
+    announcements,
+    toast: typeof req.query.toast === "string" ? req.query.toast : "",
+  });
+});
+
+// --- 공지 등록 (관리자) ---
+app.post("/announcements", requireAdmin, async (req, res) => {
+  const title = String(req.body.title || "").trim();
+  const body = String(req.body.body || "").trim();
+  if (!title) return res.redirect("/announcements?toast=" + encodeURIComponent("제목을 입력해주세요"));
+  await db.addAnnouncement({ author: req.session.user.sabun, title, body });
+  res.redirect("/announcements?toast=" + encodeURIComponent("공지가 등록되었습니다"));
+});
+
+// --- 공지 수정 (관리자) ---
+app.post("/announcements/:id/update", requireAdmin, async (req, res) => {
+  const title = String(req.body.title || "").trim();
+  const body = String(req.body.body || "").trim();
+  if (!title) return res.redirect("/announcements?toast=" + encodeURIComponent("제목을 입력해주세요"));
+  const n = await db.updateAnnouncement({ id: req.params.id, title, body });
+  res.redirect("/announcements?toast=" + encodeURIComponent(n ? "공지가 수정되었습니다" : "공지를 찾을 수 없습니다"));
+});
+
+// --- 공지 삭제 (관리자) ---
+app.post("/announcements/:id/delete", requireAdmin, async (req, res) => {
+  const n = await db.deleteAnnouncement({ id: req.params.id });
+  res.redirect("/announcements?toast=" + encodeURIComponent(n ? "공지가 삭제되었습니다" : "공지를 찾을 수 없습니다"));
+});
+
 // --- 부팅 ---
 const start = async () => {
   try {

views/_header.ejs

@@ -45,10 +45,33 @@
             <span class="theme-ico theme-ico-sun"><%- icon("sun", { size: 16 }) %></span>
           </button>
 
+          <a class="hdr-link" href="/announcements" title="공지사항">
+            <%- icon("megaphone", { size: 15 }) %><span>공지</span>
+          </a>
+
           <a class="hdr-link" href="<%= manualUrl %>" target="_blank" rel="noopener" title="포털 사용 매뉴얼">
             <%- icon("book", { size: 15 }) %><span>매뉴얼</span>
           </a>
 
+          <!-- 알림(🔔) 종 — 관리자 뱃지 왼쪽. 목록/배지는 app.js(notifications.js)가 fetch 로 채운다. -->
+          <div class="notif">
+            <button class="icon-btn notif-btn" id="notifBtn" type="button" aria-haspopup="true" aria-expanded="false" title="알림" aria-label="알림">
+              <%- icon("bell", { size: 16 }) %>
+              <span class="notif-badge" id="notifBadge" hidden></span>
+            </button>
+            <div class="notif-pop" id="notifPop" hidden>
+              <div class="notif-head">
+                <span class="notif-title">알림</span>
+                <button type="button" class="notif-readall" id="notifReadAll">모두 읽음</button>
+              </div>
+              <div class="notif-list" id="notifList">
+                <div class="notif-empty">불러오는 중…</div>
+              </div>
+              <a class="notif-foot" href="/announcements"><%- icon("megaphone", { size: 14 }) %>공지 전체 보기</a>
+            </div>
+          </div>
+
+          <!-- 관리자 뱃지 — 프로필 바로 왼쪽 -->
           <% if (user.isAdmin) { %>
             <span class="admin-pill"><%- icon("lock", { size: 11 }) %>관리자</span>
           <% } %>
@@ -66,6 +89,7 @@
                 <div class="usermenu-role"><%= user.isAdmin ? "관리자 (admin)" : "일반 사용자" %></div>
               </div>
               <a class="usermenu-item" href="/u/<%= user.sabun %>"><span class="usermenu-ico"><%- icon("repo", { size: 15 }) %></span>내 프로필</a>
+              <a class="usermenu-item" href="/announcements"><span class="usermenu-ico"><%- icon("megaphone", { size: 15 }) %></span>공지사항</a>
               <a class="usermenu-item" href="/logout"><span class="usermenu-ico"><%- icon("signout", { size: 15 }) %></span>로그아웃</a>
             </div>
           </div>

views/announcements.ejs

@@ -0,0 +1,75 @@
+<%- include("_header") %>
+<%
+  // 뷰 로컬 헬퍼 (빌드 없이 EJS 스크립틀릿으로)
+  function fdate(d) { var x = new Date(d); return x.getFullYear() + "." + String(x.getMonth() + 1).padStart(2, "0") + "." + String(x.getDate()).padStart(2, "0"); }
+  function edited(a) { try { return (+new Date(a.updated_at) - +new Date(a.created_at)) > 1000; } catch (e) { return false; } }
+%>
+
+<main class="main">
+  <section class="section">
+    <div class="section-head">
+      <div class="section-titlewrap">
+        <h2 class="section-title">공지사항</h2>
+      </div>
+    </div>
+
+    <% if (user.isAdmin) { %>
+      <!-- 관리자 전용 새 공지 작성 폼 -->
+      <form class="ann-form ann-form-new" method="post" action="/announcements">
+        <input class="ann-input-title" type="text" name="title" maxlength="120" placeholder="공지 제목" required />
+        <textarea class="ann-input-body" name="body" rows="4" placeholder="공지 내용 (마크다운 지원)"></textarea>
+        <div class="ann-form-actions">
+          <button class="btn btn-primary" type="submit"><%- icon("megaphone", { size: 15 }) %>공지 등록</button>
+        </div>
+      </form>
+    <% } %>
+
+    <% if (!announcements.length) { %>
+      <div class="ann-empty">아직 등록된 공지가 없습니다.</div>
+    <% } %>
+
+    <div class="ann-list">
+      <% announcements.forEach(function (a) { %>
+        <article class="ann-item" id="ann-<%= a.id %>">
+          <div class="ann-view" data-ann-view="<%= a.id %>">
+            <div class="ann-item-head">
+              <h3 class="ann-item-title"><%= a.title %></h3>
+              <% if (user.isAdmin) { %>
+                <div class="ann-item-actions">
+                  <button type="button" class="btn btn-sm" data-ann-edit="<%= a.id %>"><%- icon("pencil", { size: 13 }) %>수정</button>
+                  <form method="post" action="/announcements/<%= a.id %>/delete" style="display:inline">
+                    <button type="submit" class="btn btn-sm ann-del" data-confirm="이 공지를 삭제할까요?"><%- icon("trash", { size: 13 }) %>삭제</button>
+                  </form>
+                </div>
+              <% } %>
+            </div>
+            <div class="ann-meta">
+              <%= a.author_name %> · <%= fdate(a.created_at) %><% if (edited(a)) { %> · 수정됨<% } %>
+            </div>
+            <% if (a.body && a.body.trim()) { %>
+              <div class="ann-body md-body"><%- renderMarkdown(a.body) %></div>
+            <% } %>
+          </div>
+
+          <% if (user.isAdmin) { %>
+            <!-- 인라인 수정 폼 (수정 버튼으로 토글) -->
+            <form class="ann-form ann-edit" method="post" action="/announcements/<%= a.id %>/update" data-ann-editform="<%= a.id %>" hidden>
+              <input class="ann-input-title" type="text" name="title" maxlength="120" value="<%= a.title %>" required />
+              <textarea class="ann-input-body" name="body" rows="4"><%= a.body %></textarea>
+              <div class="ann-form-actions">
+                <button class="btn btn-primary btn-sm" type="submit"><%- icon("check", { size: 14 }) %>저장</button>
+                <button class="btn btn-sm" type="button" data-ann-cancel="<%= a.id %>">취소</button>
+              </div>
+            </form>
+          <% } %>
+        </article>
+      <% }); %>
+    </div>
+  </section>
+</main>
+
+<%- include("_footer") %>
+
+<script type="module" src="/public/js/main.js"></script>
+</body>
+</html>

views/profile.ejs

@@ -20,7 +20,7 @@
         <div class="profile-idline">
           <h1 class="profile-name"><%= profile.name %></h1>
           <span class="profile-sabun"><%= profile.sabun %></span>
-          <% if (profile.is_admin) { %><span class="admin-badge-wrap" title="관리자 인증"><%- adminBadge({ size: 16 }) %></span><% } %>
+          <% if (profile.is_admin) { const _adminTitle = `${brand} Portal 관리자`; %><span class="admin-badge-wrap" title="<%= _adminTitle %>"><%- adminBadge({ size: 16, title: _adminTitle }) %></span><% } %>
         </div>
         <div class="profile-metaline">
           <span><%= profile.project_count %>개 프로젝트</span>
@@ -37,8 +37,8 @@
           <% if (isSelf) { %>
             <form class="profile-bio-form" id="bioForm" method="post" action="/profile/bio" hidden>
               <input type="text" name="bio" id="bioInput" maxlength="80" value="<%= profile.bio || "" %>" placeholder="한줄 소개 (최대 80자)" autocomplete="off" />
-              <button type="submit" class="btn btn-success" id="bioSave">저장</button>
+              <button type="submit" class="profile-bio-edit profile-bio-save" id="bioSave" title="저장" aria-label="한줄 소개 저장"><%- icon("check", { size: 14 }) %></button>
-              <button type="button" class="btn" id="bioCancel">취소</button>
+              <button type="button" class="profile-bio-edit" id="bioCancel" title="취소" aria-label="한줄 소개 편집 취소"><%- icon("x", { size: 14 }) %></button>
             </form>
           <% } %>
         <% } %>