팝업창 제목 스타일 적용, 단축키 추가

src/renderer/rename.js

@@ -2,32 +2,28 @@ import { state }                                        from './state.js';
 import { showLoading, hideLoading, setStatus, showToast } from './ui.js';
 import { renderGrid }                                    from './grid.js';
 import * as history                                      from './history.js';
+import { openModal, closeModal }                         from './modal.js';
 
 const inputPrefix            = document.getElementById('input-prefix');
 const inputDigits            = document.getElementById('input-digits');
 const renameConfirmModal     = document.getElementById('rename-confirm-modal');
-const renameConfirmTitle     = document.getElementById('rename-confirm-title');
+const renameConfirmSelectedTitle = renameConfirmModal.querySelector('.rename-title-selected');
+const renameConfirmAllTitle      = renameConfirmModal.querySelector('.rename-title-all');
 const renameConfirmMsg       = document.getElementById('rename-confirm-msg');
 const renameConfirmWarning   = document.getElementById('rename-confirm-selection-warning');
 const renameConfirmList      = document.getElementById('rename-confirm-list');
-const renameConfirmCancelBtn = document.getElementById('rename-confirm-cancel');
 const renameConfirmOkBtn     = document.getElementById('rename-confirm-ok');
 const renameConflictModal    = document.getElementById('rename-conflict-modal');
-const renameConflictCloseBtn = document.getElementById('rename-conflict-close');
 const renameConflictList     = document.getElementById('rename-conflict-list');
 
 let _renameConfirmResolve = null;
 
-renameConfirmCancelBtn.addEventListener('click', () => {
-  closeRenameConfirm(false);
-});
-
 renameConfirmOkBtn.addEventListener('click', () => {
   closeRenameConfirm(true);
 });
 
-renameConflictCloseBtn.addEventListener('click', () => {
-  renameConflictModal.style.display = 'none';
+renameConfirmModal.addEventListener('modal:closed', () => {
+  resolveRenameConfirm(false);
 });
 
 export async function doRename() {
@@ -58,7 +54,7 @@ export async function doRename() {
         li.textContent = n;
         return li;
       }));
-      renameConflictModal.style.display = 'flex';
+      openModal(renameConflictModal);
       return;
     }
   }
@@ -108,7 +104,8 @@ export async function doRename() {
 }
 
 function showRenameConfirm({ count, examples, more, isPartial }) {
-  renameConfirmTitle.textContent = isPartial ? '선택된 이미지 저장' : '전체 이미지 저장';
+  renameConfirmSelectedTitle.hidden = !isPartial;
+  renameConfirmAllTitle.hidden = isPartial;
   renameConfirmMsg.textContent = `${count}개 파일을 이름 변경합니다. 계속하시겠습니까?`;
   renameConfirmWarning.style.display = isPartial ? 'block' : 'none';
 
@@ -120,8 +117,7 @@ function showRenameConfirm({ count, examples, more, isPartial }) {
     return li;
   }));
 
-  renameConfirmModal.style.display = 'flex';
-  renameConfirmOkBtn.focus();
+  openModal(renameConfirmModal);
 
   return new Promise(resolve => {
     _renameConfirmResolve = resolve;
@@ -129,7 +125,11 @@ function showRenameConfirm({ count, examples, more, isPartial }) {
 }
 
 function closeRenameConfirm(confirmed) {
-  renameConfirmModal.style.display = 'none';
+  resolveRenameConfirm(confirmed);
+  closeModal(renameConfirmModal);
+}
+
+function resolveRenameConfirm(confirmed) {
   if (_renameConfirmResolve) {
     _renameConfirmResolve(confirmed);
     _renameConfirmResolve = null;