<%@ page language="java" contentType="text/html; charset=utf-8"%>
<!-- 유량제어 그룹 도움말 모달 -->
<div class="help-modal-overlay" id="helpModal">
	<div class="help-modal">
		<div class="help-modal-header">
			<h3>유량제어 임계치 설명</h3>
			<button type="button" class="help-modal-close">&times;</button>
		</div>
		<div class="help-modal-body">
			<h4>개요</h4>
			<p>유량제어는 <strong>Token Bucket 알고리즘</strong> 기반으로 동작합니다.
			   설정된 임계치만큼 토큰이 <strong>균등하게 리필</strong>되며, 요청 1건당 토큰 1개를 소비합니다.
			   토큰이 부족하면 요청이 거부됩니다.</p>

			<h4>토큰 리필 방식 - Greedy (균등 리필)</h4>
			<p>토큰은 설정된 시간이 지난 후 한꺼번에 리필되는 것이 아니라, <strong>매 순간 균등하게 리필</strong>됩니다.</p>
			<div class="note" style="background:#e3f2fd; border-color:#2196f3; margin-bottom:12px;">
				<strong>왜 균등 리필인가?</strong><br/>
				한꺼번에 리필하면 리필 직후 트래픽이 몰려 백엔드에 부하가 집중됩니다.
				균등 리필은 트래픽을 <strong>시간축에 고르게 분산</strong>시켜 시스템 안정성을 높입니다.
				AWS, Google Cloud, Nginx 등 대부분의 Rate Limiter가 이 방식을 채택합니다.
			</div>
			<div class="example-box">
				<div class="example-title">예시: 분당 120건 설정 시 리필 속도</div>
				<ul>
					<li>120건 ÷ 60초 = <strong>초당 2건씩</strong> 균등 리필</li>
					<li>1초마다 2개의 토큰이 자동으로 채워짐</li>
				</ul>
			</div>
			<div class="example-box">
				<div class="example-title">동작 예시: 분당 120건, 10건 요청 처리 후</div>
				<table style="width:100%; margin-top:8px;">
					<tr><th style="width:100px;">시간</th><th>상황</th><th style="width:80px;">토큰 수</th></tr>
					<tr><td>10:00:00</td><td>초기 상태 (만땅)</td><td style="text-align:center;"><strong>120개</strong></td></tr>
					<tr><td>10:00:01</td><td>요청 10건 처리</td><td style="text-align:center;">110개</td></tr>
					<tr><td>10:00:02</td><td>1초 경과 → 2개 리필</td><td style="text-align:center;">112개</td></tr>
					<tr><td>10:00:03</td><td>1초 경과 → 2개 리필</td><td style="text-align:center;">114개</td></tr>
					<tr><td>10:00:04</td><td>1초 경과 → 2개 리필</td><td style="text-align:center;">116개</td></tr>
					<tr><td>10:00:05</td><td>1초 경과 → 2개 리필</td><td style="text-align:center;">118개</td></tr>
					<tr><td>10:00:06</td><td>1초 경과 → 2개 리필 (복구 완료)</td><td style="text-align:center;"><strong>120개</strong></td></tr>
				</table>
				<p style="margin-top:10px; color:#666; font-size:11px;">
					※ 10건 소비 후 5초만에 복구됨 (10건 ÷ 초당2건 = 5초)
				</p>
			</div>
			<div class="note" style="background:#fff3e0; border-color:#ffb74d;">
				<strong>주의:</strong> "분당 120건"은 "1분 후에 120개가 한꺼번에 채워진다"는 의미가 아닙니다.
				매 초마다 2개씩 균등하게 리필되어, 결과적으로 1분 동안 최대 120건을 처리할 수 있다는 의미입니다.
			</div>

			<h4>초당 임계치 (thresholdPerSecond)</h4>
			<p>1초 단위의 순간적인 트래픽 급증(spike)을 방어합니다.</p>
			<div class="example-box">
				<div class="example-title">예시: 초당 임계치 = 100</div>
				<ul>
					<li>매 1초마다 토큰 100개 리필</li>
					<li>1초 내 100건까지 처리 가능</li>
					<li>101번째 요청부터 차단</li>
				</ul>
			</div>

			<h4>추가 임계치 (threshold) + 시간단위</h4>
			<p>장시간 누적 트래픽을 제어합니다. 시간단위에 따라 리필 속도가 결정됩니다.</p>
			<table>
				<tr><th>시간단위</th><th>설명</th><th>리필 속도 예시 (120건 설정 시)</th></tr>
				<tr><td>MIN</td><td>분</td><td>초당 2건 (120÷60)</td></tr>
				<tr><td>HOU</td><td>시</td><td>초당 0.033건 (120÷3600)</td></tr>
				<tr><td>DAY</td><td>일</td><td>초당 0.00139건 (120÷86400)</td></tr>
				<tr><td>MON</td><td>월</td><td>초당 0.0000463건 (120÷2592000)</td></tr>
			</table>

			<h4>두 임계치 조합 (권장)</h4>
			<p>두 조건을 함께 설정하면 <strong>이중 보호</strong>가 적용됩니다.</p>
			<div class="example-box">
				<div class="example-title">예시: 초당 100건 + 시간당 50,000건</div>
				<ul>
					<li><strong>초당 임계치</strong>: 순간 폭주 방지 → 1초에 101건 이상 요청 시 차단</li>
					<li><strong>추가 임계치</strong>: 장기 누적 제한 → 시간당 50,001건 이상 요청 시 차단</li>
					<li>두 조건 중 하나라도 초과 시 차단 (둘 다 충족해야 통과)</li>
				</ul>
			</div>

			<div class="note">
				<strong>참고:</strong> 그룹에 매핑된 인터페이스들은 개별 유량제어 대신 그룹 유량제어가 적용됩니다.
				그룹 내 모든 인터페이스의 호출이 합산되어 임계치와 비교됩니다.
			</div>
		</div>
	</div>
</div>
