generated from gc/template-java-maven
feat(api-hub): API 신청함 기능 및 신청 모달 공통화 (#47)
- API 신청함(BasketContext) + 플로팅 패널 구현 - ApiKeyRequestModal 공통 컴포넌트 추출 (API 선택 트리 포함) - 신청함 도메인별 분류 + 라벨 표시 - 도메인 상세 담기/빼기 버튼 스타일 통일 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
부모
aa9181b92f
커밋
a5e8e6d516
425
frontend/src/components/ApiKeyRequestModal.tsx
Normal file
425
frontend/src/components/ApiKeyRequestModal.tsx
Normal file
@ -0,0 +1,425 @@
|
|||||||
|
import { useState, useEffect, useMemo } from 'react';
|
||||||
|
import { createKeyRequest } from '../services/apiKeyService';
|
||||||
|
import { getCatalog } from '../services/apiHubService';
|
||||||
|
import type { ServiceCatalog } from '../types/apihub';
|
||||||
|
|
||||||
|
interface ApiKeyRequestModalProps {
|
||||||
|
isOpen: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
initialApiIds: number[];
|
||||||
|
initialApiNames?: string[];
|
||||||
|
onSuccess?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ApiKeyRequestModal = ({ isOpen, onClose, initialApiIds, onSuccess }: ApiKeyRequestModalProps) => {
|
||||||
|
const [keyName, setKeyName] = useState('');
|
||||||
|
const [purpose, setPurpose] = useState('');
|
||||||
|
const [serviceIp, setServiceIp] = useState('');
|
||||||
|
const [servicePurpose, setServicePurpose] = useState('');
|
||||||
|
const [dailyEstimate, setDailyEstimate] = useState('');
|
||||||
|
const [periodMode, setPeriodMode] = useState<'preset' | 'custom'>('preset');
|
||||||
|
const [isPermanent, setIsPermanent] = useState(false);
|
||||||
|
const [fromDate, setFromDate] = useState('');
|
||||||
|
const [toDate, setToDate] = useState('');
|
||||||
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [success, setSuccess] = useState(false);
|
||||||
|
const [selectedApiIds, setSelectedApiIds] = useState<Set<number>>(new Set());
|
||||||
|
const [catalog, setCatalog] = useState<ServiceCatalog[]>([]);
|
||||||
|
const [expandedDomains, setExpandedDomains] = useState<Set<string>>(new Set());
|
||||||
|
const [apiSearch, setApiSearch] = useState('');
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (isOpen) {
|
||||||
|
setKeyName('');
|
||||||
|
setPurpose('');
|
||||||
|
setServiceIp('');
|
||||||
|
setServicePurpose('');
|
||||||
|
setDailyEstimate('');
|
||||||
|
setPeriodMode('preset');
|
||||||
|
setIsPermanent(false);
|
||||||
|
setFromDate('');
|
||||||
|
setToDate('');
|
||||||
|
setError(null);
|
||||||
|
setSuccess(false);
|
||||||
|
setSelectedApiIds(new Set(initialApiIds));
|
||||||
|
setApiSearch('');
|
||||||
|
// 초기 API의 도메인을 펼침
|
||||||
|
if (catalog.length > 0) {
|
||||||
|
const domains = new Set<string>();
|
||||||
|
for (const svc of catalog) {
|
||||||
|
for (const dg of svc.domains) {
|
||||||
|
if (dg.apis.some((a) => initialApiIds.includes(a.apiId))) {
|
||||||
|
domains.add(formatDomainKey(dg.domain));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setExpandedDomains(domains);
|
||||||
|
}
|
||||||
|
if (catalog.length === 0) {
|
||||||
|
getCatalog().then((res) => {
|
||||||
|
if (res.data) setCatalog(res.data);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [isOpen]);
|
||||||
|
|
||||||
|
const formatDomainKey = (d: string) => (/^[a-zA-Z\s\-_]+$/.test(d) ? d.toUpperCase() : d);
|
||||||
|
|
||||||
|
// 카탈로그에서 도메인 기준 플랫 그룹
|
||||||
|
const domainGroups = useMemo(() => {
|
||||||
|
const map = new Map<string, { apiId: number; apiName: string }[]>();
|
||||||
|
for (const svc of catalog) {
|
||||||
|
for (const dg of svc.domains) {
|
||||||
|
const key = formatDomainKey(dg.domain);
|
||||||
|
const existing = map.get(key) ?? [];
|
||||||
|
for (const a of dg.apis) {
|
||||||
|
if (!existing.some((e) => e.apiId === a.apiId)) {
|
||||||
|
if (!apiSearch.trim() || a.apiName.toLowerCase().includes(apiSearch.toLowerCase())) {
|
||||||
|
existing.push({ apiId: a.apiId, apiName: a.apiName });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (existing.length > 0) map.set(key, existing);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return Array.from(map.entries());
|
||||||
|
}, [catalog, apiSearch]);
|
||||||
|
|
||||||
|
const handlePresetPeriod = (months: number) => {
|
||||||
|
const from = new Date();
|
||||||
|
const to = new Date();
|
||||||
|
to.setMonth(to.getMonth() + months);
|
||||||
|
setFromDate(from.toISOString().split('T')[0]);
|
||||||
|
setToDate(to.toISOString().split('T')[0]);
|
||||||
|
setPeriodMode('preset');
|
||||||
|
setIsPermanent(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handlePermanent = () => {
|
||||||
|
setIsPermanent(true);
|
||||||
|
setFromDate('');
|
||||||
|
setToDate('');
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (selectedApiIds.size === 0) {
|
||||||
|
setError('최소 하나의 API를 선택해주세요.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!isPermanent && (!fromDate || !toDate)) {
|
||||||
|
setError('사용 기간을 설정해주세요.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setError(null);
|
||||||
|
setIsSubmitting(true);
|
||||||
|
try {
|
||||||
|
const res = await createKeyRequest({
|
||||||
|
keyName,
|
||||||
|
purpose: purpose || undefined,
|
||||||
|
requestedApiIds: Array.from(selectedApiIds),
|
||||||
|
serviceIp: serviceIp || undefined,
|
||||||
|
servicePurpose: servicePurpose || undefined,
|
||||||
|
dailyRequestEstimate: dailyEstimate ? Number(dailyEstimate) : undefined,
|
||||||
|
usageFromDate: isPermanent ? undefined : fromDate,
|
||||||
|
usageToDate: isPermanent ? undefined : toDate,
|
||||||
|
});
|
||||||
|
if (res.success) {
|
||||||
|
setSuccess(true);
|
||||||
|
setTimeout(() => {
|
||||||
|
onClose();
|
||||||
|
onSuccess?.();
|
||||||
|
}, 2000);
|
||||||
|
} else {
|
||||||
|
setError(res.message || 'API Key 신청에 실패했습니다.');
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
setError('API Key 신청에 실패했습니다.');
|
||||||
|
} finally {
|
||||||
|
setIsSubmitting(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!isOpen) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4"
|
||||||
|
onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
|
||||||
|
>
|
||||||
|
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
|
||||||
|
{/* 헤더 */}
|
||||||
|
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<h2 className="text-lg font-bold text-gray-900 dark:text-gray-100">API 사용 신청</h2>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onClose}
|
||||||
|
className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
|
||||||
|
>
|
||||||
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 성공 메시지 */}
|
||||||
|
{success ? (
|
||||||
|
<div className="px-6 py-10 text-center">
|
||||||
|
<div className="bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-700 rounded-lg p-6">
|
||||||
|
<h3 className="text-lg font-semibold text-green-800 dark:text-green-300 mb-2">신청이 완료되었습니다</h3>
|
||||||
|
<p className="text-green-700 dark:text-green-400 text-sm">관리자 승인 후 API Key가 생성됩니다.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<form onSubmit={handleSubmit} className="px-6 py-5 space-y-5">
|
||||||
|
{/* 에러 메시지 */}
|
||||||
|
{error && (
|
||||||
|
<div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-700 text-red-700 dark:text-red-400 rounded-lg text-sm">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* API 선택 (도메인 기반 체크박스 트리) */}
|
||||||
|
<div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
|
||||||
|
<div className="flex items-center justify-between px-4 py-2.5 bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100">
|
||||||
|
API 선택
|
||||||
|
{selectedApiIds.size > 0 && (
|
||||||
|
<span className="ml-2 text-xs font-normal text-indigo-500">{selectedApiIds.size}건 선택</span>
|
||||||
|
)}
|
||||||
|
</h3>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={apiSearch}
|
||||||
|
onChange={(e) => setApiSearch(e.target.value)}
|
||||||
|
placeholder="API 검색..."
|
||||||
|
className="bg-white dark:bg-gray-600 border border-gray-200 dark:border-gray-500 rounded-lg px-2.5 py-1 text-xs text-gray-900 dark:text-gray-100 placeholder-gray-400 focus:ring-1 focus:ring-blue-500 focus:outline-none w-40"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="max-h-56 overflow-y-auto">
|
||||||
|
{domainGroups.length === 0 ? (
|
||||||
|
<p className="text-xs text-gray-400 text-center py-6">검색 결과가 없습니다</p>
|
||||||
|
) : domainGroups.map(([domain, apis]) => {
|
||||||
|
const isExpanded = expandedDomains.has(domain);
|
||||||
|
const allSelected = apis.every((a) => selectedApiIds.has(a.apiId));
|
||||||
|
const someSelected = !allSelected && apis.some((a) => selectedApiIds.has(a.apiId));
|
||||||
|
return (
|
||||||
|
<div key={domain}>
|
||||||
|
<div
|
||||||
|
className="flex items-center gap-2 px-4 py-2 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700/50 border-b border-gray-100 dark:border-gray-700/50"
|
||||||
|
onClick={() => setExpandedDomains((prev) => { const n = new Set(prev); n.has(domain) ? n.delete(domain) : n.add(domain); return n; })}
|
||||||
|
>
|
||||||
|
<svg className={`h-3.5 w-3.5 text-gray-400 transition-transform ${isExpanded ? 'rotate-90' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" /></svg>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={allSelected}
|
||||||
|
ref={(el) => { if (el) el.indeterminate = someSelected; }}
|
||||||
|
onChange={() => {
|
||||||
|
setSelectedApiIds((prev) => {
|
||||||
|
const n = new Set(prev);
|
||||||
|
apis.forEach((a) => allSelected ? n.delete(a.apiId) : n.add(a.apiId));
|
||||||
|
return n;
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
className="rounded"
|
||||||
|
/>
|
||||||
|
<span className="text-sm font-semibold text-gray-900 dark:text-gray-100">{domain}</span>
|
||||||
|
<span className="text-xs text-gray-400">{apis.length}</span>
|
||||||
|
</div>
|
||||||
|
{isExpanded && apis.map((a) => (
|
||||||
|
<div
|
||||||
|
key={a.apiId}
|
||||||
|
className={`flex items-center gap-2 pl-12 pr-4 py-2 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700/30 border-b border-gray-50 dark:border-gray-700/30 ${selectedApiIds.has(a.apiId) ? 'bg-blue-50/50 dark:bg-blue-900/10' : ''}`}
|
||||||
|
onClick={() => setSelectedApiIds((prev) => { const n = new Set(prev); n.has(a.apiId) ? n.delete(a.apiId) : n.add(a.apiId); return n; })}
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={selectedApiIds.has(a.apiId)}
|
||||||
|
onChange={() => setSelectedApiIds((prev) => { const n = new Set(prev); n.has(a.apiId) ? n.delete(a.apiId) : n.add(a.apiId); return n; })}
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
className="rounded"
|
||||||
|
/>
|
||||||
|
<span className="text-sm text-gray-900 dark:text-gray-100 truncate">{a.apiName}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Key Name */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||||
|
Key Name <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={keyName}
|
||||||
|
onChange={(e) => setKeyName(e.target.value)}
|
||||||
|
required
|
||||||
|
placeholder="API Key 이름을 입력하세요"
|
||||||
|
className="w-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 사용 목적 */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">사용 목적</label>
|
||||||
|
<textarea
|
||||||
|
value={purpose}
|
||||||
|
onChange={(e) => setPurpose(e.target.value)}
|
||||||
|
rows={2}
|
||||||
|
placeholder="사용 목적을 입력하세요"
|
||||||
|
className="w-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 사용 기간 */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||||
|
사용 기간 <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<div className="flex items-center gap-2 mb-2">
|
||||||
|
{[3, 6, 9].map((m) => (
|
||||||
|
<button
|
||||||
|
key={m}
|
||||||
|
type="button"
|
||||||
|
onClick={() => handlePresetPeriod(m)}
|
||||||
|
disabled={isPermanent || periodMode === 'custom'}
|
||||||
|
className={`px-3 py-1.5 text-sm rounded-lg border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 ${isPermanent || periodMode === 'custom' ? 'opacity-40 cursor-not-allowed' : 'hover:bg-blue-50 dark:hover:bg-gray-600'}`}
|
||||||
|
>
|
||||||
|
{m}개월
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
<span className="text-gray-400 dark:text-gray-600 mx-1">|</span>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handlePermanent}
|
||||||
|
className={`px-3 py-1.5 text-sm rounded-lg border font-medium ${isPermanent ? 'bg-indigo-600 text-white border-indigo-600' : 'text-indigo-600 border-indigo-300 dark:border-indigo-500 dark:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-900/30'}`}
|
||||||
|
>
|
||||||
|
영구
|
||||||
|
</button>
|
||||||
|
<span className="text-gray-400 dark:text-gray-600 mx-1">|</span>
|
||||||
|
<label className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 cursor-pointer select-none">
|
||||||
|
직접 선택
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => {
|
||||||
|
setPeriodMode(periodMode === 'custom' ? 'preset' : 'custom');
|
||||||
|
setIsPermanent(false);
|
||||||
|
}}
|
||||||
|
className={`relative w-10 h-5 rounded-full transition-colors ${periodMode === 'custom' && !isPermanent ? 'bg-blue-600' : 'bg-gray-300 dark:bg-gray-600'}`}
|
||||||
|
>
|
||||||
|
<span className={`absolute top-0.5 left-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform ${periodMode === 'custom' && !isPermanent ? 'translate-x-5' : ''}`} />
|
||||||
|
</button>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
{isPermanent ? (
|
||||||
|
<div className="flex items-center gap-2 px-3 py-2 bg-indigo-50 dark:bg-indigo-900/30 border border-indigo-200 dark:border-indigo-700 rounded-lg">
|
||||||
|
<span className="text-indigo-700 dark:text-indigo-300 text-sm font-medium">영구 사용 (만료일 없음)</span>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
value={fromDate}
|
||||||
|
onChange={(e) => setFromDate(e.target.value)}
|
||||||
|
readOnly={periodMode !== 'custom'}
|
||||||
|
className={`border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none ${periodMode !== 'custom' ? 'bg-gray-50 text-gray-500 dark:bg-gray-700 dark:text-gray-400' : 'bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100'}`}
|
||||||
|
/>
|
||||||
|
<span className="text-gray-500 dark:text-gray-400">~</span>
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
value={toDate}
|
||||||
|
onChange={(e) => setToDate(e.target.value)}
|
||||||
|
readOnly={periodMode !== 'custom'}
|
||||||
|
className={`border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none ${periodMode !== 'custom' ? 'bg-gray-50 text-gray-500 dark:bg-gray-700 dark:text-gray-400' : 'bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100'}`}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 서비스 IP */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||||
|
서비스 IP <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={serviceIp}
|
||||||
|
onChange={(e) => setServiceIp(e.target.value)}
|
||||||
|
required
|
||||||
|
placeholder="예: 192.168.1.100"
|
||||||
|
className="w-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-gray-400 dark:text-gray-500 mt-1">발급받은 API Key로 프록시 서버에 요청하는 서비스 IP</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 서비스 용도 + 하루 예상 요청량 */}
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||||
|
서비스 용도 <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={servicePurpose}
|
||||||
|
onChange={(e) => setServicePurpose(e.target.value)}
|
||||||
|
required
|
||||||
|
className="w-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
||||||
|
>
|
||||||
|
<option value="">선택하세요</option>
|
||||||
|
<option value="로컬 환경">로컬 환경</option>
|
||||||
|
<option value="개발 서버">개발 서버</option>
|
||||||
|
<option value="검증 서버">검증 서버</option>
|
||||||
|
<option value="운영 서버">운영 서버</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||||
|
하루 예상 요청량 <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={dailyEstimate}
|
||||||
|
onChange={(e) => setDailyEstimate(e.target.value)}
|
||||||
|
required
|
||||||
|
className="w-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
||||||
|
>
|
||||||
|
<option value="">선택하세요</option>
|
||||||
|
<option value="100">100 이하</option>
|
||||||
|
<option value="500">100~500</option>
|
||||||
|
<option value="1000">500~1,000</option>
|
||||||
|
<option value="5000">1,000~5,000</option>
|
||||||
|
<option value="10000">5,000~10,000</option>
|
||||||
|
<option value="50000">10,000 이상</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 하단 버튼 */}
|
||||||
|
<div className="flex justify-end gap-3 pt-2">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onClose}
|
||||||
|
className="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 text-sm font-medium transition-colors"
|
||||||
|
>
|
||||||
|
취소
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={isSubmitting}
|
||||||
|
className="px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 disabled:bg-blue-300 text-white text-sm font-medium transition-colors"
|
||||||
|
>
|
||||||
|
{isSubmitting ? '신청 중...' : '신청하기'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ApiKeyRequestModal;
|
||||||
10
frontend/src/hooks/useApiRequestBasket.ts
Normal file
10
frontend/src/hooks/useApiRequestBasket.ts
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import { useContext } from 'react';
|
||||||
|
import { ApiRequestBasketContext } from '../store/ApiRequestBasketContext';
|
||||||
|
|
||||||
|
export const useApiRequestBasket = () => {
|
||||||
|
const ctx = useContext(ApiRequestBasketContext);
|
||||||
|
if (!ctx) {
|
||||||
|
throw new Error('useApiRequestBasket must be used within ApiRequestBasketProvider');
|
||||||
|
}
|
||||||
|
return ctx;
|
||||||
|
};
|
||||||
@ -4,6 +4,9 @@ import { useAuth } from '../hooks/useAuth';
|
|||||||
import { useTheme } from '../hooks/useTheme';
|
import { useTheme } from '../hooks/useTheme';
|
||||||
import { getCatalog } from '../services/apiHubService';
|
import { getCatalog } from '../services/apiHubService';
|
||||||
import type { ServiceCatalog } from '../types/apihub';
|
import type { ServiceCatalog } from '../types/apihub';
|
||||||
|
import ApiRequestBasketProvider from '../store/ApiRequestBasketContext';
|
||||||
|
import { useApiRequestBasket } from '../hooks/useApiRequestBasket';
|
||||||
|
import ApiKeyRequestModal from '../components/ApiKeyRequestModal';
|
||||||
|
|
||||||
const ROLES = ['ADMIN', 'MANAGER', 'USER'] as const;
|
const ROLES = ['ADMIN', 'MANAGER', 'USER'] as const;
|
||||||
|
|
||||||
@ -30,7 +33,7 @@ interface FlatDomainGroup {
|
|||||||
apis: { serviceId: number; apiId: number; apiName: string; apiPath: string; apiMethod: string }[];
|
apis: { serviceId: number; apiId: number; apiName: string; apiPath: string; apiMethod: string }[];
|
||||||
}
|
}
|
||||||
|
|
||||||
const ApiHubLayout = () => {
|
const ApiHubLayoutInner = () => {
|
||||||
const { user, setRole } = useAuth();
|
const { user, setRole } = useAuth();
|
||||||
const { theme, toggleTheme } = useTheme();
|
const { theme, toggleTheme } = useTheme();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
@ -326,10 +329,99 @@ const ApiHubLayout = () => {
|
|||||||
{/* Content */}
|
{/* Content */}
|
||||||
<main className="p-6 bg-gray-100 dark:bg-gray-900 min-h-[calc(100vh-4rem)]">
|
<main className="p-6 bg-gray-100 dark:bg-gray-900 min-h-[calc(100vh-4rem)]">
|
||||||
<Outlet />
|
<Outlet />
|
||||||
|
<BasketFloatingPanel />
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ApiHubLayout;
|
const BasketFloatingPanel = () => {
|
||||||
|
const { items, removeItem, clearItems, isBasketOpen, setBasketOpen } = useApiRequestBasket();
|
||||||
|
const [showModal, setShowModal] = useState(false);
|
||||||
|
|
||||||
|
const handleOpenModal = () => {
|
||||||
|
setBasketOpen(false);
|
||||||
|
setShowModal(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (items.length === 0 && !showModal) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* 플로팅 버튼/패널 */}
|
||||||
|
{!showModal && (
|
||||||
|
!isBasketOpen ? (
|
||||||
|
<button
|
||||||
|
onClick={() => setBasketOpen(true)}
|
||||||
|
className="fixed right-6 bottom-6 z-40 flex items-center gap-2 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-3 shadow-lg transition-colors"
|
||||||
|
>
|
||||||
|
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
|
||||||
|
</svg>
|
||||||
|
<span className="text-sm font-semibold">신청함</span>
|
||||||
|
<span className="flex h-5 w-5 items-center justify-center rounded-full bg-white text-indigo-700 text-xs font-bold">{items.length}</span>
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
<div className="fixed right-6 bottom-6 z-40 w-80 rounded-xl bg-white dark:bg-gray-800 shadow-2xl border border-gray-200 dark:border-gray-700 flex flex-col max-h-96">
|
||||||
|
<div className="flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
|
||||||
|
<span className="text-sm font-bold text-gray-900 dark:text-gray-100">
|
||||||
|
API 신청함
|
||||||
|
<span className="ml-1.5 inline-flex items-center justify-center h-5 min-w-5 rounded-full bg-indigo-100 dark:bg-indigo-900/50 text-indigo-700 dark:text-indigo-300 text-xs font-bold px-1">{items.length}건</span>
|
||||||
|
</span>
|
||||||
|
<button onClick={() => setBasketOpen(false)} className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
|
||||||
|
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 overflow-y-auto">
|
||||||
|
{(() => {
|
||||||
|
const grouped = new Map<string, typeof items>();
|
||||||
|
items.forEach((item) => {
|
||||||
|
const d = item.domain ? (/^[a-zA-Z\s\-_]+$/.test(item.domain) ? item.domain.toUpperCase() : item.domain) : '미분류';
|
||||||
|
const list = grouped.get(d) ?? [];
|
||||||
|
list.push(item);
|
||||||
|
grouped.set(d, list);
|
||||||
|
});
|
||||||
|
return Array.from(grouped.entries()).map(([domain, apis]) => (
|
||||||
|
<div key={domain}>
|
||||||
|
<div className="px-4 py-1.5 bg-gray-50 dark:bg-gray-700/50 border-b border-gray-100 dark:border-gray-700/50">
|
||||||
|
<span className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{domain}</span>
|
||||||
|
</div>
|
||||||
|
{apis.map((item) => (
|
||||||
|
<div key={item.apiId} className="flex items-center gap-2 px-4 py-2 border-b border-gray-50 dark:border-gray-700/30">
|
||||||
|
<span className="flex-1 text-sm text-gray-800 dark:text-gray-200 truncate">{item.apiName}</span>
|
||||||
|
<button onClick={() => removeItem(item.apiId)} className="flex-shrink-0 text-gray-400 hover:text-red-500 transition-colors">
|
||||||
|
<svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
));
|
||||||
|
})()}
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2 px-4 py-3 border-t border-gray-200 dark:border-gray-700 flex-shrink-0">
|
||||||
|
<button onClick={clearItems} className="flex-1 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 text-xs font-medium py-2 transition-colors">전체 삭제</button>
|
||||||
|
<button onClick={handleOpenModal} className="flex-1 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-medium py-2 transition-colors">일괄 신청</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
|
||||||
|
<ApiKeyRequestModal
|
||||||
|
isOpen={showModal}
|
||||||
|
onClose={() => setShowModal(false)}
|
||||||
|
initialApiIds={items.map((i) => i.apiId)}
|
||||||
|
initialApiNames={items.map((i) => i.apiName)}
|
||||||
|
onSuccess={() => clearItems()}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const ApiHubLayoutWithProvider = () => (
|
||||||
|
<ApiRequestBasketProvider>
|
||||||
|
<ApiHubLayoutInner />
|
||||||
|
</ApiRequestBasketProvider>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default ApiHubLayoutWithProvider;
|
||||||
|
|||||||
@ -2,9 +2,10 @@ import { useState, useEffect, useCallback, useMemo } from 'react';
|
|||||||
import { useParams, useNavigate } from 'react-router-dom';
|
import { useParams, useNavigate } from 'react-router-dom';
|
||||||
import type { ServiceCatalog } from '../../types/apihub';
|
import type { ServiceCatalog } from '../../types/apihub';
|
||||||
import type { ApiDetailInfo } from '../../types/service';
|
import type { ApiDetailInfo } from '../../types/service';
|
||||||
import { getCatalog, getServiceCatalog, getApiHubApiDetail } from '../../services/apiHubService';
|
import { getServiceCatalog, getApiHubApiDetail } from '../../services/apiHubService';
|
||||||
import { getSystemConfig } from '../../services/configService';
|
import { getSystemConfig } from '../../services/configService';
|
||||||
import { createKeyRequest } from '../../services/apiKeyService';
|
import { useApiRequestBasket } from '../../hooks/useApiRequestBasket';
|
||||||
|
import ApiKeyRequestModal from '../../components/ApiKeyRequestModal';
|
||||||
|
|
||||||
const COMMON_SAMPLE_CODE_KEY = 'COMMON_SAMPLE_CODE';
|
const COMMON_SAMPLE_CODE_KEY = 'COMMON_SAMPLE_CODE';
|
||||||
|
|
||||||
@ -19,6 +20,7 @@ const METHOD_COLORS_LARGE: Record<string, string> = {
|
|||||||
const ApiHubApiDetailPage = () => {
|
const ApiHubApiDetailPage = () => {
|
||||||
const { serviceId, apiId } = useParams<{ serviceId: string; apiId: string }>();
|
const { serviceId, apiId } = useParams<{ serviceId: string; apiId: string }>();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
const { addItem, removeItem, hasItem, setBasketOpen } = useApiRequestBasket();
|
||||||
const [detail, setDetail] = useState<ApiDetailInfo | null>(null);
|
const [detail, setDetail] = useState<ApiDetailInfo | null>(null);
|
||||||
const [service, setService] = useState<ServiceCatalog | null>(null);
|
const [service, setService] = useState<ServiceCatalog | null>(null);
|
||||||
const [isLoading, setIsLoading] = useState(true);
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
@ -31,23 +33,9 @@ const ApiHubApiDetailPage = () => {
|
|||||||
const [urlGenOpen, setUrlGenOpen] = useState(false);
|
const [urlGenOpen, setUrlGenOpen] = useState(false);
|
||||||
|
|
||||||
// 신청 모달 상태
|
// 신청 모달 상태
|
||||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
const [showRequestModal, setShowRequestModal] = useState(false);
|
||||||
const [modalKeyName, setModalKeyName] = useState('');
|
const [requestModalApiIds, setRequestModalApiIds] = useState<number[]>([]);
|
||||||
const [modalPurpose, setModalPurpose] = useState('');
|
const [requestModalApiNames, setRequestModalApiNames] = useState<string[]>([]);
|
||||||
const [modalServiceIp, setModalServiceIp] = useState('');
|
|
||||||
const [modalServicePurpose, setModalServicePurpose] = useState('');
|
|
||||||
const [modalDailyRequestEstimate, setModalDailyRequestEstimate] = useState('');
|
|
||||||
const [modalUsagePeriodMode, setModalUsagePeriodMode] = useState<'preset' | 'custom'>('preset');
|
|
||||||
const [modalIsPermanent, setModalIsPermanent] = useState(false);
|
|
||||||
const [modalUsageFromDate, setModalUsageFromDate] = useState('');
|
|
||||||
const [modalUsageToDate, setModalUsageToDate] = useState('');
|
|
||||||
const [modalIsSubmitting, setModalIsSubmitting] = useState(false);
|
|
||||||
const [modalError, setModalError] = useState<string | null>(null);
|
|
||||||
const [modalSuccess, setModalSuccess] = useState(false);
|
|
||||||
const [modalSelectedApiIds, setModalSelectedApiIds] = useState<Set<number>>(new Set());
|
|
||||||
const [modalCatalog, setModalCatalog] = useState<ServiceCatalog[]>([]);
|
|
||||||
const [modalExpandedDomains, setModalExpandedDomains] = useState<Set<string>>(new Set());
|
|
||||||
const [modalApiSearch, setModalApiSearch] = useState('');
|
|
||||||
|
|
||||||
const fetchData = useCallback(async () => {
|
const fetchData = useCallback(async () => {
|
||||||
if (!serviceId || !apiId) return;
|
if (!serviceId || !apiId) return;
|
||||||
@ -156,87 +144,11 @@ const ApiHubApiDetailPage = () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleOpenModal = async () => {
|
const handleOpenRequest = () => {
|
||||||
setModalKeyName('');
|
|
||||||
setModalPurpose('');
|
|
||||||
setModalServiceIp('');
|
|
||||||
setModalServicePurpose('');
|
|
||||||
setModalDailyRequestEstimate('');
|
|
||||||
setModalUsagePeriodMode('preset');
|
|
||||||
setModalIsPermanent(false);
|
|
||||||
setModalUsageFromDate('');
|
|
||||||
setModalUsageToDate('');
|
|
||||||
setModalError(null);
|
|
||||||
setModalSuccess(false);
|
|
||||||
setModalApiSearch('');
|
|
||||||
if (detail) {
|
if (detail) {
|
||||||
setModalSelectedApiIds(new Set([detail.api.apiId]));
|
setRequestModalApiIds([detail.api.apiId]);
|
||||||
// 현재 API의 도메인을 펼침
|
setRequestModalApiNames([detail.api.apiName]);
|
||||||
const currentDomain = detail.api.apiDomain ?? '';
|
setShowRequestModal(true);
|
||||||
setModalExpandedDomains(new Set([currentDomain.toUpperCase()]));
|
|
||||||
}
|
|
||||||
setIsModalOpen(true);
|
|
||||||
if (modalCatalog.length === 0) {
|
|
||||||
const res = await getCatalog();
|
|
||||||
if (res.data) setModalCatalog(res.data);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCloseModal = () => {
|
|
||||||
setIsModalOpen(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleModalPresetPeriod = (months: number) => {
|
|
||||||
const from = new Date();
|
|
||||||
const to = new Date();
|
|
||||||
to.setMonth(to.getMonth() + months);
|
|
||||||
setModalUsageFromDate(from.toISOString().split('T')[0]);
|
|
||||||
setModalUsageToDate(to.toISOString().split('T')[0]);
|
|
||||||
setModalUsagePeriodMode('preset');
|
|
||||||
setModalIsPermanent(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleModalPermanent = () => {
|
|
||||||
setModalIsPermanent(true);
|
|
||||||
setModalUsageFromDate('');
|
|
||||||
setModalUsageToDate('');
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleModalSubmit = async (e: React.FormEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
if (modalSelectedApiIds.size === 0) {
|
|
||||||
setModalError('최소 하나의 API를 선택해주세요.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (!modalIsPermanent && (!modalUsageFromDate || !modalUsageToDate)) {
|
|
||||||
setModalError('사용 기간을 설정해주세요.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
setModalError(null);
|
|
||||||
setModalIsSubmitting(true);
|
|
||||||
try {
|
|
||||||
const res = await createKeyRequest({
|
|
||||||
keyName: modalKeyName,
|
|
||||||
purpose: modalPurpose || undefined,
|
|
||||||
requestedApiIds: Array.from(modalSelectedApiIds),
|
|
||||||
serviceIp: modalServiceIp || undefined,
|
|
||||||
servicePurpose: modalServicePurpose || undefined,
|
|
||||||
dailyRequestEstimate: modalDailyRequestEstimate ? Number(modalDailyRequestEstimate) : undefined,
|
|
||||||
usageFromDate: modalIsPermanent ? undefined : modalUsageFromDate,
|
|
||||||
usageToDate: modalIsPermanent ? undefined : modalUsageToDate,
|
|
||||||
});
|
|
||||||
if (res.success) {
|
|
||||||
setModalSuccess(true);
|
|
||||||
setTimeout(() => {
|
|
||||||
setIsModalOpen(false);
|
|
||||||
}, 2000);
|
|
||||||
} else {
|
|
||||||
setModalError(res.message || 'API Key 신청에 실패했습니다.');
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
setModalError('API Key 신청에 실패했습니다.');
|
|
||||||
} finally {
|
|
||||||
setModalIsSubmitting(false);
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -272,12 +184,40 @@ const ApiHubApiDetailPage = () => {
|
|||||||
</span>
|
</span>
|
||||||
<h1 className="text-xl font-bold text-gray-900 dark:text-gray-100">{api.apiName}</h1>
|
<h1 className="text-xl font-bold text-gray-900 dark:text-gray-100">{api.apiName}</h1>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<div className="flex items-center gap-2 shrink-0">
|
||||||
onClick={handleOpenModal}
|
{hasItem(Number(apiId)) ? (
|
||||||
className="shrink-0 px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium transition-colors"
|
<button
|
||||||
>
|
onClick={() => removeItem(Number(apiId))}
|
||||||
API 사용 신청
|
className="px-4 py-2 rounded-lg border border-indigo-300 dark:border-indigo-600 bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300 hover:bg-indigo-100 dark:hover:bg-indigo-900/50 text-sm font-medium transition-colors flex items-center gap-1.5"
|
||||||
</button>
|
>
|
||||||
|
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||||
|
</svg>
|
||||||
|
신청함에서 빼기
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
if (detail) {
|
||||||
|
addItem({ apiId: detail.api.apiId, serviceId: Number(serviceId), apiName: detail.api.apiName, domain: detail.api.apiDomain ?? undefined });
|
||||||
|
setBasketOpen(true);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 text-sm font-medium transition-colors flex items-center gap-1.5"
|
||||||
|
>
|
||||||
|
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
|
||||||
|
</svg>
|
||||||
|
신청함에 담기
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
<button
|
||||||
|
onClick={handleOpenRequest}
|
||||||
|
className="px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium transition-colors"
|
||||||
|
>
|
||||||
|
API 사용 신청
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -547,298 +487,12 @@ const ApiHubApiDetailPage = () => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* API 사용 신청 모달 */}
|
<ApiKeyRequestModal
|
||||||
{isModalOpen && (
|
isOpen={showRequestModal}
|
||||||
<div
|
onClose={() => setShowRequestModal(false)}
|
||||||
className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4"
|
initialApiIds={requestModalApiIds}
|
||||||
onClick={(e) => { if (e.target === e.currentTarget) handleCloseModal(); }}
|
initialApiNames={requestModalApiNames}
|
||||||
>
|
/>
|
||||||
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
|
|
||||||
{/* 모달 헤더 */}
|
|
||||||
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
|
||||||
<h2 className="text-lg font-bold text-gray-900 dark:text-gray-100">API 사용 신청</h2>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={handleCloseModal}
|
|
||||||
className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
|
|
||||||
>
|
|
||||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 성공 메시지 */}
|
|
||||||
{modalSuccess ? (
|
|
||||||
<div className="px-6 py-10 text-center">
|
|
||||||
<div className="bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-700 rounded-lg p-6">
|
|
||||||
<h3 className="text-lg font-semibold text-green-800 dark:text-green-300 mb-2">신청이 완료되었습니다</h3>
|
|
||||||
<p className="text-green-700 dark:text-green-400 text-sm">관리자 승인 후 API Key가 생성됩니다.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<form onSubmit={handleModalSubmit} className="px-6 py-5 space-y-5">
|
|
||||||
{/* 에러 메시지 */}
|
|
||||||
{modalError && (
|
|
||||||
<div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-700 text-red-700 dark:text-red-400 rounded-lg text-sm">
|
|
||||||
{modalError}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Key Name */}
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
||||||
Key Name <span className="text-red-500">*</span>
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={modalKeyName}
|
|
||||||
onChange={(e) => setModalKeyName(e.target.value)}
|
|
||||||
required
|
|
||||||
placeholder="API Key 이름을 입력하세요"
|
|
||||||
className="w-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 사용 목적 */}
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">사용 목적</label>
|
|
||||||
<textarea
|
|
||||||
value={modalPurpose}
|
|
||||||
onChange={(e) => setModalPurpose(e.target.value)}
|
|
||||||
rows={2}
|
|
||||||
placeholder="사용 목적을 입력하세요"
|
|
||||||
className="w-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 사용 기간 */}
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
||||||
사용 기간 <span className="text-red-500">*</span>
|
|
||||||
</label>
|
|
||||||
<div className="flex items-center gap-2 mb-2">
|
|
||||||
<button type="button" onClick={() => handleModalPresetPeriod(3)}
|
|
||||||
disabled={modalIsPermanent || modalUsagePeriodMode === 'custom'}
|
|
||||||
className={`px-3 py-1.5 text-sm rounded-lg border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 ${modalIsPermanent || modalUsagePeriodMode === 'custom' ? 'opacity-40 cursor-not-allowed' : 'hover:bg-blue-50 dark:hover:bg-gray-600'}`}>
|
|
||||||
3개월
|
|
||||||
</button>
|
|
||||||
<button type="button" onClick={() => handleModalPresetPeriod(6)}
|
|
||||||
disabled={modalIsPermanent || modalUsagePeriodMode === 'custom'}
|
|
||||||
className={`px-3 py-1.5 text-sm rounded-lg border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 ${modalIsPermanent || modalUsagePeriodMode === 'custom' ? 'opacity-40 cursor-not-allowed' : 'hover:bg-blue-50 dark:hover:bg-gray-600'}`}>
|
|
||||||
6개월
|
|
||||||
</button>
|
|
||||||
<button type="button" onClick={() => handleModalPresetPeriod(9)}
|
|
||||||
disabled={modalIsPermanent || modalUsagePeriodMode === 'custom'}
|
|
||||||
className={`px-3 py-1.5 text-sm rounded-lg border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 ${modalIsPermanent || modalUsagePeriodMode === 'custom' ? 'opacity-40 cursor-not-allowed' : 'hover:bg-blue-50 dark:hover:bg-gray-600'}`}>
|
|
||||||
9개월
|
|
||||||
</button>
|
|
||||||
<span className="text-gray-400 dark:text-gray-600 mx-1">|</span>
|
|
||||||
<button type="button" onClick={handleModalPermanent}
|
|
||||||
className={`px-3 py-1.5 text-sm rounded-lg border font-medium ${modalIsPermanent ? 'bg-indigo-600 text-white border-indigo-600' : 'text-indigo-600 border-indigo-300 dark:border-indigo-500 dark:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-900/30'}`}>
|
|
||||||
영구
|
|
||||||
</button>
|
|
||||||
<span className="text-gray-400 dark:text-gray-600 mx-1">|</span>
|
|
||||||
<label className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 cursor-pointer select-none">
|
|
||||||
직접 선택
|
|
||||||
<button type="button"
|
|
||||||
onClick={() => {
|
|
||||||
setModalUsagePeriodMode(modalUsagePeriodMode === 'custom' ? 'preset' : 'custom');
|
|
||||||
setModalIsPermanent(false);
|
|
||||||
}}
|
|
||||||
className={`relative w-10 h-5 rounded-full transition-colors ${modalUsagePeriodMode === 'custom' && !modalIsPermanent ? 'bg-blue-600' : 'bg-gray-300 dark:bg-gray-600'}`}>
|
|
||||||
<span className={`absolute top-0.5 left-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform ${modalUsagePeriodMode === 'custom' && !modalIsPermanent ? 'translate-x-5' : ''}`} />
|
|
||||||
</button>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
{modalIsPermanent ? (
|
|
||||||
<div className="flex items-center gap-2 px-3 py-2 bg-indigo-50 dark:bg-indigo-900/30 border border-indigo-200 dark:border-indigo-700 rounded-lg">
|
|
||||||
<span className="text-indigo-700 dark:text-indigo-300 text-sm font-medium">영구 사용 (만료일 없음)</span>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<input type="date" value={modalUsageFromDate}
|
|
||||||
onChange={(e) => setModalUsageFromDate(e.target.value)}
|
|
||||||
readOnly={modalUsagePeriodMode !== 'custom'}
|
|
||||||
className={`border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none ${modalUsagePeriodMode !== 'custom' ? 'bg-gray-50 text-gray-500 dark:bg-gray-700 dark:text-gray-400' : 'bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100'}`} />
|
|
||||||
<span className="text-gray-500 dark:text-gray-400">~</span>
|
|
||||||
<input type="date" value={modalUsageToDate}
|
|
||||||
onChange={(e) => setModalUsageToDate(e.target.value)}
|
|
||||||
readOnly={modalUsagePeriodMode !== 'custom'}
|
|
||||||
className={`border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none ${modalUsagePeriodMode !== 'custom' ? 'bg-gray-50 text-gray-500 dark:bg-gray-700 dark:text-gray-400' : 'bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100'}`} />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 서비스 IP */}
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
||||||
서비스 IP <span className="text-red-500">*</span>
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={modalServiceIp}
|
|
||||||
onChange={(e) => setModalServiceIp(e.target.value)}
|
|
||||||
required
|
|
||||||
placeholder="예: 192.168.1.100"
|
|
||||||
className="w-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
|
||||||
/>
|
|
||||||
<p className="text-xs text-gray-400 dark:text-gray-500 mt-1">발급받은 API Key로 프록시 서버에 요청하는 서비스 IP</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 서비스 용도 + 하루 예상 요청량 */}
|
|
||||||
<div className="grid grid-cols-2 gap-4">
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
||||||
서비스 용도 <span className="text-red-500">*</span>
|
|
||||||
</label>
|
|
||||||
<select
|
|
||||||
value={modalServicePurpose}
|
|
||||||
onChange={(e) => setModalServicePurpose(e.target.value)}
|
|
||||||
required
|
|
||||||
className="w-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
|
||||||
>
|
|
||||||
<option value="">선택하세요</option>
|
|
||||||
<option value="로컬 환경">로컬 환경</option>
|
|
||||||
<option value="개발 서버">개발 서버</option>
|
|
||||||
<option value="검증 서버">검증 서버</option>
|
|
||||||
<option value="운영 서버">운영 서버</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
||||||
하루 예상 요청량 <span className="text-red-500">*</span>
|
|
||||||
</label>
|
|
||||||
<select
|
|
||||||
value={modalDailyRequestEstimate}
|
|
||||||
onChange={(e) => setModalDailyRequestEstimate(e.target.value)}
|
|
||||||
required
|
|
||||||
className="w-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
|
||||||
>
|
|
||||||
<option value="">선택하세요</option>
|
|
||||||
<option value="100">100 이하</option>
|
|
||||||
<option value="500">100~500</option>
|
|
||||||
<option value="1000">500~1,000</option>
|
|
||||||
<option value="5000">1,000~5,000</option>
|
|
||||||
<option value="10000">5,000~10,000</option>
|
|
||||||
<option value="50000">10,000 이상</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* API 선택 (도메인 기반 체크박스 트리) */}
|
|
||||||
<div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
|
|
||||||
<div className="flex items-center justify-between px-4 py-2.5 bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-700">
|
|
||||||
<h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100">API 선택</h3>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={modalApiSearch}
|
|
||||||
onChange={(e) => setModalApiSearch(e.target.value)}
|
|
||||||
placeholder="API 검색..."
|
|
||||||
className="bg-white dark:bg-gray-600 border border-gray-200 dark:border-gray-500 rounded-lg px-2.5 py-1 text-xs text-gray-900 dark:text-gray-100 placeholder-gray-400 focus:ring-1 focus:ring-blue-500 focus:outline-none w-40"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="max-h-56 overflow-y-auto">
|
|
||||||
{(() => {
|
|
||||||
const domainMap = new Map<string, { apiId: number; apiName: string }[]>();
|
|
||||||
for (const svc of modalCatalog) {
|
|
||||||
for (const dg of svc.domains) {
|
|
||||||
const key = /^[a-zA-Z\s\-_]+$/.test(dg.domain) ? dg.domain.toUpperCase() : dg.domain;
|
|
||||||
const existing = domainMap.get(key) ?? [];
|
|
||||||
for (const a of dg.apis) {
|
|
||||||
if (!existing.some((e) => e.apiId === a.apiId)) {
|
|
||||||
if (!modalApiSearch.trim() || a.apiName.toLowerCase().includes(modalApiSearch.toLowerCase())) {
|
|
||||||
existing.push({ apiId: a.apiId, apiName: a.apiName });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (existing.length > 0) domainMap.set(key, existing);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const domains = Array.from(domainMap.entries());
|
|
||||||
if (domains.length === 0) return <p className="text-xs text-gray-400 text-center py-6">검색 결과가 없습니다</p>;
|
|
||||||
return domains.map(([domain, apis]) => {
|
|
||||||
const isExpanded = modalExpandedDomains.has(domain);
|
|
||||||
const allSelected = apis.every((a) => modalSelectedApiIds.has(a.apiId));
|
|
||||||
const someSelected = !allSelected && apis.some((a) => modalSelectedApiIds.has(a.apiId));
|
|
||||||
return (
|
|
||||||
<div key={domain}>
|
|
||||||
<div
|
|
||||||
className="flex items-center gap-2 px-4 py-2 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700/50 border-b border-gray-100 dark:border-gray-700/50"
|
|
||||||
onClick={() => setModalExpandedDomains((prev) => { const n = new Set(prev); n.has(domain) ? n.delete(domain) : n.add(domain); return n; })}
|
|
||||||
>
|
|
||||||
<svg className={`h-3.5 w-3.5 text-gray-400 transition-transform ${isExpanded ? 'rotate-90' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" /></svg>
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={allSelected}
|
|
||||||
ref={(el) => { if (el) el.indeterminate = someSelected; }}
|
|
||||||
onChange={() => {
|
|
||||||
setModalSelectedApiIds((prev) => {
|
|
||||||
const n = new Set(prev);
|
|
||||||
apis.forEach((a) => allSelected ? n.delete(a.apiId) : n.add(a.apiId));
|
|
||||||
return n;
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
onClick={(e) => e.stopPropagation()}
|
|
||||||
className="rounded"
|
|
||||||
/>
|
|
||||||
<span className="text-sm font-semibold text-gray-900 dark:text-gray-100">{domain}</span>
|
|
||||||
<span className="text-xs text-gray-400">{apis.length}</span>
|
|
||||||
</div>
|
|
||||||
{isExpanded && apis.map((a) => (
|
|
||||||
<div
|
|
||||||
key={a.apiId}
|
|
||||||
className={`flex items-center gap-2 pl-12 pr-4 py-2 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700/30 border-b border-gray-50 dark:border-gray-700/30 ${modalSelectedApiIds.has(a.apiId) ? 'bg-blue-50/50 dark:bg-blue-900/10' : ''}`}
|
|
||||||
onClick={() => setModalSelectedApiIds((prev) => { const n = new Set(prev); n.has(a.apiId) ? n.delete(a.apiId) : n.add(a.apiId); return n; })}
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={modalSelectedApiIds.has(a.apiId)}
|
|
||||||
onChange={() => setModalSelectedApiIds((prev) => { const n = new Set(prev); n.has(a.apiId) ? n.delete(a.apiId) : n.add(a.apiId); return n; })}
|
|
||||||
onClick={(e) => e.stopPropagation()}
|
|
||||||
className="rounded"
|
|
||||||
/>
|
|
||||||
<span className="text-sm text-gray-900 dark:text-gray-100 truncate">{a.apiName}</span>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
})()}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 신청 API 요약 */}
|
|
||||||
{modalSelectedApiIds.size > 0 && (
|
|
||||||
<div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700 rounded-lg px-4 py-3">
|
|
||||||
<p className="text-xs font-medium text-blue-600 dark:text-blue-400 uppercase tracking-wide">
|
|
||||||
신청 API ({modalSelectedApiIds.size}개 선택)
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 모달 하단 버튼 */}
|
|
||||||
<div className="flex justify-end gap-3 pt-2">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={handleCloseModal}
|
|
||||||
className="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 text-sm font-medium transition-colors"
|
|
||||||
>
|
|
||||||
취소
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={modalIsSubmitting}
|
|
||||||
className="px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 disabled:bg-blue-300 text-white text-sm font-medium transition-colors"
|
|
||||||
>
|
|
||||||
{modalIsSubmitting ? '신청 중...' : '신청하기'}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -2,6 +2,7 @@ import { useState, useEffect, useMemo } from 'react';
|
|||||||
import { useParams, useNavigate } from 'react-router-dom';
|
import { useParams, useNavigate } from 'react-router-dom';
|
||||||
import type { ServiceCatalog } from '../../types/apihub';
|
import type { ServiceCatalog } from '../../types/apihub';
|
||||||
import { getCatalog } from '../../services/apiHubService';
|
import { getCatalog } from '../../services/apiHubService';
|
||||||
|
import { useApiRequestBasket } from '../../hooks/useApiRequestBasket';
|
||||||
|
|
||||||
const DEFAULT_ICON_PATHS = [
|
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',
|
'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',
|
||||||
@ -67,6 +68,7 @@ interface DomainInfo {
|
|||||||
const ApiHubDomainPage = () => {
|
const ApiHubDomainPage = () => {
|
||||||
const { domainName } = useParams<{ domainName: string }>();
|
const { domainName } = useParams<{ domainName: string }>();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
const { addItem, removeItem, hasItem } = useApiRequestBasket();
|
||||||
const [catalog, setCatalog] = useState<ServiceCatalog[]>([]);
|
const [catalog, setCatalog] = useState<ServiceCatalog[]>([]);
|
||||||
const [isLoading, setIsLoading] = useState(true);
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
const [searchQuery, setSearchQuery] = useState('');
|
const [searchQuery, setSearchQuery] = useState('');
|
||||||
@ -222,6 +224,27 @@ const ApiHubDomainPage = () => {
|
|||||||
<div className="flex-1 min-w-0">
|
<div className="flex-1 min-w-0">
|
||||||
<p className="text-sm font-semibold text-gray-900 dark:text-gray-100 truncate">{api.apiName}</p>
|
<p className="text-sm font-semibold text-gray-900 dark:text-gray-100 truncate">{api.apiName}</p>
|
||||||
</div>
|
</div>
|
||||||
|
{hasItem(api.apiId) ? (
|
||||||
|
<button
|
||||||
|
onClick={(e) => { e.stopPropagation(); removeItem(api.apiId); }}
|
||||||
|
className="flex-shrink-0 px-3 py-1.5 rounded-lg border border-indigo-300 dark:border-indigo-600 bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300 hover:bg-indigo-100 dark:hover:bg-indigo-900/50 text-xs font-medium transition-colors flex items-center gap-1"
|
||||||
|
>
|
||||||
|
<svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||||
|
</svg>
|
||||||
|
신청함에서 빼기
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
onClick={(e) => { e.stopPropagation(); addItem({ apiId: api.apiId, serviceId: api.serviceId, apiName: api.apiName, domain: domainInfo?.domain }); }}
|
||||||
|
className="flex-shrink-0 px-3 py-1.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 text-xs font-medium transition-colors flex items-center gap-1"
|
||||||
|
>
|
||||||
|
<svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
|
||||||
|
</svg>
|
||||||
|
신청함에 담기
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
<svg className="h-4 w-4 flex-shrink-0 text-gray-300 dark:text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
<svg className="h-4 w-4 flex-shrink-0 text-gray-300 dark:text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
@ -27,6 +27,7 @@ const KeyRequestPage = () => {
|
|||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const [searchParams] = useSearchParams();
|
const [searchParams] = useSearchParams();
|
||||||
const preApiId = searchParams.get('apiId');
|
const preApiId = searchParams.get('apiId');
|
||||||
|
const preApiIds = searchParams.get('apiIds');
|
||||||
|
|
||||||
const [catalog, setCatalog] = useState<ServiceCatalog[]>([]);
|
const [catalog, setCatalog] = useState<ServiceCatalog[]>([]);
|
||||||
const [expandedDomains, setExpandedDomains] = useState<Set<string>>(new Set());
|
const [expandedDomains, setExpandedDomains] = useState<Set<string>>(new Set());
|
||||||
@ -68,6 +69,28 @@ const KeyRequestPage = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 신청함에서 일괄 전달된 apiIds 자동 선택
|
||||||
|
if (preApiIds) {
|
||||||
|
const aIds = preApiIds
|
||||||
|
.split(',')
|
||||||
|
.map((s) => Number(s.trim()))
|
||||||
|
.filter((n) => !isNaN(n) && n > 0);
|
||||||
|
if (aIds.length > 0) {
|
||||||
|
const aIdSet = new Set(aIds);
|
||||||
|
const domainsToExpand = new Set<string>();
|
||||||
|
for (const service of catalogRes.data) {
|
||||||
|
for (const domainGroup of service.domains) {
|
||||||
|
const hasMatch = domainGroup.apis.some((a) => aIdSet.has(a.apiId));
|
||||||
|
if (hasMatch) {
|
||||||
|
domainsToExpand.add(domainGroup.domain);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setSelectedApiIds(aIdSet);
|
||||||
|
setExpandedDomains(domainsToExpand);
|
||||||
|
}
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
setError(catalogRes.message || '카탈로그를 불러오는데 실패했습니다.');
|
setError(catalogRes.message || '카탈로그를 불러오는데 실패했습니다.');
|
||||||
}
|
}
|
||||||
@ -79,7 +102,7 @@ const KeyRequestPage = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
fetchData();
|
fetchData();
|
||||||
}, [preApiId]);
|
}, [preApiId, preApiIds]);
|
||||||
|
|
||||||
// catalog → FlatDomainGroup[] 변환 (도메인 기준 플랫 그룹핑, 알파벳순 정렬)
|
// catalog → FlatDomainGroup[] 변환 (도메인 기준 플랫 그룹핑, 알파벳순 정렬)
|
||||||
const flatDomainGroups = useMemo<FlatDomainGroup[]>(() => {
|
const flatDomainGroups = useMemo<FlatDomainGroup[]>(() => {
|
||||||
|
|||||||
91
frontend/src/store/ApiRequestBasketContext.tsx
Normal file
91
frontend/src/store/ApiRequestBasketContext.tsx
Normal file
@ -0,0 +1,91 @@
|
|||||||
|
import { createContext, useState, useCallback } from 'react';
|
||||||
|
import type { ReactNode } from 'react';
|
||||||
|
|
||||||
|
const BASKET_STORAGE_KEY = 'snp-api-basket';
|
||||||
|
|
||||||
|
export interface BasketItem {
|
||||||
|
apiId: number;
|
||||||
|
serviceId: number;
|
||||||
|
apiName: string;
|
||||||
|
domain?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ApiRequestBasketContextType {
|
||||||
|
items: BasketItem[];
|
||||||
|
addItem: (item: BasketItem) => void;
|
||||||
|
removeItem: (apiId: number) => void;
|
||||||
|
clearItems: () => void;
|
||||||
|
hasItem: (apiId: number) => boolean;
|
||||||
|
isBasketOpen: boolean;
|
||||||
|
setBasketOpen: (open: boolean) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ApiRequestBasketContext = createContext<ApiRequestBasketContextType | null>(null);
|
||||||
|
|
||||||
|
const loadFromStorage = (): BasketItem[] => {
|
||||||
|
try {
|
||||||
|
const raw = localStorage.getItem(BASKET_STORAGE_KEY);
|
||||||
|
if (!raw) return [];
|
||||||
|
const parsed = JSON.parse(raw);
|
||||||
|
if (Array.isArray(parsed)) return parsed as BasketItem[];
|
||||||
|
return [];
|
||||||
|
} catch {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const saveToStorage = (items: BasketItem[]): void => {
|
||||||
|
try {
|
||||||
|
localStorage.setItem(BASKET_STORAGE_KEY, JSON.stringify(items));
|
||||||
|
} catch {
|
||||||
|
// 저장 실패 시 무시
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
interface ApiRequestBasketProviderProps {
|
||||||
|
children: ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ApiRequestBasketProvider = ({ children }: ApiRequestBasketProviderProps) => {
|
||||||
|
const [items, setItems] = useState<BasketItem[]>(loadFromStorage);
|
||||||
|
const [isBasketOpen, setIsBasketOpen] = useState(false);
|
||||||
|
|
||||||
|
const addItem = useCallback((item: BasketItem) => {
|
||||||
|
setItems((prev) => {
|
||||||
|
if (prev.some((i) => i.apiId === item.apiId)) return prev;
|
||||||
|
const next = [...prev, item];
|
||||||
|
saveToStorage(next);
|
||||||
|
return next;
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const removeItem = useCallback((apiId: number) => {
|
||||||
|
setItems((prev) => {
|
||||||
|
const next = prev.filter((i) => i.apiId !== apiId);
|
||||||
|
saveToStorage(next);
|
||||||
|
return next;
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const clearItems = useCallback(() => {
|
||||||
|
setItems([]);
|
||||||
|
saveToStorage([]);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const hasItem = useCallback(
|
||||||
|
(apiId: number) => items.some((i) => i.apiId === apiId),
|
||||||
|
[items],
|
||||||
|
);
|
||||||
|
|
||||||
|
const setBasketOpen = useCallback((open: boolean) => {
|
||||||
|
setIsBasketOpen(open);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ApiRequestBasketContext.Provider value={{ items, addItem, removeItem, clearItems, hasItem, isBasketOpen, setBasketOpen }}>
|
||||||
|
{children}
|
||||||
|
</ApiRequestBasketContext.Provider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ApiRequestBasketProvider;
|
||||||
불러오는 중...
Reference in New Issue
Block a user