diff --git a/backend/src/main.rs b/backend/src/main.rs index a379f64..0a96c23 100644 --- a/backend/src/main.rs +++ b/backend/src/main.rs @@ -16,12 +16,14 @@ const SERVICES_URLS: &[(&str, &str)] = &[ ("jenkins", "http://jenkins:8080/login"), ("portainer", "http://portainer:9000"), ("rustfs", "http://rustfs:9001"), - ("uptime-kuma", "http://uptime-kuma:3001"), + ("vaultwarden", "http://vaultwarden:80"), ("dozzle", "http://dozzle:8080"), ("it-tools", "http://it-tools:80"), ("ffmpeg-downloader", "http://ffmpeg-gui:3000"), ("cloudbeaver", "http://cloudbeaver:8978"), - ("forgejo", "http://forgejo:3000") + ("forgejo", "http://forgejo:3000"), + ("affine", "http://affine:3010"), + ("hoppscotch", "http://hoppscotch:80") ]; /// 시스템 상태 정보 구조체 diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index f051f57..0ff0476 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -87,10 +87,6 @@ export default function App() { - {/* 푸터 */} - ); diff --git a/frontend/src/data/services.js b/frontend/src/data/services.js index 9f4a353..98a5735 100644 --- a/frontend/src/data/services.js +++ b/frontend/src/data/services.js @@ -1,80 +1,140 @@ import { Terminal, - HeartPulse, Wrench, Database, HardDrive, Server, Download, GitBranch, + FileText, + Zap, + Monitor, + FolderCode, + Sparkles, + KeyRound, } from "lucide-react"; /** - * 서비스 목록 설정 - * 대시보드에 표시될 서비스들을 정의합니다. + * 서비스 카테고리 설정 + * 대시보드에 표시될 서비스들을 카테고리별로 그룹화합니다. */ -export const serviceList = [ +export const serviceCategories = [ { - id: "portainer", - title: "Portainer", - desc: "Docker 컨테이너 관리", + id: "infrastructure", + title: "인프라 관리", + icon: Monitor, + services: [ + { + id: "portainer", + title: "Portainer", + desc: "Docker 컨테이너 관리", + icon: Database, + url: "https://portainer.caadiq.co.kr", + }, + { + id: "dozzle", + title: "Dozzle", + desc: "실시간 로그 뷰어", + icon: Terminal, + url: "https://dozzle.caadiq.co.kr", + }, + ], + }, + { + id: "data-storage", + title: "데이터 & 저장소", icon: Database, - url: "https://portainer.caadiq.co.kr", + services: [ + { + id: "cloudbeaver", + title: "CloudBeaver", + desc: "데이터베이스 관리", + icon: Database, + url: "https://cloudbeaver.caadiq.co.kr", + }, + { + id: "rustfs", + title: "RustFS", + desc: "S3 호환 스토리지", + icon: HardDrive, + url: "https://rustfs.caadiq.co.kr", + }, + { + id: "vaultwarden", + title: "Vaultwarden", + desc: "비밀번호 관리", + icon: KeyRound, + url: "https://vaultwarden.caadiq.co.kr", + }, + ], }, { - id: "dozzle", - title: "Dozzle", - desc: "실시간 로그 뷰어", - icon: Terminal, - url: "https://dozzle.caadiq.co.kr", + id: "development", + title: "개발 도구", + icon: FolderCode, + services: [ + { + id: "forgejo", + title: "Forgejo", + desc: "Git 저장소 관리", + icon: GitBranch, + url: "https://forgejo.caadiq.co.kr", + }, + { + id: "jenkins", + title: "Jenkins", + desc: "CI/CD 파이프라인", + icon: Server, + url: "https://jenkins.caadiq.co.kr/login", + }, + { + id: "hoppscotch", + title: "Hoppscotch", + desc: "API 테스트 도구", + icon: Zap, + url: "https://hoppscotch.caadiq.co.kr", + }, + ], }, { - id: "uptime-kuma", - title: "Uptime Kuma", - desc: "서버 상태 모니터링", - icon: HeartPulse, - url: "https://uptime-kuma.caadiq.co.kr", - }, - { - id: "cloudbeaver", - title: "CloudBeaver", - desc: "데이터베이스 관리", - icon: Database, - url: "https://cloudbeaver.caadiq.co.kr", - }, - { - id: "forgejo", - title: "Forgejo", - desc: "Git 저장소 관리", - icon: GitBranch, - url: "https://forgejo.caadiq.co.kr", - }, - { - id: "jenkins", - title: "Jenkins", - desc: "CI/CD 파이프라인", - icon: Server, - url: "https://jenkins.caadiq.co.kr/login", - }, - { - id: "rustfs", - title: "RustFS", - desc: "S3 호환 스토리지", - icon: HardDrive, - url: "https://rustfs.caadiq.co.kr", - }, - { - id: "it-tools", - title: "IT-Tools", - desc: "개발자 도구 모음", - icon: Wrench, - url: "https://it-tools.caadiq.co.kr", - }, - { - id: "ffmpeg-downloader", - title: "FFmpeg Downloader", - desc: "동영상 다운로드 도구", - icon: Download, - url: "https://ffmpeg.caadiq.co.kr", + id: "productivity", + title: "생산성 & 유틸리티", + icon: Sparkles, + services: [ + { + id: "it-tools", + title: "IT-Tools", + desc: "개발자 도구 모음", + icon: Wrench, + url: "https://it-tools.caadiq.co.kr", + }, + { + id: "ffmpeg-downloader", + title: "FFmpeg Downloader", + desc: "동영상 다운로드 도구", + icon: Download, + url: "https://ffmpeg.caadiq.co.kr", + }, + { + id: "affine", + title: "AFFiNE", + desc: "문서 및 노트 관리", + icon: FileText, + url: "https://affine.caadiq.co.kr", + }, + ], }, ]; + +/** + * 기존 호환성을 위한 평면 서비스 목록 + * 백엔드 상태 체크 등에서 사용됩니다. + */ +export const serviceList = serviceCategories.flatMap( + (category) => category.services +); + +// 각 카테고리 내 서비스들을 title 기준 알파벳순으로 자동 정렬 +serviceCategories.forEach((category) => { + category.services.sort((a, b) => a.title.localeCompare(b.title)); +}); diff --git a/frontend/src/pages/Service.jsx b/frontend/src/pages/Service.jsx index c768a5c..8fd95bb 100644 --- a/frontend/src/pages/Service.jsx +++ b/frontend/src/pages/Service.jsx @@ -1,11 +1,11 @@ import React from 'react'; import { motion } from 'framer-motion'; import ServiceCard from '../components/ServiceCard'; -import { serviceList } from '../data/services'; +import { serviceCategories } from '../data/services'; /** - * 홈 페이지 컴포넌트 - * 사용 가능한 서비스 목록을 표시합니다. + * 서비스 페이지 컴포넌트 + * 사용 가능한 서비스 목록을 카테고리별로 그룹화하여 표시합니다. * * @param {Object} props * @param {Object} props.services - 각 서비스의 상태 (key: service id, value: boolean) @@ -24,9 +24,28 @@ export default function Service({ services }) {

운영 중인 모든 서비스를 한눈에 확인하세요.

-
- {serviceList.map(svc => ( - + {/* 카테고리별 서비스 그룹 */} +
+ {serviceCategories.map((category) => ( +
+ {/* 카테고리 헤더 */} +
+
+ +
+

+ {category.title} +

+
+
+ + {/* 서비스 카드 그리드 */} +
+ {category.services.map(svc => ( + + ))} +
+
))}