-
-
{selectedRequest.serviceIp}
+ {/* Tab: API 권한 (editable) */}
+ {activeReviewTab === 'apis' && (
+
+ {/* Header bar */}
+
+
+
+
+
+
API 권한 관리
+
{adjustedApiIds.size}개 허용
+
+ {!isReviewReadOnly && (
+
+ {(changes.added > 0 || changes.removed > 0) && (
+
+ )}
+
+
+ )}
- )}
- {selectedRequest.servicePurpose && (
-
-
-
{selectedRequest.servicePurpose}
-
- )}
- {selectedRequest.dailyRequestEstimate != null && (
-
-
-
{Number(selectedRequest.dailyRequestEstimate).toLocaleString()}건
-
- )}
-
-
-
-
-
setAdjustedFromDate(e.target.value)}
- className="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 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none" />
-
~
-
setAdjustedToDate(e.target.value)}
- className="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 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none" />
+ {/* Change summary banner */}
+ {(changes.added > 0 || changes.removed > 0) && (
+
+
+
+ 신청 원본 대비 변경:
+ {changes.added > 0 && +{changes.added} 추가}
+ {changes.added > 0 && changes.removed > 0 && /}
+ {changes.removed > 0 && -{changes.removed} 제외}
+
+
+ )}
+
+ {/* Service groups */}
+ {Object.entries(reviewTreeByService).map(([sIdStr, svc]) => {
+ const sId = Number(sIdStr);
+ const isExpanded = expandedReviewServices.has(sId);
+ const allSvcApiIds = Object.values(svc.domains).flatMap((d) => d.apis.map((a) => a.apiId));
+ const selectedSvcCount = allSvcApiIds.filter((id) => adjustedApiIds.has(id)).length;
+ const allSvcSelected = allSvcApiIds.length > 0 && selectedSvcCount === allSvcApiIds.length;
+ const someSvcSelected = selectedSvcCount > 0 && !allSvcSelected;
+ const hasSvcSelections = selectedSvcCount > 0;
+
+ return (
+
+ {/* Service header */}
+
+
+
+
{svc.serviceName}
+
{selectedSvcCount}/{allSvcApiIds.length}
+
+
+ {/* Domains */}
+ {isExpanded && (
+
+ {Object.values(svc.domains).map((domainGroup) => {
+ const domainApiIds = domainGroup.apis.map((a) => a.apiId);
+ const selectedDomainCount = domainApiIds.filter((id) => adjustedApiIds.has(id)).length;
+ const allDomainSelected = domainApiIds.length > 0 && selectedDomainCount === domainApiIds.length;
+ const someDomainSelected = selectedDomainCount > 0 && !allDomainSelected;
+
+ return (
+
+ {/* Domain row */}
+
+
+
+
{domainGroup.apiDomain}
+
{selectedDomainCount}/{domainApiIds.length}
+
+
+ {/* API rows */}
+
+ {domainGroup.apis.map((api) => {
+ const isSelected = adjustedApiIds.has(api.apiId);
+ const isAdded = isSelected && !originalApiIds.has(api.apiId);
+ const isRemoved = !isSelected && originalApiIds.has(api.apiId);
+
+ return (
+
handleToggleReviewApi(api.apiId)}
+ className={`flex items-center gap-2.5 px-3 py-2 border-b border-gray-100 dark:border-gray-700/30 last:border-b-0 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700/30 transition-colors ${isAdded ? 'bg-green-50/50 dark:bg-green-900/5' : ''} ${isRemoved ? 'opacity-50' : ''}`}
+ >
+ handleToggleReviewApi(api.apiId)}
+ onClick={(e) => e.stopPropagation()}
+ className="rounded"
+ />
+
+ {api.apiMethod}
+
+ {api.apiPath}
+ {api.apiName}
+ {isAdded && (
+ 추가
+ )}
+ {isRemoved && (
+ 제외
+ )}
+
+ );
+ })}
+
+
+ );
+ })}
+
+ )}
+
+ );
+ })}
+ {Object.keys(reviewTreeByService).length === 0 && (
+
요청된 API가 없습니다.
+ )}
+
+ {/* Add API Modal (overlay inside the tab) */}
+ {showAddApiModal && (
+
+
+
+
+
+
API 추가
+ {addApiSelected.size > 0 && (
+
{addApiSelected.size}개 선택
+ )}
+
+
setAddApiSearch(e.target.value)}
+ placeholder="API 검색..."
+ className="bg-gray-100 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg px-3 py-1.5 text-xs text-gray-900 dark:text-gray-100 placeholder-gray-400 w-44 focus:ring-2 focus:ring-blue-500 focus:outline-none"
+ />
+
+
+ {(() => {
+ const query = addApiSearch.toLowerCase();
+ const availableApis = allApisMap.services.flatMap((svc) => {
+ const apis = allApisMap.apisByService[svc.serviceId] || [];
+ return apis
+ .filter((a) => !adjustedApiIds.has(a.apiId))
+ .filter((a) => !query || a.apiName.toLowerCase().includes(query) || a.apiPath.toLowerCase().includes(query) || svc.serviceName.toLowerCase().includes(query))
+ .map((a) => ({ ...a, serviceName: svc.serviceName }));
+ });
+
+ if (availableApis.length === 0) {
+ return
{addApiSearch ? '검색 결과가 없습니다' : '추가 가능한 API가 없습니다'}
;
+ }
+
+ return availableApis.map((api) => (
+
setAddApiSelected((prev) => { const next = new Set(prev); next.has(api.apiId) ? next.delete(api.apiId) : next.add(api.apiId); return next; })}
+ className={`flex items-center gap-2.5 px-3 py-2 rounded-lg cursor-pointer transition-colors ${addApiSelected.has(api.apiId) ? 'bg-blue-50 dark:bg-blue-900/10' : 'hover:bg-gray-50 dark:hover:bg-gray-700/30'}`}
+ >
+
+
{api.apiMethod}
+
+
{api.apiPath}
+
{api.serviceName} · {api.apiName}
+
+
+ ));
+ })()}
+
+
+
+
+
+
+
+ )}
-
-
-
-
-
- {renderApiCheckboxes(adjustedApiIds, handleToggleReviewApi)}
-
-
-
-
-
-