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

화면 상단에 app-workspace 영역을 만들고, 버튼들을 새로운 영역으로 이동

Browse Source
This commit is contained in:
Jisang Park
2026-05-22 16:49:40 +09:00
parent 77622f8c6c
commit 48f86566d0
2 changed files with 80 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/index.html
+49 -45
View File
@@ -12,59 +12,63 @@
<h1>Photo Renamer</h1>
</header>
<div class="app-layout">
<aside>
<nav class="sidebar-nav">
<section class="app-workspace" aria-label="사진 이름 변경 작업 영역">
<nav class="workspace-nav" aria-label="작업 도구">
<div class="workspace-actions">
<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">
<!-- 추후 구현 -->
</section>
</aside>
<div id="sidebar-resizer" aria-hidden="true"></div>
<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>
</div>
<div class="workspace-controls">
<button class="btn btn-info" id="btn-preview-toggle">미리보기</button>
<div class="separator"></div>
<button class="btn btn-ghost" id="btn-undo" disabled>↩ 되돌리기</button>
<button class="btn btn-ghost" id="btn-redo" disabled>↪ 다시하기</button>
</nav>
<form id="format-bar">
<label for="input-prefix">파일명 포맷</label>
<input type="text" id="input-prefix" value="photo_" placeholder="접두사" />
<input type="number" id="input-digits" value="4" min="1" max="6" />
<span class="format-sep">자리 순번</span>
<input type="text" id="input-postfix" value="_" maxlength="3" size="3" placeholder="접미사" />
<span class="format-arrow">→</span>
<span id="preview-name">photo_0001_.jpg</span>
<span id="sel-count"></span>
<span id="file-count">0개 파일</span>
</form>
<section id="grid-container">
<div id="empty-state">
<div class="icon">🗂️</div>
<p>폴더를 열어 이미지를 불러오세요<br>
<span class="empty-state-hint">JPG · PNG · GIF · BMP · TIFF · WEBP · HEIC</span></p>
<div class="separator"></div>
<div class="sort-group" aria-label="정렬">
<button class="sort-btn" id="btn-sort-name">이름순</button>
<button class="sort-btn" id="btn-sort-date">날짜순</button>
</div>
<div id="grid" style="display:none;"></div>
<div id="grid-scrollbar" aria-hidden="true">
<div id="grid-scrollbar-thumb"></div>
</div>
</section>
</main>
</div>
</nav>
</div>
<div class="app-layout">
<aside>
<section class="file-explorer" aria-label="폴더 탐색기">
<!-- 추후 구현 -->
</section>
</aside>
<div id="sidebar-resizer" aria-hidden="true"></div>
<main>
<form id="format-bar">
<label for="input-prefix">파일명 포맷</label>
<input type="text" id="input-prefix" value="photo_" placeholder="접두사" />
<input type="number" id="input-digits" value="4" min="1" max="6" />
<span class="format-sep">자리 순번</span>
<input type="text" id="input-postfix" value="_" maxlength="3" size="3" placeholder="접미사" />
<span class="format-arrow">→</span>
<span id="preview-name">photo_0001_.jpg</span>
<span id="sel-count"></span>
<span id="file-count">0개 파일</span>
</form>
<section id="grid-container">
<div id="empty-state">
<div class="icon">🗂️</div>
<p>폴더를 열어 이미지를 불러오세요<br>
<span class="empty-state-hint">JPG · PNG · GIF · BMP · TIFF · WEBP · HEIC</span></p>
</div>
<div id="grid" style="display:none;"></div>
<div id="grid-scrollbar" aria-hidden="true">
<div id="grid-scrollbar-thumb"></div>
</div>
</section>
</main>
</div>
</section>
<footer>
<div class="status-dot" id="status-dot"></div>
src/renderer/style.css
+31 -20
View File
@@ -74,11 +74,42 @@ header h1 {
margin-left: auto;
}
/* ── 작업 영역 ── */
.app-workspace {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
overflow: hidden;
}
.workspace-nav {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
background: var(--surface);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.workspace-actions,
.workspace-controls {
display: flex;
align-items: center;
gap: 8px;
}
.workspace-actions {
flex-shrink: 0;
}
.workspace-controls {
margin-left: auto;
}
/* ── 앱 레이아웃 ── */
.app-layout {
display: flex;
flex-direction: row;
flex: 1;
min-height: 0;
overflow: hidden;
}
@@ -121,18 +152,6 @@ body.resizing-sidebar {
cursor: col-resize;
user-select: none;
}
.sidebar-nav {
display: flex;
flex-direction: row;
gap: 8px;
padding: 10px 12px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.sidebar-nav .btn {
flex: 1;
justify-content: center;
}
.file-explorer {
flex: 1;
overflow: auto;
@@ -146,14 +165,6 @@ main {
overflow: hidden;
}
/* ── 콘텐츠 툴바 ── */
.content-nav {
display: flex; align-items: center; gap: 8px;
padding: 10px 16px;
background: var(--surface);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 14px; border-radius: 8px; border: none;