navigate(`/api-hub/services/${svc.serviceId}`)}
- >
-
-
-
- {svc.serviceName}
-
-
{svc.serviceCode}
+
+ {recentTop3.length > 0 ? (
+
+ {recentTop3.map((api) => {
+ const palette = api.apiDomain ? getDomainColorByHash(api.apiDomain) : DOMAIN_COLOR_PALETTE[4];
+ return (
+
navigate(`/api-hub/services/${api.serviceId}/apis/${api.apiId}`)}
+ >
+
+ {api.apiDomain && (
+
+ {formatDomain(api.apiDomain)}
+
+ )}
-
-
-
- {HEALTH_LABEL[svc.healthStatus] ?? svc.healthStatus}
-
-
-
- {svc.description && (
-
- {svc.description}
+
+ {api.apiName}
- )}
-
-
API {svc.apiCount}개
-
도메인 {svc.domains.length}개
+ {api.description && (
+
+ {truncate(api.description, 80)}
+
+ )}
+
+
+ {formatDate(api.createdAt)}
+
-
- ))}
+ );
+ })}
) : (
-
- {searchQuery ? '검색 결과가 없습니다' : '등록된 서비스가 없습니다'}
+
+ 등록된 API가 없습니다
)}
+ {/* 서비스 도메인 섹션 */}
+ {domainList.length > 0 && (
+
+
+
+ {domainList.map((item) => {
+ const palette = getDomainColorByHash(item.domain);
+ const iconPaths = parseIconPaths(item.iconPath);
+ const imgSrc = `${import.meta.env.BASE_URL}images/domains/${item.domain.toLowerCase()}.jpg`;
+ return (
+
navigate(`/api-hub/domains/${encodeURIComponent(item.domain)}`)}
+ className={`group relative overflow-hidden rounded-xl border bg-white dark:bg-gray-800 ${palette.border} cursor-pointer transition-all duration-200 hover:-translate-y-1 hover:shadow-xl`}
+ >
+
+
{ (e.target as HTMLImageElement).style.display = 'none'; }}
+ />
+
+
+
+
+
+
+ {formatDomain(item.domain)}
+
+
+
+ {item.apiCount} APIs
+
+
+
+
+ );
+ })}
+
+
+ )}
);
};
diff --git a/frontend/src/pages/apihub/ApiHubDomainPage.tsx b/frontend/src/pages/apihub/ApiHubDomainPage.tsx
new file mode 100644
index 0000000..321892e
--- /dev/null
+++ b/frontend/src/pages/apihub/ApiHubDomainPage.tsx
@@ -0,0 +1,238 @@
+import { useState, useEffect, useMemo } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import type { ServiceCatalog } from '../../types/apihub';
+import { getCatalog } from '../../services/apiHubService';
+
+const DEFAULT_ICON_PATHS = [
+ 'M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 00-1.883 2.542l.857 6a2.25 2.25 0 002.227 1.932H19.05a2.25 2.25 0 002.227-1.932l.857-6a2.25 2.25 0 00-1.883-2.542m-16.5 0V6A2.25 2.25 0 016 3.75h3.879a1.5 1.5 0 011.06.44l2.122 2.12a1.5 1.5 0 001.06.44H18A2.25 2.25 0 0120.25 9v.776',
+];
+
+const DOMAIN_COLOR_PALETTE = [
+ { color: 'text-emerald-400', bg: 'bg-emerald-500/10', border: 'border-emerald-500/30', line: 'from-emerald-500' },
+ { color: 'text-rose-400', bg: 'bg-rose-500/10', border: 'border-rose-500/30', line: 'from-rose-500' },
+ { color: 'text-blue-400', bg: 'bg-blue-500/10', border: 'border-blue-500/30', line: 'from-blue-500' },
+ { color: 'text-amber-400', bg: 'bg-amber-500/10', border: 'border-amber-500/30', line: 'from-amber-500' },
+ { color: 'text-violet-400', bg: 'bg-violet-500/10', border: 'border-violet-500/30', line: 'from-violet-500' },
+ { color: 'text-cyan-400', bg: 'bg-cyan-500/10', border: 'border-cyan-500/30', line: 'from-cyan-500' },
+ { color: 'text-orange-400', bg: 'bg-orange-500/10', border: 'border-orange-500/30', line: 'from-orange-500' },
+ { color: 'text-pink-400', bg: 'bg-pink-500/10', border: 'border-pink-500/30', line: 'from-pink-500' },
+ { color: 'text-lime-400', bg: 'bg-lime-500/10', border: 'border-lime-500/30', line: 'from-lime-500' },
+ { color: 'text-indigo-400', bg: 'bg-indigo-500/10', border: 'border-indigo-500/30', line: 'from-indigo-500' },
+ { color: 'text-teal-400', bg: 'bg-teal-500/10', border: 'border-teal-500/30', line: 'from-teal-500' },
+ { color: 'text-fuchsia-400', bg: 'bg-fuchsia-500/10', border: 'border-fuchsia-500/30', line: 'from-fuchsia-500' },
+];
+
+const domainColorCache = new Map
();
+let nextColorIdx = 0;
+
+const getDomainColorByHash = (domain: string) => {
+ const key = domain.toUpperCase();
+ const cached = domainColorCache.get(key);
+ if (cached) return cached;
+ const color = DOMAIN_COLOR_PALETTE[nextColorIdx % DOMAIN_COLOR_PALETTE.length];
+ nextColorIdx++;
+ domainColorCache.set(key, color);
+ return color;
+};
+
+/** iconPath 문자열에서 SVG path d 값 배열을 추출 */
+const parseIconPaths = (iconPath: string | null): string[] => {
+ if (!iconPath) return DEFAULT_ICON_PATHS;
+ const pathRegex = /d="([^"]+)"/g;
+ const matches: string[] = [];
+ let m;
+ while ((m = pathRegex.exec(iconPath)) !== null) {
+ matches.push(m[1]);
+ }
+ return matches.length > 0 ? matches : [iconPath];
+};
+
+const formatDomain = (d: string) => (/^[a-zA-Z\s\-_]+$/.test(d) ? d.toUpperCase() : d);
+
+interface FlatApi {
+ serviceId: number;
+ apiId: number;
+ apiName: string;
+ apiPath: string;
+ apiMethod: string;
+ description: string | null;
+}
+
+interface DomainInfo {
+ domain: string;
+ iconPath: string | null;
+ apis: FlatApi[];
+}
+
+const ApiHubDomainPage = () => {
+ const { domainName } = useParams<{ domainName: string }>();
+ const navigate = useNavigate();
+ const [catalog, setCatalog] = useState([]);
+ const [isLoading, setIsLoading] = useState(true);
+ const [searchQuery, setSearchQuery] = useState('');
+
+ useEffect(() => {
+ getCatalog()
+ .then((res) => {
+ setCatalog(res.data ?? []);
+ })
+ .finally(() => setIsLoading(false));
+ }, []);
+
+ const domainInfo = useMemo(() => {
+ if (!domainName) return null;
+ const targetKey = decodeURIComponent(domainName).toUpperCase();
+ const apis: FlatApi[] = [];
+ let iconPath: string | null = null;
+ let foundDomain = '';
+
+ for (const svc of catalog) {
+ for (const dg of svc.domains) {
+ if (dg.domain.toUpperCase() === targetKey) {
+ if (!foundDomain) foundDomain = dg.domain;
+ if (iconPath === null && dg.iconPath) iconPath = dg.iconPath;
+ for (const api of dg.apis) {
+ apis.push({
+ serviceId: svc.serviceId,
+ apiId: api.apiId,
+ apiName: api.apiName,
+ apiPath: api.apiPath,
+ apiMethod: api.apiMethod,
+ description: api.description ?? null,
+ });
+ }
+ }
+ }
+ }
+
+ if (!foundDomain) return null;
+ return { domain: foundDomain, iconPath, apis };
+ }, [catalog, domainName]);
+
+ if (isLoading) {
+ return (
+
+ );
+ }
+
+ if (!domainInfo) {
+ return (
+
+
+
도메인을 찾을 수 없습니다.
+
+
+
+ {/* 헤더 카드 */}
+
+ {/* 상단 컬러 라인 */}
+
+
+
+ {/* 도메인 아이콘 */}
+
+
+
+
+ {/* 도메인명 + API 개수 */}
+
+
+ {formatDomain(domainInfo.domain)}
+
+
+ {domainInfo.apis.length}개 API
+
+
+
+
+
+ {/* API 목록 */}
+
+ {/* 검색 헤더 */}
+
+
+ API 목록
+ {domainInfo.apis.length}건
+
+
+
+
setSearchQuery(e.target.value)}
+ placeholder="API 검색..."
+ className="w-52 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg pl-8 pr-3 py-1.5 text-xs text-gray-900 dark:text-gray-100 placeholder-gray-400 focus:ring-1 focus:ring-indigo-500 focus:outline-none"
+ />
+
+
+
+ {/* 리스트 */}
+ {(() => {
+ const filtered = domainInfo.apis.filter((api) => {
+ if (!searchQuery.trim()) return true;
+ const q = searchQuery.toLowerCase();
+ return api.apiName.toLowerCase().includes(q) || (api.description ?? '').toLowerCase().includes(q);
+ });
+
+ if (filtered.length === 0) {
+ return (
+
+ {searchQuery.trim() ? '검색 결과가 없습니다.' : '등록된 API가 없습니다.'}
+
+ );
+ }
+
+ return (
+
+ {filtered.map((api) => (
+
navigate(`/api-hub/services/${api.serviceId}/apis/${api.apiId}`)}
+ className="flex items-center gap-4 px-5 py-3.5 cursor-pointer transition-colors hover:bg-gray-50 dark:hover:bg-gray-700/50"
+ >
+
+
+
+ ))}
+
+ );
+ })()}
+
+