리펙토링: Standard HTML5 Semantic Layout 기준 구조로 변경
This commit is contained in:
+23
-23
@@ -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>
|
||||
|
||||
+17
-17
@@ -33,7 +33,7 @@ body {
|
||||
}
|
||||
|
||||
/* ── 타이틀바 ── */
|
||||
#titlebar {
|
||||
header {
|
||||
height: 44px;
|
||||
background: var(--bg);
|
||||
-webkit-app-region: drag;
|
||||
@@ -45,10 +45,10 @@ body {
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
body.fullscreen #titlebar {
|
||||
body.fullscreen header {
|
||||
display: none;
|
||||
}
|
||||
#titlebar h1 {
|
||||
header h1 {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
@@ -64,8 +64,8 @@ body.fullscreen #titlebar {
|
||||
max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ── 앱 바디 (사이드바 + 메인) ── */
|
||||
#app-body {
|
||||
/* ── 앱 레이아웃 ── */
|
||||
.app-layout {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
@@ -73,8 +73,8 @@ body.fullscreen #titlebar {
|
||||
}
|
||||
|
||||
/* ── 사이드바 ── */
|
||||
#sidebar {
|
||||
width: 300px;
|
||||
aside {
|
||||
width: 400px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -82,7 +82,7 @@ body.fullscreen #titlebar {
|
||||
background: var(--surface);
|
||||
overflow: hidden;
|
||||
}
|
||||
#sidebar-toolbar {
|
||||
.sidebar-nav {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
@@ -90,22 +90,22 @@ body.fullscreen #titlebar {
|
||||
border-bottom: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
#sidebar-toolbar .btn {
|
||||
.sidebar-nav .btn {
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
#file-explorer {
|
||||
.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; }
|
||||
.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 {
|
||||
main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -113,7 +113,7 @@ body.fullscreen #titlebar {
|
||||
}
|
||||
|
||||
/* ── 콘텐츠 툴바 ── */
|
||||
#content-toolbar {
|
||||
.content-nav {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 10px 16px;
|
||||
background: var(--surface);
|
||||
@@ -329,12 +329,12 @@ body.fullscreen #titlebar {
|
||||
}
|
||||
|
||||
/* ── 상태바 ── */
|
||||
#statusbar {
|
||||
footer {
|
||||
height: 28px; background: var(--bg);
|
||||
border-top: 1px solid var(--border);
|
||||
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.ready { background: var(--success); }
|
||||
|
||||
|
||||
Reference in New Issue
Block a user