SamProject/sam-sales
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

채권추심 프로세트

Browse Source 
🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
김보곤
2026-01-16 18:52:34 +09:00
parent 3b691596cc
commit 6df27f68d6
3 changed files with 808 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

731
debt/index.php Normal file
View File

@@ -0,0 +1,731 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>채권추심 프로세스 가이드 | SAM SaaS</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
* { font-family: 'Noto Sans KR', sans-serif; }
.tab-content { display: none; }
.tab-content.active { display: block; }
.nav-active { background-color: #4f46e5; color: white; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); }
.fade-in { animation: fadeIn 0.5s ease-out forwards; }
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.progress-line::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 2px;
background: #e2e8f0;
z-index: -1;
}
</style>
</head>
<body class="min-h-screen bg-slate-50 p-6">
<div class="max-w-6xl mx-auto">
<!-- Header & Dashboard Summary -->
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-8 mb-6 fade-in">
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
<div class="flex items-center gap-4">
<div class="w-14 h-14 bg-indigo-600 rounded-xl flex items-center justify-center shadow-lg shadow-indigo-200 text-white">
<i data-lucide="gavel" class="w-7 h-7"></i>
</div>
<div>
<h1 class="text-2xl font-bold text-slate-900">채권추심 프로세스 관리</h1>
<p class="text-slate-500 text-sm">변호사와 기업 담당자의 실시간 협업 워크플로우</p>
</div>
</div>
<div class="flex gap-4">
<div class="px-4 py-2 bg-emerald-50 border border-emerald-100 rounded-lg">
<p class="text-[10px] text-emerald-600 font-bold uppercase tracking-wider">회수 성공률</p>
<p class="text-xl font-bold text-emerald-700">84.2%</p>
</div>
<div class="px-4 py-2 bg-indigo-50 border border-indigo-100 rounded-lg">
<p class="text-[10px] text-indigo-600 font-bold uppercase tracking-wider">평균 회수 기간</p>
<p class="text-xl font-bold text-indigo-700">62일</p>
</div>
</div>
</div>
</div>
<!-- Progress Tracking -->
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-8 mb-6 fade-in" style="animation-delay: 0.1s">
<div class="flex items-center justify-between mb-3">
<span class="text-base font-bold text-slate-700">전체 공정 진행률</span>
<span id="progress-text" class="text-lg font-black text-indigo-600">0%</span>
</div>
<div class="w-full bg-slate-100 rounded-full h-3 overflow-hidden mb-8">
<div id="progress-bar" class="bg-gradient-to-r from-indigo-500 to-blue-600 h-full transition-all duration-700 ease-out" style="width: 0%"></div>
</div>
<!-- Phase Specific Progress -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 border-t border-slate-50 pt-6">
<div class="space-y-2">
<div class="flex justify-between items-center">
<span class="text-[11px] font-bold text-slate-400 uppercase tracking-tighter">Phase 1. 기초조사</span>
<span id="phase1-text" class="text-xs font-bold text-indigo-500">0%</span>
</div>
<div class="w-full bg-slate-50 rounded-full h-1.5 overflow-hidden">
<div id="phase1-bar" class="bg-indigo-400 h-full transition-all duration-500" style="width: 0%"></div>
</div>
</div>
<div class="space-y-2">
<div class="flex justify-between items-center">
<span class="text-[11px] font-bold text-slate-400 uppercase tracking-tighter">Phase 2. 보전처분</span>
<span id="phase2-text" class="text-xs font-bold text-amber-500">0%</span>
</div>
<div class="w-full bg-slate-50 rounded-full h-1.5 overflow-hidden">
<div id="phase2-bar" class="bg-amber-400 h-full transition-all duration-500" style="width: 0%"></div>
</div>
</div>
<div class="space-y-2">
<div class="flex justify-between items-center">
<span class="text-[11px] font-bold text-slate-400 uppercase tracking-tighter">Phase 3. 집행권원</span>
<span id="phase3-text" class="text-xs font-bold text-blue-500">0%</span>
</div>
<div class="w-full bg-slate-50 rounded-full h-1.5 overflow-hidden">
<div id="phase3-bar" class="bg-blue-400 h-full transition-all duration-500" style="width: 0%"></div>
</div>
</div>
<div class="space-y-2">
<div class="flex justify-between items-center">
<span class="text-[11px] font-bold text-slate-400 uppercase tracking-tighter">Phase 4. 강제집행</span>
<span id="phase4-text" class="text-xs font-bold text-emerald-500">0%</span>
</div>
<div class="w-full bg-slate-50 rounded-full h-1.5 overflow-hidden">
<div id="phase4-bar" class="bg-emerald-400 h-full transition-all duration-500" style="width: 0%"></div>
</div>
</div>
</div>
<p class="text-[11px] text-slate-400 mt-6 text-center italic">* 각 상세 단계의 체크박스를 완료하면 해당 단계 및 전체 진행률에 반영됩니다.</p>
</div>
<!-- Workflow Tab Navigation -->
<div class="flex gap-2 mb-6 overflow-x-auto pb-2">
<button onclick="showTab('phase1')" id="tab-phase1" class="tab-btn px-6 py-3 rounded-xl font-semibold transition-all whitespace-nowrap nav-active flex items-center gap-2">
<span class="w-5 h-5 rounded-full bg-white/20 flex items-center justify-center text-[10px]">1</span>
기초조사 및 독촉
</button>
<button onclick="showTab('phase2')" id="tab-phase2" class="tab-btn px-6 py-3 rounded-xl font-semibold transition-all whitespace-nowrap bg-white text-slate-600 hover:bg-slate-100 flex items-center gap-2">
<span class="w-5 h-5 rounded-full bg-slate-200 flex items-center justify-center text-[10px]">2</span>
보전 처분
</button>
<button onclick="showTab('phase3')" id="tab-phase3" class="tab-btn px-6 py-3 rounded-xl font-semibold transition-all whitespace-nowrap bg-white text-slate-600 hover:bg-slate-100 flex items-center gap-2">
<span class="w-5 h-5 rounded-full bg-slate-200 flex items-center justify-center text-[10px]">3</span>
집행권원 확보
</button>
<button onclick="showTab('phase4')" id="tab-phase4" class="tab-btn px-6 py-3 rounded-xl font-semibold transition-all whitespace-nowrap bg-white text-slate-600 hover:bg-slate-100 flex items-center gap-2">
<span class="w-5 h-5 rounded-full bg-slate-200 flex items-center justify-center text-[10px]">4</span>
강제집행 및 회수
</button>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Main Content Area -->
<div class="lg:col-span-2 space-y-6">
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6 min-h-[500px]">
<!-- Phase 1 Content -->
<div id="phase1" class="tab-content active space-y-6">
<div class="flex items-center justify-between mb-2">
<h2 class="text-lg font-bold text-slate-800">Phase 1. 기초 조사 및 독촉 (Preparation)</h2>
<div class="flex gap-2">
<span class="px-2.5 py-1 bg-slate-100 text-slate-600 rounded-full text-xs font-bold flex items-center gap-1">
<i data-lucide="clock" size="12"></i> 1~2주 소요
</span>
<span class="px-2.5 py-1 bg-indigo-100 text-indigo-700 rounded-full text-xs font-bold">목표: 기초 조사</span>
</div>
</div>
<div class="border rounded-xl overflow-hidden">
<table class="w-full text-sm">
<thead class="bg-slate-50 border-b">
<tr>
<th class="p-4 text-left font-semibold text-slate-600 w-12">체크</th>
<th class="p-4 text-left font-semibold text-slate-600">세부 항목</th>
<th class="p-4 text-center font-semibold text-slate-600">담당</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-100">
<tr class="hover:bg-slate-50 transition-colors">
<td class="p-4 text-center"><input type="checkbox" onchange="updateProgress()" class="step-checkbox w-4 h-4 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500"></td>
<td class="p-4"><span class="font-medium text-slate-800">원인 서류 확보</span><br><span class="text-xs text-slate-500">계약서, 세금계산서, 거래명세서 등</span></td>
<td class="p-4 text-center"><span class="px-2 py-1 bg-blue-50 text-blue-600 rounded text-[11px] font-bold">기업</span></td>
</tr>
<tr class="hover:bg-slate-50 transition-colors">
<td class="p-4 text-center"><input type="checkbox" onchange="updateProgress()" class="step-checkbox w-4 h-4 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500"></td>
<td class="p-4"><span class="font-medium text-slate-800">채무자 소재 조사</span><br><span class="text-xs text-slate-500">사업자 등록증, 휴/폐업 여부 확인</span></td>
<td class="p-4 text-center"><span class="px-2 py-1 bg-indigo-50 text-indigo-600 rounded text-[11px] font-bold">변호사</span></td>
</tr>
<tr class="hover:bg-slate-50 transition-colors">
<td class="p-4 text-center"><input type="checkbox" onchange="updateProgress()" class="step-checkbox w-4 h-4 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500"></td>
<td class="p-4"><span class="font-medium text-slate-800">신용 상태 조사</span><br><span class="text-xs text-slate-500">주거래은행 및 신용 등급 파악</span></td>
<td class="p-4 text-center"><span class="px-2 py-1 bg-indigo-50 text-indigo-600 rounded text-[11px] font-bold">변호사</span></td>
</tr>
<tr class="hover:bg-slate-50 transition-colors">
<td class="p-4 text-center"><input type="checkbox" onchange="updateProgress()" class="step-checkbox w-4 h-4 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500"></td>
<td class="p-4"><span class="font-medium text-slate-800">내용증명 발송</span><br><span class="text-xs text-slate-500">최후 독촉 및 증거력 확보</span></td>
<td class="p-4 text-center"><span class="px-2 py-1 bg-indigo-50 text-indigo-600 rounded text-[11px] font-bold">변호사</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Phase 2 Content -->
<div id="phase2" class="tab-content space-y-6">
<div class="flex items-center justify-between mb-2">
<h2 class="text-lg font-bold text-slate-800">Phase 2. 보전 처분 (Provisional Attachment)</h2>
<div class="flex gap-2">
<span class="px-2.5 py-1 bg-slate-100 text-slate-600 rounded-full text-xs font-bold flex items-center gap-1">
<i data-lucide="clock" size="12"></i> 1~2주 소요
</span>
<span class="px-2.5 py-1 bg-amber-100 text-amber-700 rounded-full text-xs font-bold">목표: 자산 은닉 방지</span>
</div>
</div>
<div class="border rounded-xl overflow-hidden">
<table class="w-full text-sm">
<thead class="bg-slate-50 border-b">
<tr>
<th class="p-4 text-left font-semibold text-slate-600 w-12">체크</th>
<th class="p-4 text-left font-semibold text-slate-600">절차 항목</th>
<th class="p-4 text-center font-semibold text-slate-600">상태</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-100">
<tr class="hover:bg-slate-50 transition-colors">
<td class="p-4 text-center"><input type="checkbox" onchange="updateProgress()" class="step-checkbox w-4 h-4 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500"></td>
<td class="p-4"><span class="font-medium text-slate-800">가압류 대상 목적물 특정</span><br><span class="text-xs text-slate-500">부동산, 채권(은행), 유체동산 등</span></td>
<td class="p-4 text-center"><span class="px-2 py-0.5 bg-slate-100 text-slate-500 rounded text-[10px] font-bold">변호사</span></td>
</tr>
<tr class="hover:bg-slate-50 transition-colors">
<td class="p-4 text-center"><input type="checkbox" onchange="updateProgress()" class="step-checkbox w-4 h-4 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500"></td>
<td class="p-4"><span class="font-medium text-slate-800">가압류 신청서 접수</span><br><span class="text-xs text-slate-500">관할 법원 전자 접수</span></td>
<td class="p-4 text-center"><span class="px-2 py-0.5 bg-slate-100 text-slate-500 rounded text-[10px] font-bold">변호사</span></td>
</tr>
<tr class="hover:bg-slate-50 transition-colors">
<td class="p-4 text-center"><input type="checkbox" onchange="updateProgress()" class="step-checkbox w-4 h-4 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500"></td>
<td class="p-4"><span class="font-medium text-slate-800">공탁금 납부 (현금/보증보험)</span><br><span class="text-xs text-slate-500">법원 결정에 따른 담보 제공</span></td>
<td class="p-4 text-center"><span class="px-2 py-0.5 bg-blue-50 text-blue-600 rounded text-[10px] font-bold">기업</span></td>
</tr>
<tr class="hover:bg-slate-50 transition-colors">
<td class="p-4 text-center"><input type="checkbox" onchange="updateProgress()" class="step-checkbox w-4 h-4 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500"></td>
<td class="p-4"><span class="font-medium text-slate-800">가압류 결정문 수령</span><br><span class="text-xs text-slate-500">결정 통지 및 효력 발생 확인</span></td>
<td class="p-4 text-center"><span class="px-2 py-0.5 bg-slate-100 text-slate-500 rounded text-[10px] font-bold">변호사</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Phase 3 Content -->
<div id="phase3" class="tab-content space-y-6">
<div class="flex items-center justify-between mb-2">
<h2 class="text-lg font-bold text-slate-800">Phase 3. 집행권원 확보 (Litigation)</h2>
<div class="flex gap-2">
<span class="px-2.5 py-1 bg-slate-100 text-slate-600 rounded-full text-xs font-bold flex items-center gap-1">
<i data-lucide="clock" size="12"></i> 2주~1년 소요
</span>
<span class="px-2.5 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-bold">목표: 법적 권리 확정</span>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="p-5 border rounded-2xl hover:border-indigo-300 transition-all group relative">
<div class="absolute top-4 right-4">
<input type="checkbox" onchange="updateProgress()" class="step-checkbox w-5 h-5 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500">
</div>
<h3 class="font-bold text-slate-800 mb-1 flex items-center gap-2">
<i data-lucide="Zap" size="18" class="text-amber-500"></i>
지급명령 신청
</h3>
<div class="flex items-center gap-1 text-[10px] text-amber-600 font-bold mb-2">
<i data-lucide="timer" size="10"></i> 평균 2~4주 소요
</div>
<p class="text-xs text-slate-500 mb-4 pr-8 leading-relaxed">채무자가 빚을 인정할 때 유리. 가장 신속한 집행권원 확보 방법.</p>
<div class="flex items-center gap-2 text-[10px] font-bold text-indigo-600 uppercase tracking-wider">
<span class="px-2 py-0.5 bg-indigo-50 rounded">변호사 담당</span>
</div>
</div>
<div class="p-5 border rounded-2xl hover:border-indigo-300 transition-all group relative">
<div class="absolute top-4 right-4">
<input type="checkbox" onchange="updateProgress()" class="step-checkbox w-5 h-5 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500">
</div>
<h3 class="font-bold text-slate-800 mb-1 flex items-center gap-2">
<i data-lucide="Scale" size="18" class="text-slate-600"></i>
민사소송 접수
</h3>
<div class="flex items-center gap-1 text-[10px] text-slate-500 font-bold mb-2">
<i data-lucide="timer" size="10"></i> 약 6~12개월 소요
</div>
<p class="text-xs text-slate-500 mb-4 pr-8 leading-relaxed">채권채무 다툼이 있거나 지급명령 이의신청 시 본안 소송 진행.</p>
<div class="flex items-center gap-2 text-[10px] font-bold text-slate-500 uppercase tracking-wider">
<span class="px-2 py-0.5 bg-slate-100 rounded">변호사 담당</span>
</div>
</div>
</div>
</div>
<!-- Phase 4 Content -->
<div id="phase4" class="tab-content space-y-6">
<div class="flex items-center justify-between mb-2">
<h2 class="text-lg font-bold text-slate-800">Phase 4. 강제 집행 및 회수 (Execution)</h2>
<div class="flex gap-2">
<span class="px-2.5 py-1 bg-slate-100 text-slate-600 rounded-full text-xs font-bold flex items-center gap-1">
<i data-lucide="clock" size="12"></i> 1~3개월 소요
</span>
<span class="px-2.5 py-1 bg-emerald-100 text-emerald-700 rounded-full text-xs font-bold">목표: 실제 회수 완료</span>
</div>
</div>
<div class="space-y-3">
<div class="p-4 bg-white border border-slate-200 rounded-2xl flex items-center justify-between hover:border-indigo-200 transition-colors">
<div class="flex items-center gap-4">
<input type="checkbox" onchange="updateProgress()" class="step-checkbox w-5 h-5 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500">
<div>
<div class="flex items-center gap-2 mb-0.5">
<h4 class="text-sm font-bold text-slate-800">재산 명시 및 재산 조회 신청</h4>
<span class="text-[10px] font-medium text-slate-400 bg-slate-50 px-1.5 rounded">1~2개월</span>
</div>
<p class="text-[11px] text-slate-500">법원을 통해 채무자의 숨겨진 재산을 찾아내는 단계</p>
</div>
</div>
<span class="hidden md:block text-[10px] font-bold text-slate-400">Phase 4-1</span>
</div>
<div class="p-4 bg-white border border-slate-200 rounded-2xl flex items-center justify-between hover:border-indigo-200 transition-colors">
<div class="flex items-center gap-4">
<input type="checkbox" onchange="updateProgress()" class="step-checkbox w-5 h-5 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500">
<div>
<div class="flex items-center gap-2 mb-0.5">
<h4 class="text-sm font-bold text-slate-800">강제 집행 (압류/경매) 실시</h4>
<span class="text-[10px] font-medium text-slate-400 bg-slate-50 px-1.5 rounded">집행 대상별 상이</span>
</div>
<p class="text-[11px] text-slate-500">통장 압류, 유체동산 압류(빨간딱지), 부동산 경매 등</p>
</div>
</div>
<span class="hidden md:block text-[10px] font-bold text-slate-400">Phase 4-2</span>
</div>
<div class="p-4 bg-emerald-50 border border-emerald-100 rounded-2xl flex items-center justify-between">
<div class="flex items-center gap-4">
<input type="checkbox" onchange="updateProgress()" class="step-checkbox w-5 h-5 text-emerald-600 rounded border-slate-300 focus:ring-emerald-500">
<div>
<h4 class="text-sm font-bold text-emerald-800">회수 완료 및 성공보수 정산</h4>
<p class="text-[11px] text-emerald-600">실제 금액 입금 확인 후 사건 최종 종결</p>
</div>
</div>
<i data-lucide="Party-Popper" class="w-5 h-5 text-emerald-400"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Sidebar Content -->
<div class="space-y-6">
<!-- Financial Summary Card -->
<div class="bg-slate-900 rounded-3xl p-6 text-white shadow-xl shadow-slate-200 fade-in" style="animation-delay: 0.3s">
<div class="flex items-center gap-3 mb-6">
<div class="w-10 h-10 bg-indigo-500/20 rounded-xl flex items-center justify-center text-indigo-400">
<i data-lucide="Credit-Card" size="22"></i>
</div>
<h3 class="text-lg font-bold">채무 및 상환 현황</h3>
</div>
<div class="space-y-4">
<!-- Amount Info -->
<div class="p-4 bg-white/5 rounded-2xl border border-white/10">
<div class="flex justify-between items-center mb-1">
<span class="text-xs text-slate-400">총 청구 금액 (원금)</span>
<span class="text-sm font-bold">50,000,000원</span>
</div>
<div class="flex justify-between items-center">
<span class="text-xs text-slate-400">법정 이율 (연 12%)</span>
<span class="text-sm font-bold text-amber-400">+ 6,000,000원</span>
</div>
<div class="mt-3 pt-3 border-t border-white/10 flex justify-between items-center">
<span class="text-sm font-bold">최종 회수 목표액</span>
<span class="text-lg font-black text-indigo-400">56,000,000원</span>
</div>
</div>
<!-- Repayment Plan -->
<div class="space-y-4">
<label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest pl-1">상환 방식 및 시작일 설정</label>
<!-- Start Date Selection -->
<div class="p-3 bg-white/5 rounded-xl border border-white/10 flex items-center justify-between group">
<span class="text-[11px] text-slate-400">회수 시작일</span>
<input type="date" id="recovery-start-date" onchange="generateSchedule()"
class="bg-transparent text-xs font-bold text-indigo-400 border-none outline-none focus:ring-0 p-0 text-right w-28">
</div>
<div class="grid grid-cols-2 gap-2">
<button onclick="setPaymentType('full')" id="btn-pay-full" class="p-3 bg-white/5 rounded-xl border border-white/10 flex flex-col items-center gap-1 group transition-all hover:bg-white/10">
<span class="text-[11px] text-slate-400">일시납</span>
<span class="text-xs font-bold font-mono">FULL PAID</span>
</button>
<button onclick="setPaymentType('split')" id="btn-pay-split" class="p-3 bg-indigo-500/20 rounded-xl border border-indigo-500/30 flex flex-col items-center gap-1 transition-all">
<span class="text-[11px] text-indigo-300">분할 납부</span>
<span class="text-xs font-bold font-mono text-white" id="display-months">12회 분할</span>
</button>
</div>
<!-- Months Slider (Visible when split is selected) -->
<div id="slider-container" class="space-y-2 px-1">
<div class="flex justify-between text-[10px] text-slate-500 font-bold">
<span>분할 기간 설정</span>
<span id="slider-val" class="text-indigo-400">12개월</span>
</div>
<input type="range" id="months-slider" min="2" max="36" value="12" oninput="updateMonths(this.value)"
class="w-full h-1 bg-slate-800 rounded-lg appearance-none cursor-pointer accent-indigo-500">
<div class="flex justify-between text-[9px] text-slate-600">
<span>2개월</span>
<span>36개월</span>
</div>
</div>
</div>
<!-- Monthly Repayment (Visible when split is selected) -->
<div id="monthly-info" class="p-4 bg-indigo-500/5 rounded-2xl border border-indigo-500/10">
<div class="flex justify-between items-center">
<span class="text-xs text-slate-400">월 예상 상환액</span>
<span id="monthly-amount" class="text-sm font-bold text-indigo-300">4,666,667원</span>
</div>
</div>
<!-- Repayment Schedule List (Dynamic) -->
<div id="schedule-container" class="space-y-2 mt-4 max-h-[300px] overflow-y-auto pr-2 custom-scrollbar hidden">
<label class="text-[10px] font-bold text-slate-500 uppercase tracking-widest pl-1">납부 일정 체크리스트</label>
<div id="schedule-list" class="space-y-2">
<!-- Dynamic items here -->
</div>
</div>
<!-- Settlement Options -->
<div class="p-4 bg-amber-500/5 rounded-2xl border border-amber-500/20">
<div class="flex items-center gap-2 mb-2">
<i data-lucide="Handshake" size="14" class="text-amber-400"></i>
<span class="text-xs font-bold text-amber-200">할인 및 합의 처리</span>
</div>
<div class="flex items-center justify-between">
<span class="text-[11px] text-slate-400 leading-tight">합의 목표가: <span id="settlement-target-display">51,000,000</span>원<br>수수료 면제 협의 가능</span>
<button onclick="openSettlementModal()" class="px-3 py-1.5 bg-amber-500/20 text-amber-400 text-[10px] font-bold rounded-lg hover:bg-amber-500/30 transition-colors">
합의안 작성
</button>
</div>
</div>
</div>
<div class="mt-8 pt-6 border-t border-white/10">
<div class="flex items-center justify-between mb-2">
<span class="text-xs text-slate-400">현재 회수 진행 상태</span>
<span class="text-xs font-bold text-emerald-400 px-2 py-0.5 bg-emerald-500/10 rounded-full">정상 상환 중</span>
</div>
<div class="w-full bg-white/5 rounded-full h-1.5 overflow-hidden">
<div class="bg-emerald-500 w-[45%] h-full rounded-full shadow-[0_0_8px_rgba(16,185,129,0.5)]"></div>
</div>
</div>
</div>
<!-- Helper Card -->
<div class="bg-white rounded-3xl p-6 shadow-sm border border-slate-100 fade-in" style="animation-delay: 0.4s">
<div class="flex items-center gap-3 mb-4">
<div class="w-10 h-10 bg-blue-50 rounded-xl flex items-center justify-center text-blue-500">
<i data-lucide="Help-Circle" size="22"></i>
</div>
<h3 class="text-lg font-bold text-slate-800">도움말</h3>
</div>
<p class="text-sm text-slate-500 leading-relaxed mb-6">
설정된 상환 계획은 법적 효력이 있는 합의서를 기반으로 합니다. 분할 납부 지연 시 <span class="font-bold text-rose-500">기한의 이익</span>이 상실되어 즉시 강제집행 절차로 전환될 수 있습니다.
</p>
<button class="w-full py-3 border border-slate-200 rounded-xl text-sm font-bold text-slate-600 hover:bg-slate-50 transition-colors flex items-center justify-center gap-2">
채무 합의서 양식 다운로드
<i data-lucide="Download" size="14"></i>
</button>
</div>
<!-- Quote Card -->
<div class="bg-slate-50 rounded-3xl p-6 border border-slate-100 fade-in" style="animation-delay: 0.5s">
<p class="text-sm text-slate-600 italic text-center leading-relaxed">
"성공적인 채권 회수는 철저한<br>
<span class="font-bold text-indigo-600">심리적 전술</span>과 <span class="font-bold text-indigo-600">법적 타이밍</span>의 결합입니다."
</p>
<div class="mt-4 flex items-center justify-center gap-2">
<div class="w-6 h-6 bg-indigo-100 rounded-full"></div>
<span class="text-xs font-bold text-slate-400">Antigravity Advisor</span>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="mt-8 text-center">
<p class="text-[11px] text-slate-400">© 2026 SAM SaaS System. For Legal Professional Collaboration.</p>
</div>
</div>
<!-- Settlement Modal -->
<div id="settlementModal" class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
<div class="bg-white rounded-3xl w-full max-w-md shadow-2xl overflow-hidden fade-in">
<div class="p-6 border-b flex justify-between items-center">
<h3 class="text-lg font-bold text-slate-800">채무 합의안 작성</h3>
<button onclick="closeSettlementModal()" class="text-slate-400 hover:text-slate-600 transition-colors">
<i data-lucide="X" size="24"></i>
</button>
</div>
<div class="p-8 space-y-6">
<div>
<label class="block text-xs font-bold text-slate-400 uppercase tracking-wider mb-2">현재 최종 목표액</label>
<div class="text-2xl font-black text-slate-900">56,000,000원</div>
</div>
<div>
<label class="block text-xs font-bold text-indigo-600 uppercase tracking-wider mb-2">합의 제안 금액 (원)</label>
<input type="number" id="settlement-input" value="51000000"
class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-lg font-bold focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all">
<p class="mt-2 text-[11px] text-slate-400 leading-relaxed">
* 합의 금액 수정 시 원금 대비 감면율이 자동으로 계산됩니다.<br>
* 변호사 검토 후 최종 합의안이 발송됩니다.
</p>
</div>
<div class="bg-amber-50 border border-amber-100 p-4 rounded-2xl flex items-start gap-3">
<i data-lucide="Alert-Triangle" class="text-amber-500 mt-1 flex-shrink-0" size="18"></i>
<p class="text-xs text-amber-700 leading-relaxed">
합의 처리 시 법정 이율 전액 감면 및 원금의 일부가 조정될 수 있습니다. 신중하게 결정해 주시기 바랍니다.
</p>
</div>
</div>
<div class="p-6 bg-slate-50 flex gap-3">
<button onclick="closeSettlementModal()" class="flex-1 py-3 bg-white border border-slate-200 rounded-xl text-sm font-bold text-slate-600 hover:bg-slate-100 transition-colors">취소</button>
<button onclick="saveSettlement()" class="flex-1 py-3 bg-indigo-600 text-white rounded-xl text-sm font-bold shadow-lg shadow-indigo-200 hover:bg-indigo-700 transition-colors">합의안 저장</button>
</div>
</div>
</div>
<script>
// Lucide 아이콘 렌더링
lucide.createIcons();
let currentPaymentType = 'full';
let currentMonths = 12;
const totalAmount = 56000000;
function setPaymentType(type) {
currentPaymentType = type;
const btnFull = document.getElementById('btn-pay-full');
const btnSplit = document.getElementById('btn-pay-split');
const sliderCont = document.getElementById('slider-container');
const monthlyInfo = document.getElementById('monthly-info');
if (type === 'full') {
btnFull.classList.remove('bg-white/5', 'border-white/10');
btnFull.classList.add('bg-indigo-500/20', 'border-indigo-500/30');
btnFull.querySelector('span:first-child').classList.replace('text-slate-400', 'text-indigo-300');
btnSplit.classList.add('bg-white/5', 'border-white/10');
btnSplit.classList.remove('bg-indigo-500/20', 'border-indigo-500/30');
btnSplit.querySelector('span:first-child').classList.replace('text-indigo-300', 'text-slate-400');
btnSplit.querySelector('#display-months').classList.replace('text-white', 'text-slate-400');
sliderCont.classList.add('opacity-30', 'pointer-events-none');
monthlyInfo.classList.add('hidden');
} else {
btnSplit.classList.remove('bg-white/5', 'border-white/10');
btnSplit.classList.add('bg-indigo-500/20', 'border-indigo-500/30');
btnSplit.querySelector('span:first-child').classList.replace('text-slate-400', 'text-indigo-300');
btnSplit.querySelector('#display-months').classList.replace('text-slate-400', 'text-white');
btnFull.classList.add('bg-white/5', 'border-white/10');
btnFull.classList.remove('bg-indigo-500/20', 'border-indigo-500/30');
btnFull.querySelector('span:first-child').classList.replace('text-indigo-300', 'text-slate-400');
sliderCont.classList.remove('opacity-30', 'pointer-events-none');
monthlyInfo.classList.remove('hidden');
}
calculateRepayment();
}
function updateMonths(val) {
currentMonths = val;
document.getElementById('slider-val').innerText = val + '개월';
document.getElementById('display-months').innerText = val + '회 분할';
calculateRepayment();
}
function generateSchedule() {
const list = document.getElementById('schedule-list');
const container = document.getElementById('schedule-container');
const startDateInput = document.getElementById('recovery-start-date');
if (!startDateInput.value) {
const today = new Date();
startDateInput.value = today.toISOString().split('T')[0];
}
container.classList.remove('hidden');
list.innerHTML = '';
const baseDate = new Date(startDateInput.value);
if (currentPaymentType === 'full') {
const item = document.createElement('div');
item.className = 'p-4 bg-indigo-500/10 rounded-2xl border border-indigo-500/20 flex items-center justify-between group fade-in';
item.innerHTML = `
<div class="flex items-center gap-3">
<input type="checkbox" onchange="toggleScheduleRow(this)" class="w-5 h-5 rounded border-indigo-400/30 bg-transparent text-indigo-500 focus:ring-indigo-500">
<div>
<div class="text-[10px] font-bold text-indigo-300 uppercase tracking-widest">일시납 총액</div>
<div class="text-sm font-black text-white">${totalAmount.toLocaleString()}원</div>
</div>
</div>
<div class="text-right">
<div class="text-[11px] text-indigo-200 font-mono font-bold">${startDateInput.value}</div>
<div class="text-[10px] text-indigo-400 font-bold status-label">미납</div>
</div>
`;
list.appendChild(item);
return;
}
const monthly = Math.round(totalAmount / currentMonths);
for (let i = 1; i <= currentMonths; i++) {
const dueDate = new Date(baseDate);
dueDate.setMonth(baseDate.getMonth() + (i - 1)); // i-1 because first payment is usually on start date or 1 month after. Let's make it 1 month after as per standard.
dueDate.setMonth(baseDate.getMonth() + i);
const dateStr = dueDate.toISOString().split('T')[0];
const item = document.createElement('div');
item.className = 'p-3 bg-white/5 rounded-xl border border-white/5 flex items-center justify-between group hover:bg-white/10 transition-all';
item.innerHTML = `
<div class="flex items-center gap-3">
<input type="checkbox" onchange="toggleScheduleRow(this)" class="w-4 h-4 rounded border-white/20 bg-transparent text-indigo-500 focus:ring-indigo-500">
<div>
<div class="text-[10px] font-bold text-slate-400">${i}회차</div>
<div class="text-xs font-mono text-white">${monthly.toLocaleString()}원</div>
</div>
</div>
<div class="text-right">
<div class="text-[10px] text-slate-400 font-mono">${dateStr}</div>
<div class="text-[9px] text-slate-600 font-bold status-label">미납</div>
</div>
`;
list.appendChild(item);
}
}
function toggleScheduleRow(cb) {
const row = cb.closest('.group');
const statusLabel = row.querySelector('.status-label');
if (cb.checked) {
row.classList.add('bg-emerald-500/10', 'border-emerald-500/20');
row.classList.remove('bg-white/5', 'border-white/5');
statusLabel.innerText = '입금완료';
statusLabel.classList.add('text-emerald-400');
statusLabel.classList.remove('text-slate-600');
} else {
row.classList.remove('bg-emerald-500/10', 'border-emerald-500/20');
row.classList.add('bg-white/5', 'border-white/5');
statusLabel.innerText = '미납';
statusLabel.classList.remove('text-emerald-400');
statusLabel.classList.add('text-slate-600');
}
}
function calculateRepayment() {
if (currentPaymentType === 'split') {
const monthly = Math.round(totalAmount / currentMonths);
document.getElementById('monthly-amount').innerText = monthly.toLocaleString() + '원';
}
generateSchedule();
}
// Modal Functions
function openSettlementModal() {
document.getElementById('settlementModal').classList.remove('hidden');
}
function closeSettlementModal() {
document.getElementById('settlementModal').classList.add('hidden');
}
function saveSettlement() {
const newVal = document.getElementById('settlement-input').value;
document.getElementById('settlement-target-display').innerText = parseInt(newVal).toLocaleString();
closeSettlementModal();
// 시각적 효과
const targetEl = document.getElementById('settlement-target-display').parentElement;
targetEl.classList.add('text-indigo-400', 'scale-110', 'transition-all');
setTimeout(() => {
targetEl.classList.remove('scale-110');
}, 300);
}
// Tab Management
function showTab(tabId) {
document.querySelectorAll('.tab-content').forEach(tab => {
tab.classList.remove('active');
});
document.getElementById(tabId).classList.add('active');
document.querySelectorAll('.tab-btn').forEach(btn => {
btn.classList.remove('nav-active');
btn.classList.add('bg-white', 'text-slate-600', 'hover:bg-slate-100');
const badge = btn.querySelector('span');
if (badge) {
badge.classList.remove('bg-white/20');
badge.classList.add('bg-slate-200');
}
});
const activeBtn = document.getElementById('tab-' + tabId);
activeBtn.classList.add('nav-active');
activeBtn.classList.remove('bg-white', 'text-slate-600', 'hover:bg-slate-100');
const activeBadge = activeBtn.querySelector('span');
if (activeBadge) {
activeBadge.classList.add('bg-white/20');
activeBadge.classList.remove('bg-slate-200');
}
}
// Progress Tracking Function
function updateProgress() {
// Overall calculation
const allCheckboxes = document.querySelectorAll('.step-checkbox');
const total = allCheckboxes.length;
const checked = Array.from(allCheckboxes).filter(cb => cb.checked).length;
const overallPercentage = total > 0 ? Math.round((checked / total) * 100) : 0;
document.getElementById('progress-bar').style.width = overallPercentage + '%';
document.getElementById('progress-text').innerText = overallPercentage + '%';
// Individual Phase calculation
['phase1', 'phase2', 'phase3', 'phase4'].forEach(phaseId => {
const phaseSection = document.getElementById(phaseId);
const phaseCheckboxes = phaseSection.querySelectorAll('.step-checkbox');
const pTotal = phaseCheckboxes.length;
const pChecked = Array.from(phaseCheckboxes).filter(cb => cb.checked).length;
const pPercentage = pTotal > 0 ? Math.round((pChecked / pTotal) * 100) : 0;
const textElem = document.getElementById(phaseId + '-text');
const barElem = document.getElementById(phaseId + '-bar');
if (textElem) textElem.innerText = pPercentage + '%';
if (barElem) barElem.style.width = pPercentage + '%';
});
}
// Initialize on load
window.onload = function() {
updateProgress();
setPaymentType('full'); // Set Initial UI state
};
</script>
</body>
</html>

74
debt/readme.md Normal file
View File

@@ -0,0 +1,74 @@
# 채권 추심 프로세스 관리 시스템 (Legal Presentation Guide)
본 문서는 변호사 및 법무 전문가를 위해 설계된 **채권 추심 프로세스 대시보드**의 작동 원리와 법적/수학적 계산 로직을 설명합니다.
---
## 1. 채권 추심 4단계 프로세스 (Legal Workflow)
본 시스템은 체계적인 회수를 위해 채권 추심의 전 과정을 4개의 핵심 단계로 구조화하였습니다.
### Phase 1. 기초 조사 및 독촉 (1~2주)
- **목적**: 채무자의 상태 파악 및 자발적 이행 유도
- **주요 공정**: 신용/재산 조사, 내용증명 발송, 독촉 절차 안내
### Phase 2. 보전 처분 (2~4주)
- **목적**: 채무자의 자산 은닉 방지 및 집행 자산 사전 확보
- **주요 공정**: 부동산 가압류, 채권 가압류(은행 등), 공탁 절차 관리
### Phase 3. 집행권원 확보 (3~6개월)
- **목적**: 강제 집행을 위한 법적 근거(판결문 등) 확보
- **주요 공정**: 지급명령 신청, 민사 소송 접수, 조정 및 판결 확인
### Phase 4. 강제 집행 및 회수 (6~12개월)
- **목적**: 실제 자산 현금화 및 채권 종료
- **주요 공정**: 재산 명시/조회, 유동자산 압류, 경매 신청, 최종 완납 처리
---
## 2. 금융 계산 및 상환 시뮬레이션 원리
대시보드 사이드바의 금융 계산기는 다음과 같은 로직으로 작동합니다.
### A. 최종 회수 목표액 산정
- **수식**: `총 청구 금액(원금) + 법정 이율(연 12%) = 최종 회수 목표액`
- **설명**: 소송 촉진 등에 관한 특례법에 따른 법정 이율을 기본 적용하며, 기간에 따른 가산 이자를 투명하게 산출합니다.
### B. 분할 납부 시뮬레이션
- **수식**: `최종 목표액 ÷ 설정 개월 수 (2~36개월) = 월 예상 상환액`
- **설명**: 사용자가 슬라이더를 통해 기간을 조절하면, `Math.round` 함수를 통해 실시간으로 월별 균등 상환액을 계산하여 표시합니다.
### C. 합의 및 할인 처리 (Settlement)
- **설명**: 채무자가 조기 상환을 조건으로 원금 감면이나 이자 면제를 요청할 경우, '합의안 작성' 모달을 통해 조정된 목표가를 설정할 수 있습니다. 이는 시스템 내에서 별도의 '합의 목표가'로 관리됩니다.
---
## 3. 동적 상환 스케줄링 알고리즘
분할 납부 선택 시 생성되는 체크리스트의 생성 원리는 다음과 같습니다.
1. **시작일 기준 (Base Date)**: 사용자가 설정한 '회수 시작일'을 시점으로 잡습니다.
2. **월 단위 증분 (Month Increment)**:
- `Date.setMonth(BaseDate.getMonth() + n)` 로직을 사용하여 매월 동일한 날짜에 상환 기일이 도래하도록 자동 세팅합니다.
3. **회차별 상태 관리**:
- 각 회차는 독립적인 입금 여부(Paid/Unpaid)를 체크할 수 있습니다.
- 입금 체크 시 해당 회차의 배경색이 변경되며 시각적으로 완료 상태를 기록합니다.
---
## 4. 기대 효과
- **변호사-기업 간 투명성**: 정기적인 리포트 없이도 기업 담당자가 실시간으로 진행률 및 회수 금액을 확인할 수 있습니다.
- **심리적 전술 활용**: 체계적인 스케줄러와 D-Day 알림을 통해 채무자에게 명확한 압박을 가하고 합의를 유도하는 도구로 활용됩니다.
- **데이터 자산화**: 단순 추심을 넘어, 회수 패턴과 기간에 대한 데이터를 축적하여 향후 리스크 관리에 활용합니다.
---
_Created by Antigravity Advisor System (2026-01)_

3
index.php
View File

@@ -207,6 +207,9 @@
<a href="company/index.php" class="block px-4 py-2 text-sm text-slate-700 hover:bg-brand-50 hover:text-brand-600 font-medium">
기타 기업분석자료
</a>
<a href="debt/index.php" class="block px-4 py-2 text-sm text-slate-700 hover:bg-brand-50 hover:text-brand-600 font-medium">
채권추심 프로세스 관리
</a>
</div>
</div>
<?php if (isset($_SESSION['userid']) && $_SESSION['userid'] != ''): ?>