king/dbx-orderlist
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
53a2d222b025d186ded0b62acc8a48e44746d1bf
dbx-orderlist/static/index.html
T
king 53a2d222b0 ui: 프로필 헤더에서 이름 제거, 이메일/로그아웃 글자 흰색으로 
- index.html: profile-name-block 제거. 이름은 이메일 span 의 title(hover tooltip)로 보존.
- app.js: 이제 표시하지 않는 user-name 관련 코드 정리.
- style.css: profile-email 흰색 + 굵게, 로그아웃 버튼도 흰색 + 어울리는 반투명 배경.
2026-05-24 14:24:24 +09:00

419 lines
22 KiB
HTML
Raw Blame History

<!DOCTYPE None>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Order Management System</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/static/css/style.css?v=27">
<!-- FontAwesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
<!-- Background Elements for Glassmorphism Context -->
<div class="bg-shape shape-1"></div>
<div class="bg-shape shape-2"></div>
<div class="bg-shape shape-3"></div>
<!-- MAIN APP CONTAINER -->
<div class="app-container" id="app">
<!-- DASHBOARD SCREEN — 미인증 사용자는 서버 단에서 dbx-main 로그인으로 리다이렉트되므로
OMS 자체 로그인 UI 는 더 이상 존재하지 않는다 (SSO 원칙). -->
<div id="dashboard-screen" class="screen active">
<!-- Unified Top Header Bar -->
<header class="unified-header glass-panel fade-in">
<!-- 1. Logo Section -->
<div class="nav-brand">
<img src="/static/img/king_logo.png" alt="King" class="brand-logo-img">
</div>
<!-- 2. Search Section -->
<div class="nav-center-area">
<button id="btn-reset-search" class="btn btn-reset-search"><i
class="fa-solid fa-rotate-left"></i> 초기화</button>
<div class="search-grid-2x2">
<div class="input-group-original compact-field">
<label>이름</label>
<div class="input-wrapper mini-input">
<i class="fa-solid fa-user"></i>
<input type="text" id="search-name" placeholder="이름 입력...">
</div>
</div>
<div class="input-group-original compact-field">
<label>전화</label>
<div class="input-wrapper mini-input">
<i class="fa-solid fa-mobile-screen-button"></i>
<input type="text" id="search-phone" placeholder="전화 입력...">
</div>
</div>
<div class="input-group-original compact-field">
<label>송장</label>
<div class="input-wrapper mini-input">
<i class="fa-solid fa-barcode"></i>
<input type="text" id="search-tracking" placeholder="송장 입력...">
</div>
</div>
<div class="input-group-original address-field">
<label>주소</label>
<div class="input-wrapper mini-input">
<i class="fa-solid fa-map-location-dot"></i>
<input type="text" id="search-address" placeholder="주소 입력...">
</div>
</div>
<div class="input-group-original date-range-filter">
<label>날짜</label>
<div class="date-range-inputs">
<div class="input-wrapper mini-input">
<i class="fa-regular fa-calendar-days"></i>
<input type="date" id="search-start-date">
</div>
<span class="date-range-separator">~</span>
<div class="input-wrapper mini-input">
<i class="fa-regular fa-calendar-days"></i>
<input type="date" id="search-end-date">
</div>
</div>
</div>
</div>
<button id="btn-search" class="btn btn-primary btn-search-tall"><i
class="fa-solid fa-magnifying-glass"></i> 검색</button>
<div class="upload-section-mini"
style="display: flex; flex-direction: row; gap: 0.5rem; align-items: center;">
<label for="file-upload" class="custom-file-upload btn-upload-tall btn-excel">
<i class="fa-solid fa-file-excel"></i>
<span class="upload-label-text">
<span>데이터 추가</span>
<span>(.xls, .xlsx)</span>
</span>
</label>
<input id="file-upload" type="file" accept=".xls, .xlsx" />
</div>
</div>
<!-- 3. Profile Section — 메인 페이지 스타일 (이름 + 이메일 + 아바타 + 로그아웃 버튼) -->
<div class="nav-profile-area">
<button id="btn-data-management" class="icon-btn mini-icon-btn nav-tool-btn" title="데이터 관리"><i
class="fa-solid fa-database"></i></button>
<div class="profile-info">
<span class="profile-email" title="__USER_NAME__">__USER_EMAIL__</span>
<div class="profile-avatar">__USER_AVATAR__</div>
</div>
<button class="btn-logout-text" onclick="window.location.href='/logout'" title="로그아웃">
<i class="fa-solid fa-right-from-bracket"></i>
<span>로그아웃</span>
</button>
</div>
</header>
<!-- Main Content Area -->
<main class="main-content">
<!-- Results Panel -->
<div class="results-panel glass-panel fade-in delay-3">
<div class="results-header" style="flex-wrap: wrap; gap: 0.5rem;">
<h3 style="white-space: nowrap;">검색 결과 <span id="result-count" class="badge">0</span></h3>
<!-- Pagination Container -->
<div id="pagination-container" class="pagination"
style="flex: 1; padding: 0; justify-content: center; margin: 0;"></div>
<button id="btn-download-search-results" class="btn btn-success btn-search-download" disabled>
<i class="fa-solid fa-download"></i> 다운로드
</button>
</div>
<div class="table-container">
<table id="results-table">
<thead>
<tr>
<th>주문날짜<div class="resizer"></div>
</th>
<th>수령인명<div class="resizer"></div>
</th>
<th>상품코드<div class="resizer"></div>
</th>
<th>상품명<div class="resizer"></div>
</th>
<th>수량<div class="resizer"></div>
</th>
<th class="col-address">주소<div class="resizer"></div>
</th>
<th>휴대폰<div class="resizer"></div>
</th>
<th>송장번호<div class="resizer"></div>
</th>
<th>발주처<div class="resizer"></div>
</th>
<th class="col-order-no">주문번호(쇼핑몰)<div class="resizer"></div>
</th>
<th class="col-ext">주문목록<div class="resizer"></div>
</th>
</tr>
</thead>
<tbody id="results-body">
<tr>
<td colspan="11" class="empty-state">검색어를 입력하고 검색 버튼을 눌러주세요.</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
</div>
</div>
<!-- Order Contact Edit Modal -->
<div id="order-edit-modal" class="modal">
<div class="modal-content glass-panel order-edit-modal-content">
<span class="close-btn" id="order-edit-close">&times;</span>
<h2><i class="fa-solid fa-pen-to-square"></i> 주문 정보 수정</h2>
<div class="form-group">
<label for="edit-recipient-name">이름</label>
<input type="text" id="edit-recipient-name">
</div>
<div class="form-group">
<label for="edit-address">주소</label>
<textarea id="edit-address" rows="3"></textarea>
</div>
<div class="form-group">
<label for="edit-recipient-mobile">휴대폰 번호</label>
<input type="text" id="edit-recipient-mobile">
</div>
<div class="form-group">
<label for="edit-customer-note">고객 메모</label>
<textarea id="edit-customer-note" rows="3" placeholder="이름과 전화번호가 같은 고객 주문에 함께 표시됩니다."></textarea>
</div>
<div class="form-group">
<label for="edit-order-note">주문 메모</label>
<textarea id="edit-order-note" rows="3" placeholder="주문번호가 같은 주문에 함께 표시됩니다."></textarea>
</div>
<div class="modal-actions order-edit-actions">
<button id="btn-delete-order-edit" class="btn btn-danger">
<i class="fa-solid fa-trash-can"></i> 삭제
</button>
<div class="order-edit-action-group">
<button id="btn-open-return-request" class="btn btn-warning">
<i class="fa-solid fa-rotate-left"></i> 반품 입력
</button>
<button id="btn-cancel-order-edit" class="btn btn-secondary">취소</button>
<button id="btn-save-order-edit" class="btn btn-primary">
<i class="fa-solid fa-floppy-disk"></i> 저장
</button>
</div>
</div>
</div>
</div>
<!-- Return Request Modal -->
<div id="return-request-modal" class="modal">
<div class="modal-content glass-panel return-request-modal-content">
<span class="close-btn" id="return-request-close">&times;</span>
<h2><i class="fa-solid fa-rotate-left"></i> 반품 신청</h2>
<div class="form-group">
<label for="return-request-date">반품 신청일</label>
<input type="date" id="return-request-date">
</div>
<div class="form-group">
<label for="return-request-type">반품 사유/유형</label>
<select id="return-request-type">
<option value="단순변심">단순변심</option>
<option value="상품불량">상품불량</option>
<option value="오배송">오배송</option>
<option value="파손">파손</option>
<option value="맞교환">맞교환</option>
<option value="기타">기타</option>
</select>
</div>
<div class="form-group">
<label for="return-request-tracking">송장번호</label>
<select id="return-request-tracking"></select>
</div>
<div class="form-group">
<label for="return-request-remarks">비고 및 참고사항</label>
<textarea id="return-request-remarks" rows="4"></textarea>
</div>
<div class="modal-actions return-request-actions">
<button id="btn-cancel-return-request" class="btn btn-secondary">취소</button>
<button id="btn-send-return-request" class="btn btn-primary">
<i class="fa-solid fa-paper-plane"></i> 전송
</button>
</div>
</div>
</div>
<!-- Upload Progress Modal -->
<div id="upload-progress-modal" class="modal">
<div class="modal-content glass-panel upload-progress-modal-content">
<h2><i class="fa-solid fa-file-arrow-up"></i> 엑셀 데이터 업로드</h2>
<p id="upload-modal-message" class="upload-progress-message">업로드를 준비하는 중입니다...</p>
<div class="upload-progress-block">
<div class="upload-progress-header">
<span><i class="fa-solid fa-table"></i> 엑셀 데이터 처리</span>
<strong id="upload-data-progress-text">0%</strong>
</div>
<div class="upload-progress-track">
<div id="upload-data-progress-fill" class="upload-progress-fill upload-data-fill"></div>
</div>
<div id="upload-data-progress-count" class="upload-progress-count">0 / 0건</div>
</div>
<div class="upload-progress-block">
<div class="upload-progress-header">
<span><i class="fa-solid fa-magnifying-glass-chart"></i> DB 저장 및 검색 인덱스 반영</span>
<strong id="upload-index-progress-text">0%</strong>
</div>
<div class="upload-progress-track">
<div id="upload-index-progress-fill" class="upload-progress-fill upload-index-fill"></div>
</div>
<div id="upload-index-progress-count" class="upload-progress-count">0 / 0건</div>
</div>
<div class="modal-actions upload-progress-actions">
<button id="btn-close-upload-progress" class="btn btn-primary" disabled>닫기</button>
</div>
</div>
</div>
<!-- Data Management Modal -->
<div id="data-management-modal" class="modal">
<div class="modal-content glass-panel data-management-modal">
<span class="close-btn" id="data-management-close">&times;</span>
<h2 class="data-management-title">
<span class="title-main"><i class="fa-solid fa-database"></i> 데이터 관리</span>
<span id="db-size-badge" class="db-size-badge">용량 확인 중</span>
</h2>
<div class="management-grid management-grid-compact">
<section class="management-card">
<h3><i class="fa-solid fa-file-excel"></i> DB 데이터 엑셀 다운로드</h3>
<label class="inline-check">
<input type="checkbox" id="export-all-dates-chk">
전체 날짜 다운로드
</label>
<div id="export-date-range-container" class="modal-date-range">
<input type="date" id="export-start-date" class="mini-input">
<span>~</span>
<input type="date" id="export-end-date" class="mini-input">
</div>
<button id="btn-export-db" class="btn btn-success full-width-btn">
<i class="fa-solid fa-download"></i> 지정된 범위 데이터 다운로드
</button>
<div id="export-progress-container" class="export-progress-container">
<div class="progress-label-row">
<span id="export-progress-message">파일 생성 준비 중...</span>
<span id="export-progress-text">0%</span>
</div>
<div class="progress-bar-wrapper">
<div id="export-progress-fill"></div>
</div>
<small id="export-progress-count">0 / 0건</small>
</div>
<small>브라우저 다운로드 폴더로 엑셀 파일을 저장합니다.</small>
</section>
<section class="management-card">
<h3><i class="fa-solid fa-hard-drive"></i> DB 백업 및 복구</h3>
<div class="action-stack">
<button id="btn-backup-db" class="btn btn-success full-width-btn">
<i class="fa-solid fa-download"></i> 현재 DB 백업 다운로드
</button>
<button id="btn-download-event-log" class="btn btn-secondary full-width-btn">
<i class="fa-solid fa-file-lines"></i> 이벤트 로그 다운로드
</button>
<input id="restore-db-file" type="file" accept=".db,.sqlite,.sqlite3">
<label for="restore-db-file" class="btn btn-primary full-width-btn">
<i class="fa-solid fa-upload"></i> 백업 DB 파일로 복구
</label>
</div>
<small>복구 시 현재 DB는 자동으로 안전백업 후 교체됩니다.</small>
</section>
<section class="management-card">
<h3><i class="fa-solid fa-broom"></i> 데이터베이스 최적화</h3>
<button id="btn-optimize-db" class="btn btn-primary full-width-btn">
<i class="fa-solid fa-broom"></i> 데이터베이스 최적화
</button>
<div id="optimize-progress-container" class="optimize-progress-container">
<div class="progress-label-row">
<span>최적화 진행 중...</span>
<span id="optimize-progress-text">0%</span>
</div>
<div class="progress-bar-wrapper">
<div id="optimize-progress-fill"></div>
</div>
</div>
<small>DB 파일 용량을 줄이고 내부 저장 공간을 정리합니다.</small>
</section>
<section class="management-card">
<h3><i class="fa-solid fa-repeat"></i> 반복 구매 리스트</h3>
<div class="modal-date-range">
<input type="date" id="repeat-start-date" class="mini-input">
<span>~</span>
<input type="date" id="repeat-end-date" class="mini-input">
</div>
<div class="repeat-purchase-row">
<input type="number" id="repeat-min-count" class="mini-input" min="1" value="3">
<span>회 이상 구매</span>
</div>
<button id="btn-download-repeat-purchase" class="btn btn-success full-width-btn">
<i class="fa-solid fa-download"></i> 반복 구매 주문 다운로드
</button>
<small>선택 기간에서 이름+전화번호 기준으로 구매일수가 지정 회수 이상인 주문을 저장합니다.</small>
</section>
<section class="management-card danger-zone">
<h3><i class="fa-solid fa-calendar-xmark"></i> 날짜 범위 데이터 삭제</h3>
<div class="modal-date-range">
<input type="date" id="delete-start-date" class="mini-input">
<span>~</span>
<input type="date" id="delete-end-date" class="mini-input">
</div>
<button id="btn-delete-date-range-orders" class="btn btn-danger full-width-btn">
<i class="fa-solid fa-calendar-xmark"></i> 지정된 범위 주문 데이터 삭제
</button>
<div id="delete-date-progress-container" class="delete-progress-container">
<div class="progress-label-row">
<span id="delete-date-progress-message">삭제 진행</span>
<span id="delete-date-progress-text">0%</span>
</div>
<div class="progress-bar-wrapper">
<div id="delete-date-progress-fill"></div>
</div>
<small id="delete-date-progress-count">0 / 0건</small>
<div class="progress-label-row delete-cleanup-row">
<span id="delete-cleanup-progress-message">정리 대기</span>
<span id="delete-cleanup-progress-text">0%</span>
</div>
<div class="progress-bar-wrapper">
<div id="delete-cleanup-progress-fill"></div>
</div>
</div>
<small>주문날짜 기준으로 선택한 기간의 데이터만 삭제합니다. 삭제 전 DB 백업을 권장합니다.</small>
</section>
<section class="management-card danger-zone">
<h3><i class="fa-solid fa-trash-can"></i> 전체 데이터 삭제</h3>
<button id="btn-delete-all-orders" class="btn btn-danger full-width-btn">
<i class="fa-solid fa-trash-can"></i> 전체 주문 데이터 삭제
</button>
<small>삭제 전 DB 백업을 먼저 다운로드하는 것을 권장합니다.</small>
</section>
</div>
</div>
</div>
<!-- Toast Notifications -->
<div id="toast-container"></div>
<script>
window.APP_BASE_PATH = "__APP_BASE_PATH__";
</script>
<script src="/static/js/app.js?v=32"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink