폴더창 보이기/숨기기 버튼 추가

src/main/ipc/folder.js

@@ -79,6 +79,15 @@ function register(mainWindow) {
     updateConfig(cfg => { cfg.sidebarWidth = width; });
   });
 
+  ipcMain.handle('get-file-explorer-visible', () => {
+    const cfg = readConfig();
+    return cfg.fileExplorerVisible !== false; // 기본값 true
+  });
+
+  ipcMain.handle('set-file-explorer-visible', (_e, visible) => {
+    updateConfig(cfg => { cfg.fileExplorerVisible = visible; });
+  });
+
   ipcMain.handle('get-thumb-size', () => {
     const cfg = readConfig();
     return Number.isFinite(cfg.thumbSize) ? cfg.thumbSize : null;

src/preload/index.js

@@ -27,6 +27,8 @@ contextBridge.exposeInMainWorld('api', {
   setPreviewOn:       (on)       => ipcRenderer.invoke('set-preview-on', on),
   getSidebarWidth:    ()         => ipcRenderer.invoke('get-sidebar-width'),
   setSidebarWidth:    (width)    => ipcRenderer.invoke('set-sidebar-width', width),
+  getFileExplorerVisible: ()     => ipcRenderer.invoke('get-file-explorer-visible'),
+  setFileExplorerVisible: (visible) => ipcRenderer.invoke('set-file-explorer-visible', visible),
   getThumbSize:       ()         => ipcRenderer.invoke('get-thumb-size'),
   setThumbSize:       (size)     => ipcRenderer.invoke('set-thumb-size', size),
   checkFilesExist:    (folder, names) => ipcRenderer.invoke('check-files-exist', folder, names),

src/renderer/index.html

@@ -15,11 +15,13 @@
 <section class="app-workspace" aria-label="사진 이름 변경 작업 영역">
   <nav class="workspace-nav" aria-label="작업 도구">
     <div class="workspace-actions">
+      <button class="btn btn-accent active" id="btn-file-explorer-toggle" aria-pressed="true">🗂️ (D)</button>
+      <div class="separator"></div>
       <button class="btn btn-warning" id="btn-open">폴더 열기 (⌘O)</button>
       <button class="btn btn-success" id="btn-rename" disabled>이름 변경 실행 (⌘S)</button>
     </div>
     <div class="workspace-controls">
-      <button class="btn btn-info" id="btn-preview-toggle">미리보기</button>
+      <button class="btn btn-info" id="btn-preview-toggle">미리보기 (SPACE)</button>
       <div class="separator"></div>
       <button class="btn btn-ghost" id="btn-undo" disabled>↩ 되돌리기</button>
       <button class="btn btn-ghost" id="btn-redo" disabled>↪ 다시하기</button>

src/renderer/keyboard.js

@@ -5,6 +5,7 @@ export function initKeyboardShortcuts({
   btnOpen,
   btnRename,
   btnPreviewToggle,
+  btnFileExplorerToggle,
   deleteSelected,
   performUndo,
   performRedo,
@@ -38,6 +39,9 @@ export function initKeyboardShortcuts({
     } else if (e.code === 'Space') {
       e.preventDefault();
       btnPreviewToggle.click();
+    } else if (e.code === 'KeyD' && !e.metaKey && !e.ctrlKey && !e.altKey) {
+      e.preventDefault();
+      btnFileExplorerToggle.click();
     } else if (e.code === 'Backspace' || e.code === 'Delete') {
       deleteSelected();
     } else if (isNavigationKey(e.code) && !e.metaKey && !e.ctrlKey && !e.altKey) {

src/renderer/renderer.js

@@ -36,9 +36,11 @@ 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 btnFileExplorerToggle = document.getElementById('btn-file-explorer-toggle');
 const btnUndo          = document.getElementById('btn-undo');
 const btnRedo          = document.getElementById('btn-redo');
 const fileExplorerContainer = document.querySelector('.file-explorer');
+const appWorkspace     = document.querySelector('.app-workspace');
 const aside            = document.querySelector('aside');
 const sidebarResizer   = document.getElementById('sidebar-resizer');
 
@@ -79,18 +81,20 @@ window.api.onFullscreenChange((isFullscreen) => {
 // ── 앱 시작 ───────────────────────────────────────
 (async () => {
   log('startup', 'init start');
-  const [lastFolder, homeDir, previewOn, sidebarWidth, thumbSize] = await Promise.all([
+  const [lastFolder, homeDir, previewOn, sidebarWidth, fileExplorerVisible, thumbSize] = await Promise.all([
     window.api.getLastFolder(),
     window.api.getHomeDir(),
     window.api.getPreviewOn(),
     window.api.getSidebarWidth(),
+    window.api.getFileExplorerVisible(),
     window.api.getThumbSize(),
   ]);
-  log('startup', 'settings loaded', { lastFolder, homeDir, previewOn, sidebarWidth, thumbSize });
+  log('startup', 'settings loaded', { lastFolder, homeDir, previewOn, sidebarWidth, fileExplorerVisible, thumbSize });
   folderController.setHomeDir(homeDir);
 
   btnPreviewToggle.classList.toggle('active', previewOn);
   hoverPreview.setEnabled(previewOn);
+  setFileExplorerVisible(fileExplorerVisible, { persist: false });
   sidebarResize.init({
     aside,
     handle: sidebarResizer,
@@ -129,11 +133,16 @@ btnPreviewToggle.addEventListener('click', () => {
   hoverPreview.setEnabled(on);
   window.api.setPreviewOn(on);
 });
+btnFileExplorerToggle.addEventListener('click', () => {
+  const visible = appWorkspace.classList.contains('file-explorer-hidden');
+  setFileExplorerVisible(visible);
+});
 
 initKeyboardShortcuts({
   btnOpen,
   btnRename,
   btnPreviewToggle,
+  btnFileExplorerToggle,
   deleteSelected: deleteHandler.deleteSelected,
   performUndo: historyController.performUndo,
   performRedo: historyController.performRedo,
@@ -151,3 +160,10 @@ function updatePreview() {
   previewName.textContent = buildSequentialName(fileName, 0, format);
   updateNewNameLabels();
 }
+
+function setFileExplorerVisible(visible, { persist = true } = {}) {
+  appWorkspace.classList.toggle('file-explorer-hidden', !visible);
+  btnFileExplorerToggle.classList.toggle('active', visible);
+  btnFileExplorerToggle.setAttribute('aria-pressed', String(visible));
+  if (persist) window.api.setFileExplorerVisible(visible);
+}

src/renderer/style.css

@@ -103,6 +103,10 @@ header h1 {
 .workspace-controls {
   margin-left: auto;
 }
+.app-workspace.file-explorer-hidden aside,
+.app-workspace.file-explorer-hidden #sidebar-resizer {
+  display: none;
+}
 
 /* ── 앱 레이아웃 ── */
 .app-layout {
@@ -181,6 +185,10 @@ main {
 .btn-info:hover { background: #132e42; }
 .btn-info:disabled { opacity: .4; cursor: not-allowed; }
 .btn-info:not(.active) { opacity: .4; }
+.btn-accent { background: rgba(124,106,247,.16); color: var(--accent); border: 1px solid rgba(124,106,247,.38); }
+.btn-accent:hover { background: rgba(124,106,247,.24); }
+.btn-accent:disabled { opacity: .4; cursor: not-allowed; }
+.btn-accent:not(.active) { opacity: .4; }
 .sort-group {
   display: flex;
   background: #0d2535;