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">
src/renderer/style.css
+50 -2
View File
@@ -64,8 +64,56 @@ body.fullscreen #titlebar {
max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ── 툴바 ── */
#toolbar {
/* ── 앱 바디 (사이드바 + 메인) ── */
#app-body {
display: flex;
flex-direction: row;
flex: 1;
overflow: hidden;
}
/* ── 사이드바 ── */
#sidebar {
width: 300px;
flex-shrink: 0;
display: flex;
flex-direction: column;
border-right: 1px solid var(--border);
background: var(--surface);
overflow: hidden;
}
#sidebar-toolbar {
display: flex;
flex-direction: row;
gap: 8px;
padding: 10px 12px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
#sidebar-toolbar .btn {
flex: 1;
justify-content: center;
}
#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-content {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* ── 콘텐츠 툴바 ── */
#content-toolbar {
display: flex; align-items: center; gap: 8px;
padding: 10px 16px;
background: var(--surface);