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> </head>
<body> <body>
<div id="titlebar"> <header>
<h1>Photo Renamer</h1> <h1>Photo Renamer</h1>
</div> </header>
<div id="app-body"> <div class="app-layout">
<div id="sidebar"> <aside>
<div id="sidebar-toolbar"> <nav class="sidebar-nav">
<button class="btn btn-warning" id="btn-open">폴더 열기 (O)</button> <button class="btn btn-warning" id="btn-open">📁 폴더 열기 (O)</button>
<button class="btn btn-success" id="btn-rename" disabled>이름 변경 실행 (S)</button> <button class="btn btn-success" id="btn-rename" disabled>✅ 이름 변경 실행 (S)</button>
</div> </nav>
<div id="file-explorer"> <section class="file-explorer">
<!-- 추후 구현 --> <!-- 추후 구현 -->
</div> </section>
</div> </aside>
<div id="main-content"> <main>
<div id="content-toolbar"> <nav class="content-nav">
<div class="sort-group"> <div class="sort-group">
<button class="sort-btn" id="btn-sort-name">이름순</button> <button class="sort-btn" id="btn-sort-name">이름순</button>
<button class="sort-btn" id="btn-sort-date">날짜순</button> <button class="sort-btn" id="btn-sort-date">날짜순</button>
</div> </div>
<div class="separator"></div> <div class="separator"></div>
<button class="btn btn-info active" id="btn-preview-toggle">미리보기</button> <button class="btn btn-info active" id="btn-preview-toggle">🔍 미리보기</button>
</div> </nav>
<div id="format-bar"> <form id="format-bar">
<label>파일명 포맷</label> <label for="input-prefix">파일명 포맷</label>
<input type="text" id="input-prefix" value="photo" placeholder="접두사" /> <input type="text" id="input-prefix" value="photo" placeholder="접두사" />
<span class="format-sep">_</span> <span class="format-sep">_</span>
<input type="number" id="input-digits" value="4" min="1" max="6" /> <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="preview-name">photo_001.jpg</span>
<span id="sel-count"></span> <span id="sel-count"></span>
<span id="file-count">0개 파일</span> <span id="file-count">0개 파일</span>
</div> </form>
<div id="grid-container"> <section id="grid-container">
<div id="empty-state"> <div id="empty-state">
<div class="icon">🗂️</div> <div class="icon">🗂️</div>
<p>폴더를 열어 이미지를 불러오세요<br> <p>폴더를 열어 이미지를 불러오세요<br>
<span style="font-size:12px;opacity:.6;">JPG · PNG · GIF · BMP · TIFF · WEBP · HEIC</span></p> <span style="font-size:12px;opacity:.6;">JPG · PNG · GIF · BMP · TIFF · WEBP · HEIC</span></p>
</div> </div>
<div id="grid" style="display:none;"></div> <div id="grid" style="display:none;"></div>
</div> </section>
</div> </main>
</div> </div>
<div id="statusbar"> <footer>
<div class="status-dot" id="status-dot"></div> <div class="status-dot" id="status-dot"></div>
<span id="status-text">준비</span> <span id="status-text">준비</span>
<span class="dir-path" id="dir-path" style="margin-left:auto;">폴더를 선택하세요</span> <span class="dir-path" id="dir-path" style="margin-left:auto;">폴더를 선택하세요</span>
</div> </footer>
<div id="rubber-band"></div> <div id="rubber-band"></div>
<div id="drag-ghost"></div> <div id="drag-ghost"></div>
src/renderer/style.css
+17 -17
View File
@@ -33,7 +33,7 @@ body {
} }
/* ── 타이틀바 ── */ /* ── 타이틀바 ── */
#titlebar { header {
height: 44px; height: 44px;
background: var(--bg); background: var(--bg);
-webkit-app-region: drag; -webkit-app-region: drag;
@@ -45,10 +45,10 @@ body {
flex-shrink: 0; flex-shrink: 0;
position: relative; position: relative;
} }
body.fullscreen #titlebar { body.fullscreen header {
display: none; display: none;
} }
#titlebar h1 { header h1 {
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
@@ -64,8 +64,8 @@ body.fullscreen #titlebar {
max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
} }
/* ── 앱 바디 (사이드바 + 메인) ── */ /* ── 앱 레이아웃 ── */
#app-body { .app-layout {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex: 1; flex: 1;
@@ -73,8 +73,8 @@ body.fullscreen #titlebar {
} }
/* ── 사이드바 ── */ /* ── 사이드바 ── */
#sidebar { aside {
width: 300px; width: 400px;
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -82,7 +82,7 @@ body.fullscreen #titlebar {
background: var(--surface); background: var(--surface);
overflow: hidden; overflow: hidden;
} }
#sidebar-toolbar { .sidebar-nav {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 8px; gap: 8px;
@@ -90,22 +90,22 @@ body.fullscreen #titlebar {
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
flex-shrink: 0; flex-shrink: 0;
} }
#sidebar-toolbar .btn { .sidebar-nav .btn {
flex: 1; flex: 1;
justify-content: center; justify-content: center;
} }
#file-explorer { .file-explorer {
flex: 1; flex: 1;
overflow: auto; overflow: auto;
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: var(--border) transparent; scrollbar-color: var(--border) transparent;
} }
#file-explorer::-webkit-scrollbar { width: 6px; height: 6px; } .file-explorer::-webkit-scrollbar { width: 6px; height: 6px; }
#file-explorer::-webkit-scrollbar-track { background: transparent; } .file-explorer::-webkit-scrollbar-track { background: transparent; }
#file-explorer::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } .file-explorer::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
/* ── 메인 콘텐츠 ── */ /* ── 메인 콘텐츠 ── */
#main-content { main {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -113,7 +113,7 @@ body.fullscreen #titlebar {
} }
/* ── 콘텐츠 툴바 ── */ /* ── 콘텐츠 툴바 ── */
#content-toolbar { .content-nav {
display: flex; align-items: center; gap: 8px; display: flex; align-items: center; gap: 8px;
padding: 10px 16px; padding: 10px 16px;
background: var(--surface); background: var(--surface);
@@ -329,12 +329,12 @@ body.fullscreen #titlebar {
} }
/* ── 상태바 ── */ /* ── 상태바 ── */
#statusbar { footer {
height: 28px; background: var(--bg); height: 28px; background: var(--bg);
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
display: flex; align-items: center; padding: 0 16px; gap: 12px; flex-shrink: 0; display: flex; align-items: center; padding: 0 16px; gap: 12px; flex-shrink: 0;
} }
#statusbar span { font-size: 11px; color: var(--muted); } footer span { font-size: 11px; color: var(--muted); }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); } .status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.status-dot.ready { background: var(--success); } .status-dot.ready { background: var(--success); }