generated from gc/template-java-maven
feat(api-hub): API 신청함 기능 및 신청 모달 공통화 (#47) #49
@ -6,6 +6,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/ko/1.0.0/).
|
||||
|
||||
## [Unreleased]
|
||||
|
||||
### 추가
|
||||
|
||||
- API 신청함 기능 (플로팅 패널, localStorage 영속화, 도메인별 분류) (#47)
|
||||
- ApiKeyRequestModal 공통 컴포넌트 (API 선택 트리 포함) (#47)
|
||||
- 도메인 상세 페이지 신청함 담기/빼기 버튼 (#47)
|
||||
|
||||
## [2026-04-14]
|
||||
|
||||
### 추가
|
||||
|
||||
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 { getCatalog } from '../services/apiHubService';
|
||||
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;
|
||||
|
||||
@ -30,7 +33,7 @@ interface FlatDomainGroup {
|
||||
apis: { serviceId: number; apiId: number; apiName: string; apiPath: string; apiMethod: string }[];
|
||||
}
|
||||
|
||||
const ApiHubLayout = () => {
|
||||
const ApiHubLayoutInner = () => {
|
||||
const { user, setRole } = useAuth();
|
||||
const { theme, toggleTheme } = useTheme();
|
||||
const navigate = useNavigate();
|
||||
@ -326,10 +329,99 @@ const ApiHubLayout = () => {
|
||||
{/* Content */}
|
||||
<main className="p-6 bg-gray-100 dark:bg-gray-900 min-h-[calc(100vh-4rem)]">
|
||||
<Outlet />
|
||||
<BasketFloatingPanel />
|
||||
</main>
|
||||
</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 type { ServiceCatalog } from '../../types/apihub';
|
||||
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 { createKeyRequest } from '../../services/apiKeyService';
|
||||
import { useApiRequestBasket } from '../../hooks/useApiRequestBasket';
|
||||
import ApiKeyRequestModal from '../../components/ApiKeyRequestModal';
|
||||
|
||||
const COMMON_SAMPLE_CODE_KEY = 'COMMON_SAMPLE_CODE';
|
||||
|
||||
@ -19,6 +20,7 @@ const METHOD_COLORS_LARGE: Record<string, string> = {
|
||||
const ApiHubApiDetailPage = () => {
|
||||
const { serviceId, apiId } = useParams<{ serviceId: string; apiId: string }>();
|
||||
const navigate = useNavigate();
|
||||
const { addItem, removeItem, hasItem, setBasketOpen } = useApiRequestBasket();
|
||||
const [detail, setDetail] = useState<ApiDetailInfo | null>(null);
|
||||
const [service, setService] = useState<ServiceCatalog | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
@ -31,23 +33,9 @@ const ApiHubApiDetailPage = () => {
|
||||
const [urlGenOpen, setUrlGenOpen] = useState(false);
|
||||
|
||||
// 신청 모달 상태
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [modalKeyName, setModalKeyName] = useState('');
|
||||
const [modalPurpose, setModalPurpose] = useState('');
|
||||
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 [showRequestModal, setShowRequestModal] = useState(false);
|
||||
const [requestModalApiIds, setRequestModalApiIds] = useState<number[]>([]);
|
||||
const [requestModalApiNames, setRequestModalApiNames] = useState<string[]>([]);
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
if (!serviceId || !apiId) return;
|
||||
@ -156,87 +144,11 @@ const ApiHubApiDetailPage = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleOpenModal = async () => {
|
||||
setModalKeyName('');
|
||||
setModalPurpose('');
|
||||
setModalServiceIp('');
|
||||
setModalServicePurpose('');
|
||||
setModalDailyRequestEstimate('');
|
||||
setModalUsagePeriodMode('preset');
|
||||
setModalIsPermanent(false);
|
||||
setModalUsageFromDate('');
|
||||
setModalUsageToDate('');
|
||||
setModalError(null);
|
||||
setModalSuccess(false);
|
||||
setModalApiSearch('');
|
||||
const handleOpenRequest = () => {
|
||||
if (detail) {
|
||||
setModalSelectedApiIds(new Set([detail.api.apiId]));
|
||||
// 현재 API의 도메인을 펼침
|
||||
const currentDomain = detail.api.apiDomain ?? '';
|
||||
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);
|
||||
setRequestModalApiIds([detail.api.apiId]);
|
||||
setRequestModalApiNames([detail.api.apiName]);
|
||||
setShowRequestModal(true);
|
||||
}
|
||||
};
|
||||
|
||||
@ -272,12 +184,40 @@ const ApiHubApiDetailPage = () => {
|
||||
</span>
|
||||
<h1 className="text-xl font-bold text-gray-900 dark:text-gray-100">{api.apiName}</h1>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleOpenModal}
|
||||
className="shrink-0 px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium transition-colors"
|
||||
>
|
||||
API 사용 신청
|
||||
</button>
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
{hasItem(Number(apiId)) ? (
|
||||
<button
|
||||
onClick={() => removeItem(Number(apiId))}
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
|
||||
@ -547,298 +487,12 @@ const ApiHubApiDetailPage = () => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* API 사용 신청 모달 */}
|
||||
{isModalOpen && (
|
||||
<div
|
||||
className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4"
|
||||
onClick={(e) => { if (e.target === e.currentTarget) handleCloseModal(); }}
|
||||
>
|
||||
<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>
|
||||
)}
|
||||
<ApiKeyRequestModal
|
||||
isOpen={showRequestModal}
|
||||
onClose={() => setShowRequestModal(false)}
|
||||
initialApiIds={requestModalApiIds}
|
||||
initialApiNames={requestModalApiNames}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -2,6 +2,7 @@ import { useState, useEffect, useMemo } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import type { ServiceCatalog } from '../../types/apihub';
|
||||
import { getCatalog } from '../../services/apiHubService';
|
||||
import { useApiRequestBasket } from '../../hooks/useApiRequestBasket';
|
||||
|
||||
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',
|
||||
@ -67,6 +68,7 @@ interface DomainInfo {
|
||||
const ApiHubDomainPage = () => {
|
||||
const { domainName } = useParams<{ domainName: string }>();
|
||||
const navigate = useNavigate();
|
||||
const { addItem, removeItem, hasItem } = useApiRequestBasket();
|
||||
const [catalog, setCatalog] = useState<ServiceCatalog[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
@ -222,6 +224,27 @@ const ApiHubDomainPage = () => {
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-semibold text-gray-900 dark:text-gray-100 truncate">{api.apiName}</p>
|
||||
</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">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
|
||||
@ -27,6 +27,7 @@ const KeyRequestPage = () => {
|
||||
const navigate = useNavigate();
|
||||
const [searchParams] = useSearchParams();
|
||||
const preApiId = searchParams.get('apiId');
|
||||
const preApiIds = searchParams.get('apiIds');
|
||||
|
||||
const [catalog, setCatalog] = useState<ServiceCatalog[]>([]);
|
||||
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 {
|
||||
setError(catalogRes.message || '카탈로그를 불러오는데 실패했습니다.');
|
||||
}
|
||||
@ -79,7 +102,7 @@ const KeyRequestPage = () => {
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, [preApiId]);
|
||||
}, [preApiId, preApiIds]);
|
||||
|
||||
// catalog → 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