Compare commits
28 Commits
ac545651e6
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 355798a506 | |||
| a199114453 | |||
| 2ca23a00b9 | |||
| 5c76786ada | |||
| 2357dbd152 | |||
| d95f968800 | |||
| 75685e41da | |||
| 56430b7701 | |||
| ef3d495878 | |||
| 84ce8567e7 | |||
| 0ed41849ca | |||
| b779ed882a | |||
| ad693304cf | |||
| 26cc086414 | |||
| 44cc2af813 | |||
| 44f7cb4b8b | |||
| 1f5179cd04 | |||
| e21d622ba9 | |||
| 3945992125 | |||
| 0c5f10ae18 | |||
| 5e73bfdd28 | |||
| eb186cbfeb | |||
| 7fe3a8fead | |||
| 459f37608e | |||
| 40f8352a28 | |||
| b512ab2143 | |||
| 6c2bb888b4 | |||
| b4c9b4a395 |
3
.gitignore
vendored
3
.gitignore
vendored
@@ -8,3 +8,6 @@ dist/
|
||||
.DS_Store
|
||||
HANDOFF.md
|
||||
_preview.mjs
|
||||
|
||||
# bkit 플러그인 런타임/감사 상태 (앱과 무관)
|
||||
.bkit/
|
||||
|
||||
@@ -22,8 +22,9 @@ OIDC_CLIENT_ID=portal
|
||||
OIDC_CLIENT_SECRET=REPLACE_WITH_PORTAL_CLIENT_SECRET
|
||||
|
||||
# --- 권한 ---
|
||||
# 이 Keycloak 역할(realm role)을 가진 사용자에게만 인프라 도구(OpenEverest/MinIO/Keycloak/LiteLLM) 노출.
|
||||
ADMIN_ROLE=admin
|
||||
# 이 Keycloak 그룹(group)에 속한 사용자에게만 인프라 도구(OpenEverest/MinIO/Keycloak/LiteLLM) 노출.
|
||||
# (portal 클라이언트의 group-membership 매퍼가 ID 토큰에 groups 클레임을 넣어줌)
|
||||
ADMIN_GROUP=DevOps
|
||||
|
||||
# --- Gitea 언어 자동 판별 (선택) ---
|
||||
# 프로젝트 등록 시 repo_url 이 Gitea 레포면 언어 통계 API 로 메인 언어를 자동으로 채운다.
|
||||
|
||||
@@ -45,8 +45,9 @@ AI DEV — 사내 개발 포털. 직원이 한 곳에서 **사내 개발 사이
|
||||
- `.claude/` — Claude Code 훅·설정
|
||||
|
||||
## 인증 모델
|
||||
- **사번 = Keycloak `preferred_username`.** 세션에 `req.session.user = { sabun, name, email, roles, isAdmin }`.
|
||||
- **관리자 = `realm_access.roles` 에 `ADMIN_ROLE`(기본 `admin`) 포함.** 인프라 도구(OpenEverest/MinIO/
|
||||
- **사번 = Keycloak `preferred_username`.** 세션에 `req.session.user = { sabun, name, email, groups, isAdmin }`.
|
||||
- **관리자 = `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 산재 금지).
|
||||
|
||||
70
README.md
70
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)
|
||||
- NodeJS buildpack (`npm install` → `node index.js`). Dockerfile 불필요.
|
||||
- Kubero Env: `BASE_URL=https://portal.bokdev.in`, `DATABASE_URL`, `OIDC_*`, `SESSION_SECRET`, `PORTAL_BRAND`.
|
||||
- 도메인: `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`.
|
||||
- 배포는 Kubero(NodeJS buildpack), 도메인 `portal.bokdev.in`.
|
||||
- 브랜드명 `AI DEV`는 `PORTAL_BRAND` 환경변수로 바꿀 수 있습니다.
|
||||
- 코드 구조·작업 규약·환경변수 등 자세한 내용은 **`CLAUDE.md`** 를 참고하세요.
|
||||
|
||||
@@ -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} }
|
||||
|
||||
/* 반응형 */
|
||||
@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; }
|
||||
}
|
||||
/* 반응형 규칙은 public/css/responsive.css 로 이동(로드 순서상 마지막이어야 실제 적용됨). */
|
||||
|
||||
@@ -14,8 +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-desc { display: block; margin-top: 3px; font-size: 12.5px; color: var(--fg2); line-height: 1.45; }
|
||||
.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: 14.5px; color: var(--fg2); line-height: 1.45; }
|
||||
.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;
|
||||
@@ -67,6 +67,10 @@
|
||||
}
|
||||
.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); }
|
||||
/* 배지 자체를 클릭하면 공개/비공개 토글(소유자). 버튼 기본 스타일 초기화 + 클릭 어포던스. */
|
||||
.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;
|
||||
@@ -126,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; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; word-break: break-word; }
|
||||
/* 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; }
|
||||
@@ -135,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; }
|
||||
|
||||
@@ -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; }
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
.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; }
|
||||
/* margin:auto → 내용이 짧으면 화면 정중앙, 길면 위에 붙어 스크롤(잘림 방지). */
|
||||
.modal { width: 100%; max-width: 640px; 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 { 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; }
|
||||
@@ -44,6 +44,8 @@
|
||||
.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);
|
||||
@@ -109,6 +111,9 @@
|
||||
.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); }
|
||||
|
||||
60
public/css/responsive.css
Normal file
60
public/css/responsive.css
Normal file
@@ -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; }
|
||||
}
|
||||
@@ -1,14 +1,7 @@
|
||||
/* 디자인 토큰 — 폰트 + CSS 변수(라이트/다크). 가장 먼저 로드. */
|
||||
|
||||
/* Pretendard — 폐쇄망 대비 로컬 호스팅(가변 폰트 1개). 파일이 없으면 시스템 폰트로 폴백.
|
||||
파일 받기: public/fonts/PretendardVariable.woff2 (README 안내 참고) */
|
||||
@font-face {
|
||||
font-family: 'Pretendard';
|
||||
font-weight: 45 920;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
src: url('/public/fonts/PretendardVariable.woff2') format('woff2-variations');
|
||||
}
|
||||
/* Pretendard — CDN(jsdelivr)에서 로드. views/_header 의 <link> 로 불러온다(인터넷 연결 환경).
|
||||
미로드 시 base.css 의 시스템 폰트 스택으로 폴백. */
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
|
||||
31
public/js/announcements.js
Normal file
31
public/js/announcements.js
Normal file
@@ -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;
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
@@ -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() {
|
||||
@@ -36,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("%cps. 댓글에 LGTM 한 번 쳐보세요.", "color:#8b949e;font-size:11px");
|
||||
console.log("%c이슈는 https://gitea.bokdev.in/playground/ai-dev-portal/issues에 제보해주세요! 언제든 환영합니다.", "color:#656d76;font-size:12px");
|
||||
console.log("%c댓글에 LGTM을 쳐보세요.", "color:#8b949e;font-size:11px");
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
@@ -50,6 +52,8 @@ function boot() {
|
||||
initComments();
|
||||
initFeed();
|
||||
initMyFilter();
|
||||
initNotifications();
|
||||
initAnnouncements();
|
||||
initSignals();
|
||||
consoleArt();
|
||||
}
|
||||
|
||||
@@ -2,14 +2,25 @@
|
||||
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();
|
||||
if (!repo) { toast("먼저 저장소 URL 을 입력하세요"); if (repoInput) repoInput.focus(); return; }
|
||||
// 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 = "가져오는 중…"; }
|
||||
@@ -39,8 +50,12 @@ export function openDetail(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");
|
||||
@@ -50,11 +65,55 @@ function closeDetail() {
|
||||
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 = "";
|
||||
@@ -71,6 +130,8 @@ 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; }
|
||||
|
||||
@@ -94,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(); } });
|
||||
}
|
||||
|
||||
150
public/js/notifications.js
Normal file
150
public/js/notifications.js
Normal file
@@ -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);
|
||||
}
|
||||
192
public/js/profile.js
Normal file
192
public/js/profile.js
Normal file
@@ -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();
|
||||
38
schema.sql
38
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);
|
||||
|
||||
31
src/auth.js
31
src/auth.js
@@ -42,20 +42,20 @@ export async function handleCallback(req) {
|
||||
nonce,
|
||||
});
|
||||
const claims = tokenSet.claims();
|
||||
// Keycloak realm 역할: realm_access.roles. (클라이언트 역할은 resource_access[client].roles)
|
||||
const realmRoles = (claims.realm_access && claims.realm_access.roles) || [];
|
||||
const clientRoles =
|
||||
(claims.resource_access &&
|
||||
claims.resource_access[config.oidc.clientId] &&
|
||||
claims.resource_access[config.oidc.clientId].roles) ||
|
||||
[];
|
||||
const roles = [...new Set([...realmRoles, ...clientRoles])];
|
||||
// 그룹 기반 관리자 판별. Keycloak group-membership 매퍼가 ID 토큰에 groups 를 넣는다.
|
||||
// full.path=false 라 보통 "DevOps" 형태지만, 설정에 따라 "/DevOps" 일 수 있어 앞 슬래시는 떼고 비교.
|
||||
const groups = (Array.isArray(claims.groups) ? claims.groups : []).map((g) => g.replace(/^\//, ""));
|
||||
// 표시 이름: 한국식 성+이름 순서(예: 홍길동). Keycloak `name` 클레임은 보통 이름+성("길동 홍")이라
|
||||
// family_name(성)+given_name(이름) 을 공백 없이 조합해 교정한다. 둘 다 없으면 name/사번으로 폴백.
|
||||
const fam = (claims.family_name || "").trim();
|
||||
const giv = (claims.given_name || "").trim();
|
||||
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,
|
||||
isAdmin: roles.includes(config.adminRole),
|
||||
groups,
|
||||
isAdmin: groups.includes(config.adminGroup),
|
||||
// SSO 로그아웃(end-session) 시 id_token_hint 로 사용
|
||||
id_token: tokenSet.id_token,
|
||||
};
|
||||
@@ -82,3 +82,12 @@ export function requireAuth(req, res, next) {
|
||||
// OIDC 미준비(discovery 실패)면 안내 페이지로 폴백
|
||||
return res.redirect("/login?error=" + encodeURIComponent("로그인 서비스를 사용할 수 없습니다. 잠시 후 다시 시도해 주세요."));
|
||||
}
|
||||
|
||||
// 관리자 전용 가드. requireAuth 뒤(또는 로그인 상태)에서 관리자만 통과.
|
||||
// 관리자 판별은 Keycloak 그룹 기준(req.session.user.isAdmin). 공지 작성/수정/삭제 등에 사용.
|
||||
export function requireAdmin(req, res, next) {
|
||||
if (req.session.user && req.session.user.isAdmin) return next();
|
||||
if (!req.session.user) return requireAuth(req, res, next); // 미로그인은 로그인부터
|
||||
if (req.path.startsWith("/api/")) return res.status(403).json({ error: "forbidden" });
|
||||
return res.redirect("/?toast=" + encodeURIComponent("관리자만 접근할 수 있습니다."));
|
||||
}
|
||||
|
||||
@@ -13,8 +13,9 @@ export const config = {
|
||||
// redirect 는 baseUrl + /auth/callback 로 구성
|
||||
},
|
||||
|
||||
// 관리자 판별용 Keycloak 역할 이름. 이 role 을 가진 사용자에게만 인프라 도구 노출.
|
||||
adminRole: process.env.ADMIN_ROLE || "admin",
|
||||
// 관리자 판별용 Keycloak 그룹 이름. 이 그룹에 속한 사용자에게만 인프라 도구 노출.
|
||||
// (groups 클레임은 portal 클라이언트의 group-membership 매퍼가 ID 토큰에 넣어줌)
|
||||
adminGroup: process.env.ADMIN_GROUP || "DevOps",
|
||||
|
||||
// 프로젝트 등록 시 Gitea 언어 통계 API 로 메인 언어 자동 판별용 토큰(선택).
|
||||
// 공개 레포는 없어도 되고, 비공개 레포 조회에만 필요.
|
||||
@@ -25,13 +26,17 @@ export const config = {
|
||||
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",
|
||||
};
|
||||
|
||||
175
src/db.js
175
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
|
||||
export async function upsertUser({ sabun, name, email }) {
|
||||
// 로그인 시 사용자 upsert. is_admin 은 Keycloak 그룹 판별값을 매 로그인마다 갱신.
|
||||
export async function upsertUser({ sabun, name, email, isAdmin }) {
|
||||
await q(
|
||||
`INSERT INTO users (sabun, name, email, avatar_seed, last_login)
|
||||
VALUES ($1,$2,$3,$1, now())
|
||||
`INSERT INTO users (sabun, name, email, avatar_seed, is_admin, last_login)
|
||||
VALUES ($1,$2,$3,$1,$4, now())
|
||||
ON CONFLICT (sabun) DO UPDATE
|
||||
SET name=EXCLUDED.name, email=EXCLUDED.email, last_login=now()`,
|
||||
[sabun, name, email || null]
|
||||
SET name=EXCLUDED.name, email=EXCLUDED.email, is_admin=EXCLUDED.is_admin, last_login=now()`,
|
||||
[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;
|
||||
}
|
||||
|
||||
16
src/gitea.js
16
src/gitea.js
@@ -49,6 +49,20 @@ export async function fetchMainLang(repoUrl) {
|
||||
}
|
||||
}
|
||||
|
||||
// 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) {
|
||||
@@ -65,7 +79,7 @@ export async function fetchReadme(repoUrl) {
|
||||
for (const name of candidates) {
|
||||
const res = await fetch(`${base}/${name}`, { headers, signal: ctrl.signal });
|
||||
if (!res.ok) continue;
|
||||
const text = await res.text();
|
||||
const text = normalizeReadme(await res.text());
|
||||
// 너무 큰 README 는 앞부분만(설명란이 감당할 범위). 20KB 컷.
|
||||
return text.length > 20000 ? text.slice(0, 20000) : text;
|
||||
}
|
||||
|
||||
102
src/helpers.js
102
src/helpers.js
@@ -27,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(부모 색 상속).
|
||||
@@ -40,6 +46,49 @@ 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: 링크도 차단한다.
|
||||
@@ -57,19 +106,23 @@ export function renderMarkdown(src) {
|
||||
return md.render(String(src || ""));
|
||||
}
|
||||
|
||||
// 카드 미리보기용 — 마크다운 기호를 걷어낸 순수 텍스트 한 덩어리.
|
||||
// (제목 #, 목록 -, 강조 *_`, 링크 [텍스트](url) → 텍스트, 코드펜스 ``` 제거)
|
||||
// 카드 미리보기용 — 마크다운 기호를 걷어낸 순수 텍스트. 줄바꿈은 살린다.
|
||||
// (제목 #, 목록 -, 강조 *_`, 링크 [텍스트](url) → 텍스트, 코드펜스/이미지/배지 제거)
|
||||
// 개행을 공백으로 뭉개지 않고 유지해, 2줄 클램프 미리보기가 README 앞부분의
|
||||
// 줄 구조 그대로 보이도록 한다(제목 줄 + 첫 설명 줄 등). 빈 줄은 없애 줄 낭비를 막는다.
|
||||
export function mdPlain(src) {
|
||||
return String(src || "")
|
||||
.replace(/```[\s\S]*?```/g, " ") // 코드펜스 블록 제거
|
||||
.replace(/`([^`]*)`/g, "$1") // 인라인 코드
|
||||
.replace(/!\[[^\]]*\]\([^)]*\)/g, " ") // 이미지
|
||||
.replace(/\[([^\]]*)\]\([^)]*\)/g, "$1") // 링크 → 텍스트
|
||||
.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(/\s+/g, " ")
|
||||
.replace(/[ \t]+/g, " ") // 줄 안의 연속 공백만 축소(개행은 유지)
|
||||
.replace(/ *\n */g, "\n") // 줄 앞뒤 공백 제거
|
||||
.replace(/\n{2,}/g, "\n") // 빈 줄 제거 → 내용 줄만 남김
|
||||
.trim();
|
||||
}
|
||||
|
||||
@@ -101,12 +154,10 @@ function hashSeed(seed) {
|
||||
return h;
|
||||
}
|
||||
|
||||
// 사번 기반 identicon 아바타(5x5 대칭 격자). 디자인과 동일한 시각.
|
||||
export function identicon(seed, size = 28) {
|
||||
// 사번 기반 identicon(5x5 대칭 격자)의 rects+color 계산 코어.
|
||||
function identiconCore(seed) {
|
||||
const h = hashSeed(seed);
|
||||
const hue = h % 360;
|
||||
const sat = 48 + (h % 22);
|
||||
const color = `hsl(${hue},${sat}%,52%)`;
|
||||
const color = `hsl(${h % 360},${48 + (h % 22)}%,52%)`;
|
||||
const grid = 5;
|
||||
const on = new Array(25).fill(false);
|
||||
for (let col = 0; col < 3; col++) {
|
||||
@@ -116,8 +167,7 @@ export function identicon(seed, size = 28) {
|
||||
on[row * 5 + (4 - col)] = !!bit;
|
||||
}
|
||||
}
|
||||
const inner = Math.round(size * 0.74);
|
||||
const cell = inner / grid;
|
||||
const cell = 100 / grid; // viewBox 0..100 기준
|
||||
let rects = "";
|
||||
for (let r = 0; r < grid; r++) {
|
||||
for (let c = 0; c < grid; c++) {
|
||||
@@ -126,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) => ({ "&": "&", '"': """, "'": "'", "<": "<", ">": ">" }[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)}" />`
|
||||
);
|
||||
}
|
||||
|
||||
166
src/server.js
166
src/server.js
@@ -5,8 +5,8 @@ import { fileURLToPath } from "url";
|
||||
import path from "path";
|
||||
import { config } from "./config.js";
|
||||
import { toolsForUser } from "./sites.js";
|
||||
import { initOidc, loginRedirect, handleCallback, requireAuth, oidcReady, logoutUrl } from "./auth.js";
|
||||
import { icon, identicon, langColor, langFromTags, renderMarkdown, mdPlain } from "./helpers.js";
|
||||
import { initOidc, loginRedirect, handleCallback, requireAuth, requireAdmin, oidcReady, logoutUrl } from "./auth.js";
|
||||
import { icon, identicon, identiconSvg, avatar, adminBadge, langColor, langFromTags, renderMarkdown, mdPlain } from "./helpers.js";
|
||||
import { fetchMainLang, fetchReadme } from "./gitea.js";
|
||||
import * as db from "./db.js";
|
||||
|
||||
@@ -31,9 +31,12 @@ 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;
|
||||
@@ -42,6 +45,9 @@ app.use((req, res, 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");
|
||||
@@ -65,7 +71,7 @@ app.get("/auth/callback", async (req, res) => {
|
||||
const { id_token, ...user } = u;
|
||||
req.session.idToken = id_token;
|
||||
await db.upsertUser(user);
|
||||
req.session.user = user; // { sabun, name, email, roles, isAdmin }
|
||||
req.session.user = user; // { sabun, name, email, groups, isAdmin }
|
||||
res.redirect("/");
|
||||
} catch (e) {
|
||||
console.error("oidc callback error", e);
|
||||
@@ -82,6 +88,63 @@ app.get("/logout", (req, res) => {
|
||||
});
|
||||
});
|
||||
|
||||
// --- 아바타 이미지 ---
|
||||
// 업로드한 프로필 사진이 있으면 그 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 });
|
||||
});
|
||||
|
||||
// --- 대시보드 ---
|
||||
app.get("/", requireAuth, async (req, res) => {
|
||||
const me = req.session.user.sabun;
|
||||
@@ -130,6 +193,36 @@ app.post("/projects", requireAuth, async (req, res) => {
|
||||
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;
|
||||
@@ -138,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.toggleStar({ projectId: req.params.id, sabun: req.session.user.sabun }));
|
||||
? db.toggleHeart({ projectId: req.params.id, sabun: me })
|
||||
: 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"), "/"));
|
||||
}
|
||||
@@ -182,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";
|
||||
@@ -202,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 {
|
||||
|
||||
14
src/sites.js
14
src/sites.js
@@ -5,18 +5,22 @@
|
||||
// 포털 로그인 후 이 링크를 누르면 바로 들어간다.
|
||||
// - 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: "gitea", name: "Gitea", desc: "Git 저장소", url: config.tools.gitea, icon: "🍵", sso: true },
|
||||
// Kubero: Keycloak SSO 로 로그인 가능(단, 랜딩에서 "OAuth 로 로그인"을 한 번 더 눌러야 함).
|
||||
{ key: "kubero", name: "Kubero", desc: "배포 (PaaS)", url: config.tools.kubero, 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 저장소", tip: "소스 코드 저장 및 버전 관리.\n다른 사람과 Git으로 협업할 수 있습니다.", url: config.tools.gitea, icon: "🍵", sso: true },
|
||||
// Kubero: Keycloak SSO 로 로그인 가능(단, 랜딩에서 "OAuth 로 로그인"을 한 번 더 눌러야 함). Kubernetes 기반.
|
||||
{ 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 },
|
||||
|
||||
12
views/_footer.ejs
Normal file
12
views/_footer.ejs
Normal file
@@ -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>
|
||||
@@ -5,11 +5,15 @@
|
||||
<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 () {
|
||||
@@ -32,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">
|
||||
@@ -41,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>
|
||||
<% } %>
|
||||
@@ -48,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>
|
||||
@@ -57,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>
|
||||
|
||||
@@ -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>
|
||||
<span class="vis-badge <%= p.is_public ? "public" : "private" %>"><%- icon(p.is_public ? "globe" : "lock", { size: 11 }) %><%= p.is_public ? "공개" : "비공개" %></span>
|
||||
<% 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) %>
|
||||
<span class="sabun" title="<%= p.owner_sabun %>"><%= p.owner_name || p.owner_sabun %></span>
|
||||
<a class="meta-author" href="/u/<%= p.owner_sabun %>" title="<%= p.owner_name || p.owner_sabun %> 프로필">
|
||||
<%- 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,7 +44,7 @@
|
||||
<% 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) { %>
|
||||
@@ -59,15 +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 %>/visibility" style="margin-left:auto">
|
||||
<input type="hidden" name="is_public" value="<%= p.is_public ? "0" : "1" %>" />
|
||||
<input type="hidden" name="return_to" value="<%= returnTo %>" />
|
||||
<button type="submit" class="modal-action"><%- icon(p.is_public ? "lock" : "globe", { size: 14 }) %><%= p.is_public ? "비공개로 전환" : "공개로 전환" %></button>
|
||||
</form>
|
||||
<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"><%- icon("trash", { size: 13 }) %>프로젝트 삭제</button>
|
||||
</form>
|
||||
<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"><%- icon("trash", { size: 13 }) %>프로젝트 삭제</button>
|
||||
</form>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
@@ -78,10 +97,10 @@
|
||||
<% 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" title="<%= c.author_sabun %>"><%= c.author_name || 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>
|
||||
@@ -101,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" title="<%= r.author_sabun %>"><%= r.author_name || 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>
|
||||
@@ -134,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>
|
||||
|
||||
66
views/_project_form_modal.ejs
Normal file
66
views/_project_form_modal.ejs
Normal file
@@ -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="무엇을 하는 프로젝트인가요? ## 예시 - Markdown 문법을 그대로 쓸 수 있어요 - 위 저장소 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>
|
||||
75
views/announcements.ejs
Normal file
75
views/announcements.ejs
Normal file
@@ -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>
|
||||
@@ -26,7 +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 %>"<% } %>>
|
||||
<span class="tool-icon"><%= t.icon %></span>
|
||||
<span class="tool-name"><%= t.name %></span>
|
||||
<span class="tool-desc"><%= t.desc %></span>
|
||||
@@ -157,11 +157,11 @@
|
||||
<div class="fcard-tags"><% tags.forEach(function (t) { %><span class="tag"><%= t %></span><% }); %></div>
|
||||
<% } %>
|
||||
<div class="fcard-foot">
|
||||
<div class="fcard-author">
|
||||
<%- identicon(p.owner_sabun, 22) %>
|
||||
<span class="sabun" title="<%= p.owner_sabun %>"><%= p.owner_name || p.owner_sabun %></span>
|
||||
<a class="fcard-author" href="/u/<%= p.owner_sabun %>" title="<%= p.owner_name || p.owner_sabun %> 프로필">
|
||||
<%- avatar(p.owner_sabun, 22) %>
|
||||
<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>
|
||||
@@ -176,15 +176,7 @@
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<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">이슈</a>에 제보바랍니다!</span>
|
||||
</div>
|
||||
<div class="footer-tech">Express + Postgres + Keycloak SSO · deployed on Kubero</div>
|
||||
</div>
|
||||
</footer>
|
||||
<%- include("_footer") %>
|
||||
|
||||
<!-- 상세 모달 (app.js 가 detailStore 의 내용을 .modal 에 주입) -->
|
||||
<div class="modal-overlay" id="detailModal" hidden><div class="modal"></div></div>
|
||||
@@ -196,68 +188,8 @@
|
||||
<% }); %>
|
||||
</div>
|
||||
|
||||
<!-- 새 프로젝트 등록 모달 -->
|
||||
<div class="modal-overlay" id="shareModal" hidden>
|
||||
<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 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="무엇을 하는 프로젝트인가요? ## 예시 - Markdown 문법을 그대로 쓸 수 있어요 - 저장소 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">저장소 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">메인 언어 <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">등록</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 새 프로젝트 등록/수정 공용 모달 -->
|
||||
<%- include("_project_form_modal") %>
|
||||
|
||||
<script type="module" src="/public/js/main.js"></script>
|
||||
</body>
|
||||
|
||||
127
views/profile.ejs
Normal file
127
views/profile.ejs
Normal file
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user