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 Management Page ====================
// Commission Container
.commission-container {
max-width: 1400px;
margin: 0 auto;
}
.wrap { .wrap {
max-width: 1400px; max-width: 1400px;
margin: 0 auto; margin: 0 auto;
@@ -21,22 +27,24 @@
margin-bottom: $spacing-md; margin-bottom: $spacing-md;
} }
// Search Box
.searchBox { .searchBox {
background: $gray-bg; background: #f8f9fa;
padding: $spacing-lg; padding: 20px;
border-radius: $border-radius-md; border-radius: $border-radius-md;
margin-bottom: $spacing-lg; margin-top: 20px;
margin-bottom: 20px;
&.row-two { &.row-two {
display: flex; display: flex;
align-items: center; align-items: center;
gap: $spacing-lg; gap: 20px;
flex-wrap: wrap; flex-wrap: wrap;
} }
label { label {
font-weight: $font-weight-medium; font-weight: $font-weight-medium;
color: $text-gray; color: $text-dark;
min-width: 80px; min-width: 80px;
} }
@@ -52,23 +60,40 @@
.form-inline { .form-inline {
display: flex; display: flex;
align-items: center; align-items: center;
gap: $spacing-sm; gap: 10px;
} }
.btnBox { .btnBox {
margin-left: auto; 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 { .voffset3 {
margin-top: 30px; margin-top: 30px;
} }
// Color Utilities
.color_red { .color_red {
color: $accent-orange; color: $accent-orange;
} }
.color_blue { .color_blue {
color: $primary-blue; color: #007bff;
} }
.color_darkRed { .color_darkRed {
@@ -78,7 +103,7 @@
// Table Styles // Table Styles
.table-responsive { .table-responsive {
overflow-x: auto; overflow-x: auto;
margin-top: $spacing-3xl; margin-top: 30px;
} }
.table { .table {
@@ -112,9 +137,33 @@
} }
.border-type { .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-center {
text-align: center; text-align: center;
} }
@@ -127,6 +176,7 @@
text-align: left; text-align: left;
} }
// Background Utilities
.bg-warning { .bg-warning {
background-color: #fff3cd !important; background-color: #fff3cd !important;
} }
src/main/resources/templates/views/apps/commission/commissionManage.html
+80 -75
View File
@@ -1,73 +1,78 @@
<!DOCTYPE html> <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" <html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/kjbank_base_layout}"> layout:decorate="~{layout/kjbank_title_layout}">
<head> <head>
<title>수수료 관리</title> <title>수수료 관리</title>
</head> </head>
<body> <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"> <section layout:fragment="contentFragment" class="content">
<div class="row wrap" style="max-width: 1400px; margin: 0 auto; padding: 20px;"> <div class="searchBox row-two">
<div class="col-md-12"> <span class="form-inline">
<h2><strong>기관 수수료 관리</strong></h2> <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;"> <div class="commission-container">
<span class="form-inline" style="display: flex; align-items: center; gap: 10px;"> <div class="col-md-12">
<label for="providers" style="font-weight: 500; min-width: 80px;">제공기관</label> <p class="commission-notice">
<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;">
이용기관은 매월 1~5일 전월 수수료 조회 가능하며, 10일 확정금액으로 정산됩니다. <br/> 이용기관은 매월 1~5일 전월 수수료 조회 가능하며, 10일 확정금액으로 정산됩니다. <br/>
금액이상시 담당자 연락 및 조정요청 하시기 바랍니다. (매월 1~5일 수수료 조회, 6~9일 수수료 조정 및 확정, 10일 정산) 금액이상시 담당자 연락 및 조정요청 하시기 바랍니다. (매월 1~5일 수수료 조회, 6~9일 수수료 조정 및 확정, 10일 정산)
</p> </p>
<!-- API 수수료 테이블 --> <!-- API 수수료 테이블 -->
<div class="table-responsive voffset3" style="overflow-x: auto; margin-top: 30px;"> <div class="table-responsive">
<table class="table table-bordered border-type" style="border: 2px solid #dee2e6;"> <table class="table table-bordered border-type">
<colgroup> <colgroup>
<col style="width:6%"/> <col style="width:6%"/>
<col style="width:16%"/> <col style="width:16%"/>
@@ -106,7 +111,7 @@
</table> </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> <colgroup>
<col style="width: 6%;"> <col style="width: 6%;">
<col style="width: 8%;"> <col style="width: 8%;">
@@ -153,7 +158,7 @@
</table> </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> <colgroup>
<col/> <col/>
<col style="width: 13%"/> <col style="width: 13%"/>
@@ -179,14 +184,14 @@
</tr> </tr>
</thead> </thead>
<tbody> <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-center"><strong id="totalTitle">합계</strong></td>
<td class="text-right"><strong id="totalSalesAmount1">-</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 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="totalSalesAmount2">-</strong></td>
<td class="text-right"><strong id="totalCount2">-</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> </tr>
</tbody> </tbody>
</table> </table>
@@ -259,11 +264,11 @@
<td class="text-right">${formatNumber(item.totalCount || 0)}</td> <td class="text-right">${formatNumber(item.totalCount || 0)}</td>
<td class="text-right">${formatNumber(item.value || 0)}</td> <td class="text-right">${formatNumber(item.value || 0)}</td>
<td class="text-right">${formatNumber(item.minimumAmount || 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"><strong style="color: #007bff;">${formatNumber(item.totalCount2 || 0)}</strong></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.value2 || 0)}</td>
<td class="text-right">${formatNumber(item.minimumAmount2 || 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> <td>${item.changeReason2 || ''}</td>
</tr> </tr>
`; `;
@@ -274,11 +279,11 @@
<td class="text-right">${formatNumber(item.totalCount || 0)}</td> <td class="text-right">${formatNumber(item.totalCount || 0)}</td>
<td class="text-right">${formatNumber(item.value || 0)}</td> <td class="text-right">${formatNumber(item.value || 0)}</td>
<td class="text-right">${formatNumber(item.minimumAmount || 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"><strong style="color: #007bff;">${formatNumber(item.totalCount2 || 0)}</strong></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.value2 || 0)}</td>
<td class="text-right">${formatNumber(item.minimumAmount2 || 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> <td>${item.changeReason2 || ''}</td>
</tr> </tr>
`; `;
@@ -296,11 +301,11 @@
<td class="text-right">${formatNumber(apiCount1)}</td> <td class="text-right">${formatNumber(apiCount1)}</td>
<td class="text-right"></td> <td class="text-right"></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">${formatNumber(apiCount2)}</td>
<td class="text-right"></td> <td class="text-right"></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> <td></td>
</tr> </tr>
`; `;
@@ -329,11 +334,11 @@
<td class="text-right">${isPercentageFee ? (parseFloat(item.value || 0) * 100) + '%' : formatNumber(item.value || 0)}</td> <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.totalCount || 0)}</td>
<td class="text-right">${formatNumber(item.minimumAmount || 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">${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.totalCount2 || 0)}</td>
<td class="text-right">${formatNumber(item.minimumAmount2 || 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> <td>${item.changeReason2 || ''}</td>
</tr> </tr>
`; `;
@@ -348,11 +353,11 @@
<td class="text-right">${isPercentageFee ? (parseFloat(item.value || 0) * 100) + '%' : formatNumber(item.value || 0)}</td> <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.totalCount || 0)}</td>
<td class="text-right">${formatNumber(item.minimumAmount || 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">${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.totalCount2 || 0)}</td>
<td class="text-right">${formatNumber(item.minimumAmount2 || 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> <td>${item.changeReason2 || ''}</td>
</tr> </tr>
`; `;
@@ -372,11 +377,11 @@
<td class="text-right"></td> <td class="text-right"></td>
<td class="text-right">${formatNumber(saleCount1)}</td> <td class="text-right">${formatNumber(saleCount1)}</td>
<td></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"></td>
<td class="text-right">${formatNumber(saleCount2)}</td> <td class="text-right">${formatNumber(saleCount2)}</td>
<td></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> <td></td>
</tr> </tr>
`; `;