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

화면 레이아웃 수정 - 사이드바 + 메인 콘텐츠

Browse Source
This commit is contained in:
Jisang Park
2026-05-15 12:58:37 +09:00
parent 6e5867c075
commit 62ffb01827
2 changed files with 92 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/index.html
+42 -29
View File
@@ -12,37 +12,50 @@
<h1>Photo Renamer</h1>
</div>
<div id="toolbar">
<button class="btn btn-warning" id="btn-open"><span>📁</span>폴더 열기 (O)</button>
<button class="btn btn-success" id="btn-rename" disabled><span>✅</span>이름 변경 실행 (S)</button>
<div class="separator" style="margin-left:auto;"></div>
<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>
<div id="app-body">
<div id="format-bar">
<label>파일명 포맷</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" />
<span class="format-sep">자리 순번</span>
<span style="color:var(--muted);font-size:12px;">→</span>
<span id="preview-name">photo_001.jpg</span>
<span id="sel-count"></span>
<span id="file-count">0개 파일</span>
</div>
<div 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 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">
<!-- 추후 구현 -->
</div>
</div>
<div id="grid" style="display:none;"></div>
<div id="main-content">
<div id="content-toolbar">
<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>
<div id="format-bar">
<label>파일명 포맷</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" />
<span class="format-sep">자리 순번</span>
<span style="color:var(--muted);font-size:12px;">→</span>
<span id="preview-name">photo_001.jpg</span>
<span id="sel-count"></span>
<span id="file-count">0개 파일</span>
</div>
<div 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>
</div>
<div id="statusbar">