sidebar-resizer 추가

src/main/ipc/folder.js

@@ -68,6 +68,17 @@ function register(mainWindow) {
     cfg.previewOn = on;
     writeConfig(cfg);
   });
+
+  ipcMain.handle('get-sidebar-width', () => {
+    const cfg = readConfig();
+    return Number.isFinite(cfg.sidebarWidth) ? cfg.sidebarWidth : null;
+  });
+
+  ipcMain.handle('set-sidebar-width', (_e, width) => {
+    const cfg = readConfig();
+    cfg.sidebarWidth = width;
+    writeConfig(cfg);
+  });
 }
 
-module.exports = { register };
+module.exports = { register };

src/preload/index.js

@@ -17,6 +17,8 @@ contextBridge.exposeInMainWorld('api', {
   revealFolder:       (p)        => ipcRenderer.invoke('reveal-folder', p),
   getPreviewOn:       ()         => ipcRenderer.invoke('get-preview-on'),
   setPreviewOn:       (on)       => ipcRenderer.invoke('set-preview-on', on),
+  getSidebarWidth:    ()         => ipcRenderer.invoke('get-sidebar-width'),
+  setSidebarWidth:    (width)    => ipcRenderer.invoke('set-sidebar-width', width),
   checkFilesExist:    (folder, names) => ipcRenderer.invoke('check-files-exist', folder, names),
   moveFiles:          (args)     => ipcRenderer.invoke('move-files', args),
   stageDeleteFiles:   (paths)    => ipcRenderer.invoke('stage-delete-files', paths),

src/renderer/handlers/sidebar-resize.js

@@ -0,0 +1,54 @@
+const MIN_WIDTH = 340;
+const MAX_WIDTH = 500;
+
+let _aside = null;
+let _handle = null;
+let _onResizeEnd = null;
+
+export function init({ aside, handle, initialWidth = MIN_WIDTH, onResizeEnd }) {
+  _aside = aside;
+  _handle = handle;
+  _onResizeEnd = onResizeEnd;
+
+  setWidth(initialWidth);
+  _handle.addEventListener('pointerdown', onPointerDown);
+}
+
+function onPointerDown(e) {
+  e.preventDefault();
+  _handle.setPointerCapture(e.pointerId);
+  document.body.classList.add('resizing-sidebar');
+
+  _handle.addEventListener('pointermove', onPointerMove);
+  _handle.addEventListener('pointerup', onPointerUp);
+  _handle.addEventListener('pointercancel', onPointerUp);
+}
+
+function onPointerMove(e) {
+  const left = _aside.getBoundingClientRect().left;
+  setWidth(e.clientX - left);
+}
+
+function onPointerUp(e) {
+  if (_handle.hasPointerCapture(e.pointerId)) {
+    _handle.releasePointerCapture(e.pointerId);
+  }
+
+  document.body.classList.remove('resizing-sidebar');
+  _handle.removeEventListener('pointermove', onPointerMove);
+  _handle.removeEventListener('pointerup', onPointerUp);
+  _handle.removeEventListener('pointercancel', onPointerUp);
+  _onResizeEnd?.(getWidth());
+}
+
+function setWidth(width) {
+  _aside.style.width = `${clampWidth(width)}px`;
+}
+
+function getWidth() {
+  return Math.round(_aside.getBoundingClientRect().width);
+}
+
+function clampWidth(width) {
+  return Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, Number(width) || MIN_WIDTH));
+}

src/renderer/index.html

@@ -24,6 +24,8 @@
     </section>
   </aside>
 
+  <div id="sidebar-resizer" aria-hidden="true"></div>
+
   <main>
     <nav class="content-nav">
       <div class="sort-group">

src/renderer/renderer.js

@@ -17,6 +17,7 @@ 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';
+import * as sidebarResize   from './handlers/sidebar-resize.js';
 
 // ── DOM ──────────────────────────────────────────────
 const btnOpen          = document.getElementById('btn-open');
@@ -36,6 +37,8 @@ const btnPreviewToggle = document.getElementById('btn-preview-toggle');
 const btnUndo          = document.getElementById('btn-undo');
 const btnRedo          = document.getElementById('btn-redo');
 const fileExplorerContainer = document.querySelector('.file-explorer');
+const aside            = document.querySelector('aside');
+const sidebarResizer   = document.getElementById('sidebar-resizer');
 
 const folderController = createFolderController({
   btnRename,
@@ -74,15 +77,22 @@ window.api.onFullscreenChange((isFullscreen) => {
 
 // ── 앱 시작 ───────────────────────────────────────
 (async () => {
-  const [lastFolder, homeDir, previewOn] = await Promise.all([
+  const [lastFolder, homeDir, previewOn, sidebarWidth] = await Promise.all([
     window.api.getLastFolder(),
     window.api.getHomeDir(),
     window.api.getPreviewOn(),
+    window.api.getSidebarWidth(),
   ]);
   folderController.setHomeDir(homeDir);
 
   btnPreviewToggle.classList.toggle('active', previewOn);
   hoverPreview.setEnabled(previewOn);
+  sidebarResize.init({
+    aside,
+    handle: sidebarResizer,
+    initialWidth: sidebarWidth,
+    onResizeEnd: width => window.api.setSidebarWidth(width),
+  });
 
   const target = lastFolder || homeDir;
   await fileExplorer.loadTree(homeDir, target);

src/renderer/style.css

@@ -83,14 +83,43 @@ header h1 {
 
 /* ── 사이드바 ── */
 aside {
-  width: 300px;
+  width: 340px;
+  min-width: 340px;
+  max-width: 500px;
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
-  border-right: 1px solid var(--border);
   background: var(--surface);
   overflow: hidden;
 }
+#sidebar-resizer {
+  width: 7px;
+  flex: 0 0 7px;
+  margin-left: -3px;
+  margin-right: -4px;
+  cursor: col-resize;
+  position: relative;
+  z-index: 30;
+}
+#sidebar-resizer::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 3px;
+  width: 1px;
+  background: var(--border);
+}
+#sidebar-resizer:hover::before,
+body.resizing-sidebar #sidebar-resizer::before {
+  left: 2px;
+  width: 3px;
+  background: var(--accent);
+}
+body.resizing-sidebar {
+  cursor: col-resize;
+  user-select: none;
+}
 .sidebar-nav {
   display: flex;
   flex-direction: row;