jisangs/photo-renamer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

리펙토링: Standard HTML5 Semantic Layout 기준 구조로 변경

Browse Source
This commit is contained in:
Jisang Park
2026-05-15 13:08:13 +09:00
parent 62ffb01827
commit f75523146e
2 changed files with 40 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/index.html
+23 -23
View File
@@ -8,34 +8,34 @@
</head>
<body>
<div id="titlebar">
<header>
<h1>Photo Renamer</h1>
</div>
</header>
<div id="app-body">
<div class="app-layout">
<div id="sidebar">
<div id="sidebar-toolbar">
<button class="btn btn-warning" id="btn-open">폴더 열기 (O)</button>
<button class="btn btn-success" id="btn-rename" disabled>이름 변경 실행 (S)</button>
</div>
<div id="file-explorer">
<aside>
<nav class="sidebar-nav">
<button class="btn btn-warning" id="btn-open">📁 폴더 열기 (O)</button>
<button class="btn btn-success" id="btn-rename" disabled>✅ 이름 변경 실행 (S)</button>
</nav>
<section class="file-explorer">
<!-- 추후 구현 -->
</div>
</div>
</section>
</aside>
<div id="main-content">
<div id="content-toolbar">
<main>
<nav class="content-nav">
<div class="sort-group">
<button class="sort-btn" id="btn-sort-name">이름순</button>
<button class="sort-btn" id="btn-sort-date">날짜순</button>
</div>
<div class="separator"></div>
<button class="btn btn-info active" id="btn-preview-toggle">미리보기</button>
</div>
<button class="btn btn-info active" id="btn-preview-toggle">🔍 미리보기</button>
</nav>
<div id="format-bar">
<label>파일명 포맷</label>
<form id="format-bar">
<label for="input-prefix">파일명 포맷</label>
<input type="text" id="input-prefix" value="photo" placeholder="접두사" />
<span class="format-sep">_</span>
<input type="number" id="input-digits" value="4" min="1" max="6" />
@@ -44,25 +44,25 @@
<span id="preview-name">photo_001.jpg</span>
<span id="sel-count"></span>
<span id="file-count">0개 파일</span>
</div>
</form>
<div id="grid-container">
<section id="grid-container">
<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>
</div>
<div id="grid" style="display:none;"></div>
</div>
</div>
</section>
</main>
</div>
<div id="statusbar">
<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>
</div>
</footer>
<div id="rubber-band"></div>
<div id="drag-ghost"></div>