generated from gc/template-java-maven
HYOJIN
b37867b8ad
- 대시보드 레이아웃 개선 (히어로 배너, 도메인 카드 이미지, 인기/최신 API) - 인기 API: 최근 1주일 기준 Top 3 (PopularApiResponse 백엔드 추가) - 도메인 상세 페이지 (ApiHubDomainPage) 구현 + 리스트 뷰/검색 - 사이드바 도메인 클릭 시 도메인 상세 페이지 이동 - 브레드크럼: 서비스 제거, 도메인 기반으로 변경 - NoResourceFoundException 404 처리 추가 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
346 lines
17 KiB
TypeScript
346 lines
17 KiB
TypeScript
import { useState, useEffect, useCallback, useMemo } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import type { RecentApi, PopularApi, ServiceCatalog } from '../../types/apihub';
|
|
import { getRecentApis, getPopularApis, getCatalog } from '../../services/apiHubService';
|
|
|
|
const formatDomain = (d: string) => (/^[a-zA-Z\s\-_]+$/.test(d) ? d.toUpperCase() : d);
|
|
|
|
// 도메인 컬러 팔레트 (해시 기반 매핑)
|
|
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 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',
|
|
];
|
|
|
|
/** 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 domainColorCache = new Map<string, (typeof DOMAIN_COLOR_PALETTE)[0]>();
|
|
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;
|
|
};
|
|
|
|
const RANK_BADGE_STYLES = [
|
|
'bg-gradient-to-br from-yellow-400 to-amber-500',
|
|
'bg-gradient-to-br from-gray-300 to-gray-400',
|
|
'bg-gradient-to-br from-amber-600 to-amber-700',
|
|
];
|
|
|
|
const extractSettled = <T,>(result: PromiseSettledResult<{ data?: T }>, fallback: T): T => {
|
|
if (result.status === 'fulfilled' && result.value.data !== undefined) {
|
|
return result.value.data;
|
|
}
|
|
return fallback;
|
|
};
|
|
|
|
const truncate = (str: string, max: number): string =>
|
|
str.length > max ? str.slice(0, max) + '...' : str;
|
|
|
|
const formatDate = (dateStr: string): string => {
|
|
const d = new Date(dateStr);
|
|
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
|
|
};
|
|
|
|
interface FlatDomain {
|
|
domain: string;
|
|
iconPath: string | null;
|
|
sortOrder: number;
|
|
apiCount: number;
|
|
}
|
|
|
|
const ApiHubDashboardPage = () => {
|
|
const navigate = useNavigate();
|
|
const [catalog, setCatalog] = useState<ServiceCatalog[]>([]);
|
|
const [recentApis, setRecentApis] = useState<RecentApi[]>([]);
|
|
const [popularApis, setPopularApis] = useState<PopularApi[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
|
const fetchAll = useCallback(async () => {
|
|
try {
|
|
const [catalogRes, recentRes, popularRes] = await Promise.allSettled([
|
|
getCatalog(),
|
|
getRecentApis(),
|
|
getPopularApis(),
|
|
]);
|
|
setCatalog(extractSettled<ServiceCatalog[]>(catalogRes, []));
|
|
setRecentApis(extractSettled<RecentApi[]>(recentRes, []));
|
|
setPopularApis(extractSettled<PopularApi[]>(popularRes, []));
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
fetchAll();
|
|
}, [fetchAll]);
|
|
|
|
// 카탈로그에서 도메인 기준으로 플랫하게 집계
|
|
const domainList = useMemo<FlatDomain[]>(() => {
|
|
const map = new Map<string, { iconPath: string | null; sortOrder: number; apiCount: number }>();
|
|
for (const svc of catalog) {
|
|
for (const dg of svc.domains) {
|
|
const key = dg.domain.toUpperCase();
|
|
const existing = map.get(key);
|
|
const apiCount = (existing?.apiCount ?? 0) + dg.apis.length;
|
|
const iconPath = existing?.iconPath !== undefined ? existing.iconPath : (dg.iconPath ?? null);
|
|
const sortOrder =
|
|
existing?.sortOrder !== undefined ? existing.sortOrder : (dg.sortOrder ?? Number.MAX_SAFE_INTEGER);
|
|
map.set(key, { iconPath, sortOrder, apiCount });
|
|
}
|
|
}
|
|
return Array.from(map.entries())
|
|
.map(([domain, { iconPath, sortOrder, apiCount }]) => ({ domain, iconPath, sortOrder, apiCount }))
|
|
.sort((a, b) => a.sortOrder - b.sortOrder || a.domain.localeCompare(b.domain));
|
|
}, [catalog]);
|
|
|
|
const recentTop3 = recentApis.slice(0, 3);
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex items-center justify-center h-64">
|
|
<div className="text-gray-500 dark:text-gray-400">로딩 중...</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="max-w-7xl mx-auto space-y-8">
|
|
{/* 히어로 배너 */}
|
|
<div className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-indigo-950 via-indigo-800 to-indigo-600 p-8">
|
|
{/* 장식 글로우 원 */}
|
|
<div className="pointer-events-none absolute -right-16 -top-16 h-64 w-64 rounded-full bg-indigo-400 opacity-20 blur-3xl" />
|
|
<div className="pointer-events-none absolute right-32 -top-8 h-32 w-32 rounded-full bg-purple-400 opacity-10 blur-2xl" />
|
|
|
|
{/* 제목 */}
|
|
<h1 className="mb-2 text-4xl font-extrabold tracking-tight text-white">S&P API HUB</h1>
|
|
<p className="text-indigo-200">S&P 해양/선박 세계데이터를 직접 만나보세요.</p>
|
|
</div>
|
|
|
|
{/* 인기 API 섹션 */}
|
|
{popularApis.length > 0 && (
|
|
<div>
|
|
<div className="mb-4 flex items-center gap-2">
|
|
<div className="flex h-7 w-7 items-center justify-center rounded-lg bg-amber-500/20">
|
|
<svg className="h-4 w-4 text-amber-400" viewBox="0 0 24 24" fill="currentColor">
|
|
<path fillRule="evenodd" d="M12.963 2.286a.75.75 0 00-1.071-.136 9.742 9.742 0 00-3.539 6.176 7.547 7.547 0 01-1.705-1.715.75.75 0 00-1.152-.082A9 9 0 1015.68 4.534a7.46 7.46 0 01-2.717-2.248zM15.75 14.25a3.75 3.75 0 11-7.313-1.172c.628.465 1.35.81 2.133 1a5.99 5.99 0 011.925-3.546 3.75 3.75 0 013.255 3.718z" clipRule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">인기 API</h2>
|
|
<span className="ml-1 text-xs text-gray-400 dark:text-gray-500">최근 7일 기준</span>
|
|
</div>
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
|
{popularApis.map((api, idx) => {
|
|
const palette = api.domain ? getDomainColorByHash(api.domain) : DOMAIN_COLOR_PALETTE[4];
|
|
return (
|
|
<div
|
|
key={idx}
|
|
className="group flex flex-col rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-5 shadow-sm cursor-pointer transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md hover:border-indigo-400/50 dark:hover:border-indigo-500/50"
|
|
onClick={() =>
|
|
api.serviceId && api.apiId
|
|
? navigate(`/api-hub/services/${api.serviceId}/apis/${api.apiId}`)
|
|
: undefined
|
|
}
|
|
>
|
|
<div className="mb-3 flex items-center gap-2">
|
|
{/* 랭킹 뱃지 */}
|
|
<div
|
|
className={`flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-lg text-xs font-bold text-white shadow ${RANK_BADGE_STYLES[idx] ?? 'bg-gray-500'}`}
|
|
>
|
|
{idx + 1}
|
|
</div>
|
|
{api.domain && (
|
|
<span
|
|
className={`rounded-full px-2 py-0.5 text-xs font-medium truncate ${palette.bg} ${palette.color}`}
|
|
>
|
|
{formatDomain(api.domain)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<p
|
|
className="flex-1 text-sm font-semibold text-gray-900 dark:text-gray-100 truncate mb-4"
|
|
title={api.apiName}
|
|
>
|
|
{api.apiName}
|
|
</p>
|
|
<div className="flex items-end justify-between border-t border-gray-100 dark:border-gray-700 pt-3">
|
|
<div>
|
|
<p className="text-xs text-gray-400 dark:text-gray-500 mb-0.5">주간 호출</p>
|
|
<p className="text-xl font-bold text-gray-900 dark:text-gray-100">
|
|
{api.count.toLocaleString()}
|
|
<span className="ml-0.5 text-xs font-normal text-gray-400 dark:text-gray-500">회</span>
|
|
</p>
|
|
</div>
|
|
<svg className="h-7 w-10 text-indigo-400/60" fill="none" viewBox="0 0 40 28" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
|
|
<polyline points="2,22 8,16 14,20 22,8 28,14 36,4" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 최신 등록 API 섹션 */}
|
|
<div>
|
|
<div className="mb-4 flex items-center gap-2">
|
|
<div className="flex h-7 w-7 items-center justify-center rounded-lg bg-cyan-500/20">
|
|
<svg className="h-4 w-4 text-cyan-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 00-2.455 2.456z" />
|
|
</svg>
|
|
</div>
|
|
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">최신 등록 API</h2>
|
|
</div>
|
|
{recentTop3.length > 0 ? (
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
|
{recentTop3.map((api) => {
|
|
const palette = api.apiDomain ? getDomainColorByHash(api.apiDomain) : DOMAIN_COLOR_PALETTE[4];
|
|
return (
|
|
<div
|
|
key={api.apiId}
|
|
className="group flex flex-col rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-5 shadow-sm cursor-pointer transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md hover:border-indigo-400/50 dark:hover:border-indigo-500/50"
|
|
onClick={() => navigate(`/api-hub/services/${api.serviceId}/apis/${api.apiId}`)}
|
|
>
|
|
<div className="mb-2 flex items-center gap-2">
|
|
{api.apiDomain && (
|
|
<span
|
|
className={`rounded-full px-2 py-0.5 text-xs font-medium truncate ${palette.bg} ${palette.color}`}
|
|
>
|
|
{formatDomain(api.apiDomain)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<p
|
|
className="flex-1 text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1 truncate"
|
|
title={api.apiName}
|
|
>
|
|
{api.apiName}
|
|
</p>
|
|
{api.description && (
|
|
<p className="mb-3 text-xs text-gray-500 dark:text-gray-400 line-clamp-2">
|
|
{truncate(api.description, 80)}
|
|
</p>
|
|
)}
|
|
<div className="mt-auto flex items-center gap-1.5 text-xs text-gray-400 dark:text-gray-500">
|
|
<svg className="h-3.5 w-3.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
|
/>
|
|
</svg>
|
|
{formatDate(api.createdAt)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
) : (
|
|
<div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-8 text-center text-sm text-gray-400 dark:text-gray-500">
|
|
등록된 API가 없습니다
|
|
</div>
|
|
)}
|
|
</div>
|
|
{/* 서비스 도메인 섹션 */}
|
|
{domainList.length > 0 && (
|
|
<div>
|
|
<div className="mb-4 flex items-center gap-2">
|
|
<div className="flex h-7 w-7 items-center justify-center rounded-lg bg-indigo-500/20">
|
|
<svg className="h-4 w-4 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">서비스 도메인</h2>
|
|
</div>
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
|
{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 (
|
|
<div
|
|
key={item.domain}
|
|
onClick={() => 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`}
|
|
>
|
|
<div className="relative h-[200px] overflow-hidden bg-gray-100 dark:bg-gray-700">
|
|
<img
|
|
src={imgSrc}
|
|
alt={item.domain}
|
|
className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
|
|
onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }}
|
|
/>
|
|
<div className="absolute inset-x-0 bottom-0 flex items-center justify-between bg-black/20 backdrop-blur-sm px-3.5 py-2.5">
|
|
<div className="flex items-center gap-2 min-w-0">
|
|
<div className={`flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-lg ${palette.bg}`}>
|
|
<svg
|
|
className={`h-4 w-4 ${palette.color}`}
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
strokeWidth={1.5}
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
{iconPaths.map((d, i) => (
|
|
<path key={i} d={d} />
|
|
))}
|
|
</svg>
|
|
</div>
|
|
<span className="text-sm font-semibold text-white truncate">
|
|
{formatDomain(item.domain)}
|
|
</span>
|
|
</div>
|
|
<span className="flex-shrink-0 text-xs font-semibold text-white/80">
|
|
{item.apiCount} APIs
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ApiHubDashboardPage;
|