djb-eapim/eapim-portal
1
0
Fork 0
Code Issues Pull Requests Actions 10 Packages Projects Releases Wiki Activity

수수료 관리 스타일 정리

Browse Source
This commit is contained in:
현성필
2025-12-01 15:38:28 +09:00
parent 67e64bc352
commit f3f313a105
2 changed files with 139 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/sass/pages/_commission.scss
+59 -9
View File
@@ -6,6 +6,12 @@
// ==================== Commission Management Page ====================
// Commission Container
.commission-container {
max-width: 1400px;
margin: 0 auto;
}
.wrap {
max-width: 1400px;
margin: 0 auto;
@@ -21,22 +27,24 @@
margin-bottom: $spacing-md;
}
// Search Box
.searchBox {
background: $gray-bg;
padding: $spacing-lg;
background: #f8f9fa;
padding: 20px;
border-radius: $border-radius-md;
margin-bottom: $spacing-lg;
margin-top: 20px;
margin-bottom: 20px;
&.row-two {
display: flex;
align-items: center;
gap: $spacing-lg;
gap: 20px;
flex-wrap: wrap;
}
label {
font-weight: $font-weight-medium;
color: $text-gray;
color: $text-dark;
min-width: 80px;
}
@@ -52,23 +60,40 @@
.form-inline {
display: flex;
align-items: center;
gap: $spacing-sm;
gap: 10px;
}
.btnBox {
margin-left: auto;
.btn + .btn {
margin-left: 5px;
}
}
// Print Button (initially hidden)
#printBtn {
display: none;
}
// Notice Text
.commission-notice {
color: #dc3545;
margin-top: 30px;
line-height: 1.6;
}
.voffset3 {
margin-top: 30px;
}
// Color Utilities
.color_red {
color: $accent-orange;
}
.color_blue {
color: $primary-blue;
color: #007bff;
}
.color_darkRed {
@@ -78,7 +103,7 @@
// Table Styles
.table-responsive {
overflow-x: auto;
margin-top: $spacing-3xl;
margin-top: 30px;
}
.table {
@@ -112,9 +137,33 @@
}
.border-type {
border: 2px solid $border-gray;
border: 2px solid #dee2e6;
}
// Commission Tables
.commission-table-wrapper {
margin-top: 30px;
.table {
border: 2px solid #dee2e6;
}
}
// Summary Row
.summary-row {
background-color: #fff3cd !important;
td {
font-weight: $font-weight-semibold;
}
.summary-amount {
font-size: 16px;
color: #007bff;
}
}
// Text Alignment Utilities
.text-center {
text-align: center;
}
@@ -127,6 +176,7 @@
text-align: left;
}
// Background Utilities
.bg-warning {
background-color: #fff3cd !important;
}
src/main/resources/templates/views/apps/commission/commissionManage.html
+80 -75
View File
@@ -1,73 +1,78 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/kjbank_base_layout}">
layout:decorate="~{layout/kjbank_title_layout}">
<head>
<title>수수료 관리</title>
</head>
<body>
<section layout:fragment="title">
<div class="page-title-banner">
<img th:src="@{/img/img_title_bg.png}" class="title-image">
<h1>기관 수수료 관리</h1>
</div>
</section>
<section layout:fragment="contentFragment" class="content">
<div class="row wrap" style="max-width: 1400px; margin: 0 auto; padding: 20px;">
<div class="col-md-12">
<h2><strong>기관 수수료 관리</strong></h2>
<div class="searchBox row-two">
<span class="form-inline">
<label for="providers">제공기관</label>
<select id="providers" class="form-control">
<option value="">- 선택 -</option>
<option value="1" selected>광주은행</option>
<option value="2">한국은행</option>
</select>
</span>
<span class="form-inline">
<label for="organizations">이용기관</label>
<select id="organizations" class="form-control">
<option value="">- 선택 -</option>
<option value="1" selected th:text="${organization?.orgName ?: 'ABC 핀테크'}"></option>
</select>
</span>
<span class="form-inline">
<label for="forYear">조회기간</label>
<select id="forYear" class="form-control">
<option value="">- 선택 -</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025" selected>2025</option>
</select> <span>년</span>&nbsp;&nbsp;
<select id="forMonth" class="form-control">
<option value="">- 선택 -</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected>3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select> <span>월</span>
</span>
<span class="btnBox">
<button type="button" class="btn btn-primary" onclick="loadData()">
<span class="fa fa-search"></span><span>조회</span>
</button>
<button type="button" id="printBtn" class="btn btn-secondary" onclick="printCommission()">
<span>청구서 출력</span>
</button>
</span>
</div>
<div class="searchBox row-two" style="background: #f8f9fa; padding: 20px; border-radius: 8px; margin-bottom: 20px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap;">
<span class="form-inline" style="display: flex; align-items: center; gap: 10px;">
<label for="providers" style="font-weight: 500; min-width: 80px;">제공기관</label>
<select id="providers" class="form-control">
<option value="">- 선택 -</option>
<option value="1" selected>광주은행</option>
<option value="2">한국은행</option>
</select>
</span>
<span class="form-inline" style="display: flex; align-items: center; gap: 10px;">
<label for="organizations" style="font-weight: 500; min-width: 80px;">이용기관</label>
<select id="organizations" class="form-control">
<option value="">- 선택 -</option>
<option value="1" selected th:text="${organization?.orgName ?: 'ABC 핀테크'}"></option>
</select>
</span>
<span class="form-inline" style="display: flex; align-items: center; gap: 10px;">
<label for="forYear" style="font-weight: 500; min-width: 80px;">조회기간</label>
<select id="forYear" class="form-control">
<option value="">- 선택 -</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025" selected>2025</option>
</select> <span>년</span>&nbsp;&nbsp;
<select id="forMonth" class="form-control">
<option value="">- 선택 -</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected>3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select> <span>월</span>
</span>
<span class="btnBox" style="margin-left: auto;">
<button type="button" class="btn btn-primary" onclick="loadData()">
<span class="fa fa-search"></span><span>조회</span>
</button>
<button type="button" id="printBtn" class="btn btn-secondary" style="margin-left: 5px; display:none;" onclick="printCommission()">
<span>청구서 출력</span>
</button>
</span>
</div>
<p class="voffset3" style="color: #dc3545; margin-top: 30px;">
<div class="commission-container">
<div class="col-md-12">
<p class="commission-notice">
이용기관은 매월 1~5일 전월 수수료 조회 가능하며, 10일 확정금액으로 정산됩니다. <br/>
금액이상시 담당자 연락 및 조정요청 하시기 바랍니다. (매월 1~5일 수수료 조회, 6~9일 수수료 조정 및 확정, 10일 정산)
</p>
<!-- API 수수료 테이블 -->
<div class="table-responsive voffset3" style="overflow-x: auto; margin-top: 30px;">
<table class="table table-bordered border-type" style="border: 2px solid #dee2e6;">
<div class="table-responsive">
<table class="table table-bordered border-type">
<colgroup>
<col style="width:6%"/>
<col style="width:16%"/>
@@ -106,7 +111,7 @@
</table>
<!-- 판매 수수료 테이블 -->
<table class="table table-bordered border-type voffset3" style="border: 2px solid #dee2e6; margin-top: 30px;">
<table class="table table-bordered border-type voffset3">
<colgroup>
<col style="width: 6%;">
<col style="width: 8%;">
@@ -153,7 +158,7 @@
</table>
<!-- 합계 테이블 -->
<table class="table table-bordered border-type voffset3" style="border: 2px solid #dee2e6; margin-top: 30px;">
<table class="table table-bordered border-type voffset3">
<colgroup>
<col/>
<col style="width: 13%"/>
@@ -179,14 +184,14 @@
</tr>
</thead>
<tbody>
<tr class="bg-warning" style="background-color: #fff3cd !important;">
<tr class="summary-row">
<td class="text-center"><strong id="totalTitle">합계</strong></td>
<td class="text-right"><strong id="totalSalesAmount1">-</strong></td>
<td class="text-right"><strong id="totalCount1">-</strong></td>
<td class="text-right"><strong class="color_blue" style="font-size:16px; color: #007bff;" id="totalAmount1">-</strong></td>
<td class="text-right"><strong class="summary-amount" id="totalAmount1">-</strong></td>
<td class="text-right"><strong id="totalSalesAmount2">-</strong></td>
<td class="text-right"><strong id="totalCount2">-</strong></td>
<td class="text-right"><strong class="color_blue" style="font-size:16px; color: #007bff;" id="totalAmount2">-</strong></td>
<td class="text-right"><strong class="summary-amount" id="totalAmount2">-</strong></td>
</tr>
</tbody>
</table>
@@ -259,11 +264,11 @@
<td class="text-right">${formatNumber(item.totalCount || 0)}</td>
<td class="text-right">${formatNumber(item.value || 0)}</td>
<td class="text-right">${formatNumber(item.minimumAmount || 0)}</td>
<td class="text-right"><span style="color: #8b0000;">${formatNumber(item.sum || 0)}</span></td>
<td class="text-right"><strong style="color: #007bff;">${formatNumber(item.totalCount2 || 0)}</strong></td>
<td class="text-right"><span class="color_darkRed">${formatNumber(item.sum || 0)}</span></td>
<td class="text-right"><strong class="color_blue">${formatNumber(item.totalCount2 || 0)}</strong></td>
<td class="text-right">${formatNumber(item.value2 || 0)}</td>
<td class="text-right">${formatNumber(item.minimumAmount2 || 0)}</td>
<td class="text-right"><span style="color: #8b0000;">${formatNumber(item.sum2 || 0)}</span></td>
<td class="text-right"><span class="color_darkRed">${formatNumber(item.sum2 || 0)}</span></td>
<td>${item.changeReason2 || ''}</td>
</tr>
`;
@@ -274,11 +279,11 @@
<td class="text-right">${formatNumber(item.totalCount || 0)}</td>
<td class="text-right">${formatNumber(item.value || 0)}</td>
<td class="text-right">${formatNumber(item.minimumAmount || 0)}</td>
<td class="text-right"><span style="color: #8b0000;">${formatNumber(item.sum || 0)}</span></td>
<td class="text-right"><strong style="color: #007bff;">${formatNumber(item.totalCount2 || 0)}</strong></td>
<td class="text-right"><span class="color_darkRed">${formatNumber(item.sum || 0)}</span></td>
<td class="text-right"><strong class="color_blue">${formatNumber(item.totalCount2 || 0)}</strong></td>
<td class="text-right">${formatNumber(item.value2 || 0)}</td>
<td class="text-right">${formatNumber(item.minimumAmount2 || 0)}</td>
<td class="text-right"><span style="color: #8b0000;">${formatNumber(item.sum2 || 0)}</span></td>
<td class="text-right"><span class="color_darkRed">${formatNumber(item.sum2 || 0)}</span></td>
<td>${item.changeReason2 || ''}</td>
</tr>
`;
@@ -296,11 +301,11 @@
<td class="text-right">${formatNumber(apiCount1)}</td>
<td class="text-right"></td>
<td class="text-right"></td>
<td class="text-right"><strong style="color: #007bff;">${formatNumber(apiTotal1)}</strong></td>
<td class="text-right"><strong class="color_blue">${formatNumber(apiTotal1)}</strong></td>
<td class="text-right">${formatNumber(apiCount2)}</td>
<td class="text-right"></td>
<td class="text-right"></td>
<td class="text-right"><strong style="color: #007bff;">${formatNumber(apiTotal2)}</strong></td>
<td class="text-right"><strong class="color_blue">${formatNumber(apiTotal2)}</strong></td>
<td></td>
</tr>
`;
@@ -329,11 +334,11 @@
<td class="text-right">${isPercentageFee ? (parseFloat(item.value || 0) * 100) + '%' : formatNumber(item.value || 0)}</td>
<td class="text-right">${formatNumber(item.totalCount || 0)}</td>
<td class="text-right">${formatNumber(item.minimumAmount || 0)}</td>
<td class="text-right"><span style="color: #8b0000;">${formatNumber(item.sum || 0)}</span></td>
<td class="text-right"><span class="color_darkRed">${formatNumber(item.sum || 0)}</span></td>
<td class="text-right">${isPercentageFee ? (parseFloat(item.value2 || 0) * 100) + '%' : formatNumber(item.value2 || 0)}</td>
<td class="text-right">${formatNumber(item.totalCount2 || 0)}</td>
<td class="text-right">${formatNumber(item.minimumAmount2 || 0)}</td>
<td class="text-right"><span style="color: #8b0000;">${formatNumber(item.sum2 || 0)}</span></td>
<td class="text-right"><span class="color_darkRed">${formatNumber(item.sum2 || 0)}</span></td>
<td>${item.changeReason2 || ''}</td>
</tr>
`;
@@ -348,11 +353,11 @@
<td class="text-right">${isPercentageFee ? (parseFloat(item.value || 0) * 100) + '%' : formatNumber(item.value || 0)}</td>
<td class="text-right">${formatNumber(item.totalCount || 0)}</td>
<td class="text-right">${formatNumber(item.minimumAmount || 0)}</td>
<td class="text-right"><span style="color: #8b0000;">${formatNumber(item.sum || 0)}</span></td>
<td class="text-right"><span class="color_darkRed">${formatNumber(item.sum || 0)}</span></td>
<td class="text-right">${isPercentageFee ? (parseFloat(item.value2 || 0) * 100) + '%' : formatNumber(item.value2 || 0)}</td>
<td class="text-right">${formatNumber(item.totalCount2 || 0)}</td>
<td class="text-right">${formatNumber(item.minimumAmount2 || 0)}</td>
<td class="text-right"><span style="color: #8b0000;">${formatNumber(item.sum2 || 0)}</span></td>
<td class="text-right"><span class="color_darkRed">${formatNumber(item.sum2 || 0)}</span></td>
<td>${item.changeReason2 || ''}</td>
</tr>
`;
@@ -372,11 +377,11 @@
<td class="text-right"></td>
<td class="text-right">${formatNumber(saleCount1)}</td>
<td></td>
<td class="text-right"><strong style="color: #007bff;">${formatNumber(saleTotal1)}</strong></td>
<td class="text-right"><strong class="color_blue">${formatNumber(saleTotal1)}</strong></td>
<td class="text-right"></td>
<td class="text-right">${formatNumber(saleCount2)}</td>
<td></td>
<td class="text-right"><strong style="color: #007bff;">${formatNumber(saleTotal2)}</strong></td>
<td class="text-right"><strong class="color_blue">${formatNumber(saleTotal2)}</strong></td>
<td></td>
</tr>
`;