미리보기 기능 토글 적용

src/renderer/handlers/image-preview.js

@@ -12,6 +12,7 @@ let _hideTimer  = null;
 let _visible    = false;
 let _loaderEl   = null;
 let _activeCard = null;
+let _enabled    = true;
 
 export function init() {
   _el = document.createElement('div');
@@ -22,12 +23,26 @@ export function init() {
   document.body.appendChild(_el);
 }
 
+export function setEnabled(v) {
+  _enabled = v;
+  if (!v) {
+    clearTimeout(_showTimer); _showTimer = null;
+    clearTimeout(_hideTimer); _hideTimer = null;
+    _removeLoader();
+    _activeCard = null;
+    _visible = false;
+    _el.style.display    = 'none';
+    _el.style.visibility = 'hidden';
+  }
+}
+
 export function setupCard(card) {
   card.addEventListener('mouseenter', _onEnter);
   card.addEventListener('mouseleave', _onLeave);
 }
 
 function _onEnter() {
+  if (!_enabled) return;
   const card = this;
   _activeCard = card;
 

src/renderer/index.html

@@ -21,6 +21,8 @@
   </div>
   <div class="separator"></div>
   <button class="btn btn-success" id="btn-rename" disabled><span>✅</span>이름 변경 실행 (S)</button>
+  <div class="separator"></div>
+  <button class="btn btn-ghost active" id="btn-preview-toggle">🔍 미리보기</button>
   <div style="margin-left:auto; display:flex; align-items:center; gap:8px;">
     <span class="dir-path" id="dir-path">폴더를 선택하세요</span>
     <button class="btn btn-warning" id="btn-reveal" disabled>Finder에서 열기</button>

src/renderer/renderer.js

@@ -29,6 +29,7 @@ const rubberBand    = document.getElementById('rubber-band');
 const gridContainer     = document.getElementById('grid-container');
 const dragGhostEl       = document.getElementById('drag-ghost');
 const thumbSizeHint     = document.getElementById('thumb-size-hint');
+const btnPreviewToggle  = document.getElementById('btn-preview-toggle');
 
 // ── 핸들러 초기화 ─────────────────────────────────
 const callbacks = {
@@ -57,6 +58,10 @@ document.addEventListener('keydown', (e) => {
   if (e.code === 'KeyO') btnOpen.click();
   if (e.code === 'KeyS' && !btnRename.disabled) btnRename.click();
 });
+btnPreviewToggle.addEventListener('click', () => {
+  const on = btnPreviewToggle.classList.toggle('active');
+  hoverPreview.setEnabled(on);
+});
 btnSortName.addEventListener('click', () => sortFiles('name'));
 btnSortDate.addEventListener('click', () => sortFiles('date'));
 btnRename.addEventListener('click', doRename);

src/renderer/style.css

@@ -82,6 +82,7 @@ body.fullscreen #titlebar {
 .btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
 .btn-ghost:hover { background: var(--card); }
 .btn-ghost:disabled { color: var(--muted); border-color: var(--border); opacity: .4; cursor: not-allowed; }
+.btn-ghost.active { border-color: var(--accent); color: var(--accent); }
 .sort-group {
   display: flex;
   background: var(--card);