998 lines
29 KiB
PHP
998 lines
29 KiB
PHP
<?= $this->extend('layouts/main') ?>
|
||
|
||
<?= $this->section('content') ?>
|
||
|
||
<?php
|
||
/**
|
||
* 문자열/JSON/배열 모두 받아서 "항목 리스트"로 정규화
|
||
* - JSON 배열 문자열: '["a","b"]'
|
||
* - 개행 문자열: "a\nb"
|
||
* - 배열: ["a","b"]
|
||
*/
|
||
function normalize_lines($v): array
|
||
{
|
||
if ($v === null)
|
||
return [];
|
||
|
||
// 이미 배열이면 그대로
|
||
if (is_array($v)) {
|
||
return array_values(array_filter(array_map('trim', $v), fn($x) => $x !== ''));
|
||
}
|
||
|
||
$s = trim((string) $v);
|
||
if ($s === '')
|
||
return [];
|
||
|
||
// JSON 배열 문자열이면 decode
|
||
if ($s[0] === '[') {
|
||
$decoded = json_decode($s, true);
|
||
if (json_last_error() === JSON_ERROR_NONE && is_array($decoded)) {
|
||
return array_values(array_filter(array_map('trim', $decoded), fn($x) => $x !== ''));
|
||
}
|
||
}
|
||
|
||
// 개행 기반 분리
|
||
$lines = preg_split("/\r\n|\r|\n/", $s);
|
||
return array_values(array_filter(array_map('trim', $lines), fn($x) => $x !== ''));
|
||
}
|
||
|
||
/**
|
||
* 상세 섹션 렌더
|
||
*/
|
||
function render_detail_section(string $title, $value): string
|
||
{
|
||
$lines = normalize_lines($value);
|
||
if (empty($lines))
|
||
return '';
|
||
|
||
$html = '<div class="detail-row">';
|
||
$html .= '<div class="detail-title">' . esc($title) . '</div>';
|
||
$html .= '<ul class="detail-list">';
|
||
foreach ($lines as $line) {
|
||
$html .= '<li>' . esc($line) . '</li>';
|
||
}
|
||
$html .= '</ul></div>';
|
||
|
||
return $html;
|
||
}
|
||
|
||
/**
|
||
* 원리금균등상환
|
||
* @param float $principal
|
||
* @param float $annualRate
|
||
* @param int $years
|
||
* @return float|int
|
||
*/
|
||
function calcEqualPaymentMonthly(float $principal, float $annualRate, int $years): float
|
||
{
|
||
$n = $years * 12;
|
||
$r = ($annualRate / 100.0) / 12.0;
|
||
|
||
if ($n <= 0)
|
||
return 0.0;
|
||
if (abs($r) < 1e-12)
|
||
return $principal / $n;
|
||
|
||
$pow = pow(1.0 + $r, $n);
|
||
return ($principal * $r * $pow) / ($pow - 1.0);
|
||
}
|
||
|
||
/**
|
||
* 원금균등상환
|
||
* @param float $principal
|
||
* @param float $annualRate
|
||
* @param int $years
|
||
* @return float|int
|
||
*/
|
||
function calcEqualPrincipalAvgMonthly(float $principal, float $annualRate, int $years): float
|
||
{
|
||
$n = $years * 12;
|
||
$r = ($annualRate / 100.0) / 12.0;
|
||
|
||
if ($n <= 0)
|
||
return 0.0;
|
||
|
||
// 이자합(원금균등): P*r*(n+1)/2 (매달 원금이 선형 감소)
|
||
$totalInterest = $principal * $r * ($n + 1) / 2.0;
|
||
|
||
$totalPayment = $principal + $totalInterest;
|
||
return $totalPayment / $n;
|
||
}
|
||
|
||
function won(float $v): string
|
||
{
|
||
return number_format((int) round($v));
|
||
}
|
||
?>
|
||
|
||
<style>
|
||
.product_list {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
display: grid;
|
||
gap: 12px;
|
||
}
|
||
|
||
.product-card {
|
||
border: 1px solid #e9ecef;
|
||
border-radius: 12px;
|
||
padding: 14px;
|
||
background: #fff;
|
||
}
|
||
|
||
.title-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
align-items: center;
|
||
}
|
||
|
||
.bank_name {
|
||
font-weight: 700;
|
||
text-decoration: none;
|
||
color: #00f;
|
||
}
|
||
|
||
.product_name {
|
||
font-weight: 600;
|
||
}
|
||
|
||
.badges {
|
||
/*margin-left: auto;*/
|
||
display: flex;
|
||
gap: 6px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.label_icon {
|
||
display: inline-block;
|
||
color: #555;
|
||
margin: 4px 0 0 5px;
|
||
border-radius: 15px;
|
||
-webkit-border-radius: 15px;
|
||
font-size: 11px;
|
||
line-height: 13px;
|
||
border: 1px solid #555;
|
||
padding: 2px 6px;
|
||
vertical-align: top;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.rate_detail {
|
||
display: flex;
|
||
gap: 14px;
|
||
margin: 10px 0 0;
|
||
}
|
||
|
||
.rate_detail .rate {
|
||
display: flex;
|
||
gap: 6px;
|
||
align-items: baseline;
|
||
}
|
||
|
||
.rate_detail dt {
|
||
color: #6c757d;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.rate_detail dd {
|
||
margin: 0;
|
||
}
|
||
|
||
.rate_text {
|
||
font-size: 16px;
|
||
color: #F58027;
|
||
}
|
||
|
||
.text_red {
|
||
font-size: 14px;
|
||
color: #F58027;
|
||
}
|
||
|
||
.product-actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.collapse-box {
|
||
margin-top: 12px;
|
||
border-top: 1px dashed #e9ecef;
|
||
padding-top: 12px;
|
||
}
|
||
|
||
.detail-grid {
|
||
display: grid;
|
||
gap: 12px;
|
||
}
|
||
|
||
.detail-row {
|
||
border: 1px solid #f1f3f5;
|
||
border-radius: 10px;
|
||
padding: 12px;
|
||
background: #fcfcfd;
|
||
}
|
||
|
||
.detail-title {
|
||
font-weight: 800;
|
||
font-size: 13px;
|
||
color: #343a40;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.detail-list {
|
||
margin: 0;
|
||
padding-left: 18px;
|
||
color: #495057;
|
||
}
|
||
|
||
.detail-list li {
|
||
margin: 3px 0;
|
||
}
|
||
|
||
.detail-foot {
|
||
margin-top: 10px;
|
||
font-size: 12px;
|
||
color: #868e96;
|
||
}
|
||
|
||
table {
|
||
text-align: center;
|
||
}
|
||
|
||
.rate-cell {
|
||
vertical-align: middle !important;
|
||
/* fallback */
|
||
padding: 12px 10px;
|
||
}
|
||
|
||
.rate-cell {
|
||
display: grid;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
/* 세로 가운데 */
|
||
align-items: flex-start;
|
||
/* 왼쪽 정렬 */
|
||
height: 100%;
|
||
}
|
||
|
||
.rate-cell span {
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.rate-cell p {
|
||
margin: 2px 0 0;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
/* ===== Owl wrapper ===== */
|
||
.owl-wrap {
|
||
position: relative;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
min-width: 0;
|
||
}
|
||
|
||
/* Owl 내부 overflow/폭 안정화 */
|
||
.owl-wrap .owl-stage-outer {
|
||
overflow: hidden;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* Owl 기본 nav/dots는 우리가 커스텀 컨트롤을 쓰므로 숨김 */
|
||
.product-carousel .owl-nav,
|
||
.product-carousel .owl-dots {
|
||
display: none !important;
|
||
}
|
||
|
||
/* ===== 컨트롤 바 ===== */
|
||
.owl-controls-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 12px;
|
||
margin-top: 14px;
|
||
user-select: none;
|
||
}
|
||
|
||
/* 화살표 버튼 */
|
||
.owl-controls-bar .owl-btn {
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: 999px;
|
||
border: 1px solid #dee2e6;
|
||
background: #fff;
|
||
color: #212529;
|
||
font-size: 28px;
|
||
/* 아이콘 크기 */
|
||
line-height: 1;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.owl-controls-bar .owl-btn:hover {
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
.owl-controls-bar .owl-btn:active {
|
||
transform: translateY(1px);
|
||
}
|
||
|
||
/* 비활성(맨 처음/맨 끝) */
|
||
.owl-controls-bar .owl-btn.is-disabled {
|
||
opacity: 0.45;
|
||
cursor: default;
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* 1/N 카운터 */
|
||
.owl-controls-bar .owl-counter {
|
||
min-width: 74px;
|
||
text-align: center;
|
||
font-weight: 700;
|
||
color: #495057;
|
||
}
|
||
|
||
/* 모바일 터치 영역 살짝 키우기 */
|
||
@media (max-width: 576px) {
|
||
.owl-controls-bar .owl-btn {
|
||
width: 50px;
|
||
height: 50px;
|
||
font-size: 30px;
|
||
}
|
||
|
||
.owl-controls-bar .owl-counter {
|
||
min-width: 84px;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<div class="d-grid">
|
||
<div class="mb-3 card">
|
||
<div class="tabs-lg-alternate card-header">
|
||
<ul class="nav nav-justified">
|
||
<li class="nav-item">
|
||
<a data-bs-toggle="tab" href="#tab-eg9-0" class="active nav-link" data-cd="all">
|
||
<div class="widget-number">전체</div>
|
||
</a>
|
||
</li>
|
||
<?php foreach ($place as $p): ?>
|
||
<li class="nav-item">
|
||
<a data-bs-toggle="tab" href="#tab-eg9-0" class="nav-link" data-cd="<?= $p['cd'] ?>">
|
||
<div class="widget-number"><?= $p['cd_nm'] ?></div>
|
||
</a>
|
||
</li>
|
||
<?php endforeach; ?>
|
||
</ul>
|
||
</div>
|
||
<div class="tab-content">
|
||
<div class="tab-pane active" id="tab-eg9-0" role="tabpanel">
|
||
<div class="card-body">
|
||
<?php
|
||
// $data: 상품 리스트 배열이라고 가정
|
||
$chunks = array_chunk($data, 5); // 5개씩 슬라이드 1장
|
||
?>
|
||
|
||
<div class="owl-wrap">
|
||
<div class="owl-carousel product-carousel">
|
||
<?php foreach ($chunks as $pageIdx => $items): ?>
|
||
<div class="item">
|
||
<ul class="product_list">
|
||
<?php foreach ($items as $d): ?>
|
||
<li class="product-card">
|
||
<div class="product-head">
|
||
<div class="title-row">
|
||
<a href="<?= esc($d['bank_url'] ?? '#') ?>" class="bank_name" target="_blank" rel="noopener">
|
||
<?= esc($d['bank'] ?? '') ?>
|
||
</a>
|
||
<span class="product_name"><?= esc($d['product'] ?? '') ?></span>
|
||
|
||
<div class="badges">
|
||
<?php if ($d['chg_yn'] == "Y"): ?>
|
||
<span class="label_icon">변동금리</span>
|
||
<?php endif; ?>
|
||
<?php if ($d['split_yn'] == "Y"): ?>
|
||
<span class="label_icon">분할상환</span>
|
||
<?php endif; ?>
|
||
</div>
|
||
</div>
|
||
|
||
<dl class="rate_detail">
|
||
<div class="rate">
|
||
<dt>최저</dt>
|
||
<dd><strong class="rate_text"><?= esc($d['min_rate'] ?? '-') ?>%</strong></dd>
|
||
</div>
|
||
<div class="rate">
|
||
<dt>최고</dt>
|
||
<dd><strong class="rate_text"><?= esc($d['max_rate'] ?? '-') ?>%</strong></dd>
|
||
</div>
|
||
<div class="rate">
|
||
<dt>평균</dt>
|
||
<dd><strong class="rate_text"><?= esc($d['avg_rate'] ?? '-') ?>%</strong></dd>
|
||
</div>
|
||
</dl>
|
||
</div>
|
||
|
||
<!-- 액션 버튼 -->
|
||
<div class="product-actions">
|
||
<button type="button" class="btn btn-sm btn-outline-secondary js-toggle"
|
||
data-target="#detail-<?= $d['seq'] ?>">
|
||
상세보기
|
||
</button>
|
||
<button type="button" class="btn btn-sm btn-outline-secondary js-toggle"
|
||
data-target="#pay-<?= $d['seq'] ?>">
|
||
월평균상환액
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 상세 (접기/펼치기) -->
|
||
<div class="collapse-box" id="detail-<?= $d['seq'] ?>" hidden>
|
||
<div class="detail-grid">
|
||
<?= render_detail_section('대출부대비용', $d['extra_fee'] ?? null) ?>
|
||
<?= render_detail_section('연체이자율', $d['late_rate'] ?? null) ?>
|
||
<?= render_detail_section('가입방식', $d['join_method'] ?? null) ?>
|
||
<?= render_detail_section('중도상환수수료', $d['prepay_fee'] ?? null) ?>
|
||
<?= render_detail_section('대출한도', $d['loan_limit'] ?? null) ?>
|
||
<div class="detail-row">
|
||
<div class="detail-title">상품문의</div>
|
||
<ul class="detail-list">
|
||
<li>
|
||
<?= $d['bank'] ?> <?= $d['tel'] ?? '' ?>
|
||
</li>
|
||
<li><a href="https://m.map.naver.com/search2/search.nhn?query=<?= $d['bank'] ?>"
|
||
target="_blank">지점찾기</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<?php if (!empty($d['prov_date'])): ?>
|
||
<div class="detail-foot">금융회사 최종 제공일
|
||
<?= esc($d['prov_date']) ?>.
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
</div>
|
||
|
||
<!-- 월평균상환액 -->
|
||
<div class="collapse-box" id="pay-<?= $d['seq'] ?>" hidden>
|
||
<?php
|
||
$basis = $d['pay_basis'] ?? '1억원 대출, 10년 분할 상환시';
|
||
?>
|
||
<div class="pay-box">
|
||
<div class="detail-row" style="margin-bottom: 15px;">
|
||
<ul class="detail-list">
|
||
<li>
|
||
<?= esc($basis) ?>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<table class="table table-bordered">
|
||
<thead>
|
||
<tr>
|
||
<th rowspan="2" style="width: 30%;">금리</th>
|
||
<th colspan="2">월평균 상환액</th>
|
||
</tr>
|
||
<tr>
|
||
<th style="width: 35%;">원리금 균등상환</th>
|
||
<th style="width: 35%;">원금 균등상환</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="rate-cell">
|
||
<span class="text_black">당월최저</span>
|
||
<p><strong class="text_red"><?= $d['min_rate'] ?>%</strong></p>
|
||
</td>
|
||
<td>
|
||
<strong><?= won(calcEqualPaymentMonthly(100000000, $d['min_rate'], 10)) ?></strong>원
|
||
</td>
|
||
<td><strong>
|
||
<?= won(calcEqualPrincipalAvgMonthly(100000000, $d['min_rate'], 10)) ?>
|
||
</strong>원
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="rate-cell">
|
||
<span class="text_black">당월최고</span>
|
||
<p><strong class="text_red"><?= $d['max_rate'] ?>%</strong></p>
|
||
</td>
|
||
<td>
|
||
<strong><?= won(calcEqualPaymentMonthly(100000000, $d['max_rate'], 10)) ?></strong>원
|
||
</td>
|
||
<td><strong>
|
||
<?= won(calcEqualPrincipalAvgMonthly(100000000, $d['max_rate'], 10)) ?>
|
||
</strong>원
|
||
</td>
|
||
</tr>
|
||
<?php if (!empty($d['avg_rate'])): ?>
|
||
<tr>
|
||
<td class="rate-cell">
|
||
<span class="text_black">전월평균</span>
|
||
<p><strong class="text_red"><?= $d['avg_rate'] ?>%</strong></p>
|
||
</td>
|
||
<td>
|
||
<strong><?= won(calcEqualPaymentMonthly(100000000, $d['avg_rate'], 10)) ?></strong>원
|
||
</td>
|
||
<td><strong>
|
||
<?= won(calcEqualPrincipalAvgMonthly(100000000, $d['avg_rate'], 10)) ?>
|
||
</strong>원
|
||
</td>
|
||
</tr>
|
||
<?php endif; ?>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="detail-foot">
|
||
<?php if (!empty($d['prov_date'])): ?>
|
||
<span>금융회사 최종 제공일
|
||
<?= esc($d['prov_date']) ?>
|
||
</span>
|
||
<?php endif; ?>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<?php endforeach; ?>
|
||
</ul>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
|
||
<div class="owl-controls-bar">
|
||
<button type="button" class="owl-btn owl-prev" aria-label="이전">‹</button>
|
||
<div class="owl-counter" aria-live="polite">1 / 1</div>
|
||
<button type="button" class="owl-btn owl-next" aria-label="다음">›</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
|
||
<link rel="stylesheet"
|
||
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
|
||
<script type="text/javascript"
|
||
src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
|
||
<script type="text/javascript">
|
||
|
||
const datas = <?= json_encode($data, JSON_UNESCAPED_UNICODE); ?>;
|
||
|
||
let owlInited = false;
|
||
|
||
const esc = (s) => String(s ?? '').replace(/[&<>"']/g, m => ({
|
||
'&': '&', '<': '<', '>': '>', '"': '"', "'": '''
|
||
}[m]));
|
||
|
||
$(function () {
|
||
|
||
$('.nav-link').on('click', function () {
|
||
const cd = $(this).data('cd');
|
||
|
||
var arr = new Array();
|
||
|
||
rebuildByCd(cd);
|
||
|
||
// switch (cd) {
|
||
// // 전체
|
||
// case "all":
|
||
// arr = datas;
|
||
// break;
|
||
// // 은행
|
||
// case "B":
|
||
// $.each(datas, function (idx, v) {
|
||
// if (v.bank_type == "B") {
|
||
// arr.push(v);
|
||
// }
|
||
// });
|
||
// break;
|
||
// // 저축은행
|
||
// case "SB":
|
||
// $.each(datas, function (idx, v) {
|
||
// if (v.bank_type == "SB") {
|
||
// arr.push(v);
|
||
// }
|
||
// });
|
||
// break;
|
||
// // 보험
|
||
// case "I":
|
||
// $.each(datas, function (idx, v) {
|
||
// if (v.bank_type == "I") {
|
||
// arr.push(v);
|
||
// }
|
||
// });
|
||
// break;
|
||
// }
|
||
|
||
// 다시 렌더링
|
||
|
||
});
|
||
|
||
|
||
const $owl = $('.product-carousel');
|
||
initOwlOnce();
|
||
|
||
// ✅ Owl 드래그가 버튼 클릭을 먹어버리는 문제 방지
|
||
$(document).on('mousedown touchstart pointerdown', '.product-carousel .js-toggle, .product-carousel a', function (e) {
|
||
e.stopPropagation();
|
||
});
|
||
|
||
// ✅ 클릭도 가끔 막히는 케이스 방지
|
||
$(document).on('click', '.product-carousel .js-toggle', function (e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
|
||
const sel = $(this).data('target');
|
||
const $target = $(sel);
|
||
if ($target.length) {
|
||
$target.prop('hidden', !$target.prop('hidden'));
|
||
|
||
// 내용 펼치면 높이 변하니까 autoHeight 갱신
|
||
setTimeout(() => $('.product-carousel').trigger('refresh.owl.carousel'), 0);
|
||
}
|
||
});
|
||
|
||
// Bootstrap 탭 전환 완료 후 폭 재계산
|
||
$(document).on('shown.bs.tab', 'a[data-bs-toggle="tab"]', function () {
|
||
const $owl = $('.product-carousel');
|
||
if ($owl.length) {
|
||
// 숨김->보임 전환 직후엔 약간 텀 주는 게 안정적
|
||
setTimeout(() => $owl.trigger('refresh.owl.carousel'), 0);
|
||
}
|
||
});
|
||
|
||
// ===== 외부 버튼 컨트롤 =====
|
||
$('.owl-controls-bar .owl-prev').on('click', function () {
|
||
$owl.trigger('prev.owl.carousel');
|
||
});
|
||
|
||
$('.owl-controls-bar .owl-next').on('click', function () {
|
||
$owl.trigger('next.owl.carousel');
|
||
});
|
||
|
||
});
|
||
|
||
|
||
function initOwlOnce() {
|
||
if (owlInited) return;
|
||
owlInited = true;
|
||
|
||
$('.product-carousel').owlCarousel({
|
||
items: 1,
|
||
loop: false,
|
||
margin: 16,
|
||
autoHeight: true,
|
||
smartSpeed: 250,
|
||
mouseDrag: false,
|
||
touchDrag: false,
|
||
pullDrag: false,
|
||
onInitialized: updateOwlUI,
|
||
onTranslated: updateOwlUI,
|
||
onResized: updateOwlUI
|
||
});
|
||
}
|
||
|
||
// ===== 카운터 + 버튼 활성/비활성 =====
|
||
function updateOwlUI(event) {
|
||
// event가 없는 경우(수동 호출) 대비
|
||
const e = event || $owl.data('owl.carousel');
|
||
const carousel = event ? event.relatedTarget : e;
|
||
|
||
if (!carousel) return;
|
||
|
||
const total = carousel.items().length; // 총 슬라이드 수(= 5개 묶음 페이지 수)
|
||
const current = carousel.relative(carousel.current()) + 1;
|
||
|
||
$('.owl-counter').text(`${current} / ${total}`);
|
||
|
||
// 버튼 disable 처리
|
||
const $prev = $('.owl-controls-bar .owl-prev');
|
||
const $next = $('.owl-controls-bar .owl-next');
|
||
|
||
$prev.toggleClass('is-disabled', current <= 1);
|
||
$next.toggleClass('is-disabled', current >= total);
|
||
}
|
||
|
||
|
||
function chunk(arr, size) {
|
||
const out = [];
|
||
for (let i = 0; i < arr.length; i += size) out.push(arr.slice(i, i + size));
|
||
return out;
|
||
}
|
||
|
||
// ✅ 카드 HTML 생성 함수 (여기서 너의 카드 마크업을 그대로 문자열로 만들어야 함)
|
||
function renderCard(d) {
|
||
// 중요: XSS 방지 필요하면 escape 처리(최소한 텍스트는 escape)
|
||
|
||
const badges = `
|
||
${d.chg_yn === 'Y' ? `<span class="label_icon">변동금리</span>` : ``}
|
||
${d.split_yn === 'Y' ? `<span class="label_icon">분할상환</span>` : ``}
|
||
`;
|
||
|
||
// detail/pay 영역은 지금 너가 PHP 함수(render_detail_section, won...)를 쓰고 있어서
|
||
// 프론트에서 완전 동일하게 만들려면 "서버에서 HTML을 내려받는" 방식이 더 좋음.
|
||
// 일단은 카드 상단(요약)만 재렌더하고 상세는 필요 시 Ajax로 가져오는 패턴 추천.
|
||
return `
|
||
<li class="product-card">
|
||
<div class="product-head">
|
||
<div class="title-row">
|
||
<a href="${esc(d.bank_url || '#')}" class="bank_name" target="_blank" rel="noopener">${esc(d.bank)}</a>
|
||
<span class="product_name">${esc(d.product)}</span>
|
||
<div class="badges">${badges}</div>
|
||
</div>
|
||
<dl class="rate_detail">
|
||
<div class="rate"><dt>최저</dt><dd><strong class="rate_text">${esc(d.min_rate)}%</strong></dd></div>
|
||
<div class="rate"><dt>최고</dt><dd><strong class="rate_text">${esc(d.max_rate)}%</strong></dd></div>
|
||
<div class="rate"><dt>평균</dt><dd><strong class="rate_text">${esc(d.avg_rate)}%</strong></dd></div>
|
||
</dl>
|
||
</div>
|
||
|
||
<div class="product-actions">
|
||
<button type="button" class="btn btn-sm btn-outline-secondary js-toggle" data-target="#detail-${esc(d.seq)}">상세보기</button>
|
||
<button type="button" class="btn btn-sm btn-outline-secondary js-toggle" data-target="#pay-${esc(d.seq)}">월평균상환액</button>
|
||
</div>
|
||
|
||
<div class="collapse-box" id="detail-${esc(d.seq)}" hidden>
|
||
<div class="detail-grid">
|
||
${render_detail_section('대출부대비용', esc(d.extra_fee))}
|
||
${render_detail_section('연체이자율', esc(d.late_rate))}
|
||
${render_detail_section('가입방식', esc(d.join_method))}
|
||
${render_detail_section('중도상환수수료', esc(d.prepay_fee))}
|
||
${render_detail_section('대출한도', esc(d.loan_limit))}
|
||
|
||
<div class="detail-row">
|
||
<div class="detail-title">상품문의</div>
|
||
<ul class="detail-list">
|
||
<li>${esc(d.bank)}</li>
|
||
<li>
|
||
<a href="https://m.map.naver.com/search2/search.nhn?query=<?= $d['bank'] ?>" target="_blank">${esc(d.tel)}</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="detail-foot">
|
||
금융회사 최종 제공일 ${esc(d.prov_date)}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="collapse-box" id="pay-${esc(d.seq)}" hidden>
|
||
${render_rates_section(d)}
|
||
</div>
|
||
</li>
|
||
`;
|
||
|
||
|
||
}
|
||
|
||
function renderSlides(list) {
|
||
const pages = chunk(list, 5);
|
||
if (!pages.length) {
|
||
return `<div class="item"><div class="text-center text-muted py-5">데이터가 없습니다.</div></div>`;
|
||
}
|
||
|
||
return pages.map(page => `
|
||
<div class="item">
|
||
<ul class="product_list">
|
||
${page.map(renderCard).join('')}
|
||
</ul>
|
||
</div>
|
||
`).join('');
|
||
}
|
||
|
||
function destroyOwl($owl) {
|
||
if ($owl.hasClass('owl-loaded')) {
|
||
$owl.trigger('destroy.owl.carousel');
|
||
|
||
// owl이 감싼 wrapper 제거
|
||
$owl.find('.owl-stage-outer').children().unwrap();
|
||
$owl.removeClass('owl-center owl-loaded owl-text-select-on');
|
||
$owl.find('.owl-stage').children().unwrap();
|
||
}
|
||
}
|
||
|
||
function rebuildByCd(cd) {
|
||
const filtered = (cd === 'all')
|
||
? datas
|
||
: datas.filter(x => String(x.bank_type) === String(cd));
|
||
|
||
const $owl = $('.product-carousel');
|
||
destroyOwl($owl);
|
||
$owl.html(renderSlides(filtered));
|
||
initOwl($owl);
|
||
}
|
||
|
||
function initOwl($owl) {
|
||
$owl.owlCarousel({
|
||
items: 1,
|
||
loop: false,
|
||
margin: 16,
|
||
autoHeight: true,
|
||
smartSpeed: 250,
|
||
mouseDrag: false,
|
||
touchDrag: false,
|
||
pullDrag: false,
|
||
onInitialized: updateOwlUI,
|
||
onTranslated: updateOwlUI,
|
||
onResized: updateOwlUI
|
||
});
|
||
}
|
||
|
||
|
||
function render_detail_section(title, value) {
|
||
|
||
|
||
const lines = normalize_lines(value);
|
||
if (!lines.length) return '';
|
||
|
||
str = `
|
||
<div class="detail-row">
|
||
<div class="detail-title">${title}</div>
|
||
<ul class="detail-list">`;
|
||
|
||
for (const line of lines) {
|
||
const text = Array.isArray(line) ? line.join(' ') : String(line ?? '').trim();
|
||
if (!text) continue;
|
||
str += `<li>${esc(text)}</li>`;
|
||
}
|
||
|
||
|
||
str += `
|
||
</ul>
|
||
</div>
|
||
`;
|
||
|
||
return str;
|
||
}
|
||
|
||
function render_rates_section(d) {
|
||
|
||
var basis = '1억원 대출, 10년 분할 상환시';
|
||
|
||
var str = `
|
||
<div class="pay-box">
|
||
<div class="detail-row" style="margin-bottom: 15px;">
|
||
<ul class="detail-list">
|
||
<li>
|
||
<?= esc($basis) ?>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<table class="table table-bordered">
|
||
<thead>
|
||
<tr>
|
||
<th rowspan="2" style="width: 30%;">금리</th>
|
||
<th colspan="2">월평균 상환액</th>
|
||
</tr>
|
||
<tr>
|
||
<th style="width: 35%;">원리금 균등상환</th>
|
||
<th style="width: 35%;">원금 균등상환</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="rate-cell">
|
||
<span class="text_black">당월최저</span>
|
||
<p><strong class="text_red">${esc(d.min_rate)}%</strong></p>
|
||
</td>
|
||
<td>
|
||
<strong>${won(calcEqualPaymentMonthly(100000000, d.min_rate, 10))}</strong>원
|
||
</td>
|
||
<td>
|
||
<strong>${won(calcEqualPaymentMonthly(100000000, d.min_rate, 10))}</strong>원
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="rate-cell">
|
||
<span class="text_black">당월최고</span>
|
||
<p><strong class="text_red">${esc(d.max_rate)}%</strong></p>
|
||
</td>
|
||
<td>
|
||
<strong>${won(calcEqualPaymentMonthly(100000000, d.max_rate, 10))}/strong>원
|
||
</td>
|
||
<td>
|
||
<strong>${won(calcEqualPrincipalAvgMonthly(100000000, d.max_rate, 10))}</strong>원
|
||
</td>
|
||
</tr>`;
|
||
|
||
if (d.avg_rate != null) {
|
||
str += `
|
||
<tr>
|
||
<td class="rate-cell">
|
||
<span class="text_black">전월평균</span>
|
||
<p><strong class="text_red">${esc(d.avg_rate)}%</strong></p>
|
||
</td>
|
||
<td>
|
||
<strong>${won(calcEqualPaymentMonthly(100000000, d.avg_rate, 10))} ?></strong>원
|
||
</td>
|
||
<td>
|
||
<strong>${won(calcEqualPrincipalAvgMonthly(100000000, d.avg_rate, 10))}</strong>원
|
||
</td>
|
||
</tr>
|
||
`;
|
||
}
|
||
|
||
str += `
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="detail-foot">
|
||
<span>금융회사 최종 제공일 ${esc(d.prov_date)}</span>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
return str;
|
||
}
|
||
|
||
function normalize_lines(v) {
|
||
if (v === null || v === undefined) return [];
|
||
|
||
// 이미 배열이면
|
||
if (Array.isArray(v)) {
|
||
return v.map(x => String(x).trim()).filter(x => x !== '');
|
||
}
|
||
|
||
let s = String(v).trim();
|
||
if (!s) return [];
|
||
|
||
// JSON 배열 문자열이면
|
||
if (s.startsWith('[')) {
|
||
try {
|
||
const decoded = JSON.parse(s);
|
||
if (Array.isArray(decoded)) {
|
||
return decoded.map(x => String(x).trim()).filter(x => x !== '');
|
||
}
|
||
} catch (e) { }
|
||
}
|
||
|
||
// 개행 기준 분리
|
||
return s
|
||
.split(/\r\n|\r|\n/)
|
||
.map(x => x.trim())
|
||
.filter(x => x !== '');
|
||
}
|
||
|
||
// 원리금균등상환
|
||
function calcEqualPaymentMonthly(principal, annualRate, years) {
|
||
const n = years * 12;
|
||
const r = (annualRate / 100.0) / 12.0;
|
||
|
||
if (n <= 0) return 0.0;
|
||
if (Math.abs(r) < 1e-12) return principal / n;
|
||
|
||
const pow = Math.pow(1.0 + r, n);
|
||
return (principal * r * pow) / (pow - 1.0);
|
||
}
|
||
|
||
// 원금균등상환
|
||
function calcEqualPrincipalAvgMonthly(principal, annualRate, years) {
|
||
const n = years * 12;
|
||
const r = (annualRate / 100.0) / 12.0;
|
||
|
||
if (n <= 0) return 0.0;
|
||
|
||
// 이자합(원금균등): P * r * (n + 1) / 2
|
||
const totalInterest = principal * r * (n + 1) / 2.0;
|
||
|
||
const totalPayment = principal + totalInterest;
|
||
return totalPayment / n;
|
||
}
|
||
|
||
function won(v) {
|
||
return Math.round(v).toLocaleString('ko-KR');
|
||
}
|
||
</script>
|
||
|
||
<?= $this->endSection() ?>
|