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>
feat(notifications): 알림 종 + 공지 기능 추가
2026-07-15 20:08:47 +09:00 · 2026-07-15 14:10:04 +09:00 · 2026-07-10 17:37:46 +09:00 · 2026-07-10 16:44:47 +09:00 · 2026-07-10 16:01:30 +09:00 · 2026-07-10 14:15:04 +09:00
36 changed files with 2018 additions and 205 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -8,3 +8,6 @@ dist/
 .DS_Store
 HANDOFF.md
 _preview.mjs
 # bkit 플러그인 런타임/감사 상태 (앱과 무관)
 .bkit/
--- a/.project-env.example
+++ b/.project-env.example
@@ -22,8 +22,14 @@ OIDC_CLIENT_ID=portal
 OIDC_CLIENT_SECRET=REPLACE_WITH_PORTAL_CLIENT_SECRET
 # --- 권한 ---
-# 이 Keycloak 역할(realm role)을 가진 사용자에게만 인프라 도구(OpenEverest/MinIO/Keycloak/LiteLLM) 노출.
+# 이 Keycloak 그룹(group)에 속한 사용자에게만 인프라 도구(OpenEverest/MinIO/Keycloak/LiteLLM) 노출.
-ADMIN_ROLE=admin
+# (portal 클라이언트의 group-membership 매퍼가 ID 토큰에 groups 클레임을 넣어줌)
 ADMIN_GROUP=DevOps
 # --- Gitea 언어 자동 판별 (선택) ---
 # 프로젝트 등록 시 repo_url 이 Gitea 레포면 언어 통계 API 로 메인 언어를 자동으로 채운다.
 # 공개 레포는 토큰 없이 동작. 비공개 레포까지 판별하려면 read:repository 권한 토큰 필요.
 # GITEA_TOKEN=
 # --- 도구 URL (기본값 있음 · 도메인/폐쇄망 대응으로 덮어쓰기) ---
 # CODER_URL=https://coder.bokdev.in/api/v2/users/oidc/callback
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -45,8 +45,9 @@ AI DEV — 사내 개발 포털. 직원이 한 곳에서 **사내 개발 사이
 - `.claude/` — Claude Code 훅·설정
 ## 인증 모델
- **사번 = Keycloak `preferred_username`.** 세션에 `req.session.user = { sabun, name, email, roles, isAdmin }`.
+- **사번 = Keycloak `preferred_username`.** 세션에 `req.session.user = { sabun, name, email, groups, isAdmin }`.
- **관리자 = `realm_access.roles` 에 `ADMIN_ROLE`(기본 `admin`) 포함.** 인프라 도구(OpenEverest/MinIO/
+- **관리자 = `groups` 클레임에 `ADMIN_GROUP`(기본 `DevOps`) 포함.** (portal 클라이언트의 group-membership
  매퍼가 ID 토큰에 `groups` 를 넣어줌. `full.path=false` 라 앞 슬래시는 떼고 비교.) 인프라 도구(OpenEverest/MinIO/
  Keycloak/LiteLLM)는 관리자에게만 렌더(`sites.js` 의 `adminOnly` + `toolsForUser`).
 - 미인증으로 보호 페이지 진입 시 중간 화면 없이 곧장 Keycloak 로그인으로 리다이렉트
  (`requireAuth` → `loginRedirect`). OIDC discovery 실패 시에만 `login.ejs` 폴백.
@@ -59,7 +60,7 @@ AI DEV — 사내 개발 포털. 직원이 한 곳에서 **사내 개발 사이
 - `Dockerfile` 은 Kubero buildpack 의 harbor push 실패를 우회하는 **수동 push 용**.
 - 도메인 `portal.bokdev.in` (`deploy/portal-route.yaml`). 도메인 추가 시 Keycloak `portal`
  client redirect 에 `https://<도메인>/auth/callback` 등록 필요.
- Kubero Env: `BASE_URL`, `DATABASE_URL`, `OIDC_*`, `SESSION_SECRET`, `PORTAL_BRAND`, `ADMIN_ROLE`, (선택) 도구 `*_URL`.
+- Kubero Env: `BASE_URL`, `DATABASE_URL`, `OIDC_*`, `SESSION_SECRET`, `PORTAL_BRAND`, `ADMIN_GROUP`, (선택) 도구 `*_URL`.
 ## 컨벤션
 - 라우트는 `src/server.js` 에, DB 접근은 `src/db.js` 의 함수로만 (인라인 SQL 산재 금지).
--- a/README.md
+++ b/README.md
@@ -1,17 +1,53 @@
 # AI DEV — 사내 개발 포털
-직원이 한 곳에서 **사내 개발 사이트로 이동**하고, **만든 프로젝트를 공유·코멘트**하는 포털.
+사내 개발 도구로 **한 번에 이동**하고, 내가 만든 프로젝트를 동료와 **공유·소통**하는 곳입니다.
-GitHub 감성 UI. Keycloak SSO(사번 로그인). Node(Express+EJS) + Postgres.
+행번으로 로그인하면 바로 쓸 수 있어요.
-> 브랜드명 `AI DEV` 는 `PORTAL_BRAND` 환경변수로 바꿀 수 있습니다.
+🔗 접속: **https://portal.bokdev.in**  
 📖 자세한 사용 매뉴얼: **https://gitea.bokdev.in/playground/MANUAL** (포털 헤더의 `매뉴얼` 버튼에서도 열 수 있어요)
 ## 기능
 - **Keycloak OIDC 로그인** (realm `bokdev`, client `portal`, 사번 = preferred_username)
 - **개발 사이트 모음** — 개발 핵심(Coder/Gitea/Kubero/Harbor) + AI·데이터(LiteLLM/Chat/OpenEverest/MinIO). 목록은 `src/sites.js`.
 - **프로젝트 공유** — repo/앱 URL·설명·태그
 - **코멘트 / 스타**
-## 로컬 실행
+
 ## 처음 오셨나요?
 1. **로그인** — 포털에 들어가면 자동으로 사내 로그인(Keycloak) 화면으로 이동합니다.
   **행번**과 비밀번호로 로그인하세요. 별도 회원가입은 없습니다.
 2. 로그인하면 대시보드가 열립니다. 아래 세 가지를 할 수 있어요.
 ## 무엇을 할 수 있나요?
 ### 1. 개발 도구 바로가기
 대시보드 맨 위 **개발 도구** 카드를 누르면 새 탭으로 이동합니다.
 포털에 로그인돼 있으면 대부분 **다시 로그인 없이(SSO)** 바로 들어갑니다.
 - 모두 사용: **Coder**(클라우드 IDE), **Gitea**(Git 저장소), **Kubero**(배포)
 - 관리자 전용: Harbor·OpenEverest·MinIO·Keycloak·LiteLLM (권한이 있는 분에게만 보입니다)
 ### 2. 내 프로젝트 공유
 - **새 프로젝트** 버튼으로 등록합니다. 제목·설명(Markdown 지원)·태그·저장소 URL·배포 URL을 넣을 수 있어요.
  저장소 URL을 넣고 **README 가져오기**를 누르면 설명을 자동으로 채워줍니다.
 - **공개/비공개**를 고를 수 있습니다. 공개하면 동료들의 피드에 보이고, 비공개는 나만 봅니다(언제든 전환 가능).
 - 등록한 프로젝트는 상세 화면의 **✏️ 수정** 버튼으로 내용을 고치거나 삭제할 수 있습니다.
 ### 3. 동료 프로젝트 둘러보기
 - **공유 프로젝트** 피드에서 동료들이 만든 결과물을 봅니다. 최신순·인기순 정렬, 헤더 검색으로 찾기.
 - ❤️ **좋아요**, ⭐ **즐겨찾기**, 💬 **댓글**(답글·LGTM)로 응원과 피드백을 남겨보세요.
 - 이름/아바타를 누르면 그 사람의 **프로필**로 이동해 그가 만든 프로젝트를 모아 볼 수 있습니다.
 ### 그 외
 - **프로필 사진**을 올릴 수 있어요(내 프로필 → 사진의 + 버튼).
 - 헤더에서 **다크/라이트 테마**를 전환할 수 있습니다.
 ## 문제가 있거나 아이디어가 있다면
 버그·건의는 이슈로 남겨 주세요 — 언제든 환영합니다.
 👉 https://gitea.bokdev.in/playground/ai-dev-portal/issues
 ## 개발자용 (참고)
 서버 렌더링 기반의 가벼운 웹앱입니다. **Node(Express + EJS) + Postgres**, 로그인은 **Keycloak OIDC**.
 프런트 프레임워크·번들러 없이 정적 CSS/바닐라 JS로 동작합니다.
 ```bash
 cp .project-env.example .project-env   # 값 채우기 (OIDC_CLIENT_SECRET 등)
 set -a; . ./.project-env; set +a
@@ -19,17 +55,7 @@ npm install
 npm run db:init        # schema.sql 적용 (최초 1회)
 npm run dev            # http://localhost:3000
 ```
 - 로컬에서 OIDC 콜백을 받으려면 Keycloak `portal` client redirect 에
  `http://localhost:3000/auth/callback` 이 등록돼 있어야 합니다(이미 등록됨).
-## 배포 (Kubero)
+- 배포는 Kubero(NodeJS buildpack), 도메인 `portal.bokdev.in`.
- NodeJS buildpack (`npm install` → `node index.js`). Dockerfile 불필요.
+- 브랜드명 `AI DEV`는 `PORTAL_BRAND` 환경변수로 바꿀 수 있습니다.
- Kubero Env: `BASE_URL=https://portal.bokdev.in`, `DATABASE_URL`, `OIDC_*`, `SESSION_SECRET`, `PORTAL_BRAND`.
+- 코드 구조·작업 규약·환경변수 등 자세한 내용은 **`CLAUDE.md`** 를 참고하세요.
 - 도메인: `portal.bokdev.in` (게이트웨이/라우트 별도 구성 필요) 또는 `<app>.apps.bokdev.in`.
 - 배포 도메인이 정해지면 Keycloak `portal` client redirect 에 `https://<도메인>/auth/callback` 추가.
 ## 연결 정보
 - **DB**: OpenEverest `postgresql-6ox` 의 `appdb`, schema `portal`, role `portal_app`.
 - **Issuer**: `https://keycloak.bokdev.in/realms/bokdev`
 자세한 작업 규약은 `CLAUDE.md`.
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
        "ejs": "^3.1.10",
        "express": "^4.21.2",
        "express-session": "^1.18.1",
        "markdown-it": "^14.3.0",
        "openid-client": "^5.7.0",
        "pg": "^8.13.1"
      },
@@ -32,6 +33,12 @@
        "node": ">= 0.6"
      }
    },
    "node_modules/argparse": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
      "license": "Python-2.0"
    },
    "node_modules/array-flatten": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
@@ -242,6 +249,18 @@
        "node": ">= 0.8"
      }
    },
    "node_modules/entities": {
      "version": "4.5.0",
      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
      "license": "BSD-2-Clause",
      "engines": {
        "node": ">=0.12"
      },
      "funding": {
        "url": "https://github.com/fb55/entities?sponsor=1"
      }
    },
    "node_modules/es-define-property": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
@@ -562,6 +581,25 @@
        "url": "https://github.com/sponsors/panva"
      }
    },
    "node_modules/linkify-it": {
      "version": "5.0.2",
      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.2.tgz",
      "integrity": "sha512-ONTm2jCMAVZjgQa/Fy1kScXsuOoF5NPTsoFBdE1KVIZ2vAh/r9+Bqo+0jINCBYnavTPQZz38QzFTme79ENoN3Q==",
      "funding": [
        {
          "type": "github",
          "url": "https://github.com/sponsors/puzrin"
        },
        {
          "type": "github",
          "url": "https://github.com/sponsors/markdown-it"
        }
      ],
      "license": "MIT",
      "dependencies": {
        "uc.micro": "^2.0.0"
      }
    },
    "node_modules/lru-cache": {
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -574,6 +612,33 @@
        "node": ">=10"
      }
    },
    "node_modules/markdown-it": {
      "version": "14.3.0",
      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.3.0.tgz",
      "integrity": "sha512-RCEsPjR+sr0x+AuYp601tKTkgFG4YEPLCzHST3cQ/fhlJkqAkz1L2/Qbp1j9qw5SBwQHFBoW8+hoN5xssOF0Tw==",
      "funding": [
        {
          "type": "github",
          "url": "https://github.com/sponsors/puzrin"
        },
        {
          "type": "github",
          "url": "https://github.com/sponsors/markdown-it"
        }
      ],
      "license": "MIT",
      "dependencies": {
        "argparse": "^2.0.1",
        "entities": "^4.5.0",
        "linkify-it": "^5.0.2",
        "mdurl": "^2.0.0",
        "punycode.js": "^2.3.1",
        "uc.micro": "^2.1.0"
      },
      "bin": {
        "markdown-it": "bin/markdown-it.mjs"
      }
    },
    "node_modules/math-intrinsics": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -583,6 +648,12 @@
        "node": ">= 0.4"
      }
    },
    "node_modules/mdurl": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
      "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==",
      "license": "MIT"
    },
    "node_modules/media-typer": {
      "version": "0.3.0",
      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -898,6 +969,15 @@
        "node": ">= 0.10"
      }
    },
    "node_modules/punycode.js": {
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
      "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
      "license": "MIT",
      "engines": {
        "node": ">=6"
      }
    },
    "node_modules/qs": {
      "version": "6.15.2",
      "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.2.tgz",
@@ -1135,6 +1215,12 @@
        "node": ">= 0.6"
      }
    },
    "node_modules/uc.micro": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
      "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
      "license": "MIT"
    },
    "node_modules/uid-safe": {
      "version": "2.1.5",
      "resolved": "https://registry.npmjs.org/uid-safe/-/uid-safe-2.1.5.tgz",
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
    "ejs": "^3.1.10",
    "express": "^4.21.2",
    "express-session": "^1.18.1",
    "markdown-it": "^14.3.0",
    "openid-client": "^5.7.0",
    "pg": "^8.13.1"
  }
--- a/public/css/base.css
+++ b/public/css/base.css
@@ -56,14 +56,4 @@ svg { display: block; }
@keyframes aidev-fade { from{opacity:0} to{opacity:1} }
@keyframes aidev-toast { 0%{transform:translateX(-50%) translateY(12px);opacity:0} 12%{transform:translateX(-50%) translateY(0);opacity:1} 88%{transform:translateX(-50%) translateY(0);opacity:1} 100%{transform:translateX(-50%) translateY(8px);opacity:0} }
-/* 반응형 */
+/* 반응형 규칙은 public/css/responsive.css 로 이동(로드 순서상 마지막이어야 실제 적용됨). */
@media (max-width: 900px) {
  .tools-grid { grid-template-columns: repeat(2, 1fr); }
  .myproj-grid { grid-template-columns: repeat(2, 1fr); }
  .feed-grid { grid-template-columns: 1fr; }
  .brand-sub { display: none; }
 }
@media (max-width: 560px) {
  .tools-grid, .myproj-grid { grid-template-columns: 1fr; }
  .hdr-search { display: none; }
 }
--- a/public/css/components.css
+++ b/public/css/components.css
@@ -14,12 +14,8 @@
  font-size: 24px; background: var(--tile); border: 1px solid var(--tile-bd);
 }
 .tool-card.admin .tool-icon { background: var(--admin-bg); border-color: var(--admin-bd); }
-.tool-name { display: block; margin-top: 14px; font-size: 14.5px; font-weight: 700; color: var(--fg); }
+.tool-name { display: block; margin-top: 14px; font-size: 16.5px; font-weight: 700; color: var(--fg); }
-.tool-desc { display: block; margin-top: 3px; font-size: 12.5px; color: var(--fg2); line-height: 1.45; }
+.tool-desc { display: block; margin-top: 3px; font-size: 14.5px; color: var(--fg2); line-height: 1.45; }
 .sso-badge {
  position: absolute; top: 13px; right: 13px; font-size: 10px; font-weight: 700; letter-spacing: .06em;
  color: var(--accent-fg); background: var(--accent-bg); border: 1px solid var(--accent-bd); border-radius: 4px; padding: 2px 6px;
 }
 .tool-admin-badge {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 11px; font-size: 11px; font-weight: 600;
  color: var(--admin-fg); background: var(--admin-bg); border: 1px solid var(--admin-bd); border-radius: 999px; padding: 2px 8px; white-space: nowrap;
@@ -56,7 +52,7 @@
 .pcard-titlewrap { display: flex; align-items: center; gap: 7px; min-width: 0; }
 .pcard-repoico { display: inline-flex; color: var(--fg2); flex: 0 0 auto; }
 .pcard-title { font-size: 14px; font-weight: 700; color: var(--link); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.pcard-desc { margin-top: 8px; font-size: 12.5px; color: var(--fg2); line-height: 1.5; flex: 1; }
+.pcard-desc { margin-top: 8px; font-size: 12.5px; color: var(--fg2); line-height: 1.5; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; word-break: break-word; }
 .pcard-tags { margin-top: 11px; display: flex; flex-wrap: wrap; gap: 6px; }
 .pcard-foot { margin-top: 13px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
 .pcard-stats { display: flex; align-items: center; gap: 13px; font-size: 12px; color: var(--fg2); }
@@ -71,8 +67,15 @@
 }
 .vis-badge.public { color: var(--success-fg); background: var(--success-bg); border: 1px solid var(--success-bd); }
 .vis-badge.private { color: var(--fg2); background: var(--panel); border: 1px solid var(--border); }
-.toggle-share-btn { background: transparent; border: 0; padding: 0; cursor: pointer; font-family: inherit; font-size: 11.5px; font-weight: 600; color: var(--fg3); white-space: nowrap; }
+/* 배지 자체를 클릭하면 공개/비공개 토글(소유자). 버튼 기본 스타일 초기화 + 클릭 어포던스. */
-.toggle-share-btn:hover { color: var(--fg); }
+.vis-badge-form { display: inline-flex; }
 .vis-badge-btn { cursor: pointer; font-family: inherit; line-height: 1.4; transition: filter .14s ease, box-shadow .14s ease; }
 .vis-badge-btn:hover { filter: brightness(1.05); box-shadow: 0 0 0 3px var(--focus-ring); }
 .toggle-share-btn {
  display: inline-flex; align-items: center; gap: 5px; background: var(--btn-bg); border: 1px solid var(--btn-bd); border-radius: 7px; padding: 4px 10px;
  cursor: pointer; font-family: inherit; font-size: 11.5px; font-weight: 600; color: var(--fg2); white-space: nowrap; transition: background .14s ease, color .14s ease, border-color .14s ease;
 }
 .toggle-share-btn:hover { background: var(--btn-hover); color: var(--fg); border-color: var(--border); }
 .private-note { font-size: 11.5px; color: var(--fg3); }
 .share-mini-btn {
  display: inline-flex; align-items: center; gap: 5px; background: var(--success);
@@ -127,7 +130,8 @@
 .react-btn .ico-on, .modal-action .ico-on { display: none; }
 .react-btn.on .ico-on, .modal-action.on .ico-on { display: inline-flex; }
 .react-btn.on .ico-off, .modal-action.on .ico-off { display: none; }
-.fcard-desc { margin-top: 8px; font-size: 13px; color: var(--fg2); line-height: 1.55; }
+/* flex:1 로 설명 영역이 남는 높이를 채워, 태그+푸터를 카드 하단에 정렬한다(짧은 카드의 큰 빈 공간 방지). 미리보기는 2줄까지만. */
 .fcard-desc { margin-top: 8px; font-size: 13px; color: var(--fg2); line-height: 1.55; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; word-break: break-word; }
 .fcard-tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
 .fcard-foot { margin-top: 15px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
 .fcard-author { display: flex; align-items: center; gap: 8px; min-width: 0; }
@@ -136,3 +140,81 @@
 .fcard-meta { display: flex; align-items: center; gap: 13px; font-size: 12px; color: var(--fg2); }
 .fcard-meta .stat { display: inline-flex; align-items: center; gap: 5px; }
 .bara-link { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: 0; padding: 0; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--link); white-space: nowrap; }
 .fcard .fcard-foot > .date { font-size: 11.5px; color: var(--fg3); margin-left: auto; }
 /* ===================== 프로필 링크(아바타+이름) ===================== */
 /* 카드/모달/댓글의 작성자 아바타·이름을 프로필로 잇는 링크. 클릭 시 카드 모달 대신 이동. */
 .fcard-author:hover .sabun { text-decoration: underline; }
 .meta-author { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
 .meta-author:hover .sabun { text-decoration: underline; }
 .cavatar { display: inline-flex; flex: 0 0 auto; }
 .comment-author:hover { text-decoration: underline; }
 /* ===================== 프로필 페이지 ===================== */
 .profile-hero { display: flex; align-items: center; gap: 20px; }
 .profile-avatar-wrap { position: relative; flex: 0 0 auto; }
 .profile-avatar { width: 96px; height: 96px; border-radius: 24px; object-fit: cover; background: var(--avatar-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 8%, transparent); display: block; }
 .profile-avatar-edit { position: absolute; right: -4px; bottom: -4px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--card); background: var(--link); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px var(--shadow); }
 .profile-avatar-edit:hover { filter: brightness(1.08); }
 .profile-info { min-width: 0; }
 .profile-idline { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
 .admin-badge-wrap { display: inline-flex; align-self: center; margin-left: -2px; cursor: default; }
 .profile-name { margin: 0; font-size: 24px; font-weight: 800; color: var(--fg); letter-spacing: -.01em; }
 .profile-sabun { font-size: 13px; color: var(--fg2); font-variant-numeric: tabular-nums; }
 .profile-metaline { margin-top: 6px; display: flex; gap: 6px; font-size: 12.5px; color: var(--fg3); }
 /* 한줄 소개 */
 .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-save { color: var(--link); border-color: var(--link); }
 .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); }
 /* ===================== 프로필 사진 크롭 모달 ===================== */
 .crop-modal { width: 100%; max-width: 420px; margin: auto; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 48px var(--shadow-strong); overflow: hidden; animation: aidev-pop .18s ease-out; }
 .crop-head { padding: 16px 20px; border-bottom: 1px solid var(--divider); display: flex; align-items: center; justify-content: space-between; }
 .crop-head h3 { margin: 0; font-size: 16px; font-weight: 800; color: var(--fg); }
 .crop-body { padding: 18px 20px; }
 .crop-stage { position: relative; width: 300px; height: 300px; max-width: 100%; margin: 0 auto; border-radius: 12px; overflow: hidden; background: var(--inset); touch-action: none; cursor: grab; user-select: none; }
 .crop-stage:active { cursor: grabbing; }
 #cropImg { position: absolute; top: 0; left: 0; max-width: none; transform-origin: 0 0; will-change: transform; pointer-events: none; }
 .crop-veil { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 10%, transparent); border-radius: 12px; }
 .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; }
--- a/public/css/layout.css
+++ b/public/css/layout.css
@@ -6,7 +6,7 @@
 .brand { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; flex: 0 0 auto; }
 .brand-mark { display: inline-flex; color: var(--hfg); transition: transform .2s ease, filter .2s ease; }
 .brand-name { font-weight: 800; font-size: 15px; letter-spacing: .13em; color: var(--hfg); }
-.brand-sub { font-size: 11px; color: var(--hfg2); font-weight: 500; border-left: 1px solid var(--hbd); padding-left: 10px; margin-left: 2px; white-space: nowrap; }
+.brand-sub { font-size: 15px; color: var(--hfg2); font-weight: 500; border-left: 1px solid var(--hbd); padding-left: 10px; margin-left: 2px; white-space: nowrap; }
 .hdr-search { flex: 1; max-width: 300px; position: relative; display: flex; align-items: center; }
 .hdr-search-ico { position: absolute; left: 10px; display: inline-flex; color: var(--hfg2); pointer-events: none; }
@@ -25,6 +25,14 @@
  transition: background .14s ease, color .14s ease;
 }
 .icon-btn:hover { background: rgba(255,255,255,.08); color: var(--hfg); }
 /* 헤더 텍스트 링크 버튼(매뉴얼 등) — 아이콘 + 글자 */
 .hdr-link {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border-radius: 8px; border: 1px solid var(--hbd); background: transparent;
  color: var(--hfg2); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background .14s ease, color .14s ease;
 }
 .hdr-link:hover { background: rgba(255,255,255,.08); color: var(--hfg); }
 .theme-ico-sun { display: none; }
 html[data-aidev-theme="dark"] .theme-ico-moon { display: none; }
 html[data-aidev-theme="dark"] .theme-ico-sun { display: inline-flex; }
@@ -56,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; }
@@ -67,5 +109,10 @@ html[data-aidev-theme="dark"] .theme-ico-sun { display: inline-flex; }
 /* ===================== 푸터 ===================== */
 .footer { border-top: 1px solid var(--border-soft); }
 .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-left { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
 .footer-brand { display: inline-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 { font-size: 11.5px; color: var(--fg3); }
 .footer-bug a { color: var(--link); text-decoration: none; }
 .footer-bug a:hover { text-decoration: underline; }
--- a/public/css/modal.css
+++ b/public/css/modal.css
@@ -1,9 +1,10 @@
 /* 모달 — 상세 모달 · 댓글 스레드 · 공유(등록) 모달 · 토스트 · 플라이어. */
 /* ===================== 상세 모달 ===================== */
-.modal-overlay { position: fixed; inset: 0; z-index: 500; background: var(--overlay); display: flex; align-items: flex-start; justify-content: center; padding: 48px 20px; overflow-y: auto; animation: aidev-fade .16s ease-out; }
+.modal-overlay { position: fixed; inset: 0; z-index: 500; background: var(--overlay); display: flex; align-items: flex-start; justify-content: center; padding: 32px 20px; overflow-y: auto; animation: aidev-fade .16s ease-out; }
 .modal-overlay[hidden] { display: none; }
-.modal { width: 100%; max-width: 640px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 48px var(--shadow-strong); overflow: hidden; animation: aidev-pop .18s ease-out; }
+/* margin:auto → 내용이 짧으면 화면 정중앙, 길면 위에 붙어 스크롤(잘림 방지). */
 .modal { width: 100%; max-width: 880px; margin: auto; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 48px var(--shadow-strong); overflow: hidden; animation: aidev-pop .18s ease-out; }
 .modal-head { padding: 22px 24px 18px; border-bottom: 1px solid var(--divider); }
 .modal-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
 .modal-titlewrap { min-width: 0; }
@@ -18,7 +19,33 @@
 .modal-close:hover { background: var(--panel); border-color: var(--border-soft); }
 .modal-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
 .modal-desc { margin: 14px 0 0; font-size: 14px; color: var(--fg); line-height: 1.65; white-space: pre-wrap; }
 .modal-desc-empty { color: var(--fg3); }
 /* 설명(README) 마크다운 본문 */
 .md-body { margin: 14px 0 0; font-size: 14px; color: var(--fg); line-height: 1.65; word-break: break-word; }
 .md-body > :first-child { margin-top: 0; }
 .md-body > :last-child { margin-bottom: 0; }
 .md-body h1, .md-body h2, .md-body h3, .md-body h4 { margin: 18px 0 8px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; }
 .md-body h1 { font-size: 19px; padding-bottom: 6px; border-bottom: 1px solid var(--divider); }
 .md-body h2 { font-size: 16.5px; padding-bottom: 5px; border-bottom: 1px solid var(--divider); }
 .md-body h3 { font-size: 15px; }
 .md-body h4 { font-size: 14px; }
 .md-body p { margin: 10px 0; }
 .md-body ul, .md-body ol { margin: 10px 0; padding-left: 22px; }
 .md-body li { margin: 3px 0; }
 .md-body a { color: var(--link); text-decoration: none; }
 .md-body a:hover { text-decoration: underline; }
 .md-body code { font-family: 'SF Mono', ui-monospace, Menlo, monospace; font-size: 12.5px; background: var(--inset); border: 1px solid var(--border-soft); border-radius: 5px; padding: 1px 5px; }
 .md-body pre { background: var(--inset); border: 1px solid var(--border-soft); border-radius: 9px; padding: 12px 14px; overflow-x: auto; margin: 12px 0; }
 .md-body pre code { background: transparent; border: 0; padding: 0; font-size: 12.5px; }
 .md-body blockquote { margin: 12px 0; padding: 2px 14px; border-left: 3px solid var(--border); color: var(--fg2); }
 .md-body hr { border: 0; border-top: 1px solid var(--divider); margin: 16px 0; }
 .md-body table { border-collapse: collapse; margin: 12px 0; display: block; overflow-x: auto; }
 .md-body th, .md-body td { border: 1px solid var(--border); padding: 6px 12px; font-size: 13px; }
 .md-body th { background: var(--panel); font-weight: 700; }
 .md-body img { max-width: 100%; border-radius: 8px; }
 .modal-actions { margin-top: 18px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
 /* 소유자 액션(비공개 전환 · 삭제)을 우측에 한 덩어리로 묶어, 개별 버튼이 홀로 줄바꿈되지 않게 한다. */
 .modal-actions-owner { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
 .modal-action {
  display: inline-flex; align-items: center; gap: 7px; background: var(--btn-bg); border: 1px solid var(--btn-bd); border-radius: 8px;
  padding: 8px 14px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--fg);
@@ -54,6 +81,8 @@
 .modal-foot { padding: 14px 24px 22px; border-top: 1px solid var(--divider); margin-top: 6px; background: var(--bg-soft); }
 .reply-banner { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; background: var(--accent-bg); border: 1px solid var(--accent-bd); border-radius: 7px; padding: 6px 10px; }
 /* hidden 속성이 켜져 있으면 확실히 숨긴다 (display:flex 가 [hidden] 기본 규칙을 이겨 항상 보이던 버그 방지). */
 .reply-banner[hidden] { display: none; }
 .reply-banner span { font-size: 12px; color: var(--accent-strong); }
 .reply-banner button { background: transparent; border: 0; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--link); }
 .comment-form { display: flex; gap: 10px; align-items: flex-end; }
@@ -64,7 +93,7 @@
 .comment-hint { margin-top: 7px; font-size: 11px; color: var(--fg3); padding-left: 38px; }
 /* ===================== 공유(등록) 모달 ===================== */
-.share-modal { width: 100%; max-width: 520px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 48px var(--shadow-strong); overflow: hidden; animation: aidev-pop .18s ease-out; }
+.share-modal { width: 100%; max-width: 520px; margin: auto; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 48px var(--shadow-strong); overflow: hidden; animation: aidev-pop .18s ease-out; }
 .share-head { padding: 20px 24px; border-bottom: 1px solid var(--divider); display: flex; align-items: center; justify-content: space-between; }
 .share-head h3 { margin: 0; font-size: 17px; font-weight: 800; color: var(--fg); }
 .share-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 15px; }
@@ -73,7 +102,18 @@
 .share-label .hint { font-weight: 500; color: var(--fg3); }
 .share-input { width: 100%; font-family: inherit; font-size: 14px; color: var(--fg); background: var(--inset); border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; outline: none; }
 .share-input.mono { font-family: 'SF Mono', ui-monospace, Menlo, monospace; font-size: 13px; }
 .share-textarea { resize: vertical; min-height: 96px; line-height: 1.6; }
 .share-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
 .readme-btn {
  display: inline-flex; align-items: center; gap: 5px; background: var(--btn-bg); border: 1px solid var(--btn-bd); border-radius: 7px; padding: 4px 9px;
  cursor: pointer; font-family: inherit; font-size: 11.5px; font-weight: 600; color: var(--fg2); white-space: nowrap; transition: background .14s ease, color .14s ease;
 }
 .readme-btn:hover { background: var(--btn-hover); color: var(--fg); }
 .readme-btn:disabled { opacity: .6; cursor: default; }
 .share-input:focus { border-color: var(--link); box-shadow: 0 0 0 3px var(--focus-ring); }
 /* README 가져오기 실패(URL 미입력) 시 빨간 안내 + 입력란 강조 */
 .share-err { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--danger); }
 .share-input.err { border-color: var(--danger); }
 .vis-toggle { display: inline-flex; background: var(--inset); border: 1px solid var(--border); border-radius: 8px; padding: 3px; gap: 3px; }
 .vis-opt { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 0; border-radius: 6px; padding: 6px 16px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--fg2); white-space: nowrap; transition: background .14s ease, color .14s ease; }
 .vis-opt.on-public { background: var(--success-bg); color: var(--success-fg); box-shadow: inset 0 0 0 1px var(--success-bd); }
--- a/public/css/responsive.css
+++ b/public/css/responsive.css
@@ -0,0 +1,60 @@
 /* 반응형(모바일) — 데스크톱 규칙을 덮어써야 하므로 반드시 다른 CSS 이후 마지막에 로드한다.
   (_header.ejs 의 <link> 순서가 바뀌면 미디어쿼리가 무력화됨. 특히 헤더 검색창 재노출이 로드 순서에 의존.)
   데스크톱(>640px 등)은 아래 규칙이 적용되지 않아 기존과 완전히 동일하다. */
 /* ===================== 그리드 단계 축소 ===================== */
 /* (기존 base.css 에 있었으나 로드 순서 때문에 무력했던 규칙 — 여기로 옮겨 실제 작동) */
@media (max-width: 900px) {
  .tools-grid  { grid-template-columns: repeat(2, 1fr); }
  .myproj-grid { grid-template-columns: repeat(2, 1fr); }
  .feed-grid   { grid-template-columns: 1fr; }
  .brand-sub   { display: none; }
 }
@media (max-width: 560px) {
  .tools-grid, .myproj-grid { grid-template-columns: 1fr; }
 }
 /* ===================== 모바일 레이아웃 · 터치 다듬기 ===================== */
@media (max-width: 640px) {
  /* 헤더: 고정 높이 해제 → 줄바꿈 허용. 검색창은 둘째 줄 전체 폭으로. */
  .hdr-inner  { flex-wrap: wrap; height: auto; min-height: 56px; padding: 8px 16px; row-gap: 8px; }
  .brand      { flex: 1 1 auto; min-width: 0; }
  .hdr-right  { margin-left: auto; }            /* 브랜드와 같은 첫 줄, 우측 정렬 유지 */
  .hdr-search { display: flex; order: 10; flex-basis: 100%; max-width: none; } /* base 의 display:none 을 로드순서로 이김 → 둘째 줄 */
  /* 터치 영역 ≥44px */
  .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,
  .comment-link, .modal-action, .btn { min-height: 44px; }
  /* 크롭 스테이지 정사각 유지(profile.js 의 clientWidth==clientHeight 가정 충족) */
  .crop-stage { width: 100%; height: auto; aspect-ratio: 1 / 1; }
  /* 입력창 16px — iOS 포커스 시 자동확대 방지 */
  .hdr-search input, .share-input, .share-input.mono,
  .comment-input, .profile-bio-form input { font-size: 16px; }
  /* 좌우 여백 축소 (24px → 16px) */
  .main         { padding: 20px 16px 48px; }
  .detail-wrap  { padding: 20px 16px 48px; }   /* project.ejs 단독 상세 */
  .footer-inner { padding: 16px; }
  /* 줄바꿈 / 프로필 히어로 세로 스택 */
  .section-head, .feed-head, .feed-head-right { flex-wrap: wrap; }
  .profile-hero    { flex-direction: column; align-items: center; text-align: center; gap: 14px; }
  .profile-idline, .profile-metaline, .profile-bio-row, .profile-bio-form { justify-content: center; }
  /* 모달 여백 축소 */
  .modal-overlay     { padding: 16px 12px; }
  .modal-head        { padding: 16px 16px 14px; }
  .modal-body        { padding: 14px 16px 4px; }
  .modal-foot        { padding: 12px 16px 18px; }
  .modal-foot-actions{ padding: 12px 16px; }
  .share-head, .share-body, .crop-body { padding: 16px; }
  .crop-head         { padding: 14px 16px; }
 }
--- a/public/css/tokens.css
+++ b/public/css/tokens.css
@@ -1,14 +1,7 @@
 /* 디자인 토큰 — 폰트 + CSS 변수(라이트/다크). 가장 먼저 로드. */
-/* Pretendard — 폐쇄망 대비 로컬 호스팅(가변 폰트 1개). 파일이 없으면 시스템 폰트로 폴백.
+/* Pretendard — CDN(jsdelivr)에서 로드. views/_header 의 <link> 로 불러온다(인터넷 연결 환경).
-   파일 받기: public/fonts/PretendardVariable.woff2 (README 안내 참고) */
+   미로드 시 base.css 의 시스템 폰트 스택으로 폴백. */
@font-face {
  font-family: 'Pretendard';
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url('/public/fonts/PretendardVariable.woff2') format('woff2-variations');
 }
 :root {
  color-scheme: light;
--- a/public/favicon.svg
+++ b/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>
--- a/public/js/announcements.js
+++ b/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;
    }
  });
 }
--- a/public/js/feed.js
+++ b/public/js/feed.js
@@ -2,11 +2,13 @@
 import { $, $$ } from "./util.js";
 function applyFeed() {
-  const grid = $("#feedGrid"); if (!grid) return;
+  // 검색 대상 = 현재 페이지의 검색 가능한 카드 전체(대시보드=공유 프로젝트, 프로필=그 사람 프로젝트).
  const cards = $$(".fcard[data-search]");
  if (!cards.length) return;
  const q = (($("#feedSearch") && $("#feedSearch").value) || "").trim().toLowerCase();
  const starOnly = $("#feedStarFilter") && $("#feedStarFilter").classList.contains("on");
  let visible = 0;
-  $$(".fcard", grid).forEach((c) => {
+  cards.forEach((c) => {
    const hit = !q || (c.getAttribute("data-search") || "").indexOf(q) >= 0;
    const st = !starOnly || c.getAttribute("data-starred") === "true";
    const show = hit && st;
--- a/public/js/main.js
+++ b/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() {
@@ -16,6 +18,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() {
@@ -24,8 +38,8 @@ function consoleArt() {
    const art = ["   ___    ____   ____  _______    __", "  /   |  /  _/  / __ \\/ ____/ |  / /", " / /| |  / /   / / / / __/  | | / / ", "/ ___ |_/ /   / /_/ / /___  | |/ /  ", "/_/  |_/___/  /_____/_____/  |___/   "].join("\n");
    console.log("%c" + art, "color:#0969da;font-family:monospace;font-size:11px;line-height:1.1");
    console.log("%c👀 코드 구경 왔어요? 환영합니다.", "color:#1f883d;font-size:13px;font-weight:bold");
-    console.log("%c사내 개발팀은 늘 동료를 찾고 있어요 — git blame 하지 말고 git praise 합시다. 🙇", "color:#656d76;font-size:12px");
+    console.log("%c이슈는 https://gitea.bokdev.in/playground/ai-dev-portal/issues에 제보해주세요! 언제든 환영합니다.", "color:#656d76;font-size:12px");
-    console.log("%cps. 댓글에 LGTM 한 번 쳐보세요.", "color:#8b949e;font-size:11px");
+    console.log("%c댓글에 LGTM을 쳐보세요.", "color:#8b949e;font-size:11px");
  } catch (e) {}
 }
@@ -38,6 +52,8 @@ function boot() {
  initComments();
  initFeed();
  initMyFilter();
  initNotifications();
  initAnnouncements();
  initSignals();
  consoleArt();
 }
--- a/public/js/modals.js
+++ b/public/js/modals.js
@@ -1,5 +1,40 @@
 // 상세 모달 · 공유(등록) 모달 — 열기/닫기 및 공개범위 토글.
-import { $, $$ } from "./util.js";
+import { $, $$, toast } from "./util.js";
 import { applyReactions } from "./reactions.js";
 // 저장소 URL 입력란의 빨간 안내(README 가져오기 전제)를 지운다.
 function clearRepoErr(m) {
  const err = $("#repoErr", m);
  const repoInput = $('input[name="repo_url"]', m);
  if (err) err.hidden = true;
  if (repoInput) repoInput.classList.remove("err");
 }
 // 등록 모달의 "저장소 README 가져오기" — repo_url 의 README 를 받아 설명란을 채운다.
 async function importReadme() {
  const m = $("#shareModal"); if (!m) return;
  const btn = $("#readmeImport", m);
  const repoInput = $('input[name="repo_url"]', m);
  const err = $("#repoErr", m);
  const ta = $('textarea[name="description"]', m);
  const repo = ((repoInput && repoInput.value) || "").trim();
  // URL 미입력 → 입력란 옆에 빨간 안내를 띄우고 포커스만 준다(토스트 대신 인라인).
  if (!repo) { if (err) err.hidden = false; if (repoInput) { repoInput.classList.add("err"); repoInput.focus(); } return; }
  clearRepoErr(m);
  if (ta && ta.value.trim() && !window.confirm("현재 설명 내용을 README 로 덮어쓸까요?")) return;
  const label = btn ? btn.innerHTML : "";
  if (btn) { btn.disabled = true; btn.textContent = "가져오는 중…"; }
  try {
    const res = await fetch("/api/readme?repo_url=" + encodeURIComponent(repo), { headers: { "X-Requested-With": "fetch" } });
    const data = res.ok ? await res.json() : null;
    if (data && data.content && ta) { ta.value = data.content; toast("README 를 가져왔어요"); ta.focus(); }
    else toast("README 를 찾지 못했어요 · URL 을 확인해 주세요");
  } catch (e) {
    toast("가져오기에 실패했어요");
  } finally {
    if (btn) { btn.disabled = false; btn.innerHTML = label; }
  }
 }
 export function openDetail(id) {
  const tpl = $('#detailStore template[data-detail-id="' + id + '"]');
@@ -7,25 +42,78 @@ 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";
-  overlay.setAttribute("data-open-id", id);
+  // 주의: 열기 감지 셀렉터가 [data-open-id] 라서 같은 이름을 쓰면 모달 내부 클릭(닫기/삭제)이
  // 다시 "열기"로 잡힌다. 마커는 반드시 다른 속성명(data-open-pid)으로 둔다.
  overlay.setAttribute("data-open-pid", id);
  // 스크롤 컨테이너(overflow-y:auto 인 .modal-overlay)를 맨 위로 되돌린다.
  overlay.scrollTop = 0;
  // 주의: 그냥 focus() 하면 브라우저가 하단 댓글창을 보이게 하려고 모달을 맨 아래로
  // 스크롤한다 → README 가 길면 상세가 하단에 고정돼 열린다. preventScroll 로 막는다.
  const ta = $(".comment-input", overlay);
-  if (ta) ta.focus();
+  if (ta) ta.focus({ preventScroll: true });
 }
 function closeDetail() {
  const overlay = $("#detailModal");
  if (!overlay || overlay.hidden) return;
  overlay.hidden = true;
-  overlay.removeAttribute("data-open-id");
+  overlay.removeAttribute("data-open-pid");
  document.body.style.overflow = "";
 }
 // 폼 모달의 공개범위 토글을 지정 값으로 맞춘다(등록/수정 공용).
 function setVis(m, isPublic) {
  const input = $('input[name="is_public"]', m);
  if (input) input.value = isPublic ? "1" : "0";
  $$("[data-vis]", m).forEach((b) => {
    const pub = b.getAttribute("data-vis") === "public";
    b.classList.toggle("on-public", pub && isPublic);
    b.classList.toggle("on-private", !pub && !isPublic);
  });
  const hint = $(".share-vishint", m);
  if (hint) hint.textContent = isPublic ? "피드에 공개되어 동료가 볼 수 있어요" : "나만 볼 수 있어요 · 언제든 공유로 전환 가능";
 }
 function fieldSet(m, name, value) {
  const el = $('[name="' + name + '"]', m);
  if (el) el.value = value == null ? "" : value;
 }
 // 등록 모드로 초기화해서 연다.
 function openShare() {
  const m = $("#shareModal"); if (!m) return;
  const form = $("form", m); if (form) form.setAttribute("action", "/projects");
  const h = $("#shareTitle", m); if (h) h.textContent = "새 프로젝트 등록";
  const sub = $("#shareSubmit", m); if (sub) sub.textContent = "등록";
  ["title", "description", "tags", "repo_url", "app_url", "lang", "return_to"].forEach((n) => fieldSet(m, n, ""));
  clearRepoErr(m);
  setVis(m, true);
  m.hidden = false; document.body.style.overflow = "hidden";
  const t = $('input[name="title"]', m); if (t) t.focus();
 }
 // 수정 모드: 상세의 '수정' 버튼 data-* 로 폼을 채우고 연다.
 function openEdit(btn) {
  const m = $("#shareModal"); if (!m || !btn) return;
  const form = $("form", m);
  if (form) form.setAttribute("action", "/projects/" + btn.getAttribute("data-id") + "/edit");
  const h = $("#shareTitle", m); if (h) h.textContent = "프로젝트 수정";
  const sub = $("#shareSubmit", m); if (sub) sub.textContent = "저장";
  fieldSet(m, "title", btn.getAttribute("data-title"));
  fieldSet(m, "description", btn.getAttribute("data-desc"));
  fieldSet(m, "tags", btn.getAttribute("data-tags"));
  fieldSet(m, "repo_url", btn.getAttribute("data-repo"));
  fieldSet(m, "app_url", btn.getAttribute("data-app"));
  fieldSet(m, "lang", btn.getAttribute("data-lang"));
  fieldSet(m, "return_to", btn.getAttribute("data-return"));
  setVis(m, btn.getAttribute("data-public") === "1");
  clearRepoErr(m);
  m.hidden = false; document.body.style.overflow = "hidden";
  const t = $('input[name="title"]', m); if (t) { t.focus(); t.select(); }
 }
 function closeShare() {
  const m = $("#shareModal"); if (!m || m.hidden) return;
  m.hidden = true; document.body.style.overflow = "";
@@ -42,7 +130,10 @@ export function initModals() {
    }
    if (e.target.closest("[data-close-detail]")) { e.preventDefault(); closeDetail(); return; }
    if (e.target.closest("[data-open-share]")) { e.preventDefault(); openShare(); return; }
    const editBtn = e.target.closest("[data-open-edit]");
    if (editBtn) { e.preventDefault(); openEdit(editBtn); return; }
    if (e.target.closest("[data-close-share]")) { e.preventDefault(); closeShare(); return; }
    if (e.target.closest("#readmeImport")) { e.preventDefault(); importReadme(); return; }
    const detail = $("#detailModal");
    if (detail && !detail.hidden && e.target === detail) { closeDetail(); return; }
@@ -64,5 +155,9 @@ export function initModals() {
      if (hint) hint.textContent = val === "public" ? "피드에 공개되어 동료가 볼 수 있어요" : "나만 볼 수 있어요 · 언제든 공유로 전환 가능";
    }
  });
  // 저장소 URL 을 입력하기 시작하면 빨간 안내를 즉시 지운다.
  document.addEventListener("input", (e) => {
    if (e.target && e.target.name === "repo_url") { const m = $("#shareModal"); if (m) clearRepoErr(m); }
  });
  document.addEventListener("keydown", (e) => { if (e.key === "Escape") { closeDetail(); closeShare(); } });
 }
--- a/public/js/notifications.js
+++ b/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);
 }
--- a/public/js/profile.js
+++ b/public/js/profile.js
@@ -0,0 +1,192 @@
 // 프로필 사진 업로드 — 파일 선택 → 정사각 크롭(드래그 이동 + 확대) → 256px webp 로 서버 전송.
 // 서버 이미지 라이브러리 없이 브라우저 canvas 에서 자르고 축소한다.
 import { $, toast } from "./util.js";
 const OUT = 256; // 저장 이미지 한 변(px)
 // 한줄 소개 편집 — 텍스트/편집버튼을 폼으로 토글, 저장은 fetch 로 즉시 반영.
 function initBio() {
  const row = $("#bioRow");
  const form = $("#bioForm");
  const text = $("#bioText");
  const editBtn = $("#bioEditBtn");
  const input = $("#bioInput");
  const cancel = $("#bioCancel");
  if (!row || !form || !text || !editBtn || !input) return; // 본인 프로필에서만 동작
  function show(editing) {
    row.hidden = editing;
    form.hidden = !editing;
    if (editing) { input.focus(); input.select(); }
  }
  editBtn.addEventListener("click", () => show(true));
  if (cancel) cancel.addEventListener("click", () => { input.value = text.classList.contains("is-empty") ? "" : text.textContent; show(false); });
  input.addEventListener("keydown", (e) => { if (e.key === "Escape") { e.preventDefault(); cancel.click(); } });
  form.addEventListener("submit", async (e) => {
    e.preventDefault();
    const bio = input.value.trim().slice(0, 80);
    const saveBtn = $("#bioSave");
    if (saveBtn) saveBtn.disabled = true;
    try {
      const res = await fetch("/profile/bio", {
        method: "POST",
        headers: { "Content-Type": "application/json", "X-Requested-With": "fetch" },
        body: JSON.stringify({ bio }),
      });
      if (!res.ok) throw new Error("save failed");
      text.textContent = bio || "한줄 소개를 남겨보세요";
      text.classList.toggle("is-empty", !bio);
      show(false);
      toast("한줄 소개가 저장됐어요");
    } catch (err) {
      toast("저장에 실패했어요");
    } finally {
      if (saveBtn) saveBtn.disabled = false;
    }
  });
 }
 export function initProfile() {
  initBio();
  const editBtn = $("#avatarEditBtn");
  const modal = $("#cropModal");
  if (!editBtn || !modal) return; // 본인 프로필이 아니면 크롭 UI 없음
  const stage = $("#cropStage");
  const img = $("#cropImg");
  const zoom = $("#cropZoom");
  const fileInput = $("#avatarFile");
  const saveBtn = $("#cropSave");
  const pickBtn = $("#cropPick");
  const closeBtn = $("#cropClose");
  const avatarEls = document.querySelectorAll('[data-avatar], #profileAvatar');
  // 크롭 상태: 스테이지(정사각)를 뷰포트로 보고, 그 안에 이미지가 항상 뷰포트를 덮도록 배치.
  const st = { nw: 0, nh: 0, base: 1, zoom: 1, tx: 0, ty: 0, S: 0 };
  function stageSize() { return stage.clientWidth; } // 정사각(= clientHeight)
  function scale() { return st.base * st.zoom; }
  // 이미지가 뷰포트를 항상 덮도록 tx,ty 를 제한.
  function clamp() {
    const dispW = st.nw * scale();
    const dispH = st.nh * scale();
    st.tx = Math.min(0, Math.max(st.S - dispW, st.tx));
    st.ty = Math.min(0, Math.max(st.S - dispH, st.ty));
  }
  function render() {
    const dispW = st.nw * scale();
    const dispH = st.nh * scale();
    img.style.width = dispW + "px";
    img.style.height = dispH + "px";
    img.style.transform = `translate(${st.tx}px, ${st.ty}px)`;
  }
  function loadImage(src) {
    img.onload = () => {
      st.nw = img.naturalWidth;
      st.nh = img.naturalHeight;
      st.S = stageSize();
      // cover: 짧은 변이 스테이지를 채우도록.
      st.base = st.S / Math.min(st.nw, st.nh);
      st.zoom = 1;
      if (zoom) zoom.value = "1";
      // 가운데 정렬
      st.tx = (st.S - st.nw * scale()) / 2;
      st.ty = (st.S - st.nh * scale()) / 2;
      clamp();
      render();
    };
    img.src = src;
  }
  function openModal() { modal.hidden = false; document.body.style.overflow = "hidden"; }
  function closeModal() { modal.hidden = true; document.body.style.overflow = ""; }
  editBtn.addEventListener("click", () => fileInput.click());
  if (pickBtn) pickBtn.addEventListener("click", () => fileInput.click());
  if (closeBtn) closeBtn.addEventListener("click", closeModal);
  modal.addEventListener("click", (e) => { if (e.target === modal) closeModal(); });
  fileInput.addEventListener("change", () => {
    const f = fileInput.files && fileInput.files[0];
    if (!f) return;
    if (!/^image\/(png|jpeg|webp)$/.test(f.type)) { toast("PNG·JPG·WEBP 이미지만 올릴 수 있어요"); return; }
    const reader = new FileReader();
    reader.onload = () => { loadImage(reader.result); openModal(); };
    reader.readAsDataURL(f);
  });
  // 확대 슬라이더 — 스테이지 중심을 고정한 채 확대/축소.
  if (zoom) zoom.addEventListener("input", () => {
    const cx = st.S / 2, cy = st.S / 2;
    const prev = scale();
    const ix = (cx - st.tx) / prev; // 중심에 대응하는 이미지 좌표
    const iy = (cy - st.ty) / prev;
    st.zoom = parseFloat(zoom.value) || 1;
    st.tx = cx - ix * scale();
    st.ty = cy - iy * scale();
    clamp();
    render();
  });
  // 드래그 이동 (포인터 이벤트)
  let dragging = false, px = 0, py = 0;
  stage.addEventListener("pointerdown", (e) => {
    dragging = true; px = e.clientX; py = e.clientY;
    stage.setPointerCapture(e.pointerId);
  });
  stage.addEventListener("pointermove", (e) => {
    if (!dragging) return;
    st.tx += e.clientX - px; st.ty += e.clientY - py;
    px = e.clientX; py = e.clientY;
    clamp(); render();
  });
  const endDrag = () => { dragging = false; };
  stage.addEventListener("pointerup", endDrag);
  stage.addEventListener("pointercancel", endDrag);
  saveBtn.addEventListener("click", async () => {
    if (!st.nw) return;
    const sc = scale();
    // 스테이지 뷰포트(0..S) 를 이미지 원본 좌표로 역변환.
    const sx = (0 - st.tx) / sc;
    const sy = (0 - st.ty) / sc;
    const sSize = st.S / sc;
    const canvas = document.createElement("canvas");
    canvas.width = OUT; canvas.height = OUT;
    const ctx = canvas.getContext("2d");
    ctx.imageSmoothingQuality = "high";
    ctx.drawImage(img, sx, sy, sSize, sSize, 0, 0, OUT, OUT);
    const blob = await new Promise((r) => canvas.toBlob(r, "image/webp", 0.85));
    if (!blob) { toast("이미지 변환에 실패했어요"); return; }
    saveBtn.disabled = true; saveBtn.textContent = "저장 중…";
    try {
      const res = await fetch("/profile/avatar", {
        method: "POST",
        headers: { "Content-Type": "image/webp", "X-Requested-With": "fetch" },
        body: blob,
      });
      if (!res.ok) throw new Error("upload failed");
      // 캐시 무력화를 위해 모든 내 아바타 src 에 타임스탬프 부여.
      const bust = "?t=" + Date.now();
      avatarEls.forEach((el) => {
        const base = (el.getAttribute("src") || "").split("?")[0];
        if (base) el.setAttribute("src", base + bust);
      });
      toast("프로필 사진이 변경됐어요");
      closeModal();
    } catch (e) {
      toast("업로드에 실패했어요");
    } finally {
      saveBtn.disabled = false; saveBtn.textContent = "저장";
    }
  });
 }
 initProfile();
--- a/public/js/reactions.js
+++ b/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("처리에 실패했습니다. 다시 시도해 주세요."));
  });
 }
--- a/schema.sql
+++ b/schema.sql
@@ -5,10 +5,18 @@ CREATE TABLE IF NOT EXISTS users (
  sabun       text PRIMARY KEY,            -- 사번 (Keycloak preferred_username)
  name        text NOT NULL,
  email       text,
-  avatar_seed text,                        -- 아바타 색/이니셜용
+  avatar_seed text,                        -- 아바타 색/이니셜용(미업로드 시 identicon 시드)
  created_at  timestamptz NOT NULL DEFAULT now(),
  last_login  timestamptz
 );
 -- 업로드한 프로필 사진(1:1 크롭·256px webp 등, 브라우저에서 축소). 없으면 identicon 폴백.
 ALTER TABLE users ADD COLUMN IF NOT EXISTS avatar bytea;
 ALTER TABLE users ADD COLUMN IF NOT EXISTS avatar_mime text;
 ALTER TABLE users ADD COLUMN IF NOT EXISTS avatar_updated_at timestamptz;
 -- 한줄 소개(프로필에 표시). 본인만 편집.
 ALTER TABLE users ADD COLUMN IF NOT EXISTS bio text DEFAULT '';
 -- 관리자 여부. Keycloak 그룹 기준으로 로그인 시마다 갱신(소스 오브 트루스는 Keycloak).
 ALTER TABLE users ADD COLUMN IF NOT EXISTS is_admin boolean NOT NULL DEFAULT false;
 -- 공유 프로젝트 (직원이 만든 앱/repo 를 포털에 공유)
 CREATE TABLE IF NOT EXISTS projects (
@@ -56,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);
--- a/src/auth.js
+++ b/src/auth.js
@@ -42,23 +42,36 @@ export async function handleCallback(req) {
    nonce,
  });
  const claims = tokenSet.claims();
-  // Keycloak realm 역할: realm_access.roles. (클라이언트 역할은 resource_access[client].roles)
+  // 그룹 기반 관리자 판별. Keycloak group-membership 매퍼가 ID 토큰에 groups 를 넣는다.
-  const realmRoles = (claims.realm_access && claims.realm_access.roles) || [];
+  // full.path=false 라 보통 "DevOps" 형태지만, 설정에 따라 "/DevOps" 일 수 있어 앞 슬래시는 떼고 비교.
-  const clientRoles =
+  const groups = (Array.isArray(claims.groups) ? claims.groups : []).map((g) => g.replace(/^\//, ""));
-    (claims.resource_access &&
+  // 표시 이름: 한국식 성+이름 순서(예: 홍길동). Keycloak `name` 클레임은 보통 이름+성("길동 홍")이라
-      claims.resource_access[config.oidc.clientId] &&
+  // family_name(성)+given_name(이름) 을 공백 없이 조합해 교정한다. 둘 다 없으면 name/사번으로 폴백.
-      claims.resource_access[config.oidc.clientId].roles) ||
+  const fam = (claims.family_name || "").trim();
-    [];
+  const giv = (claims.given_name || "").trim();
-  const roles = [...new Set([...realmRoles, ...clientRoles])];
+  const displayName = fam || giv ? fam + giv : claims.name || claims.preferred_username;
  return {
    sabun: claims.preferred_username, // 사번
-    name: claims.name || claims.given_name || claims.preferred_username,
+    name: displayName,
    email: claims.email,
-    roles,
+    groups,
-    isAdmin: roles.includes(config.adminRole),
+    isAdmin: groups.includes(config.adminGroup),
    // SSO 로그아웃(end-session) 시 id_token_hint 로 사용
    id_token: tokenSet.id_token,
  };
 }
 // SSO 로그아웃 — Keycloak end_session_endpoint 로 보내 로컬뿐 아니라
 // Keycloak SSO 세션까지 종료한다. id_token_hint 가 있으면 확인 화면 없이 즉시 로그아웃.
 // 종료 후 post_logout_redirect_uri 로 복귀.
 export function logoutUrl(idToken) {
  if (!client) return `${config.baseUrl}/login`;
  return client.endSessionUrl({
    id_token_hint: idToken,
    post_logout_redirect_uri: `${config.baseUrl}/login`,
  });
 }
 // 로그인 필수 가드
 export function requireAuth(req, res, next) {
  if (req.session.user) return next();
@@ -69,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("관리자만 접근할 수 있습니다."));
 }
--- a/src/config.js
+++ b/src/config.js
@@ -13,21 +13,30 @@ export const config = {
    // redirect 는 baseUrl + /auth/callback 로 구성
  },
-  // 관리자 판별용 Keycloak 역할 이름. 이 role 을 가진 사용자에게만 인프라 도구 노출.
+  // 관리자 판별용 Keycloak 그룹 이름. 이 그룹에 속한 사용자에게만 인프라 도구 노출.
-  adminRole: process.env.ADMIN_ROLE || "admin",
+  // (groups 클레임은 portal 클라이언트의 group-membership 매퍼가 ID 토큰에 넣어줌)
  adminGroup: process.env.ADMIN_GROUP || "DevOps",
  // 프로젝트 등록 시 Gitea 언어 통계 API 로 메인 언어 자동 판별용 토큰(선택).
  // 공개 레포는 없어도 되고, 비공개 레포 조회에만 필요.
  giteaToken: process.env.GITEA_TOKEN || "",
  // 도구(사이트) URL — 폐쇄망/도메인 변경 대비 환경변수로 덮어쓰기 가능.
  tools: {
    coder: process.env.CODER_URL || "https://coder.bokdev.in/api/v2/users/oidc/callback",
    gitea: process.env.GITEA_URL || "https://gitea.bokdev.in/user/oauth2/keycloak",
    kubero: process.env.KUBERO_URL || "https://kubero.bokdev.in",
    coolify: process.env.COOLIFY_URL || "https://coolify.bokdev.in/auth/keycloak/redirect",
    harbor: process.env.HARBOR_URL || "https://harbor.bokdev.in",
    openeverest: process.env.OPENEVEREST_URL || "https://openeverest.bokdev.in",
    minio: process.env.MINIO_URL || "https://minioc.bokdev.in",
    keycloak: process.env.KEYCLOAK_URL || "https://keycloak.bokdev.in/admin",
-    litellm: process.env.LITELLM_URL || "https://litellm.bokdev.in",
+    litellm: process.env.LITELLM_URL || "https://litellm.bok.or.kr",
  },
  // 포털 표시 이름 (변경 가능)
  brand: process.env.PORTAL_BRAND || "AI DEV",
  // 포털 사용 매뉴얼 링크(헤더 '매뉴얼' 버튼). 도메인 변경 대비 환경변수로 덮어쓰기 가능.
  manualUrl: process.env.MANUAL_URL || "https://gitea.bokdev.in/playground/MANUAL",
 };
--- a/src/db.js
+++ b/src/db.js
@@ -6,17 +6,48 @@ export const pool = new pg.Pool({ connectionString: config.databaseUrl });
 export const q = (text, params) => pool.query(text, params);
-// 로그인 시 사용자 upsert
+// 로그인 시 사용자 upsert. is_admin 은 Keycloak 그룹 판별값을 매 로그인마다 갱신.
-export async function upsertUser({ sabun, name, email }) {
+export async function upsertUser({ sabun, name, email, isAdmin }) {
  await q(
-    `INSERT INTO users (sabun, name, email, avatar_seed, last_login)
+    `INSERT INTO users (sabun, name, email, avatar_seed, is_admin, last_login)
-     VALUES ($1,$2,$3,$1, now())
+     VALUES ($1,$2,$3,$1,$4, now())
     ON CONFLICT (sabun) DO UPDATE
-       SET name=EXCLUDED.name, email=EXCLUDED.email, last_login=now()`,
+       SET name=EXCLUDED.name, email=EXCLUDED.email, is_admin=EXCLUDED.is_admin, last_login=now()`,
-    [sabun, name, email || null]
+    [sabun, name, email || null, !!isAdmin]
  );
 }
 // 프로필 사진 저장(본인). 브라우저에서 1:1 크롭·축소한 작은 이미지 버퍼를 그대로 보관.
 export async function setAvatar({ sabun, buf, mime }) {
  await q(
    `UPDATE users SET avatar=$2, avatar_mime=$3, avatar_updated_at=now() WHERE sabun=$1`,
    [sabun, buf, mime]
  );
 }
 // 한줄 소개 저장(본인). 80자 이내로 잘라 보관.
 export async function setBio({ sabun, bio }) {
  await q(`UPDATE users SET bio=$2 WHERE sabun=$1`, [sabun, String(bio || "").slice(0, 80)]);
 }
 // 프로필 사진 조회 → { avatar(Buffer|null), avatar_mime }. 없으면 호출부에서 identicon 폴백.
 export async function getAvatar(sabun) {
  const { rows } = await q(`SELECT avatar, avatar_mime FROM users WHERE sabun=$1`, [sabun]);
  return rows[0] || null;
 }
 // 프로필 페이지용 사용자 정보 + 프로젝트 수(공개만 카운트가 아니라 전체 — 뷰에서 필요 시 구분).
 export async function getUserProfile(sabun) {
  const { rows } = await q(
    `SELECT u.sabun, u.name, u.email, u.created_at, u.bio, u.is_admin,
            (u.avatar IS NOT NULL) AS has_avatar,
            (SELECT count(*) FROM projects p WHERE p.owner_sabun=u.sabun)::int AS project_count
       FROM users u WHERE u.sabun=$1`,
    [sabun]
  );
  return rows[0] || null;
 }
 // 카드/피드에 필요한 카운트 + 현재 사용자(viewer)의 ❤️/⭐ 여부를 함께 계산하는 공통 SELECT 절.
 // $1 = viewer 사번.
 const PROJECT_SELECT = `
@@ -40,6 +71,18 @@ export async function listProjects(viewer) {
  return rows;
 }
 // 특정 사용자(owner)의 프로젝트 — 프로필 페이지용.
 // 본인($1===owner)이면 비공개 포함 전체, 타인이면 공개 프로젝트만.
 export async function listProjectsByOwner(owner, viewer) {
  const { rows } = await q(
    `${PROJECT_SELECT}
      WHERE p.owner_sabun=$2 AND (p.is_public OR p.owner_sabun=$1)
      ORDER BY p.created_at DESC`,
    [viewer, owner]
  );
  return rows;
 }
 // 단일 프로젝트 (가시성 검사는 호출부에서: is_public 이거나 본인일 때만 노출)
 export async function getProject(id, viewer) {
  const { rows } = await q(`${PROJECT_SELECT} WHERE p.id=$2`, [viewer, id]);
@@ -78,6 +121,17 @@ export async function addProject({ owner, title, description, repoUrl, appUrl, t
  return rows[0].id;
 }
 // 본인 프로젝트 수정. 적용 행 수 반환(0이면 권한 없음/없음). 소유자 조건으로 타인 수정 차단.
 export async function updateProject({ id, sabun, title, description, repoUrl, appUrl, tags, isPublic, lang }) {
  const { rowCount } = await q(
    `UPDATE projects
        SET title=$3, description=$4, repo_url=$5, app_url=$6, tags=$7, is_public=$8, lang=$9, updated_at=now()
      WHERE id=$1 AND owner_sabun=$2`,
    [id, sabun, title, description || "", repoUrl || "", appUrl || "", tags || "", isPublic !== false, lang || ""]
  );
  return rowCount;
 }
 // 본인 프로젝트 삭제. 삭제 행 수 반환(0이면 권한 없음/없음).
 export async function deleteProject({ id, sabun }) {
  const { rowCount } = await q(
@@ -146,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;
 }
--- a/src/gitea.js
+++ b/src/gitea.js
@@ -0,0 +1,92 @@
 // Gitea 언어 통계 조회 — 프로젝트의 repo_url 로 메인 언어를 자동 판별.
 // 공개 레포는 토큰 없이도 조회되고, 비공개 레포는 GITEA_TOKEN 이 있어야 한다.
 // 네트워크 실패/타임아웃/비-Gitea URL 이면 빈 문자열을 반환해 호출부가 폴백하도록 한다.
 import { config } from "./config.js";
 // repo_url → { base, owner, repo } 파싱. URL 형태가 아니거나 owner/repo 가 없으면 null.
 // 예) https://gitea.bokdev.in/hong/my-app(.git) → { base, owner: hong, repo: my-app }
 export function parseRepo(repoUrl) {
  if (!repoUrl) return null;
  let u;
  try {
    u = new URL(repoUrl);
  } catch {
    return null;
  }
  const parts = u.pathname.replace(/\.git$/, "").split("/").filter(Boolean);
  if (parts.length < 2) return null;
  return { base: `${u.protocol}//${u.host}`, owner: parts[0], repo: parts[1] };
 }
 // 레포의 메인 언어(바이트 최다) 1개를 반환. 실패/없음이면 "".
 export async function fetchMainLang(repoUrl) {
  const r = parseRepo(repoUrl);
  if (!r) return "";
  const url = `${r.base}/api/v1/repos/${encodeURIComponent(r.owner)}/${encodeURIComponent(r.repo)}/languages`;
  const headers = { Accept: "application/json" };
  if (config.giteaToken) headers.Authorization = `token ${config.giteaToken}`;
  // 등록 응답이 Gitea 응답을 기다리다 멈추지 않도록 3초 타임아웃.
  const ctrl = new AbortController();
  const timer = setTimeout(() => ctrl.abort(), 3000);
  try {
    const res = await fetch(url, { headers, signal: ctrl.signal });
    if (!res.ok) return "";
    const data = await res.json(); // { "JavaScript": 12345, "CSS": 678, ... }
    let top = "";
    let max = -1;
    for (const [lang, bytes] of Object.entries(data || {})) {
      if (typeof bytes === "number" && bytes > max) {
        max = bytes;
        top = lang;
      }
    }
    return top;
  } catch {
    return "";
  } finally {
    clearTimeout(timer);
  }
 }
 // raw README 의 개행을 정리한다. Gitea 화면(렌더링)에는 없지만 raw 원문에 남아 있는
 // 군더더기 개행이 설명란에 "없던 엔터"처럼 들어오는 문제를 막는다.
 //  - CRLF/CR → LF 로 통일(Windows 개행의 \r 제거)
 //  - 줄 끝 공백 제거
 //  - 3줄 이상 연속 빈 줄 → 빈 줄 1개(2개 개행)로 축소 (마크다운상 동일)
 //  - 문서 앞뒤 공백/개행 제거
 function normalizeReadme(text) {
  return String(text)
    .replace(/\r\n?/g, "\n")
    .replace(/[ \t]+$/gm, "")
    .replace(/\n{3,}/g, "\n\n")
    .trim();
 }
 // 레포의 README 원문(마크다운)을 반환. 실패/없음이면 "".
 // Gitea raw 엔드포인트로 기본 브랜치의 README 파일을 후보 순서대로 시도한다.
 export async function fetchReadme(repoUrl) {
  const r = parseRepo(repoUrl);
  if (!r) return "";
  const headers = {};
  if (config.giteaToken) headers.Authorization = `token ${config.giteaToken}`;
  const base = `${r.base}/api/v1/repos/${encodeURIComponent(r.owner)}/${encodeURIComponent(r.repo)}/raw`;
  const candidates = ["README.md", "README.MD", "readme.md", "README", "README.markdown"];
  const ctrl = new AbortController();
  const timer = setTimeout(() => ctrl.abort(), 4000);
  try {
    for (const name of candidates) {
      const res = await fetch(`${base}/${name}`, { headers, signal: ctrl.signal });
      if (!res.ok) continue;
      const text = normalizeReadme(await res.text());
      // 너무 큰 README 는 앞부분만(설명란이 감당할 범위). 20KB 컷.
      return text.length > 20000 ? text.slice(0, 20000) : text;
    }
    return "";
  } catch {
    return "";
  } finally {
    clearTimeout(timer);
  }
 }
--- a/src/helpers.js
+++ b/src/helpers.js
@@ -1,10 +1,13 @@
 // 뷰 헬퍼 — 빌드/프런트 프레임워크 없이 서버에서 SVG 를 직접 만들어 EJS 로 출력한다.
 // (디자인 레퍼런스의 Octicon 패스 / identicon 알고리즘 / 언어색을 그대로 포팅)
-// res.locals 에 실어 모든 뷰에서 icon()/identicon()/langColor() 로 사용.
+// res.locals 에 실어 모든 뷰에서 icon()/identicon()/langColor()/renderMarkdown() 로 사용.
 import MarkdownIt from "markdown-it";
 // GitHub Octicon 16x16 패스 모음.
 const OCTICONS = {
  code: '<path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"/>',
  // </> (꺾쇠 + 슬래시) — 박스 없이 헤더 색 상속. Bootstrap code-slash 패스.
  codeslash: '<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"/>',
  search: '<path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"/>',
  sun: '<path d="M8 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm0-1.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Zm5.657-8.157a.75.75 0 0 1 0 1.061l-1.061 1.06a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l1.06-1.061a.75.75 0 0 1 1.061 0Zm-9.193 9.193a.75.75 0 0 1 0 1.06l-1.06 1.061a.751.751 0 0 1-1.061-1.061l1.06-1.06a.75.75 0 0 1 1.061 0ZM8 0a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0V.75A.75.75 0 0 1 8 0ZM3 8a.75.75 0 0 1-.75.75H.75a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 3 8Zm13 0a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 16 8Zm-8 5a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 8 13Zm3.536-1.464a.75.75 0 0 1 1.06 0l1.061 1.06a.751.751 0 0 1-1.061 1.061l-1.06-1.06a.75.75 0 0 1 0-1.061ZM2.343 2.343a.75.75 0 0 1 1.061 0l1.06 1.061a.751.751 0 0 1-1.06 1.06l-1.061-1.06a.75.75 0 0 1 0-1.06Z"/>',
  moon: '<path d="M9.598 1.591a.749.749 0 0 1 .785-.175 7.001 7.001 0 1 1-8.967 8.967.75.75 0 0 1 .961-.96 5.5 5.5 0 0 0 7.046-7.046.75.75 0 0 1 .175-.786Zm1.616 1.945a7 7 0 0 1-7.678 7.678 5.499 5.499 0 1 0 7.678-7.678Z"/>',
@@ -24,6 +27,12 @@ const OCTICONS = {
  check: '<path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L1.72 8.78a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/>',
  ext: '<path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"/>',
  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(부모 색 상속).
@@ -37,6 +46,86 @@ export function icon(name, opts = {}) {
  );
 }
 // 관리자 인증 뱃지 — 골드 스캘럽 씰 + 흰 체크(다색이라 icon() 대신 전용 SVG).
 // 관리자 판별은 Keycloak 그룹 기준(users.is_admin 에 로그인 시 저장). 프로필 사번 옆에 표시.
 function scallopPath(cx, cy, n, rValley, rOuter) {
  // 계곡점(rValley)들을 바깥으로 볼록한 원호로 이어 씰 톱니를 만든다.
  const half = Math.PI / n;
  const sag = rOuter - rValley * Math.cos(half);        // 볼록 높이(sagitta)
  const c = 2 * rValley * Math.sin(half);               // 현 길이
  const r = (sag * sag + (c / 2) * (c / 2)) / (2 * sag); // 원호 반지름
  let d = "";
  for (let i = 0; i < n; i++) {
    const a0 = (i / n) * 2 * Math.PI - Math.PI / 2;
    const a1 = ((i + 1) / n) * 2 * Math.PI - Math.PI / 2;
    const x0 = (cx + rValley * Math.cos(a0)).toFixed(2), y0 = (cy + rValley * Math.sin(a0)).toFixed(2);
    const x1 = (cx + rValley * Math.cos(a1)).toFixed(2), y1 = (cy + rValley * Math.sin(a1)).toFixed(2);
    if (i === 0) d += `M ${x0} ${y0} `;
    d += `A ${r.toFixed(2)} ${r.toFixed(2)} 0 0 1 ${x1} ${y1} `;
  }
  return d + "Z";
 }
 export function adminBadge(opts = {}) {
  const size = opts.size || 15;
  const title = opts.title || "관리자 인증";
  const scallop = scallopPath(8, 8, 11, 5.7, 7.5);
  return (
    `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 16 16" ` +
    `class="admin-badge" role="img" aria-label="${title}" style="display:block"><title>${title}</title>` +
    `<defs>` +
    `<linearGradient id="aidevAdminGold" x1="0" y1="0" x2="0" y2="1">` +
    `<stop offset="0" stop-color="#fbe58c"/><stop offset="0.45" stop-color="#eabf34"/><stop offset="1" stop-color="#c68f16"/>` +
    `</linearGradient>` +
    `<radialGradient id="aidevAdminGloss" cx="0.5" cy="0.32" r="0.65">` +
    `<stop offset="0" stop-color="#ffffff" stop-opacity="0.55"/><stop offset="0.55" stop-color="#ffffff" stop-opacity="0"/>` +
    `</radialGradient>` +
    `</defs>` +
    `<circle cx="8" cy="8" r="5.7" fill="url(#aidevAdminGold)"/>` +
    `<path d="${scallop}" fill="url(#aidevAdminGold)" stroke="#a9790f" stroke-opacity="0.55" stroke-width="0.5"/>` +
    `<circle cx="8" cy="8" r="5.7" fill="url(#aidevAdminGloss)"/>` +
    `<path d="M4.8 8.25 L6.85 10.25 L11.15 5.55" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>` +
    `</svg>`
  );
 }
 // 프로젝트 설명(README 형식) 마크다운 렌더링.
 // html:false → 원문 속 raw HTML 은 태그가 아니라 텍스트로 이스케이프되어 XSS 를 막는다.
 // markdown-it 기본 validateLink 가 javascript:/vbscript:/data: 링크도 차단한다.
 const md = new MarkdownIt({ html: false, linkify: true, breaks: true });
 // 마크다운 링크는 새 탭으로 열고 noopener 를 붙인다.
 const defaultLinkOpen =
  md.renderer.rules.link_open ||
  function (tokens, idx, options, env, self) { return self.renderToken(tokens, idx, options); };
 md.renderer.rules.link_open = function (tokens, idx, options, env, self) {
  tokens[idx].attrSet("target", "_blank");
  tokens[idx].attrSet("rel", "noopener nofollow");
  return defaultLinkOpen(tokens, idx, options, env, self);
 };
 export function renderMarkdown(src) {
  return md.render(String(src || ""));
 }
 // 카드 미리보기용 — 마크다운 기호를 걷어낸 순수 텍스트. 줄바꿈은 살린다.
 // (제목 #, 목록 -, 강조 *_`, 링크 [텍스트](url) → 텍스트, 코드펜스/이미지/배지 제거)
 // 개행을 공백으로 뭉개지 않고 유지해, 2줄 클램프 미리보기가 README 앞부분의
 // 줄 구조 그대로 보이도록 한다(제목 줄 + 첫 설명 줄 등). 빈 줄은 없애 줄 낭비를 막는다.
 export function mdPlain(src) {
  return String(src || "")
    .replace(/```[\s\S]*?```/g, " ")            // 코드펜스 블록 제거
    .replace(/`([^`]*)`/g, "$1")                // 인라인 코드
    .replace(/!\[[^\]]*\]\([^)]*\)/g, " ")      // 이미지
    .replace(/\[([^\]]*)\]\([^)]*\)/g, "$1")    // 링크(배지 포함) → 텍스트
    .replace(/^\s{0,3}#{1,6}\s+/gm, "")          // 제목 마커
    .replace(/^\s{0,3}>\s?/gm, "")               // 인용 마커
    .replace(/^\s*[-*+]\s+/gm, "")               // 목록 마커
    .replace(/[*_~]{1,3}/g, "")                  // 강조 기호
    .replace(/[ \t]+/g, " ")                     // 줄 안의 연속 공백만 축소(개행은 유지)
    .replace(/ *\n */g, "\n")                    // 줄 앞뒤 공백 제거
    .replace(/\n{2,}/g, "\n")                    // 빈 줄 제거 → 내용 줄만 남김
    .trim();
 }
 // 언어 → 색(카드의 언어 점).
 const LANG_COLORS = {
  Python: "#3572A5", TypeScript: "#3178c6", JavaScript: "#f1e05a",
@@ -54,7 +143,7 @@ export function langFromTags(tags) {
  if (t.includes("go") || t.includes("golang")) return "Go";
  if (t.includes("rust")) return "Rust";
  if (t.includes("node") || t.includes("js")) return "JavaScript";
-  return "TypeScript";
+  return ""; // 매칭되는 언어 태그가 없으면 언어 미표시
 }
 // 문자열 → 결정적 해시(아바타/색 시드).
@@ -65,12 +154,10 @@ function hashSeed(seed) {
  return h;
 }
-// 사번 기반 identicon 아바타(5x5 대칭 격자). 디자인과 동일한 시각.
+// 사번 기반 identicon(5x5 대칭 격자)의 rects+color 계산 코어.
-export function identicon(seed, size = 28) {
+function identiconCore(seed) {
  const h = hashSeed(seed);
-  const hue = h % 360;
+  const color = `hsl(${h % 360},${48 + (h % 22)}%,52%)`;
  const sat = 48 + (h % 22);
  const color = `hsl(${hue},${sat}%,52%)`;
  const grid = 5;
  const on = new Array(25).fill(false);
  for (let col = 0; col < 3; col++) {
@@ -80,8 +167,7 @@ export function identicon(seed, size = 28) {
      on[row * 5 + (4 - col)] = !!bit;
    }
  }
-  const inner = Math.round(size * 0.74);
+  const cell = 100 / grid; // viewBox 0..100 기준
  const cell = inner / grid;
  let rects = "";
  for (let r = 0; r < grid; r++) {
    for (let c = 0; c < grid; c++) {
@@ -90,9 +176,37 @@ export function identicon(seed, size = 28) {
      }
    }
  }
  return { color, rects };
 }
 // 사번 기반 identicon 아바타(인라인 span). 디자인과 동일한 시각.
 export function identicon(seed, size = 28) {
  const { color, rects } = identiconCore(seed);
  const inner = Math.round(size * 0.74);
  const radius = Math.max(5, Math.round(size * 0.2));
-  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${inner}" height="${inner}" viewBox="0 0 ${inner} ${inner}" fill="${color}" style="display:block">${rects}</svg>`;
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${inner}" height="${inner}" viewBox="0 0 100 100" fill="${color}" style="display:block">${rects}</svg>`;
  return (
    `<span class="avatar" style="width:${size}px;height:${size}px;border-radius:${radius}px;">${svg}</span>`
  );
 }
 // /avatar/:sabun 엔드포인트가 업로드 사진이 없을 때 응답하는 독립 SVG 문서 문자열.
 export function identiconSvg(seed, size = 128) {
  const { color, rects } = identiconCore(seed);
  return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 100 100" fill="${color}">${rects}</svg>`;
 }
 // 프로필 사진 <img>. 실제 이미지는 /avatar/:sabun 엔드포인트가 업로드본 또는 identicon SVG 로 응답한다.
 // (모든 아바타 렌더 지점을 이 헬퍼로 통일 → 뷰마다 업로드 여부를 조회할 필요가 없다.)
 function escapeAttr(s) {
  return String(s).replace(/[&"'<>]/g, (c) => ({ "&": "&amp;", '"': "&quot;", "'": "&#39;", "<": "&lt;", ">": "&gt;" }[c]));
 }
 export function avatar(sabun, size = 28) {
  const radius = Math.max(5, Math.round(size * 0.2));
  const src = `/avatar/${encodeURIComponent(sabun)}`;
  return (
    `<img class="avatar" src="${src}" alt="" loading="lazy" width="${size}" height="${size}" ` +
    `style="width:${size}px;height:${size}px;border-radius:${radius}px;object-fit:cover;display:block" ` +
    `data-avatar="${escapeAttr(sabun)}" />`
  );
 }
--- a/src/server.js
+++ b/src/server.js
@@ -5,8 +5,9 @@ import { fileURLToPath } from "url";
 import path from "path";
 import { config } from "./config.js";
 import { toolsForUser } from "./sites.js";
-import { initOidc, loginRedirect, handleCallback, requireAuth, oidcReady } from "./auth.js";
+import { initOidc, loginRedirect, handleCallback, requireAuth, requireAdmin, oidcReady, logoutUrl } from "./auth.js";
-import { icon, identicon, langColor, langFromTags } from "./helpers.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";
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
@@ -30,15 +31,23 @@ app.use(
 // 모든 뷰 공통 노출 (브랜드·사용자·뷰 헬퍼)
 app.use((req, res, next) => {
  res.locals.brand = config.brand;
  res.locals.manualUrl = config.manualUrl;
  res.locals.user = req.session.user || null;
  res.locals.icon = icon;
  res.locals.identicon = identicon;
  res.locals.avatar = avatar;
  res.locals.adminBadge = adminBadge;
  res.locals.langColor = langColor;
  res.locals.renderMarkdown = renderMarkdown;
  res.locals.mdPlain = mdPlain;
  next();
 });
 app.get("/healthz", (_req, res) => res.json({ ok: true }));
 // 브라우저가 페이지마다 자동 요청하는 /favicon.ico → svg 파비콘으로 넘긴다(콘솔 404 제거).
 app.get("/favicon.ico", (_req, res) => res.redirect(301, "/public/favicon.svg"));
 // fetch(AJAX) 요청인지: app.js 가 X-Requested-With 를 붙인다.
 const isAjax = (req) =>
  req.get("X-Requested-With") === "fetch" || (req.get("Accept") || "").includes("application/json");
@@ -58,8 +67,11 @@ app.get("/auth/login", (req, res) => loginRedirect(req, res));
 app.get("/auth/callback", async (req, res) => {
  try {
    const u = await handleCallback(req);
-    await db.upsertUser(u);
+    // id_token 은 SSO 로그아웃용으로만 세션에 따로 보관(뷰/DB 에 노출 안 함)
-    req.session.user = u; // { sabun, name, email, roles, isAdmin }
+    const { id_token, ...user } = u;
    req.session.idToken = id_token;
    await db.upsertUser(user);
    req.session.user = user; // { sabun, name, email, groups, isAdmin }
    res.redirect("/");
  } catch (e) {
    console.error("oidc callback error", e);
@@ -67,7 +79,70 @@ app.get("/auth/callback", async (req, res) => {
  }
 });
 app.get("/logout", (req, res) => {
-  req.session.destroy(() => res.redirect("/login"));
+  const idToken = req.session.idToken;
  // 로컬 세션을 먼저 destroy 한 뒤 Keycloak end-session 으로 보내
  // SSO 세션까지 종료한다. (로컬만 지우면 재접속 시 자동 재로그인됨)
  req.session.destroy(() => {
    if (oidcReady()) return res.redirect(logoutUrl(idToken));
    return res.redirect("/login");
  });
 });
 // --- 아바타 이미지 ---
 // 업로드한 프로필 사진이 있으면 그 bytes 를, 없으면 사번 기반 identicon SVG 로 응답.
 app.get("/avatar/:sabun", requireAuth, async (req, res) => {
  const sabun = req.params.sabun;
  try {
    const row = await db.getAvatar(sabun);
    if (row && row.avatar) {
      res.set("Content-Type", row.avatar_mime || "image/webp");
      res.set("Cache-Control", "private, max-age=300");
      return res.send(row.avatar);
    }
  } catch (e) {
    console.error("avatar load error", e);
  }
  res.set("Content-Type", "image/svg+xml; charset=utf-8");
  res.set("Cache-Control", "private, max-age=300");
  res.send(identiconSvg(sabun, 128));
 });
 // --- 프로필 사진 업로드(본인) ---
 // 브라우저에서 1:1 크롭·축소한 작은 이미지를 raw body 로 받는다(멀터/이미지 라이브러리 불필요).
 app.post(
  "/profile/avatar",
  requireAuth,
  express.raw({ type: ["image/webp", "image/jpeg", "image/png"], limit: "700kb" }),
  async (req, res) => {
    const buf = req.body;
    const mime = (req.get("Content-Type") || "").split(";")[0].trim();
    if (!Buffer.isBuffer(buf) || buf.length === 0) return res.status(400).json({ ok: false, error: "empty" });
    if (!["image/webp", "image/jpeg", "image/png"].includes(mime)) return res.status(415).json({ ok: false, error: "type" });
    await db.setAvatar({ sabun: req.session.user.sabun, buf, mime });
    res.json({ ok: true });
  }
 );
 // --- 한줄 소개 저장(본인) ---
 // JS 있으면 fetch(JSON), 없으면 폼 POST → 프로필로 리다이렉트(점진적 향상).
 app.post("/profile/bio", requireAuth, async (req, res) => {
  const sabun = req.session.user.sabun;
  const bio = String(req.body.bio || "").trim().slice(0, 80);
  await db.setBio({ sabun, bio });
  if (isAjax(req)) return res.json({ ok: true, bio });
  res.redirect("/u/" + encodeURIComponent(sabun));
 });
 // --- 프로필 페이지 (본인/타인) — 프로필 + 해당 사용자의 프로젝트 목록 ---
 app.get("/u/:sabun", requireAuth, async (req, res) => {
  const me = req.session.user.sabun;
  const profile = await db.getUserProfile(req.params.sabun);
  if (!profile) return res.status(404).send("사용자를 찾을 수 없습니다.");
  const projects = await db.listProjectsByOwner(profile.sabun, me);
  const searchPlaceholder = profile.sabun === me
    ? "내 프로젝트 검색…"
    : `${profile.name} 님의 프로젝트 검색…`;
  res.render("profile", { profile, projects, isSelf: profile.sabun === me, searchPlaceholder });
 });
 // --- 대시보드 ---
@@ -101,20 +176,53 @@ app.post("/projects", requireAuth, async (req, res) => {
    .map((t) => t.trim().replace(/^#/, ""))
    .filter(Boolean)
    .slice(0, 5);
  const repoUrl = (repo_url || "").trim();
  // 메인 언어: 사용자가 직접 고르면 그 값, '자동 감지'면 Gitea 언어 통계 → 태그 추론 순으로 폴백.
  const lang = (req.body.lang || "").trim() || (await fetchMainLang(repoUrl)) || langFromTags(tagArr);
  await db.addProject({
    owner: req.session.user.sabun,
    title: title.trim(),
    description: (description || "").trim(),
-    repoUrl: (repo_url || "").trim(),
+    repoUrl,
    appUrl: (app_url || "").trim(),
    tags: tagArr.join(", "),
    isPublic: req.body.is_public !== "0",
-    lang: langFromTags(tagArr),
+    lang,
  });
  const msg = req.body.is_public === "0" ? "비공개로 등록됐습니다" : "등록 완료 · 피드에 공유됐습니다";
  res.redirect("/?toast=" + encodeURIComponent(msg));
 });
 // --- 프로젝트 수정 (본인) --- 등록과 동일한 필드 파싱. 소유자 조건은 db.updateProject 에서 강제.
 app.post("/projects/:id/edit", requireAuth, async (req, res) => {
  const { title, description, repo_url, app_url, tags } = req.body;
  const back = safeBack(req.body.return_to, "/");
  const sep = back.includes("?") ? "&" : "?";
  if (!title || !title.trim()) {
    return res.redirect(back + sep + "toast=" + encodeURIComponent("제목을 입력해주세요"));
  }
  const tagArr = String(tags || "")
    .split(",")
    .map((t) => t.trim().replace(/^#/, ""))
    .filter(Boolean)
    .slice(0, 5);
  const repoUrl = (repo_url || "").trim();
  const lang = (req.body.lang || "").trim() || (await fetchMainLang(repoUrl)) || langFromTags(tagArr);
  const n = await db.updateProject({
    id: req.params.id,
    sabun: req.session.user.sabun,
    title: title.trim(),
    description: (description || "").trim(),
    repoUrl,
    appUrl: (app_url || "").trim(),
    tags: tagArr.join(", "),
    isPublic: req.body.is_public !== "0",
    lang,
  });
  const msg = n ? "수정되었습니다" : "수정 권한이 없습니다";
  res.redirect(back + sep + "toast=" + encodeURIComponent(msg));
 });
 // --- 단독 상세 페이지 (모달의 비-JS 폴백 / 공유 링크) ---
 app.get("/projects/:id", requireAuth, async (req, res) => {
  const me = req.session.user.sabun;
@@ -123,14 +231,24 @@ app.get("/projects/:id", requireAuth, async (req, res) => {
  // 비공개는 본인만 열람
  if (!project.is_public && project.owner_sabun !== me) return res.status(403).send("비공개 프로젝트입니다.");
  const comments = await db.listComments(project.id);
-  res.render("project", { project, comments, starred: project.starred });
+  // 뒤로가기 대상: ?from= 으로 넘어온 내부 경로(프로필 등)가 있으면 그곳, 없으면 대시보드.
  // (뎁스 순서: 프로필 → 프로젝트 상세 로 들어왔으면 프로필로 돌아간다)
  const from = req.query.from;
  const safeFrom = typeof from === "string" && /^\/[^/]/.test(from) ? from : null; // 내부 절대경로만 허용
  const back = safeFrom && safeFrom.startsWith("/u/")
    ? { href: safeFrom, label: "프로필" }
    : { href: "/", label: "대시보드" };
  res.render("project", { project, comments, starred: project.starred, back });
 });
 // --- 반응: ❤️ 좋아요 / ⭐ 즐겨찾기 ---
 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"), "/"));
 }
@@ -142,7 +260,17 @@ app.post("/projects/:id/visibility", requireAuth, async (req, res) => {
  const isPublic = req.body.is_public === "1";
  await db.setVisibility({ id: req.params.id, sabun: req.session.user.sabun, isPublic });
  const msg = isPublic ? "공개로 전환됐습니다 · 피드에 표시됩니다" : "비공개로 전환됐습니다";
-  res.redirect("/?toast=" + encodeURIComponent(msg));
+  // 모달에서 전환하면 return_to(=/?open=<id>) 로 돌아가 모달을 다시 연다. 카드에서는 "/".
  const back = safeBack(req.body.return_to, "/");
  const sep = back.includes("?") ? "&" : "?";
  res.redirect(back + sep + "toast=" + encodeURIComponent(msg));
 });
 // --- README 가져오기 (등록 모달) — repo_url 의 Gitea README 를 마크다운 원문으로 반환 ---
 app.get("/api/readme", requireAuth, async (req, res) => {
  const content = await fetchReadme((req.query.repo_url || "").toString().trim());
  if (!content) return res.status(404).json({ ok: false });
  res.json({ ok: true, content });
 });
 // --- 프로젝트 삭제 (본인) ---
@@ -157,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";
@@ -177,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 {
--- a/src/sites.js
+++ b/src/sites.js
@@ -5,19 +5,24 @@
 //      포털 로그인 후 이 링크를 누르면 바로 들어간다.
 //      - Coder: /api/v2/users/oidc/callback (code 없으면 keycloak authorize 로 307)
 //      - Gitea: /user/oauth2/keycloak (auth source 명=keycloak, 307 로 keycloak authorize)
 //      - Coolify: /auth/keycloak/redirect (Laravel Socialite, keycloak authorize 로 302)
 //      SSO 미지원(Kubero/Harbor 등)은 기본 URL 유지.
 //
 // adminOnly: true 인 항목은 관리자(role=admin)에게만 렌더(숨김, disabled 아님).
-// icon: 이모지(폐쇄망에서도 외부 의존 없이 표시). desc: 카드 한 줄 설명.
+// icon: 이모지(폐쇄망에서도 외부 의존 없이 표시). desc: 카드 한 줄 설명. tip: 호버 시 뜨는 상세 설명(title 속성).
 import { config } from "./config.js";
 export const sites = [
  // --- 개발 핵심 (모두에게) ---
-  { key: "coder",  name: "Coder",  desc: "클라우드 IDE",        url: config.tools.coder,  icon: "💻", sso: true },
+  { key: "coder",  name: "Coder",  desc: "클라우드 IDE",        tip: "브라우저에서 바로 코딩하는 개발 환경.\n내 PC 설치 없이 VS Code Web으로 개발·실행합니다.", url: config.tools.coder,  icon: "💻", sso: true },
-  { key: "gitea",  name: "Gitea",  desc: "Git 저장소",          url: config.tools.gitea,  icon: "🍵", sso: true },
+  { key: "gitea",  name: "Gitea",  desc: "Git 저장소",          tip: "소스 코드 저장 및 버전 관리.\n다른 사람과 Git으로 협업할 수 있습니다.", url: config.tools.gitea,  icon: "🍵", sso: true },
-  { key: "kubero", name: "Kubero", desc: "배포 (PaaS)",         url: config.tools.kubero, icon: "🚀" },
+  // Kubero: Keycloak SSO 로 로그인 가능(단, 랜딩에서 "OAuth 로 로그인"을 한 번 더 눌러야 함). Kubernetes 기반.
-  { key: "harbor", name: "Harbor", desc: "컨테이너 레지스트리", url: config.tools.harbor, icon: "📦" },
+  { key: "kubero", name: "Kubero", desc: "배포 (PaaS)",         tip: "Kubernetes 기반 배포 도구입니다.\nplayground 파이프라인에 앱을 추가해 서버에 올립니다.", url: config.tools.kubero, icon: "🚀", sso: true },
  // Coolify: Kubero 와 같은 배포 PaaS. Docker 기반. Keycloak SSO 지원 →
  //   /auth/keycloak/redirect (로그인 시작, code 없으면 keycloak authorize 로 302). callback 은 /auth/keycloak/callback.
  { key: "coolify", name: "Coolify", desc: "배포 (PaaS)",        tip: "Docker 기반 배포 도구입니다.\naidev 프로젝트에 앱을 추가해 서버에 올립니다.", url: config.tools.coolify, icon: "⛵", sso: true },
  // --- 인프라/운영 (관리자 전용) ---
  { key: "harbor", name: "Harbor", desc: "컨테이너 레지스트리", url: config.tools.harbor, icon: "📦", adminOnly: true },
  { key: "openeverest", name: "OpenEverest", desc: "DB 콘솔",         url: config.tools.openeverest, icon: "🗄️", adminOnly: true },
  { key: "minio",       name: "MinIO",       desc: "오브젝트 스토리지", url: config.tools.minio,       icon: "🪣", adminOnly: true },
  { key: "keycloak",    name: "Keycloak",    desc: "계정 / SSO 관리",   url: config.tools.keycloak,    icon: "🔑", adminOnly: true },
--- a/views/_footer.ejs
+++ b/views/_footer.ejs
@@ -0,0 +1,12 @@
 <%
  // 공용 푸터. 대시보드·프로필 등 모든 화면에서 include 해서 재사용.
 %>
 <footer class="footer">
  <div class="footer-inner">
    <div class="footer-left">
      <span class="footer-brand"><span><%- icon("code", { size: 14 }) %></span><%= brand %></span>
      <span class="footer-bug">· 버그 제보 - <a href="https://gitea.bokdev.in/playground/ai-dev-portal/issues" target="_blank" rel="noopener">gitea 이슈</a></span>
    </div>
    <div class="footer-tech">Express + Postgres + Keycloak SSO · deployed on Kubero</div>
  </div>
 </footer>
--- a/views/_header.ejs
+++ b/views/_header.ejs
@@ -4,11 +4,16 @@
  <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" />
  <!-- Pretendard 폰트 (CDN · 인터넷 연결 환경) -->
  <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
  <link rel="stylesheet" href="/public/css/tokens.css" />
  <link rel="stylesheet" href="/public/css/base.css" />
  <link rel="stylesheet" href="/public/css/layout.css" />
  <link rel="stylesheet" href="/public/css/components.css" />
  <link rel="stylesheet" href="/public/css/modal.css" />
  <!-- 반응형(모바일) — 데스크톱 규칙을 덮어써야 하므로 반드시 맨 마지막에 로드. 순서 바꾸지 말 것. -->
  <link rel="stylesheet" href="/public/css/responsive.css" />
  <script>
    // FOUC 방지: 저장된 테마를 페인트 전에 documentElement 에 적용
    (function () {
@@ -23,7 +28,7 @@
  <header class="hdr">
    <div class="hdr-inner">
      <a class="brand" href="/" id="brandLink">
-        <span class="brand-mark"><%- icon("code", { size: 22 }) %></span>
+        <span class="brand-mark"><%- icon("codeslash", { size: 22 }) %></span>
        <span class="brand-name"><%= brand %></span>
        <span class="brand-sub">사내 개발 포털</span>
      </a>
@@ -31,7 +36,7 @@
      <% if (user) { %>
        <div class="hdr-search">
          <span class="hdr-search-ico"><%- icon("search", { size: 15 }) %></span>
-          <input type="search" id="feedSearch" placeholder="프로젝트 검색…" autocomplete="off" />
+          <input type="search" id="feedSearch" placeholder="<%= typeof searchPlaceholder !== 'undefined' && searchPlaceholder ? searchPlaceholder : '공유 프로젝트 검색…' %>" autocomplete="off" />
        </div>
        <div class="hdr-right">
@@ -40,6 +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>
          <% } %>
@@ -47,7 +79,7 @@
          <div class="usermenu">
            <button class="usermenu-btn" id="userMenuBtn" type="button" aria-haspopup="true" aria-expanded="false">
              <span class="who"><%= user.sabun %></span>
-              <%- identicon(user.sabun, 26) %>
+              <%- avatar(user.sabun, 26) %>
              <span class="caret"><%- icon("caret", { size: 14 }) %></span>
            </button>
            <div class="usermenu-pop" id="userMenuPop" hidden>
@@ -56,6 +88,8 @@
                <div class="usermenu-sabun"><%= user.sabun %></div>
                <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>
--- a/views/_project_detail.ejs
+++ b/views/_project_detail.ejs
@@ -20,11 +20,23 @@
      <div class="modal-title-line">
        <span class="modal-repoico"><%- icon("repo", { size: 18 }) %></span>
        <h3 class="modal-title"><%= p.title %></h3>
        <% if (p.owner_sabun === me) { %>
          <form method="post" action="/projects/<%= p.id %>/visibility" class="vis-badge-form" data-stop>
            <input type="hidden" name="is_public" value="<%= p.is_public ? "0" : "1" %>" />
            <input type="hidden" name="return_to" value="<%= returnTo %>" />
            <button type="submit" class="vis-badge vis-badge-btn <%= p.is_public ? "public" : "private" %>" title="클릭하면 <%= p.is_public ? "비공개" : "공개" %>로 전환">
              <%- icon(p.is_public ? "globe" : "lock", { size: 11 }) %><%= p.is_public ? "공개" : "비공개" %>
            </button>
          </form>
        <% } else { %>
          <span class="vis-badge <%= p.is_public ? "public" : "private" %>"><%- icon(p.is_public ? "globe" : "lock", { size: 11 }) %><%= p.is_public ? "공개" : "비공개" %></span>
        <% } %>
      </div>
      <div class="modal-meta">
-        <%- identicon(p.owner_sabun, 24) %>
+        <a class="meta-author" href="/u/<%= p.owner_sabun %>" title="<%= p.owner_name || p.owner_sabun %> 프로필">
-        <span class="sabun"><%= p.owner_sabun %></span>
+          <%- avatar(p.owner_sabun, 24) %>
          <span class="sabun"><%= p.owner_name || p.owner_sabun %></span>
        </a>
        <span class="date">· <%= reltime(p.created_at) %> 공유</span>
        <% if (p.lang) { %><span class="lang"><span class="lang-dot" style="background:<%= langColor(p.lang) %>"></span><%= p.lang %></span><% } %>
      </div>
@@ -32,13 +44,17 @@
    <% if (modal) { %>
      <button type="button" class="modal-close" data-close-detail title="닫기"><%- icon("x", { size: 16 }) %></button>
    <% } else { %>
-      <a class="back-link" href="/">← 대시보드</a>
+      <a class="back-link" href="<%= typeof back !== 'undefined' && back ? back.href : '/' %>">← <%= typeof back !== 'undefined' && back ? back.label : '대시보드' %></a>
    <% } %>
  </div>
  <% if (pdTags.length) { %>
    <div class="modal-tags"><% pdTags.forEach(function (t) { %><span class="tag"><%= t %></span><% }); %></div>
  <% } %>
-  <p class="modal-desc"><%= p.description || "설명 없음" %></p>
+  <% if (p.description && p.description.trim()) { %>
    <div class="modal-desc md-body"><%- renderMarkdown(p.description) %></div>
  <% } else { %>
    <p class="modal-desc modal-desc-empty">설명 없음</p>
  <% } %>
  <div class="modal-actions">
    <button type="button" class="modal-action heart<%= p.hearted ? " on" : "" %>" data-react data-id="<%= p.id %>" data-kind="heart">
      <span class="ico ico-on"><%- icon("heartFill", { size: 15 }) %></span><span class="ico ico-off"><%- icon("heart", { size: 15 }) %></span>
@@ -55,10 +71,22 @@
      <a class="modal-action ghost" href="<%= p.repo_url %>" target="_blank" rel="noopener"><%- icon("code", { size: 14 }) %>저장소</a>
    <% } %>
    <% if (p.owner_sabun === me) { %>
-      <form method="post" action="/projects/<%= p.id %>/delete" style="margin-left:auto">
+      <div class="modal-actions-owner">
        <button type="button" class="comment-link" data-open-edit style="font-size:12.5px"
          data-id="<%= p.id %>"
          data-title="<%= p.title %>"
          data-desc="<%= p.description || '' %>"
          data-tags="<%= p.tags || '' %>"
          data-repo="<%= p.repo_url || '' %>"
          data-app="<%= p.app_url || '' %>"
          data-lang="<%= p.lang || '' %>"
          data-public="<%= p.is_public ? '1' : '0' %>"
          data-return="<%= returnTo %>"><%- icon("pencil", { size: 13 }) %>수정</button>
        <form method="post" action="/projects/<%= p.id %>/delete">
          <input type="hidden" name="return_to" value="/" />
-        <button type="submit" class="comment-link comment-del" data-confirm="이 프로젝트를 삭제할까요? 댓글·반응도 함께 삭제됩니다." style="font-size:12.5px">프로젝트 삭제</button>
+          <button type="submit" class="comment-link comment-del" data-confirm="이 프로젝트를 삭제할까요? 댓글·반응도 함께 삭제됩니다." style="font-size:12.5px"><%- icon("trash", { size: 13 }) %>프로젝트 삭제</button>
        </form>
      </div>
    <% } %>
  </div>
 </div>
@@ -69,16 +97,16 @@
    <% tops.forEach(function (c) { var reps = repliesOf(c.id); %>
      <div class="comment-item">
        <div class="comment">
-          <%- identicon(c.author_sabun, 28) %>
+          <a class="cavatar" href="/u/<%= c.author_sabun %>" title="<%= c.author_name || c.author_sabun %> 프로필"><%- avatar(c.author_sabun, 28) %></a>
          <div class="comment-main">
            <div class="comment-head">
-              <span class="comment-author"><%= c.author_sabun %></span>
+              <a class="comment-author" href="/u/<%= c.author_sabun %>"><%= c.author_name || c.author_sabun %></a>
              <span class="comment-time"><%= reltime(c.created_at) %></span>
              <% if (isLgtm(c.body)) { %><span class="lgtm"><%- icon("check", { size: 11 }) %>LGTM</span><% } %>
            </div>
            <div class="comment-text"><%= c.body %></div>
            <div class="comment-actions">
-              <button type="button" class="comment-link" data-reply-to="<%= c.id %>" data-reply-name="<%= c.author_sabun %>"><%- icon("reply", { size: 13 }) %>답글</button>
+              <button type="button" class="comment-link" data-reply-to="<%= c.id %>" data-reply-name="<%= c.author_name || c.author_sabun %>"><%- icon("reply", { size: 13 }) %>답글</button>
              <% if (c.author_sabun === me) { %>
                <form method="post" action="/comments/<%= c.id %>/delete" data-stop style="display:inline">
                  <input type="hidden" name="return_to" value="<%= returnTo %>" />
@@ -92,10 +120,10 @@
          <div class="replies">
            <% reps.forEach(function (r) { %>
              <div class="reply">
-                <%- identicon(r.author_sabun, 24) %>
+                <a class="cavatar" href="/u/<%= r.author_sabun %>" title="<%= r.author_name || r.author_sabun %> 프로필"><%- avatar(r.author_sabun, 24) %></a>
                <div class="comment-main">
                  <div class="comment-head">
-                    <span class="comment-author"><%= r.author_sabun %></span>
+                    <a class="comment-author" href="/u/<%= r.author_sabun %>"><%= r.author_name || r.author_sabun %></a>
                    <span class="comment-time"><%= reltime(r.created_at) %></span>
                    <% if (isLgtm(r.body)) { %><span class="lgtm"><%- icon("check", { size: 11 }) %>LGTM</span><% } %>
                  </div>
@@ -125,7 +153,7 @@
      <button type="button" data-cancel-reply>취소</button>
    </div>
    <div class="comment-form">
-      <%- identicon(me, 28) %>
+      <%- avatar(me, 28) %>
      <textarea class="comment-input" name="body" rows="1" placeholder="댓글을 입력하세요…"></textarea>
      <button type="submit" class="submit-btn">등록</button>
    </div>
--- a/views/_project_form_modal.ejs
+++ b/views/_project_form_modal.ejs
@@ -0,0 +1,66 @@
 <%
  // 프로젝트 등록/수정 공용 모달. 기본은 '등록'(action=/projects)이고,
  // 상세의 '수정' 버튼을 누르면 modals.js 가 필드/제목/버튼/action 을 수정 모드로 바꿔 연다.
 %>
 <div class="modal-overlay" id="shareModal" hidden>
  <div class="share-modal">
    <div class="share-head">
      <h3 id="shareTitle">새 프로젝트 등록</h3>
      <button type="button" class="modal-close" data-close-share title="닫기"><%- icon("x", { size: 16 }) %></button>
    </div>
    <form method="post" action="/projects">
      <input type="hidden" name="return_to" value="" />
      <div class="share-body">
        <label>
          <span class="share-label">제목 <span class="req">*</span></span>
          <input class="share-input" name="title" required placeholder="예) 방화벽 정책 DSL 변환기" />
        </label>
        <label>
          <span class="share-label">Git 저장소 URL <span class="hint">선택 · 먼저 넣으면 README·언어를 자동으로 가져와요</span></span>
          <input class="share-input mono" name="repo_url" placeholder="https://gitea.bokdev.in/사번/repo" />
        </label>
        <label>
          <span class="share-label share-label-row">
            <span>설명 <span class="hint">Markdown 지원 · 제목·목록·코드·링크</span></span>
            <button type="button" class="readme-btn" id="readmeImport"><%- icon("repo", { size: 12 }) %>저장소 README 가져오기</button>
          </span>
          <textarea class="share-input share-textarea" name="description" rows="5" placeholder="무엇을 하는 프로젝트인가요?&#10;&#10;## 예시&#10;- Markdown 문법을 그대로 쓸 수 있어요&#10;- 위 저장소 URL 을 넣고 'README 가져오기' 를 누르면 채워져요"></textarea>
        </label>
        <label>
          <span class="share-label">태그 <span class="hint">쉼표로 구분 · 최대 5개</span></span>
          <input class="share-input" name="tags" placeholder="infra, react, poc" />
        </label>
        <label>
          <span class="share-label">메인 언어 <span class="hint">선택 · 기본은 저장소에서 자동 감지</span></span>
          <select class="share-input" name="lang">
            <option value="">자동 감지</option>
            <option value="Python">Python</option>
            <option value="JavaScript">JavaScript</option>
            <option value="TypeScript">TypeScript</option>
            <option value="Go">Go</option>
            <option value="Java">Java</option>
            <option value="Rust">Rust</option>
            <option value="Shell">Shell</option>
          </select>
        </label>
        <label>
          <span class="share-label">배포 URL <span class="hint">선택 · 없으면 바로가기 숨김</span></span>
          <input class="share-input mono" name="app_url" placeholder="https://myapp.apps.bokdev.in" />
        </label>
        <div>
          <span class="share-label">공개 범위</span>
          <div class="vis-toggle">
            <button type="button" class="vis-opt on-public" data-vis="public"><%- icon("globe", { size: 12 }) %>공개</button>
            <button type="button" class="vis-opt" data-vis="private"><%- icon("lock", { size: 12 }) %>비공개</button>
          </div>
          <input type="hidden" name="is_public" value="1" />
          <div class="share-vishint">피드에 공개되어 동료가 볼 수 있어요</div>
        </div>
      </div>
      <div class="modal-foot-actions">
        <button type="button" class="btn" data-close-share>취소</button>
        <button type="submit" class="btn btn-success" id="shareSubmit">등록</button>
      </div>
    </form>
  </div>
 </div>
--- a/views/announcements.ejs
+++ b/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>
--- a/views/dashboard.ejs
+++ b/views/dashboard.ejs
@@ -26,8 +26,7 @@
    </div>
    <div class="tools-grid">
      <% tools.forEach(function (t) { %>
-        <a class="tool-card<%= t.adminOnly ? " admin" : "" %>" href="<%= t.url %>" target="_blank" rel="noopener">
+        <a class="tool-card<%= t.adminOnly ? " admin" : "" %>" href="<%= t.url %>" target="_blank" rel="noopener"<% if (t.tip) { %> title="<%= t.tip %>"<% } %>>
          <% if (t.sso) { %><span class="sso-badge">SSO</span><% } %>
          <span class="tool-icon"><%= t.icon %></span>
          <span class="tool-name"><%= t.name %></span>
          <span class="tool-desc"><%= t.desc %></span>
@@ -69,7 +68,7 @@
              <%- icon(p.is_public ? "globe" : "lock", { size: 11 }) %><%= p.is_public ? "공개" : "비공개" %>
            </span>
          </div>
-          <div class="pcard-desc"><%= p.description || "설명 없음" %></div>
+          <div class="pcard-desc"><%= mdPlain(p.description) || "설명 없음" %></div>
          <% if (tags.length) { %>
            <div class="pcard-tags"><% tags.forEach(function (t) { %><span class="tag"><%= t %></span><% }); %></div>
          <% } %>
@@ -77,8 +76,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">
@@ -153,16 +152,16 @@
              </button>
            </div>
          </div>
-          <div class="fcard-desc"><%= p.description || "설명 없음" %></div>
+          <div class="fcard-desc"><%= mdPlain(p.description) || "설명 없음" %></div>
          <% if (tags.length) { %>
            <div class="fcard-tags"><% tags.forEach(function (t) { %><span class="tag"><%= t %></span><% }); %></div>
          <% } %>
          <div class="fcard-foot">
-            <div class="fcard-author">
+            <a class="fcard-author" href="/u/<%= p.owner_sabun %>" title="<%= p.owner_name || p.owner_sabun %> 프로필">
-              <%- identicon(p.owner_sabun, 22) %>
+              <%- avatar(p.owner_sabun, 22) %>
-              <span class="sabun"><%= p.owner_sabun %></span>
+              <span class="sabun"><%= p.owner_name || p.owner_sabun %></span>
              <span class="date">· <%= fdate(p.created_at) %></span>
-            </div>
+            </a>
            <div class="fcard-meta">
              <% 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-comment"><%- icon("comment", { size: 14 }) %></span><span class="tabnum"><%= p.comment_count %></span></span>
@@ -177,12 +176,7 @@
  </section>
 </main>
-<footer class="footer">
+<%- include("_footer") %>
  <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>
 </footer>
 <!-- 상세 모달 (app.js 가 detailStore 의 내용을 .modal 에 주입) -->
 <div class="modal-overlay" id="detailModal" hidden><div class="modal"></div></div>
@@ -194,52 +188,8 @@
  <% }); %>
 </div>
-<!-- 새 프로젝트 등록 모달 -->
+<!-- 새 프로젝트 등록/수정 공용 모달 -->
-<div class="modal-overlay" id="shareModal" hidden>
+<%- include("_project_form_modal") %>
  <div class="share-modal">
    <div class="share-head">
      <h3>새 프로젝트 등록</h3>
      <button type="button" class="modal-close" data-close-share title="닫기"><%- icon("x", { size: 16 }) %></button>
    </div>
    <form method="post" action="/projects">
      <div class="share-body">
        <label>
          <span class="share-label">제목 <span class="req">*</span></span>
          <input class="share-input" name="title" required placeholder="예) 방화벽 정책 DSL 변환기" />
        </label>
        <label>
          <span class="share-label">한 줄 설명</span>
          <input class="share-input" name="description" placeholder="무엇을 하는 프로젝트인가요?" />
        </label>
        <label>
          <span class="share-label">태그 <span class="hint">쉼표로 구분 · 최대 5개</span></span>
          <input class="share-input" name="tags" placeholder="infra, react, poc" />
        </label>
        <label>
          <span class="share-label">저장소 URL <span class="hint">선택</span></span>
          <input class="share-input mono" name="repo_url" placeholder="https://gitea.bokdev.in/사번/repo" />
        </label>
        <label>
          <span class="share-label">배포 URL <span class="hint">선택 · 없으면 바로가기 숨김</span></span>
          <input class="share-input mono" name="app_url" placeholder="https://myapp.apps.bokdev.in" />
        </label>
        <div>
          <span class="share-label">공개 범위</span>
          <div class="vis-toggle">
            <button type="button" class="vis-opt on-public" data-vis="public"><%- icon("globe", { size: 12 }) %>공개</button>
            <button type="button" class="vis-opt" data-vis="private"><%- icon("lock", { size: 12 }) %>비공개</button>
          </div>
          <input type="hidden" name="is_public" value="1" />
          <div class="share-vishint">피드에 공개되어 동료가 볼 수 있어요</div>
        </div>
      </div>
      <div class="modal-foot-actions">
        <button type="button" class="btn" data-close-share>취소</button>
        <button type="submit" class="btn btn-success">등록</button>
      </div>
    </form>
  </div>
 </div>
 <script type="module" src="/public/js/main.js"></script>
 </body>
--- a/views/profile.ejs
+++ b/views/profile.ejs
@@ -0,0 +1,127 @@
 <%- include("_header") %>
 <%
  // 뷰 로컬 헬퍼
  function tagList(s) { return String(s || "").split(",").map(function (t) { return t.trim(); }).filter(Boolean); }
  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 searchText(p) { return (p.title + " " + (p.description || "") + " " + (p.tags || "")).toLowerCase(); }
 %>
 <main class="main">
  <!-- 프로필 히어로 -->
  <section class="section">
    <div class="profile-hero">
      <div class="profile-avatar-wrap">
        <img class="profile-avatar" id="profileAvatar" src="/avatar/<%= profile.sabun %>" alt="<%= profile.name %>" width="96" height="96" />
        <% if (isSelf) { %>
          <button type="button" class="profile-avatar-edit" id="avatarEditBtn" title="프로필 사진 변경" aria-label="프로필 사진 변경"><%- icon("plus", { size: 15, fill: "#fff" }) %></button>
        <% } %>
      </div>
      <div class="profile-info">
        <div class="profile-idline">
          <h1 class="profile-name"><%= profile.name %></h1>
          <span class="profile-sabun"><%= profile.sabun %></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>
          <span>· 가입 <%= fdate(profile.created_at) %></span>
        </div>
        <% if (profile.bio || isSelf) { %>
          <div class="profile-bio-row" id="bioRow">
            <p class="profile-bio<%= profile.bio ? "" : " is-empty" %>" id="bioText"><%= profile.bio || "한줄 소개를 남겨보세요" %></p>
            <% if (isSelf) { %>
              <button type="button" class="profile-bio-edit" id="bioEditBtn" title="한줄 소개 편집" aria-label="한줄 소개 편집"><%- icon("pencil", { size: 13 }) %></button>
            <% } %>
          </div>
          <% 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="profile-bio-edit profile-bio-save" id="bioSave" title="저장" aria-label="한줄 소개 저장"><%- icon("check", { size: 14 }) %></button>
              <button type="button" class="profile-bio-edit" id="bioCancel" title="취소" aria-label="한줄 소개 편집 취소"><%- icon("x", { size: 14 }) %></button>
            </form>
          <% } %>
        <% } %>
      </div>
    </div>
  </section>
  <!-- 프로젝트 목록 -->
  <section class="section">
    <div class="section-head">
      <div class="section-titlewrap">
        <h2 class="section-title"><%= isSelf ? "내 프로젝트" : (profile.name + " 님의 프로젝트") %></h2>
        <span class="section-sub"><%= isSelf ? "공개·비공개 모두 표시" : "공개된 프로젝트만 표시" %></span>
      </div>
    </div>
    <% if (!projects.length) { %>
      <div class="empty"><%= isSelf ? "아직 등록한 프로젝트가 없습니다." : "아직 공개된 프로젝트가 없습니다." %></div>
    <% } %>
    <div class="empty" id="feedEmpty" hidden></div>
    <div class="feed-grid">
      <% projects.forEach(function (p) { var tags = tagList(p.tags); %>
        <a class="fcard" href="/projects/<%= p.id %>?from=/u/<%= encodeURIComponent(profile.sabun) %>" data-search="<%= searchText(p) %>">
          <div class="fcard-top">
            <div class="fcard-titlewrap">
              <span class="pcard-repoico"><%- icon("repo", { size: 16 }) %></span>
              <span class="fcard-title"><%= p.title %></span>
            </div>
            <span class="vis-badge <%= p.is_public ? "public" : "private" %>">
              <%- icon(p.is_public ? "globe" : "lock", { size: 11 }) %><%= p.is_public ? "공개" : "비공개" %>
            </span>
          </div>
          <div class="fcard-desc"><%= mdPlain(p.description) || "설명 없음" %></div>
          <% if (tags.length) { %>
            <div class="fcard-tags"><% tags.forEach(function (t) { %><span class="tag"><%= t %></span><% }); %></div>
          <% } %>
          <div class="fcard-foot">
            <div class="fcard-meta">
              <% 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-star"><%- icon("starFill", { size: 13 }) %></span><span class="tabnum"><%= 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>
            <span class="date"><%= fdate(p.created_at) %></span>
          </div>
        </a>
      <% }); %>
    </div>
  </section>
 </main>
 <%- include("_footer") %>
 <% if (isSelf) { %>
  <!-- 프로필 사진 크롭 모달 -->
  <div class="modal-overlay" id="cropModal" hidden>
    <div class="crop-modal">
      <div class="crop-head">
        <h3>프로필 사진</h3>
        <button type="button" class="modal-close" id="cropClose" title="닫기"><%- icon("x", { size: 16 }) %></button>
      </div>
      <div class="crop-body">
        <div class="crop-stage" id="cropStage">
          <img id="cropImg" alt="" draggable="false" />
          <div class="crop-veil"></div>
        </div>
        <label class="crop-zoom">
          <span><%- icon("search", { size: 13 }) %></span>
          <input type="range" id="cropZoom" min="1" max="4" step="0.01" value="1" />
        </label>
        <p class="crop-hint">사진을 드래그해 위치를 맞추고 슬라이더로 확대하세요. 정사각형으로 저장됩니다.<br>변경한 사진이 모든 화면에 반영되기까지 최대 몇 분 걸릴 수 있어요.</p>
      </div>
      <div class="modal-foot-actions">
        <input type="file" id="avatarFile" accept="image/png,image/jpeg,image/webp" hidden />
        <button type="button" class="btn" id="cropPick">다른 사진 선택</button>
        <button type="button" class="btn btn-success" id="cropSave">저장</button>
      </div>
    </div>
  </div>
 <% } %>
 <script type="module" src="/public/js/main.js"></script>
 <% if (isSelf) { %><script type="module" src="/public/js/profile.js"></script><% } %>
 </body>
 </html>
--- a/views/project.ejs
+++ b/views/project.ejs
@@ -2,10 +2,14 @@
 <main class="main">
  <div class="detail-wrap">
    <div class="modal" style="margin:0 auto;animation:none">
-      <%- include("_project_detail", { p: project, comments: comments, me: user.sabun, returnTo: "/projects/" + project.id, modal: false }) %>
+      <%- include("_project_detail", { p: project, comments: comments, me: user.sabun, returnTo: "/projects/" + project.id, modal: false, back: back }) %>
    </div>
  </div>
 </main>
 <!-- 프로젝트 수정 모달 (상세의 '수정' 버튼이 채워서 연다) -->
 <%- include("_project_form_modal") %>
 <script type="module" src="/public/js/main.js"></script>
 </body>
 </html>
Author	SHA1	Message	Date
2620227	355798a506	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>	2026-07-15 20:08:47 +09:00
2620227	a199114453	feat(notifications): 알림 종 + 공지 기능 추가 - 헤더 프로필 왼쪽 알림 종: 드롭다운·안읽음 배지·60초 폴링(최초 폴링 도입) - 내 프로젝트 좋아요/즐겨찾기/댓글 시 소유자에게 알림(본인 제외·재토글 도배 방지) - 관리자 공지: /announcements 목록 + 작성/수정/삭제, 등록 시 전 직원에게 fan-out 알림 - notifications/announcements 테이블(멱등) + requireAdmin 가드 + bell/megaphone 아이콘 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-15 14:10:04 +09:00
2620227	2ca23a00b9	feat(profile): 관리자 뱃지 호버 툴팁 문구 추가 뱃지에 마우스를 올리면 ' Portal 관리자' 가 브라우저 기본 툴팁으로 표시되도록 title 속성(SVG <title> + 래핑 span) 일치시킴. 기존 '관리자 인증' 보다 구체적 문구. Co-Authored-By: Claude <noreply@anthropic.com>	2026-07-10 17:37:46 +09:00
2620227	5c76786ada	fix(profile): 한줄 소개 편집을 ✓/✕ 아이콘 버튼으로 변경 텍스트 저장/취소 버튼이 줄바꿈되며 프로필 카드를 밀어버리던 문제 수정. input과 같은 줄에 24px check(저장)/x(취소) 아이콘 버튼 2개 배치. JS의 textContent 토글 제거(아이콘 지워지지 않도록 disabled만). Co-Authored-By: Claude <noreply@anthropic.com>	2026-07-10 16:44:47 +09:00
2620227	2357dbd152	fix(profile): 한줄 소개 편집 폼이 항상 보이던 버그 수정 .profile-bio-form/.profile-bio-row 의 display:flex 가 HTML hidden 속성의 기본 display:none 을 이겨, 연필 클릭 전에도 폼이 문구와 함께 두 줄로 뜸. [hidden] 규칙을 명시해 숨김 (modal.css 의 reply-banner 패턴과 동일). Co-Authored-By: Claude <noreply@anthropic.com>	2026-07-10 16:01:30 +09:00
2620227	d95f968800	feat(profile): 관리자 인증 뱃지 표시 (사번 옆 골드 씰) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-10 14:15:04 +09:00
2620227	75685e41da	feat(responsive): 모바일 대응 — 데스크톱 유지, 반응형 CSS 마지막 로드로 분리 문제: 기존 반응형 @media 가 base.css(2번째 로드)에 있어, 뒤에 로드되는 components/layout 규칙에 덮여 사실상 무력했음(폰에서 그리드가 안 접힘). - public/css/responsive.css 신설, _header 에서 맨 마지막에 <link> → 미디어쿼리가 데스크톱 규칙을 !important 없이 정상 override - base.css 의 죽은 반응형 블록 제거(responsive.css 로 이관) - @media 640: 헤더 flex-wrap(검색창 둘째 줄 전체폭·숨김 해제), 탭 영역 44px, 크롭 스테이지 aspect-ratio 정사각, 입력 16px(iOS 확대 방지), 좌우 여백/모달 여백 축소, 프로필 히어로 세로 스택 - 데스크톱(>640)은 규칙 미적용 → 기존과 픽셀 동일 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-10 14:05:20 +09:00
2620227	56430b7701	fix(projects): 등록 폼 '저장소 URL' → 'Git 저장소 URL', README 안내문구 제거 - 라벨을 'Git 저장소 URL' 로 변경 - 'git URL 을 입력하면 README 를 가져옵니다' 인라인 문구 삭제 (modals.js 는 #repoErr 부재를 안전하게 처리 — 빨간 테두리·포커스 피드백 유지) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-10 13:52:09 +09:00
2620227	ef3d495878	feat(ui): 푸터 공용화(프로필에도 노출) + 프사 반영 지연 안내 - footer 를 _footer.ejs 파티션으로 분리해 대시보드·프로필 공용으로 include - footer 문구 '버그 제보:' → '버그 제보 -' - 프로필 사진 크롭 모달에 '반영까지 최대 몇 분' 안내(연한 힌트) 추가 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-10 13:51:52 +09:00
2620227	84ce8567e7	feat(profile): 프로필에 '한줄 소개' 추가 — 본인만 인라인 편집 - users.bio 컬럼(멱등) + db.setBio / getUserProfile 조회 포함 - POST /profile/bio (본인만, fetch JSON / 폼 POST 폴백) - 프로필 히어로: 이름·사번 한 줄로 합치고 한줄 소개를 3줄째로 배치 - 본인은 연필 버튼으로 인라인 편집(저장/취소·Esc), 최대 80자 - word-break: keep-all 로 한글 단어 중간 잘림 방지 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-10 13:43:49 +09:00
이혜민(2620227)	0ed41849ca	docs: README 개행 정렬	2026-07-09 11:11:26 +00:00
2620227	b779ed882a	fix(dashboard): footer 버그 제보 문구 간결화 — '버그 제보: gitea 이슈' Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-07-08 10:27:54 +09:00
2620227	ad693304cf	fix(sites): 도구 카드 tooltip 문장 끝(.) 뒤 개행 추가 — 4개 tip 두 줄로 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-07-07 20:55:39 +09:00
2620227	26cc086414	fix(projects): 상세 모달 열 때 하단 고정 문제 수정 댓글 입력창 focus() 가 브라우저 스크롤을 하단으로 밀어 README 가 길면 상세가 맨 아래에 고정돼 열리던 문제. overlay 스크롤을 맨 위로 되돌리고 focus({ preventScroll: true }) 로 포커스 점프를 막음. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-07-07 18:44:36 +09:00
2620227	44cc2af813	fix(sites): LiteLLM 링크를 litellm.bok.or.kr 로 변경 - LiteLLM 만 도메인 접미 bokdev.in → bok.or.kr (서브도메인 litellm 유지) - 나머지 도구 URL 은 그대로. LITELLM_URL env 미설정이라 기본값 교체로 반영됨 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-07-07 15:04:01 +09:00
2620227	44f7cb4b8b	feat(sites): 도구 카드 호버 설명(title) 추가 — Coder·Gitea·Kubero·Coolify - sites.js 에 tip 필드 추가, dashboard 카드에 title 속성으로 연결(tip 있는 카드만) - Coder: VS Code Web 개발 환경 / Gitea: 소스 저장·버전 관리·Git 협업 - Kubero: Kubernetes 기반·playground 파이프라인 / Coolify: Docker 기반·aidev 프로젝트 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-07-07 14:03:26 +09:00
2620227	1f5179cd04	feat(projects): 등록 폼·카드 미리보기·README 가져오기 개선 - 등록 모달: 저장소 URL 필드를 제목 아래(설명 위)로 이동 — README 가져오기 흐름 자연화 - URL 미입력 상태로 README 가져오기 시 입력란에 빨간 인라인 안내 표시(토스트 대신) - 피드 카드: 설명 미리보기 2줄 클램프 + flex:1 로 태그·푸터를 카드 하단에 정렬 - fetchReadme: CRLF→LF·줄끝공백·연속빈줄 정리로 불필요한 개행 유입 방지 - mdPlain: 개행을 살려(빈 줄만 제거) 카드 미리보기가 README 줄 구조로 보이게 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-07-07 13:15:20 +09:00
2620227	e21d622ba9	feat(sites): Coolify Keycloak SSO 로그인 시작 URL(/auth/keycloak/redirect) 적용 callback 이 /auth/keycloak/callback 이라 Socialite 시작 경로는 /auth/keycloak/redirect. 포털 SSO 세션이 있으면 폼 없이 통과. COOLIFY_URL 로 덮어쓰기 가능. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-07-07 09:46:26 +09:00
2620227	3945992125	feat(sites): 배포 PaaS Coolify 도구 카드 추가 (모두 노출) Kubero 와 동일한 배포 PaaS. 일반 사용자에게도 노출(adminOnly 아님). URL 은 COOLIFY_URL 환경변수로 덮어쓰기 가능(기본 coolify.bokdev.in). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-07-07 09:39:03 +09:00
2620227	0c5f10ae18	fix(font): Pretendard 로컬 @font-face 제거 → CDN <link> 로 로드 로컬 /public/fonts/PretendardVariable.woff2 파일이 없어 404가 났다. 인터넷 연결 환경이므로 jsdelivr CDN(pretendard.min.css)으로 불러온다. 미로드 시 base.css 시스템 폰트 스택으로 폴백. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-07-03 17:34:33 +09:00
2620227	5e73bfdd28	fix: /favicon.ico 404 제거 — svg 파비콘으로 301 리다이렉트 브라우저가 페이지마다 자동 요청하는 /favicon.ico 라우트가 없어 모든 페이지 콘솔에 404가 떴다. /public/favicon.svg 로 넘긴다. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-07-03 17:25:54 +09:00
2620227	eb186cbfeb	docs: README를 일반 사용자용 포털 사용법 안내로 개편 공개 레포라 비개발자도 보므로 로그인·개발도구·프로젝트 공유/수정·소통 사용법을 앞세우고 매뉴얼 링크 연결. 로그인 용어는 '행번'으로 표기. 개발자용 정보는 하단에 간단히. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-07-03 17:14:47 +09:00
2620227	7fe3a8fead	feat(projects): 등록한 프로젝트 수정 기능 추가 - 상세(모달/단독) 소유자 영역에 '수정' 버튼 → 등록 모달을 현재 값으로 채워 재사용 - POST /projects/:id/edit 라우트 + db.updateProject(소유자 조건으로 타인 수정 차단) - 등록/수정 공용 모달을 _project_form_modal.ejs 로 추출(dashboard·project 에서 include) - pencil 아이콘 추가, modals.js 에 openEdit/openShare 초기화 로직 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-07-03 16:55:09 +09:00
2620227	459f37608e	chore(egg): 콘솔 환영 문구를 이슈 제보 안내로 변경 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-07-03 16:04:35 +09:00
2620227	40f8352a28	feat: 헤더 매뉴얼 버튼 · 프로필 검색 · 상세 뒤로가기 뎁스 정리 - 헤더 프로필 왼쪽에 '매뉴얼' 버튼 추가(MANUAL_URL 환경변수, 기본 gitea MANUAL) - 검색을 페이지 내 data-search 카드 전체 대상으로 일반화 → 프로필에서 그 사람 프로젝트도 검색(자리표시자도 페이지별로: 공유/내/○○ 님의 프로젝트) - 상세 페이지 뒤로가기: ?from= 내부경로 기반으로 프로필→상세는 프로필로 복귀 - '사내 개발 포털' +4pt, 도구 카드 이름·설명 +2pt Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-07-03 15:43:32 +09:00
2620227	b512ab2143	fix(modal): 상세 모달 폭 확대 + 공개/비공개 배지 클릭 토글 - 모달 max-width 760→880px (min-width 아님: 화면 분할 시 잘림 방지 위해 반응형 유지). - 상세 모달의 '공개/비공개' 배지를 소유자가 클릭하면 바로 토글되도록 변경. 별도 '비공개로 전환' 버튼은 제거(배지가 그 역할). 삭제 버튼은 유지. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-07-02 16:04:19 +09:00
2620227	6c2bb888b4	feat: 프로필 사진 업로드·프로필 페이지 + 모달/이름 개선 - 프로필 페이지 /u/:sabun 신설 (본인=비공개 포함, 타인=공개만). 헤더 "내 프로필", 카드·모달·댓글 작성자 클릭 시 프로필로 이동. - 프로필 사진 업로드: users.avatar(bytea) 저장, GET /avatar/:sabun (업로드본 없으면 identicon SVG 폴백), POST /profile/avatar(express.raw). 브라우저 canvas 크롭(256px webp) — 서버 이미지 라이브러리/멀터 불필요. identicon 6개 렌더 지점을 avatar() 헬퍼로 통일. - 상세 모달 폭 640→760px, 소유자 액션(비공개 전환·삭제)을 우측 그룹으로 묶어 한 줄 정렬. - 표시 이름을 한국식 성+이름(family_name+given_name)으로 교정. - .project-env.example ADMIN_ROLE→ADMIN_GROUP 정리. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-07-02 15:45:47 +09:00
2620227	b4c9b4a395	feat(auth): 관리자 판별을 Keycloak 역할(role)에서 그룹(group) 기반으로 변경 - auth.js: realm_access.roles/resource_access 대신 ID 토큰 claims.groups 사용 (group-membership 매퍼, full.path=false 대비 앞 슬래시 제거 후 비교) - config.js: adminRole(ADMIN_ROLE, "admin") → adminGroup(ADMIN_GROUP, "DevOps") - server.js: 세션 user 주석 roles → groups - CLAUDE.md: 인증 모델·Kubero Env 문서 갱신 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-07-02 14:47:34 +09:00
2620227	ac545651e6	refactor(tools): Harbor 관리자 전용 · Kubero SSO 표시 · SSO 배지 제거 Harbor 를 관리자 전용(adminOnly)으로 옮기고, Kubero 도 Keycloak SSO 로 로그인 가능하므로 sso 표시를 추가한다. 일반 사용자에게 보이는 도구가 모두 SSO 라 구분 의미가 사라진 SSO 배지(마크업·CSS)를 제거한다. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-02 14:19:49 +09:00
2620227	76c82ed24e	fix(ui): 푸터를 한 줄로 정리하고 이모지 제거 브랜드 · 버그 제보 안내 · 기술 스택을 한 줄에 배치하고(footer-left 그룹), 버그 제보 문구 끝의 🐛 이모지를 뺐다. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-02 14:19:18 +09:00
2620227	da1653a8ea	feat(projects): 설명 마크다운 렌더링 + 저장소 README 가져오기 등록 모달의 '한 줄 설명' input 을 여러 줄 textarea 로 바꾸고, 설명을 markdown-it 로 렌더링한다(html:false 로 raw HTML 이스케이프·javascript: 링크 차단 — XSS 안전). 상세 화면은 마크다운으로, 카드 미리보기는 기호를 걷어낸 순수 텍스트(mdPlain) + 3줄 클램프로 표시. '저장소 README 가져오기' 버튼과 GET /api/readme 라우트를 추가해 repo_url 의 Gitea README 를 설명란으로 불러올 수 있다(gitea.js fetchReadme). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-02 14:18:27 +09:00
2620227	4a3e5636c8	feat(projects): 상세 모달에서 공개/비공개 전환 + '비공개로' 버튼 스타일 개선 투명 텍스트라 버튼처럼 안 보이던 .toggle-share-btn 을 테두리·패딩 있는 버튼 모양으로 변경. 프로젝트 상세 모달(소유자)에 '비공개로 전환/공개로 전환' 버튼을 추가하고, 전환 라우트가 return_to 를 존중하도록 해 모달에서 전환하면 모달이 다시 열린 상태로 돌아온다. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-02 14:15:34 +09:00
2620227	761b1a1936	fix(comments): 답글 배너 상시 표시 버그 수정 + 사번 대신 이름 표시 .reply-banner 에 display:flex 가 걸려 [hidden] 기본 규칙을 이겨 배너가 항상 보이던 문제를 .reply-banner[hidden]{display:none} 으로 해결. 댓글/대댓글 작성자·답글 대상·프로젝트 소유자를 사번 대신 이름(author_name/ owner_name)으로 표시하고, 사번은 title 툴팁으로 남긴다. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-02 14:14:23 +09:00
0310700	3ddf920e56	feat(ui): 푸터에 버그 제보(Gitea 이슈) 링크 추가 대시보드 푸터에 '버그가 있다면 이슈에 제보바랍니다' 안내를 자체 줄로 작게 표시. 링크는 gitea playground/ai-dev-portal issues, 새 탭·rel=noopener. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-07-01 10:12:47 +09:00
0310700	1f76329140	fix(reactions): 좋아요·즐겨찾기 값을 카드·통계·모달에서 전역 동기화 같은 프로젝트가 피드 카드 버튼·내 프로젝트 통계 줄·상세 모달(template) 세 곳에 렌더되는데, 기존 syncReaction 은 라이브 data-react 버튼만 갱신해 통계 줄과 모달(inert template 스냅샷)이 옛 값으로 남아 서로 달라졌다. - reactions.js: 프로젝트별 {on,count} 를 단일 store(Map)로 관리. 로드 시 detailStore 템플릿에서 서버 원본값을 시드하고, 변경 시 그 값을 그리는 모든 라이브 DOM(버튼·통계 줄·data-pop)을 자동으로 다시 칠함. - modals.js: 모달 마운트 직후 applyReactions 로 현재 store 값을 덮어써 템플릿 스냅샷의 옛 값 대신 최신 값을 표시. - dashboard.ejs: 내 프로젝트 통계 숫자에 data-rcount/data-id/data-kind 바인딩 추가. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-07-01 10:12:38 +09:00
0310700	6ff8034856	fix(ui): 토스트 표시 후 주소창의 ?toast·?egg·?open 쿼리 제거 initSignals 가 신호를 소비한 뒤 history.replaceState 로 1회성 쿼리만 제거. POST→Redirect→GET·비-JS 폴백은 유지하고, 새로고침/공유 시 토스트 재출력도 방지. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-07-01 10:10:14 +09:00
0310700	12d620449e	feat(ui): 파비콘 </> 아이콘 추가 헤더 브랜드와 동일한 codeslash </> 글리프를 브랜드 그라디언트 타일 위에 얹어 탭에서 16px 로도 읽히게 함. 모든 화면(_header include)에 적용. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-07-01 10:10:14 +09:00
2620227	540a170b0d	fix(modal): 모달 닫기·프로젝트 삭제 동작 + 세로 가운데 정렬 - 모달 오버레이 마커를 data-open-id → data-open-pid 로 변경 (열기 감지 셀렉터 [data-open-id] 와 충돌해 모달 내부 클릭이 닫기/삭제 대신 모달 재오픈으로 잡히던 문제) - .modal/.share-modal 에 margin:auto → 짧으면 정중앙, 길면 스크롤 - 프로젝트 삭제 버튼 앞에 휴지통 아이콘 추가 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-06-30 16:32:28 +09:00
2620227	ebf9599199	feat(projects): 메인 언어 Gitea 자동 판별 + 수동 선택 폴백 - src/gitea.js: repo_url 파싱 + 언어 통계 API(fetchMainLang) 신규 - 등록 폼에 '메인 언어' 드롭다운 추가(기본 '자동 감지') - 결정 순서: 드롭다운 → Gitea 자동감지 → 태그 추론 → 미표시 - langFromTags 기본값 TypeScript 제거(안 맞으면 미표시) - GITEA_TOKEN(선택): 비공개 레포 자동감지용 스위치 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-06-30 15:56:00 +09:00
0310700	fdfd7dca98	feat(ui): 헤더 브랜드 로고를 </> (codeslash)로 변경 기존 code 아이콘(<>)은 슬래시가 없어 로그인창 </> 로고와 불일치. 박스 없이 헤더 색 상속하는 codeslash 아이콘 추가해 헤더에 적용. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-06-30 14:51:51 +09:00
0310700	096f7fbbcb	feat(auth): Keycloak RP-initiated 단일 로그아웃(SLO) 적용 feat/sso 작업을 라우트 개편된 현재 main 에 이식. - handleCallback 이 id_token 반환, 콜백에서 분리해 session.idToken 에만 보관(뷰/DB 비노출) - logoutUrl(): end_session_endpoint + id_token_hint 로 확인화면 없이 즉시 로그아웃 - /logout: 로컬 세션 destroy 후 Keycloak end-session 으로 리다이렉트해 SSO 세션까지 종료 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-06-30 14:12:42 +09:00