사이드바에 트리 구조 폴더 기능 추가

src/renderer/renderer.js

@@ -3,6 +3,7 @@ import * as pinchZoom   from './handlers/pinch-zoom.js';
 import * as selection    from './handlers/selection.js';
 import * as dragDrop     from './handlers/drag-drop.js';
 import * as hoverPreview from './handlers/image-preview.js';
+import * as fileExplorer from './handlers/file-explorer.js';
 
 let _cardObserver = null;
 
@@ -43,10 +44,24 @@ selection.init({ gridContainer, rubberBand, grid, state, callbacks });
 dragDrop.init({ grid, gridContainer, dragGhostEl, state, callbacks });
 hoverPreview.init();
 
+const fileExplorerContainer = document.querySelector('.file-explorer');
+fileExplorer.init(fileExplorerContainer, loadFolder);
+
 window.api.onFullscreenChange((isFullscreen) => {
   document.body.classList.toggle('fullscreen', isFullscreen);
 });
 
+// 앱 시작 시 마지막 폴더 또는 홈 디렉토리 로드
+(async () => {
+  const [lastFolder, homeDir] = await Promise.all([
+    window.api.getLastFolder(),
+    window.api.getHomeDir(),
+  ]);
+  const target = lastFolder || homeDir;
+  await fileExplorer.loadTree(homeDir, target);
+  await loadFolder(target);
+})();
+
 // ── 버튼 이벤트 ──────────────────────────────────
 inputPrefix.addEventListener('input', updatePreview);
 inputDigits.addEventListener('input', updatePreview);
@@ -65,20 +80,45 @@ btnSortName.addEventListener('click', () => sortFiles('name'));
 btnSortDate.addEventListener('click', () => sortFiles('date'));
 btnRename.addEventListener('click', doRename);
 
-// ── 폴더 열기 ────────────────────────────────────
+// ── 폴더 열기 (다이얼로그) ───────────────────────
 async function openFolder() {
   const folder = await window.api.selectFolder();
+  if (!folder) return;
+  const homeDir = await window.api.getHomeDir();
+  // 선택한 폴더가 홈 디렉토리 하위인지 확인해서 트리 업데이트
+  if (folder.startsWith(homeDir)) {
+    await fileExplorer.loadTree(homeDir, folder);
+  } else {
+    await fileExplorer.loadTree(folder, folder);
+  }
+  await loadFolder(folder);
+}
+
+// ── 폴더 로드 (트리 클릭 또는 다이얼로그 공통) ──
+async function loadFolder(folder) {
   if (!folder) return;
   state.currentFolder = folder;
   dirPath.textContent = folder;
+  await window.api.setLastFolder(folder);
+  fileExplorer.setSelectedPath(folder);
+
   showLoading('이미지 목록 불러오는 중...');
   const list = await window.api.listImages(folder);
   hideLoading();
+
   if (!list.length) {
+    state.files.length = 0;
+    state.selectedIdxs.clear();
+    grid.innerHTML = '';
+    grid.style.display = 'none';
+    emptyState.style.display = '';
+    fileCount.textContent = '0개 파일';
+    updateSelCount();
+    btnRename.disabled = true;
     setStatus('이미지 파일 없음', false);
-    showToast('⚠️ 이미지 파일이 없습니다', '#f76a6a', '#0a0a0a');
     return;
   }
+
   state.files.length = 0;
   state.files.push(...list);
   state.selectedIdxs.clear();