854af0f236
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
440 lines
23 KiB
PHP
440 lines
23 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SAM 기업 신용분석 리포트</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<style>
|
|
/* Chart Container Styling */
|
|
.chart-container {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 600px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
height: 300px;
|
|
max-height: 400px;
|
|
}
|
|
@media (min-width: 768px) {
|
|
.chart-container { height: 350px; }
|
|
}
|
|
|
|
::-webkit-scrollbar { width: 8px; }
|
|
::-webkit-scrollbar-track { background: #f5f5f4; }
|
|
::-webkit-scrollbar-thumb { background: #d6d3d1; border-radius: 4px; }
|
|
::-webkit-scrollbar-thumb:hover { background: #a8a29e; }
|
|
|
|
.tab-active { border-bottom: 2px solid #3b82f6; color: #3b82f6; font-weight: 600; }
|
|
.tab-inactive { color: #78716c; }
|
|
.tab-inactive:hover { color: #44403c; }
|
|
|
|
.traffic-light { width: 20px; height: 20px; border-radius: 50%; display: inline-block; }
|
|
.light-red { background-color: #ef4444; box-shadow: 0 0 10px #ef4444; }
|
|
.light-orange { background-color: #f97316; box-shadow: 0 0 10px #f97316; }
|
|
.light-yellow { background-color: #eab308; box-shadow: 0 0 10px #eab308; }
|
|
.light-green { background-color: #22c55e; box-shadow: 0 0 10px #22c55e; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-stone-50 text-stone-800 font-sans antialiased selection:bg-blue-100">
|
|
|
|
<!-- Navigation / Header -->
|
|
<header class="bg-white border-b border-stone-200 sticky top-0 z-50">
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center h-16">
|
|
<div class="flex items-center gap-4">
|
|
<a href="../index.php" class="flex items-center gap-2 text-stone-500 hover:text-blue-600 transition group">
|
|
<div class="w-8 h-8 bg-stone-100 rounded-lg flex items-center justify-center group-hover:bg-blue-50 transition">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
|
|
</div>
|
|
<span class="text-sm font-semibold hidden sm:block">Home</span>
|
|
</a>
|
|
<div class="w-px h-6 bg-stone-200"></div>
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center text-white font-bold text-lg shadow-sm shadow-blue-200">S</div>
|
|
<h1 class="text-xl font-bold tracking-tight text-stone-900">SAM Intelligence</h1>
|
|
</div>
|
|
</div>
|
|
<nav class="hidden md:flex space-x-8">
|
|
<a href="#summary" class="text-stone-600 hover:text-blue-600 px-3 py-2 text-sm font-medium transition">종합 상태</a>
|
|
<a href="#analysis" class="text-stone-600 hover:text-blue-600 px-3 py-2 text-sm font-medium transition">리스크 분석</a>
|
|
<a href="#details" class="text-stone-600 hover:text-blue-600 px-3 py-2 text-sm font-medium transition">상세 이력</a>
|
|
<a href="#simulator" class="text-stone-600 hover:text-blue-600 px-3 py-2 text-sm font-medium transition">한도 시뮬레이터</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Hero Section -->
|
|
<main class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
|
|
<div class="text-center mb-16">
|
|
<div class="inline-flex items-center gap-2 bg-blue-50 text-blue-600 px-4 py-1.5 rounded-full text-sm font-semibold mb-6 border border-blue-100">
|
|
<span class="relative flex h-2 w-2">
|
|
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
|
|
<span class="relative inline-flex rounded-full h-2 w-2 bg-blue-500"></span>
|
|
</span>
|
|
실시간 연동: Coocon API (v2.4)
|
|
</div>
|
|
<h2 class="text-4xl font-extrabold text-stone-900 mb-4">(주)가상테크놀로지 기업 신용 분석</h2>
|
|
<p class="text-lg text-stone-600 max-w-3xl mx-auto leading-relaxed">
|
|
ERP 데이터를 기반으로 거래처의 <strong>부실 여부를 선제적으로 판단</strong>합니다.
|
|
한국신용정보원 및 신용정보사 데이터를 실시간으로 수집하여 종합 신용 등급과 리스크 지표를 제공합니다.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Section 1: Summary & Trends -->
|
|
<section id="summary" class="mb-20 scroll-mt-20">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
|
|
|
|
<!-- Left: Credit Traffic Light -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-stone-100 p-8">
|
|
<div class="flex justify-between items-start mb-6">
|
|
<div>
|
|
<h3 class="text-xl font-bold text-stone-900 mb-1">종합 신용 신호등</h3>
|
|
<p class="text-sm text-stone-500">거래처 건전성 실시간 모니터링</p>
|
|
</div>
|
|
<div class="flex gap-2 bg-stone-100 p-2 rounded-full border border-stone-200">
|
|
<span class="traffic-light light-red opacity-20"></span>
|
|
<span class="traffic-light light-orange opacity-20"></span>
|
|
<span class="traffic-light light-yellow"></span>
|
|
<span class="traffic-light light-green opacity-20"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center py-6 bg-stone-50 rounded-2xl mb-6 border border-amber-100">
|
|
<div class="text-5xl font-black text-amber-500 mb-2">주의 (Level 3)</div>
|
|
<p class="text-stone-600 font-medium">단기 연체 이력 발견 - <span class="text-amber-600 underline">거래 한도 축소</span> 권장</p>
|
|
</div>
|
|
|
|
<div class="chart-container">
|
|
<canvas id="trendChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right: Risk Profile -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-stone-100 p-8">
|
|
<div class="mb-4">
|
|
<h3 class="text-xl font-bold text-stone-900 mb-1">신용 리스크 프로필</h3>
|
|
<p class="text-sm text-stone-500">5대 핵심 지표 다각도 분석</p>
|
|
</div>
|
|
<div class="chart-container">
|
|
<canvas id="radarChart"></canvas>
|
|
</div>
|
|
<div class="mt-6 space-y-3">
|
|
<div class="flex justify-between items-center text-sm">
|
|
<span class="text-stone-500">한국신용정보원 연체</span>
|
|
<span class="font-bold text-red-500">2건 발생</span>
|
|
</div>
|
|
<div class="flex justify-between items-center text-sm">
|
|
<span class="text-stone-500">금융질서문란 정보</span>
|
|
<span class="font-bold text-stone-800">해당 없음</span>
|
|
</div>
|
|
<div class="flex justify-between items-center text-sm">
|
|
<span class="text-stone-500">공공기록 정보</span>
|
|
<span class="font-bold text-amber-600">1건 등록</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 2: Detailed Intelligence -->
|
|
<section id="details" class="mb-20 scroll-mt-20">
|
|
<div class="mb-8">
|
|
<h3 class="text-2xl font-bold text-stone-900 text-center">신용 상세 정보 (Coocon API 데이터)</h3>
|
|
</div>
|
|
|
|
<!-- Custom Tabs -->
|
|
<div class="flex space-x-6 border-b border-stone-200 mb-8 overflow-x-auto justify-center">
|
|
<button onclick="updateFeatureView('delinquency')" class="tab-btn tab-active pb-3 px-1 transition whitespace-nowrap" id="btn-delinquency">단기연체정보</button>
|
|
<button onclick="updateFeatureView('judgment')" class="tab-btn tab-inactive pb-3 px-1 transition whitespace-nowrap" id="btn-judgment">신용도판단정보</button>
|
|
<button onclick="updateFeatureView('reputation')" class="tab-btn tab-inactive pb-3 px-1 transition whitespace-nowrap" id="btn-reputation">법정관리/워크아웃</button>
|
|
</div>
|
|
|
|
<!-- Dynamic Content Area -->
|
|
<div id="feature-content" class="fade-in">
|
|
<!-- Content injected via JS -->
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 3: Credit Simulator -->
|
|
<section id="simulator" class="mb-20 scroll-mt-20 bg-stone-900 rounded-3xl p-8 lg:p-12 text-white">
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
|
|
<div class="lg:col-span-1">
|
|
<h3 class="text-2xl font-bold mb-4 italic">한도 가이드 시뮬레이션</h3>
|
|
<p class="text-stone-400 mb-8">
|
|
거래 규모에 따른 부실 위험도를 예측합니다.
|
|
</p>
|
|
|
|
<div class="mb-8">
|
|
<label for="userRange" class="block text-sm font-medium text-stone-300 mb-2">예상 거래액: <span id="userCountDisplay" class="text-blue-400 font-bold text-lg">50</span>M KRW</label>
|
|
<input type="range" id="userRange" min="1" max="500" value="50" class="w-full h-2 bg-stone-700 rounded-lg appearance-none cursor-pointer accent-blue-500">
|
|
</div>
|
|
|
|
<div class="space-y-4 text-stone-900">
|
|
<div class="bg-white p-4 rounded-xl shadow-sm border-l-4 border-amber-500">
|
|
<div class="text-xs text-stone-500 uppercase font-semibold">부실 예상 확률</div>
|
|
<div class="text-2xl font-bold" id="riskProb">12.5%</div>
|
|
</div>
|
|
<div class="bg-white p-4 rounded-xl shadow-sm border-l-4 border-blue-500">
|
|
<div class="text-xs text-stone-500 uppercase font-semibold">추천 결제 조건</div>
|
|
<div class="text-2xl font-bold" id="payTerm">선입금 30%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lg:col-span-2 flex flex-col justify-center">
|
|
<div class="chart-container">
|
|
<canvas id="pricingChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 4: Approval Engine -->
|
|
<section id="verdict" class="mb-20 scroll-mt-20">
|
|
<div class="max-w-4xl mx-auto bg-white border border-stone-200 rounded-2xl shadow-lg overflow-hidden">
|
|
<div class="bg-blue-600 p-6 text-center">
|
|
<h3 class="text-2xl font-bold text-white">최종 거래 승인 판정</h3>
|
|
<p class="text-blue-100 mt-2">정성적 요소를 포함한 통합 의사결정</p>
|
|
</div>
|
|
|
|
<div class="p-8">
|
|
<div id="quiz-container" class="space-y-6">
|
|
<div class="space-y-4">
|
|
<p class="font-semibold text-lg text-stone-800">Q1. 해당 업체와 과거에 성공적으로 거래한 이력이 있습니까?</p>
|
|
<div class="flex gap-4">
|
|
<button onclick="handleQuiz(1, true)" class="flex-1 py-3 border-2 border-stone-200 rounded-xl hover:border-blue-500 hover:bg-blue-50 transition font-medium">있음</button>
|
|
<button onclick="handleQuiz(1, false)" class="flex-1 py-3 border-2 border-stone-200 rounded-xl hover:border-blue-500 hover:bg-blue-50 transition font-medium">없음</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="result-container" class="hidden text-center fade-in">
|
|
<div id="result-icon" class="mb-6"></div>
|
|
<h4 id="result-title" class="text-3xl font-bold mb-4 text-stone-900"></h4>
|
|
<p id="result-desc" class="text-lg text-stone-600 mb-8 max-w-2xl mx-auto"></p>
|
|
<button onclick="resetQuiz()" class="px-6 py-2 bg-stone-200 text-stone-700 rounded-lg hover:bg-stone-300 transition text-sm font-semibold">데이터 갱신</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="text-center text-stone-400 py-10 border-t border-stone-200">
|
|
<p class="text-sm">Powered by Coocon Enterprise Intelligence API. Internal Use Only.</p>
|
|
<p class="text-xs mt-2">SAM System - Credit Analysis Module v2026.1</p>
|
|
</footer>
|
|
|
|
</main>
|
|
|
|
<script>
|
|
const state = {
|
|
amount: 50,
|
|
currentTab: 'delinquency',
|
|
riskScore: 65 // Base score
|
|
};
|
|
|
|
const featureData = {
|
|
delinquency: {
|
|
title: "한국신용정보원 단기연체정보",
|
|
color: "border-red-100 bg-red-50/30",
|
|
records: [
|
|
{ label: "연체 금액", value: "15,400,000 KRW", type: "strong" },
|
|
{ label: "연체 기간", value: "45일", type: "text" },
|
|
{ label: "발생 기관", value: "가상국민은행", type: "text" },
|
|
{ label: "계정과목", value: "일반자금대출 (101)", type: "text" },
|
|
{ label: "기준일자", value: "2026-01-05", type: "text" }
|
|
]
|
|
},
|
|
judgment: {
|
|
title: "신용도 판단 정보 (공공기록 등)",
|
|
color: "border-amber-100 bg-amber-50/30",
|
|
records: [
|
|
{ label: "채무불이행 건수", value: "0건", type: "text" },
|
|
{ label: "공공기록정보", value: "1건 (세금체납)", type: "strong" },
|
|
{ label: "등록사유명", value: "지방세 체납 (국세청)", type: "text" },
|
|
{ label: "등록일자", value: "2025-11-20", type: "text" },
|
|
{ label: "해제코드", value: "해당없음", type: "text" }
|
|
]
|
|
},
|
|
reputation: {
|
|
title: "법정관리 및 특수 정보",
|
|
color: "border-stone-200 bg-white",
|
|
records: [
|
|
{ label: "당좌거래정지", value: "정상", type: "text" },
|
|
{ label: "법정관리유형", value: "해당없음", type: "text" },
|
|
{ label: "워크아웃 여부", value: "정상", type: "text" },
|
|
{ label: "사건번호", value: "-", type: "text" },
|
|
{ label: "담당법원", value: "-", type: "text" }
|
|
]
|
|
}
|
|
};
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
initCharts();
|
|
updateFeatureView('delinquency');
|
|
updateSimulator();
|
|
});
|
|
|
|
let pricingChart;
|
|
|
|
function initCharts() {
|
|
// Line Chart: Credit Score Trend
|
|
const ctxTrend = document.getElementById('trendChart').getContext('2d');
|
|
new Chart(ctxTrend, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ['10월', '11월', '12월', '1월(현재)'],
|
|
datasets: [{
|
|
label: '신용점수 추이',
|
|
data: [780, 750, 690, 640],
|
|
borderColor: '#f59e0b',
|
|
backgroundColor: 'rgba(245, 158, 11, 0.1)',
|
|
tension: 0.4,
|
|
fill: true
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: { legend: { display: false } },
|
|
scales: { y: { min: 400, max: 1000 } }
|
|
}
|
|
});
|
|
|
|
// Radar Chart: Risk Profile
|
|
const ctxRadar = document.getElementById('radarChart').getContext('2d');
|
|
new Chart(ctxRadar, {
|
|
type: 'radar',
|
|
data: {
|
|
labels: ['유동성', '공공기록', '안정성', '성장성', '연체이력'],
|
|
datasets: [{
|
|
label: '현재 기업 리스크',
|
|
data: [60, 40, 50, 70, 30],
|
|
backgroundColor: 'rgba(59, 130, 246, 0.2)',
|
|
borderColor: '#3b82f6',
|
|
pointBackgroundColor: '#3b82f6'
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: { r: { suggestedMin: 0, suggestedMax: 100 } }
|
|
}
|
|
});
|
|
|
|
// Bar Chart: Risk vs Amount
|
|
const ctxPrice = document.getElementById('pricingChart').getContext('2d');
|
|
pricingChart = new Chart(ctxPrice, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['담보 부족분', '신용 한도', '예상 리스크액'],
|
|
datasets: [{
|
|
data: [15, 30, 8.5],
|
|
backgroundColor: ['#d1d5db', '#3b82f6', '#ef4444'],
|
|
borderRadius: 8
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: { legend: { display: false } }
|
|
}
|
|
});
|
|
}
|
|
|
|
function updateFeatureView(type) {
|
|
state.currentTab = type;
|
|
['delinquency', 'judgment', 'reputation'].forEach(t => {
|
|
document.getElementById(`btn-${t}`).className = t === type ? "tab-btn tab-active pb-3 px-1 transition whitespace-nowrap" : "tab-btn tab-inactive pb-3 px-1 transition whitespace-nowrap";
|
|
});
|
|
|
|
const data = featureData[type];
|
|
const contentDiv = document.getElementById('feature-content');
|
|
|
|
contentDiv.innerHTML = `
|
|
<div class="max-w-4xl mx-auto rounded-3xl p-6 border-2 ${data.color} transition-all">
|
|
<h4 class="text-xl font-bold mb-6 flex items-center gap-2">
|
|
<span class="w-1.5 h-6 bg-stone-900 rounded-full"></span>
|
|
${data.title}
|
|
</h4>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
${data.records.map(r => `
|
|
<div class="flex justify-between p-4 bg-white rounded-xl shadow-sm">
|
|
<span class="text-stone-500 text-sm">${r.label}</span>
|
|
<span class="${r.type === 'strong' ? 'font-bold text-red-600' : 'font-semibold'}">${r.value}</span>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
const userRange = document.getElementById('userRange');
|
|
userRange.addEventListener('input', (e) => {
|
|
state.amount = parseInt(e.target.value);
|
|
updateSimulator();
|
|
});
|
|
|
|
function updateSimulator() {
|
|
const amount = state.amount;
|
|
document.getElementById('userCountDisplay').innerText = amount;
|
|
|
|
const prob = (amount * 0.15 + (100 - state.riskScore) * 0.5).toFixed(1);
|
|
document.getElementById('riskProb').innerText = `${prob}%`;
|
|
|
|
let term = "외상 (30일)";
|
|
if(prob > 20) term = "선입금 50%";
|
|
if(prob > 40) term = "거래 금지 권고";
|
|
document.getElementById('payTerm').innerText = term;
|
|
|
|
pricingChart.data.datasets[0].data = [amount * 0.3, amount * 0.6, amount * (prob/100)];
|
|
pricingChart.update();
|
|
}
|
|
|
|
function handleQuiz(step, answerYes) {
|
|
if (step === 1) {
|
|
state.riskScore += answerYes ? 15 : -10;
|
|
document.getElementById('quiz-container').innerHTML = `
|
|
<div class="space-y-4 fade-in">
|
|
<p class="font-semibold text-lg text-stone-800">Q2. 대표자의 업계 경력이 10년 이상입니까?</p>
|
|
<div class="flex gap-4">
|
|
<button onclick="handleQuiz(2, true)" class="flex-1 py-3 border-2 border-stone-200 rounded-xl hover:border-blue-500 hover:bg-blue-50 transition font-medium">예</button>
|
|
<button onclick="handleQuiz(2, false)" class="flex-1 py-3 border-2 border-stone-200 rounded-xl hover:border-blue-500 hover:bg-blue-50 transition font-medium">아니오</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
} else if (step === 2) {
|
|
state.riskScore += answerYes ? 10 : -5;
|
|
showResult();
|
|
}
|
|
}
|
|
|
|
function showResult() {
|
|
document.getElementById('quiz-container').classList.add('hidden');
|
|
const resultDiv = document.getElementById('result-container');
|
|
resultDiv.classList.remove('hidden');
|
|
|
|
const title = document.getElementById('result-title');
|
|
const desc = document.getElementById('result-desc');
|
|
const icon = document.getElementById('result-icon');
|
|
|
|
if (state.riskScore > 60) {
|
|
icon.innerHTML = `<span class="bg-blue-600 text-white rounded-2xl px-8 py-3 text-3xl font-bold">승인 권장</span>`;
|
|
title.innerText = "조건부 거래 승인";
|
|
desc.innerHTML = `정량적 리스크(연체)가 존재하나, <strong>정성적 신뢰도와 거래 이력</strong>이 보완 가능합니다. 한도 설정 하에 거래를 권장합니다.`;
|
|
} else {
|
|
icon.innerHTML = `<span class="bg-red-600 text-white rounded-2xl px-8 py-3 text-3xl font-bold">보류 권장</span>`;
|
|
title.innerText = "거래 제한 권고";
|
|
desc.innerHTML = `현재 신용상태가 매우 불안정하며 추가 담보 확보가 필수적입니다. <strong>현금 거래 위주</strong>의 정책 수립을 권고합니다.`;
|
|
}
|
|
}
|
|
|
|
function resetQuiz() {
|
|
location.reload();
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |