리펙토링 - 전체 프로젝트 코드 (Codex + Claude)

src/renderer/delete.js

@@ -24,14 +24,17 @@ deleteConfirmBtn.addEventListener('click', async () => {
   await _doDelete(files);
 });
 
+function showDeleteModal(files) {
+  renderTextList(deleteFileList, files.map(f => f.name));
+  _pendingFiles = files;
+  openModal(deleteModal);
+}
+
 export function deleteSelected() {
   if (!state.selectedIdxs.size) return;
   const filesToDelete = [...state.selectedIdxs].sort((a, b) => a - b)
     .map(i => state.files[i]).filter(Boolean);
-  if (!filesToDelete.length) return;
+  if (filesToDelete.length) showDeleteModal(filesToDelete);
-  renderTextList(deleteFileList, filesToDelete.map(f => f.name));
-  _pendingFiles = filesToDelete;
-  openModal(deleteModal);
 }
 
 export function init(gridEl) {
@@ -43,19 +46,11 @@ export function init(gridEl) {
     if (!card) return;
     const idx = parseInt(card.dataset.idx);
 
-    let filesToDelete;
+    const filesToDelete = (state.selectedIdxs.size > 0 && state.selectedIdxs.has(idx))
-    if (state.selectedIdxs.size > 0 && state.selectedIdxs.has(idx)) {
+      ? [...state.selectedIdxs].sort((a, b) => a - b).map(i => state.files[i]).filter(Boolean)
-      filesToDelete = [...state.selectedIdxs].sort((a, b) => a - b)
+      : [state.files[idx]].filter(Boolean);
-        .map(i => state.files[i]).filter(Boolean);
-    } else {
-      filesToDelete = [state.files[idx]].filter(Boolean);
-    }
 
-    if (!filesToDelete.length) return;
+    if (filesToDelete.length) showDeleteModal(filesToDelete);
-
-    renderTextList(deleteFileList, filesToDelete.map(f => f.name));
-    _pendingFiles = filesToDelete;
-    openModal(deleteModal);
   });
 }
 

src/renderer/index.html

@@ -43,7 +43,7 @@
       <span class="format-sep">_</span>
       <input type="number" id="input-digits" value="4" min="1" max="6" />
       <span class="format-sep">자리 순번</span>
-      <span style="color:var(--muted);font-size:12px;">→</span>
+      <span class="format-arrow">→</span>
       <span id="preview-name">photo_001.jpg</span>
       <span id="sel-count"></span>
       <span id="file-count">0개 파일</span>
@@ -53,7 +53,7 @@
       <div id="empty-state">
         <div class="icon">🗂️</div>
         <p>폴더를 열어 이미지를 불러오세요<br>
-        <span style="font-size:12px;opacity:.6;">JPG · PNG · GIF · BMP · TIFF · WEBP · HEIC</span></p>
+        <span class="empty-state-hint">JPG · PNG · GIF · BMP · TIFF · WEBP · HEIC</span></p>
       </div>
       <div id="grid" style="display:none;"></div>
     </section>
@@ -64,7 +64,7 @@
 <footer>
   <div class="status-dot" id="status-dot"></div>
   <span id="status-text">준비</span>
-  <span class="dir-path" id="dir-path" style="margin-left:auto;">폴더를 선택하세요</span>
+  <span class="dir-path" id="dir-path">폴더를 선택하세요</span>
 </footer>
 
 <div id="rubber-band"></div>

src/renderer/style.css

@@ -70,6 +70,7 @@ header h1 {
   font-family: 'JetBrains Mono', monospace;
   font-size: 11px; color: var(--muted); opacity: .7;
   max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  margin-left: auto;
 }
 
 /* ── 앱 레이아웃 ── */
@@ -105,12 +106,7 @@ aside {
 .file-explorer {
   flex: 1;
   overflow: auto;
-  scrollbar-width: thin;
-  scrollbar-color: var(--border) transparent;
 }
-.file-explorer::-webkit-scrollbar { width: 6px; height: 6px; }
-.file-explorer::-webkit-scrollbar-track { background: transparent; }
-.file-explorer::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
 
 /* ── 메인 콘텐츠 ── */
 main {
@@ -192,6 +188,7 @@ main {
 #input-prefix { width: 160px; }
 #input-digits { width: 50px; text-align: center; }
 .format-sep { color: var(--muted); font-family: 'JetBrains Mono', monospace; font-size: 14px; }
+.format-arrow { color: var(--muted); font-size: 12px; }
 #preview-name {
   font-family: 'JetBrains Mono', monospace; font-size: 13px;
   color: var(--accent2); background: rgba(124,106,247,.1);
@@ -201,15 +198,24 @@ main {
 #sel-count   { font-size: 12px; color: var(--accent); font-weight: 700; display: none; }
 #sel-count.visible { display: inline; }
 
+/* ── 공통 스크롤바 ── */
+.file-explorer,
+#grid-container {
+  scrollbar-width: thin;
+  scrollbar-color: var(--border) transparent;
+}
+.file-explorer::-webkit-scrollbar,
+#grid-container::-webkit-scrollbar { width: 6px; }
+.file-explorer::-webkit-scrollbar-track,
+#grid-container::-webkit-scrollbar-track { background: transparent; }
+.file-explorer::-webkit-scrollbar-thumb,
+#grid-container::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+
 /* ── 그리드 컨테이너 ── */
 #grid-container {
   flex: 1; overflow-y: auto; padding: 20px;
   position: relative;
-  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
 }
-#grid-container::-webkit-scrollbar { width: 6px; }
-#grid-container::-webkit-scrollbar-track { background: transparent; }
-#grid-container::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
 
 /* ── 그리드: 고정 열 폭 (--thumb-size) ── */
 #grid {
@@ -226,6 +232,7 @@ main {
 }
 #empty-state .icon { font-size: 64px; opacity: .3; }
 #empty-state p { font-size: 15px; text-align: center; line-height: 1.6; }
+.empty-state-hint { font-size: 12px; opacity: .6; }
 
 /* ── 카드 ── */
 .card {
@@ -527,7 +534,7 @@ footer span { font-size: 11px; color: var(--muted); }
   outline-offset: -2px;
 }
 
-/* ── 이동 모달 ── */
+/* ── 모달 공통 ── */
 .modal-overlay {
   position: fixed; inset: 0;
   background: rgba(0,0,0,.65); backdrop-filter: blur(4px);