리펙토링: Node.js 프로젝트 폴더 구조 적용

src/renderer/handlers/pinch-zoom.js

@@ -0,0 +1,29 @@
+const THUMB_MIN = 150;
+const THUMB_MAX = 400;
+
+let _thumbSizeHint;
+let thumbSize = 250;
+let thumbHintTimer = null;
+
+export function init({ gridContainer, thumbSizeHint }) {
+  _thumbSizeHint = thumbSizeHint;
+
+  gridContainer.addEventListener('wheel', (e) => {
+    if (!e.ctrlKey) return;
+    e.preventDefault();
+    setThumbSize(thumbSize + (-e.deltaY * 0.8));
+  }, { passive: false });
+}
+
+export function setThumbSize(size) {
+  thumbSize = Math.round(Math.max(THUMB_MIN, Math.min(THUMB_MAX, size)));
+  document.documentElement.style.setProperty('--thumb-size', thumbSize + 'px');
+  _showHint(thumbSize);
+}
+
+function _showHint(size) {
+  _thumbSizeHint.textContent = `${size}px`;
+  _thumbSizeHint.classList.add('show');
+  clearTimeout(thumbHintTimer);
+  thumbHintTimer = setTimeout(() => _thumbSizeHint.classList.remove('show'), 1000);
+}