Number Input

<!-- Medium (default) -->
<div class="number-input">
	<button class="number-input__btn number-input__btn--minus" type="button" aria-label="감소">
		<svg width="12" height="2" viewBox="0 0 12 2" fill="none" aria-hidden="true">
			<rect width="12" height="2" rx="1" fill="currentColor"/>
		</svg>
	</button>
	<input class="number-input__field" type="number" value="1" min="0" max="99" aria-label="수량" />
	<button class="number-input__btn number-input__btn--plus" type="button" aria-label="증가">
		<svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
			<rect x="0" y="5" width="12" height="2" rx="1" fill="currentColor"/>
			<rect x="5" y="0" width="2" height="12" rx="1" fill="currentColor"/>
		</svg>
	</button>
</div>

<!-- Small -->
<div class="number-input number-input--sm">...</div>

<!-- Large -->
<div class="number-input number-input--lg">...</div>

<!-- Disabled -->
<div class="number-input">
	<button class="number-input__btn" type="button" aria-label="감소" disabled>...</button>
	<input class="number-input__field" type="number" value="1" aria-label="수량" disabled />
	<button class="number-input__btn" type="button" aria-label="증가" disabled>...</button>
</div>

document.querySelectorAll('.number-input').forEach(function (wrap) {
	var input = wrap.querySelector('.number-input__field');
	if (!input) return;

	wrap.querySelectorAll('.number-input__btn').forEach(function (btn) {
		btn.addEventListener('click', function () {
			var step = Number(input.step) || 1;
			var min  = input.min !== '' ? Number(input.min) : -Infinity;
			var max  = input.max !== '' ? Number(input.max) : Infinity;
			var val  = Number(input.value) || 0;

			if (btn.classList.contains('number-input__btn--minus')) {
				input.value = Math.max(min, val - step);
			} else {
				input.value = Math.min(max, val + step);
			}
			input.dispatchEvent(new Event('change', { bubbles: true }));
		});
	});
});