{"id":51123605,"url":"https://github.com/devslab-kr/devslab-kit-admin-ui","last_synced_at":"2026-06-25T05:30:33.481Z","repository":{"id":361333176,"uuid":"1250651629","full_name":"devslab-kr/devslab-kit-admin-ui","owner":"devslab-kr","description":"Vue 3 + PrimeVue admin console for devslab-kit, built on its /admin/api/v1 REST API.","archived":false,"fork":false,"pushed_at":"2026-06-06T14:09:58.000Z","size":230,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-06T16:06:49.738Z","etag":null,"topics":["admin-dashboard","devslab-kit","pinia","primevue","typescript","vite","vue","vue3"],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/devslab-kr.png","metadata":{"files":{"readme":"README.ko.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"custom":["https://devslab.kr"]}},"created_at":"2026-05-26T20:58:03.000Z","updated_at":"2026-06-06T14:10:02.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/devslab-kr/devslab-kit-admin-ui","commit_stats":null,"previous_names":["devslab-kr/devslab-kit-admin-ui"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/devslab-kr/devslab-kit-admin-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devslab-kr%2Fdevslab-kit-admin-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devslab-kr%2Fdevslab-kit-admin-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devslab-kr%2Fdevslab-kit-admin-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devslab-kr%2Fdevslab-kit-admin-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devslab-kr","download_url":"https://codeload.github.com/devslab-kr/devslab-kit-admin-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devslab-kr%2Fdevslab-kit-admin-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34761844,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-25T02:00:05.521Z","response_time":101,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["admin-dashboard","devslab-kit","pinia","primevue","typescript","vite","vue","vue3"],"created_at":"2026-06-25T05:30:32.884Z","updated_at":"2026-06-25T05:30:33.476Z","avatar_url":"https://github.com/devslab-kr.png","language":"Vue","funding_links":["https://devslab.kr"],"categories":[],"sub_categories":[],"readme":"# devslab-kit-admin-ui\n\n[English README](README.md)\n\n[devslab-kr/devslab-kit](https://github.com/devslab-kr/devslab-kit) 의 Vue 3 admin console — 플랫폼 스타터가 노출하는 모든 기능을 관리하고 모니터링한다.\n\n\u003e 📖 **전체 사용 가이드 — 모든 화면 step-by-step:**\n\u003e **[devslab-kit.devslab.kr/ko/guides/admin-console](https://devslab-kit.devslab.kr/ko/guides/admin-console/)**\n\u003e (렌더링된 검색 가능 문서 사이트, 한/영 — devslab-kit 문서 사이트의 일부).\n\n## 다루는 범위\n\n단순 CRUD 폼이 아니라 `devslab-kit` 이 제공하는 **모든 기능**을 다루는 **full admin console**:\n\n| 영역 | 페이지 |\n| --- | --- |\n| Identity / Access | Users · Roles · Permissions · Groups (계층 멤버 + 역할 부여) · ABAC Policies (dry-run tester 포함) |\n| Platform | Tenants · Menus (권한 기반 노드를 가진 TreeTable) · 런타임 Settings (`devslab.kit.*` properties read-only) · **Config Sync** (환경 간 설정 export / import — `merge`/`mirror`, dry-run diff) |\n| Observability | Dashboard (KPI 카드 + 최근 audit 이벤트) · Audit Logs (필터 + lazy paging + JSON payload viewer) · Diagnostics (로그인 tester, 권한 tester, menu-visibility tester) |\n\n## 기술 스택\n\n| 계층 | 선택 |\n| --- | --- |\n| 프레임워크 | Vue 3 + `\u003cscript setup\u003e` + TypeScript |\n| 빌드 | Vite 8 |\n| UI | PrimeVue 4 + Tailwind CSS 4 + `tailwindcss-primeui` + PrimeIcons |\n| 테마 | `Aura` preset, light + dark 토글 (`.dark` selector) |\n| 상태 | Pinia |\n| 라우팅 | Vue Router (history mode, route-level lazy loading) |\n| HTTP | axios + `Authorization: Bearer` interceptor + `401 → /login` 리다이렉트 |\n| Composables | `@vueuse/core` |\n| 인증 | JWT (HS256) — `devslab-kit-admin-api` 발급, `localStorage` 저장 |\n\n## 로컬 개발 (터미널 3 개)\n\n### Terminal 1 — Postgres + Redis (이 repo)\n\n```bash\nnpm run compose:up    # docker compose up -d (postgres + redis)\n```\n\nhealthcheck 가 ready 될 때까지 기다린 다음 backend 실행.\n\n### Terminal 2 — devslab-kit 샘플 백엔드 (sibling repo)\n\n```bash\n# devslab-kit checkout 안에서\n./gradlew :devslab-kit-sample-app:bootRun\n```\n\nbackend 는 `http://localhost:8080` 에서 떠서 위 Postgres / Redis 에 붙는다. Flyway 가 V1..V10 첫 부팅 시 적용.\n\n### Terminal 3 — Vite dev (이 repo)\n\n```bash\nnpm install           # 첫 회만\nnpm run dev\n```\n\ndev 서버는 `http://localhost:5173` 에서 뜨고, `/admin/api/**` 는 `http://localhost:8080` 로 proxy 한다. 로컬에 떠 있는 `devslab-kit-sample-app` (또는 `devslab-kit-spring-boot-starter` 를 쓰는 다른 consumer) 가 자동으로 잡힌다 — **CORS 안 건드린다**.\n\n## 유용한 npm 스크립트\n\n```bash\nnpm run dev               # vite dev 서버\nnpm run build             # 타입 체크 + 프로덕션 번들\nnpm run preview           # 프로덕션 번들 로컬 미리보기\nnpm run compose:up        # docker compose up -d\nnpm run compose:down      # docker compose down (postgres volume 유지)\nnpm run compose:logs      # postgres/redis 로그 팔로우\nnpm run test:e2e          # Playwright smoke 테스트 (build + preview 위에서 실행)\nnpm run test:e2e:install  # CI 부트스트랩 — Chromium 브라우저 다운로드\n```\n\n빌드 시 `VITE_ADMIN_API_BASE_URL` 로 API base URL 오버라이드:\n\n```bash\nVITE_ADMIN_API_BASE_URL=https://your.api.example.com/admin/api/v1 npm run build\n```\n\n## 프로젝트 구조\n\n```\nsrc/\n├─ api/           ← axios client + 리소스별 wrapper\n├─ stores/        ← Pinia (auth, ui)\n├─ router/        ← Vue Router + nav guard\n├─ layout/        ← AppLayout (sidebar + header + 테마 토글 + 로그아웃)\n├─ views/         ← 페이지 컴포넌트 (admin surface 당 1개)\n├─ i18n/          ← vue-i18n setup + ko/en 메시지 번들\n├─ App.vue\n├─ main.ts\n└─ style.css      ← Tailwind + tailwindcss-primeui + PrimeIcons\ndocker-compose.yml ← 로컬 개발 / E2E 용 postgres + redis + admin-ui\ne2e/              ← Playwright smoke 테스트 (login + dashboard + i18n 토글)\n```\n\n## 컨테이너 빌드\n\n멀티스테이지 Dockerfile (`node:24-alpine` 빌드, `nginx:1.27-alpine` 서빙):\n\n```bash\ndocker build -t devslab-kit-admin-ui .\ndocker run --rm -p 8081:80 devslab-kit-admin-ui\n# → http://localhost:8081 (SPA 서빙 + /admin/api/* 를 host `admin-api:8080` 로 reverse-proxy)\n```\n\n번들된 `nginx.conf` 가 하는 일:\n\n1. SPA fallback (`try_files $uri $uri/ /index.html`) — Vue Router 가 client-side routing 담당.\n2. `/assets/` 에 long-immutable cache (Vite 가 파일명에 hash 박음).\n3. `/admin/api/*` → `http://admin-api:8080` reverse-proxy — production 에서 브라우저가 CORS preflight 안 보냄.\n\n## 로컬 스택 (docker-compose)\n\n`docker-compose.yml` 은 postgres + redis (sample-app 의 backing services) 와 admin UI 컨테이너를 띄운다. `devslab-kit-sample-app` 은 별도로 띄워서 published port 를 보게 한다.\n\n```bash\ndocker compose up --build\n# → admin UI: http://localhost:8081\n# → postgres: localhost:5432   (devslab / devslab / devslab_kit)\n# → redis:    localhost:6379\n```\n\n## CI\n\n`.github/workflows/ci.yml` 은 `main` 으로의 push / PR 마다:\n\n1. `npm ci`\n2. `npm run build` (vue-tsc type-check + Vite production build)\n3. `dist/` 를 build artifact 로 업로드\n4. Playwright smoke 5 테스트 (Chromium, mock 된 `/admin/api/**`)\n5. Buildx + GitHub Actions cache 로 Docker 이미지 빌드 (push 는 안 함)\n\n## 라이선스\n\n[Apache License 2.0](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevslab-kr%2Fdevslab-kit-admin-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevslab-kr%2Fdevslab-kit-admin-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevslab-kr%2Fdevslab-kit-admin-ui/lists"}