feat(ui): 푸터에 버그 제보(Gitea 이슈) 링크 추가

대시보드 푸터에 '버그가 있다면 이슈에 제보바랍니다' 안내를 자체 줄로 작게 표시.
링크는 gitea playground/ai-dev-portal issues, 새 탭·rel=noopener.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

public/css/layout.css

@@ -69,3 +69,7 @@ html[data-aidev-theme="dark"] .theme-ico-sun { display: inline-flex; }
 .footer-inner { max-width: 1180px; margin: 0 auto; padding: 20px 24px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
 .footer-brand { display: flex; align-items: center; gap: 8px; color: var(--fg3); font-size: 12px; }
 .footer-tech { font-size: 11.5px; color: var(--fg3); font-family: 'SF Mono', ui-monospace, Menlo, monospace; }
+/* 버그 제보 안내 — 자체 줄로 내려 작게 표시 */
+.footer-bug { flex-basis: 100%; font-size: 11.5px; color: var(--fg3); }
+.footer-bug a { color: var(--link); text-decoration: none; }
+.footer-bug a:hover { text-decoration: underline; }

public/favicon.svg

@@ -0,0 +1,14 @@
+<!-- 파비콘 — 헤더 브랜드와 동일한 codeslash </> 글리프(흰색)를 브랜드 그라디언트 타일 위에.
+     탭에서 16px 로 작게 보여도 </> 가 읽히도록 배경 대비를 준다. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" role="img" aria-label="&lt;/&gt;">
+  <defs>
+    <linearGradient id="fav" x1="0" y1="0" x2="32" y2="32" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#3b82f6"/>
+      <stop offset="1" stop-color="#6366f1"/>
+    </linearGradient>
+  </defs>
+  <rect width="32" height="32" rx="8" fill="url(#fav)"/>
+  <g transform="translate(6 6) scale(1.25)" fill="#fff">
+    <path d="M10.478 1.647a.5.5 0 1 0-.956-.294l-4 13a.5.5 0 0 0 .956.294l4-13zM4.854 4.146a.5.5 0 0 1 0 .708L1.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0zm6.292 0a.5.5 0 0 0 0 .708L14.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0z"/>
+  </g>
+</svg>

public/js/main.js

@@ -16,6 +16,18 @@ function initSignals() {
   else if (egg === "rocket") burstRocket();
   const open = b.getAttribute("data-open-modal");
   if (open) openDetail(open);
+  stripSignalParams();
+}
+
+// 1회성 신호 쿼리(toast/egg/open)는 표시 후 주소창에서 지운다.
+// history.replaceState 라 새 히스토리 항목 없이 URL 만 정리 → 새로고침/공유 시 토스트가 다시 뜨지 않는다.
+function stripSignalParams() {
+  try {
+    const url = new URL(window.location.href);
+    const before = url.search;
+    ["toast", "egg", "open"].forEach((k) => url.searchParams.delete(k));
+    if (url.search !== before) history.replaceState(null, "", url.pathname + url.search + url.hash);
+  } catch (e) {}
 }
 
 function consoleArt() {

public/js/modals.js

@@ -1,5 +1,6 @@
 // 상세 모달 · 공유(등록) 모달 — 열기/닫기 및 공개범위 토글.
 import { $, $$ } from "./util.js";
+import { applyReactions } from "./reactions.js";
 
 export function openDetail(id) {
   const tpl = $('#detailStore template[data-detail-id="' + id + '"]');
@@ -7,6 +8,9 @@ export function openDetail(id) {
   if (!tpl || !overlay) { window.location.href = "/projects/" + id; return; }
   const mount = $(".modal", overlay) || overlay;
   mount.innerHTML = tpl.innerHTML;
+  // 템플릿은 로드 시점 스냅샷이라 그동안 바뀐 반응 수가 반영돼 있지 않다.
+  // 마운트 직후 현재 store 값으로 덮어써 카드와 항상 같은 값을 보이게 한다.
+  applyReactions(mount);
   overlay.hidden = false;
   document.body.style.overflow = "hidden";
   // 주의: 열기 감지 셀렉터가 [data-open-id] 라서 같은 이름을 쓰면 모달 내부 클릭(닫기/삭제)이

public/js/reactions.js

@@ -1,17 +1,81 @@
-// ❤️ 좋아요 / ⭐ 즐겨찾기 — fetch 로 토글하고 카운트를 즉시 반영(점진적 향상).
+// ❤️ 좋아요 / ⭐ 즐겨찾기 — 반응 상태를 한 곳(store)에서 관리한다.
+// 같은 프로젝트가 여러 위치(피드 카드 버튼·내 프로젝트 통계 줄·상세 모달)에 렌더되므로,
+// 값이 바뀌면 그 프로젝트를 그리는 '모든' DOM 을 자동으로 다시 칠해 항상 같은 값을 유지한다.
+// 프레임워크 없이: 프로젝트별 {on,count} 를 Map 에 두고 변경 시 관련 DOM 만 갱신(점진적 향상).
 import { $, $$, toast, burstSparkle } from "./util.js";
 
 let starTaps = [];
 
-function syncReaction(id, kind, on, count) {
+// key = id + "|" + kind → { id, kind, on:boolean, count:number }
+const store = new Map();
+const keyOf = (id, kind) => id + "|" + kind;
+function getState(id, kind) {
+  return store.get(keyOf(id, kind)) || { id, kind, on: false, count: 0 };
+}
+
+// 한 (프로젝트, 종류)의 현재 상태를 그것을 표시하는 모든 라이브 DOM 에 반영.
+// document 조회라 <template> 안(inert)은 대상이 아니다 — 모달은 마운트 시 applyReactions 로 칠한다.
+function paint(id, kind) {
+  const st = getState(id, kind);
+  // 1) 토글 버튼(피드/열려 있는 모달): on 클래스 + 내부 카운트
   $$('[data-react][data-id="' + id + '"][data-kind="' + kind + '"]').forEach((b) => {
-    b.classList.toggle("on", !!on);
+    b.classList.toggle("on", st.on);
-    const c = $(".count", b);
+    const c = $("[data-rcount]", b);
-    if (c) c.textContent = count;
+    if (c) c.textContent = st.count;
+    // 인기순 정렬 기준(data-pop)도 좋아요 수에 맞춰 최신화 → 재정렬 시 순서가 맞는다.
+    if (kind === "heart") {
+      const card = b.closest("[data-pop]");
+      if (card) card.setAttribute("data-pop", st.count);
+    }
+  });
+  // 2) 표시 전용 카운터(내 프로젝트 통계 줄 등): 숫자만 갱신
+  $$('[data-rcount][data-id="' + id + '"][data-kind="' + kind + '"]').forEach((c) => {
+    c.textContent = st.count;
+  });
+}
+
+// 상태를 갱신하고 즉시 다시 칠한다. (서버 응답의 확정 값으로 호출)
+function setState(id, kind, on, count) {
+  store.set(keyOf(id, kind), { id, kind, on: !!on, count: Number(count) || 0 });
+  paint(id, kind);
+}
+
+// 로드 시 상세 모달 템플릿에서 모든 프로젝트의 서버 원본값(on/count)을 시드한다.
+// 템플릿은 렌더되지 않지만 content 는 조회 가능 → 열람 가능한 전 프로젝트를 빠짐없이 담는다.
+function seed() {
+  $$("#detailStore template").forEach((tpl) => {
+    $$("[data-react]", tpl.content).forEach((b) => {
+      const id = b.getAttribute("data-id");
+      const kind = b.getAttribute("data-kind");
+      const c = $("[data-rcount]", b);
+      store.set(keyOf(id, kind), {
+        id, kind,
+        on: b.classList.contains("on"),
+        count: c ? parseInt(c.textContent, 10) || 0 : 0,
+      });
+    });
+  });
+  // 시드 값으로 라이브 DOM 을 한 번 정렬 — 통계 줄 등 초기 불일치가 있으면 여기서 맞춰진다.
+  store.forEach((st) => paint(st.id, st.kind));
+}
+
+// 새로 마운트한 서브트리(상세 모달)의 반응 표시를 현재 store 값으로 칠한다.
+// openDetail 이 템플릿을 복제해 넣은 직후 호출되어, 모달이 항상 최신 값을 보이게 한다.
+export function applyReactions(root) {
+  if (!root) return;
+  $$("[data-react]", root).forEach((b) => {
+    const st = getState(b.getAttribute("data-id"), b.getAttribute("data-kind"));
+    b.classList.toggle("on", st.on);
+    const c = $("[data-rcount]", b);
+    if (c) c.textContent = st.count;
+  });
+  $$("[data-rcount][data-id][data-kind]", root).forEach((c) => {
+    c.textContent = getState(c.getAttribute("data-id"), c.getAttribute("data-kind")).count;
   });
 }
 
 export function initReactions() {
+  seed();
   document.addEventListener("click", (e) => {
     const btn = e.target.closest("[data-react]");
     if (!btn) return;
@@ -29,7 +93,7 @@ export function initReactions() {
       headers: { "X-Requested-With": "fetch", "Accept": "application/json" },
     })
       .then((r) => (r.ok ? r.json() : Promise.reject(r.status)))
-      .then((data) => syncReaction(id, kind, data.on, data.count))
+      .then((data) => setState(id, kind, data.on, data.count))
       .catch(() => toast("처리에 실패했습니다. 다시 시도해 주세요."));
   });
 }

views/_header.ejs

@@ -4,6 +4,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title><%= brand %></title>
+  <link rel="icon" href="/public/favicon.svg" type="image/svg+xml" />
   <link rel="stylesheet" href="/public/css/tokens.css" />
   <link rel="stylesheet" href="/public/css/base.css" />
   <link rel="stylesheet" href="/public/css/layout.css" />

views/dashboard.ejs

@@ -77,8 +77,8 @@
             <% if (p.is_public) { %>
               <div class="pcard-stats">
                 <% if (p.lang) { %><span class="stat"><span class="lang-dot" style="background:<%= langColor(p.lang) %>"></span><%= p.lang %></span><% } %>
-                <span class="stat"><span class="ico-heart"><%- icon("heartFill", { size: 13 }) %></span><span class="tabnum"><%= p.heart_count %></span></span>
+                <span class="stat"><span class="ico-heart"><%- icon("heartFill", { size: 13 }) %></span><span class="tabnum" data-rcount data-id="<%= p.id %>" data-kind="heart"><%= p.heart_count %></span></span>
-                <span class="stat"><span class="ico-star"><%- icon("starFill", { size: 13 }) %></span><span class="tabnum"><%= p.star_count %></span></span>
+                <span class="stat"><span class="ico-star"><%- icon("starFill", { size: 13 }) %></span><span class="tabnum" data-rcount data-id="<%= p.id %>" data-kind="star"><%= p.star_count %></span></span>
                 <span class="stat"><span class="ico-comment"><%- icon("comment", { size: 14 }) %></span><span class="tabnum"><%= p.comment_count %></span></span>
               </div>
               <form method="post" action="/projects/<%= p.id %>/visibility" data-stop style="display:inline">
@@ -181,6 +181,9 @@
   <div class="footer-inner">
     <div class="footer-brand"><span><%- icon("code", { size: 14 }) %></span><%= brand %> · 사내 개발 포털</div>
     <div class="footer-tech">Express + Postgres + Keycloak SSO · deployed on Kubero</div>
+    <div class="footer-bug">
+      버그가 있다면 <a href="https://gitea.bokdev.in/playground/ai-dev-portal/issues" target="_blank" rel="noopener">이슈</a> 에 제보바랍니다! 🐛
+    </div>
   </div>
 </footer>