리펙토링: 전체 구조 검토, 개선

src/main/ipc/files.js

@@ -26,10 +26,13 @@ function register() {
     try {
       const data = fs.readFileSync(filePath);
       const ext = path.extname(filePath).toLowerCase().replace('.', '');
-      const mime = (ext === 'jpg' || ext === 'jpeg') ? 'jpeg'
-                 : ext === 'png'  ? 'png'
-                 : ext === 'gif'  ? 'gif'
-                 : ext === 'webp' ? 'webp'
+      const mime = (ext === 'jpg' || ext === 'jpeg')   ? 'jpeg'
+                 : ext === 'png'                       ? 'png'
+                 : ext === 'gif'                       ? 'gif'
+                 : ext === 'webp'                      ? 'webp'
+                 : (ext === 'tiff' || ext === 'tif')   ? 'tiff'
+                 : ext === 'bmp'                       ? 'bmp'
+                 : (ext === 'heic' || ext === 'heif')  ? 'heic'
                  : 'jpeg';
       return `data:image/${mime};base64,${data.toString('base64')}`;
     } catch (e) {

src/renderer/history.js

@@ -1,12 +1,18 @@
 const MAX = 50;
-let _stack  = [];  // each entry: { files: [], affectedPaths: Set | null }
-let _cursor = -1;
+let _stack    = [];
+let _cursor   = -1;
+let _onUpdate = null;
+
+export function setOnUpdate(fn) {
+  _onUpdate = fn;
+}
 
 export function push(files, affectedPaths = null) {
   _stack = _stack.slice(0, _cursor + 1);
   _stack.push({ files: [...files], affectedPaths: affectedPaths ? new Set(affectedPaths) : null });
   if (_stack.length > MAX) _stack.shift();
   _cursor = _stack.length - 1;
+  _onUpdate?.();
 }
 
 // Returns { files, affectedPaths } where affectedPaths are from the entry being undone
@@ -14,6 +20,7 @@ export function undo() {
   if (!canUndo()) return null;
   const affectedPaths = _stack[_cursor].affectedPaths;
   --_cursor;
+  _onUpdate?.();
   return { files: [..._stack[_cursor].files], affectedPaths };
 }
 
@@ -21,6 +28,7 @@ export function undo() {
 export function redo() {
   if (!canRedo()) return null;
   ++_cursor;
+  _onUpdate?.();
   return { files: [..._stack[_cursor].files], affectedPaths: _stack[_cursor].affectedPaths };
 }
 
@@ -30,4 +38,5 @@ export function canRedo() { return _cursor < _stack.length - 1; }
 export function reset() {
   _stack  = [];
   _cursor = -1;
+  _onUpdate?.();
 }

src/renderer/move.js

@@ -1,6 +1,7 @@
 import { state }                                        from './state.js';
 import { showLoading, hideLoading, setStatus, showToast } from './ui.js';
 import { renderGrid, updateSelCount, showEmptyGrid }      from './grid.js';
+import * as history                                      from './history.js';
 
 const btnRename        = document.getElementById('btn-rename');
 const moveModal        = document.getElementById('move-modal');
@@ -84,6 +85,8 @@ async function _doMoveFiles(targetPath, files) {
     state.files.length = 0;
     state.files.push(...newList);
     state.selectedIdxs.clear();
+    history.reset();
+    history.push(state.files);
     if (!newList.length) {
       showEmptyGrid();
       btnRename.disabled = true;

src/renderer/rename.js

@@ -1,6 +1,7 @@
 import { state }                                        from './state.js';
 import { showLoading, hideLoading, setStatus, showToast } from './ui.js';
 import { renderGrid }                                    from './grid.js';
+import * as history                                      from './history.js';
 
 const inputPrefix            = document.getElementById('input-prefix');
 const inputDigits            = document.getElementById('input-digits');
@@ -75,6 +76,8 @@ export async function doRename() {
     state.files.push(...newList);
     state.selectedIdxs.clear();
     renderGrid();
+    history.reset();
+    history.push(state.files);
   } catch (e) {
     hideLoading();
     alert('오류 발생: ' + e.message);

src/renderer/renderer.js

@@ -25,6 +25,7 @@ const inputDigits      = document.getElementById('input-digits');
 const previewName      = document.getElementById('preview-name');
 const dirPath          = document.getElementById('dir-path');
 const rubberBand       = document.getElementById('rubber-band');
+const grid             = document.getElementById('grid');
 const gridContainer    = document.getElementById('grid-container');
 const dragGhostEl      = document.getElementById('drag-ghost');
 const thumbSizeHint    = document.getElementById('thumb-size-hint');
@@ -34,9 +35,11 @@ const btnRedo          = document.getElementById('btn-redo');
 const fileExplorerContainer = document.querySelector('.file-explorer');
 
 // ── 핸들러 초기화 ─────────────────────────────────
+history.setOnUpdate(updateHistoryButtons);
+
 const callbacks = {
   refreshCardSelection, updateSelCount, updateNumberBadges, updateNewNameLabels,
-  pushHistory: (affectedPaths) => { history.push(state.files, affectedPaths); updateHistoryButtons(); },
+  pushHistory: (affectedPaths) => history.push(state.files, affectedPaths),
 };
 
 pinchZoom.init({ gridContainer, thumbSizeHint });
@@ -143,7 +146,6 @@ async function loadFolder(folder) {
   btnRename.disabled = false;
   history.reset();
   history.push(state.files);
-  updateHistoryButtons();
 }
 
 // ── 정렬 ─────────────────────────────────────────
@@ -157,7 +159,6 @@ async function sortFiles(mode) {
   await renderGrid();
   setStatus(`${mode === 'name' ? '이름순' : '날짜순'}으로 정렬됨`, true);
   history.push(state.files);
-  updateHistoryButtons();
 }
 
 function updateSortButtons() {