Spaces:

r2d209
/

ncss2

Running

ncss2 / index.html

다음 "배경 지식"을 참고해, NCSS CP 정산시스템에서 "NCSS내 세금계산서 조회 및 전표발행 기능 정의" 내역 기반 화면들을 제안해줘. 이때 "개선 포인트"에 언급한 내용도 반영될 수 있게 해줘 #배경 지식 SK브로드밴드는 CP(Contents Provider)에서 영화, 드라마등의 콘텐츠를 수급해 IPTV내 VoD 서비스를 제공중이고, 이 서비스에서 매월 발생한 매출 대상 각 CP별 계약조건으로 정산하는 NCSS라는 시스템이 있다. NCSS에는 CP와 계약을 맺은 정산담당자들이 계약조건을 입력하고, 그 계약 조건에 따라 정산결과가 산출된다. PoC라는 용어는 VoD가 편성되어 매출이 발생하는 매체 단위이며, B tv, IP-CATV, T Play 세가지가 존재한다. NCSS상에 계약은 동일한 CP이더라도 각 정산담당자마다 다른 조건에 따라 다수의 계약을 입력하고 이에 따라 각 담당자의 계약별 정산결과가 산출된다. 즉, 정산결과는 각 정산담당자의 계약별로 PoC단위로 그룹핑 되어 산출된다. CP가 발행하는 세금계산서는 사업자명, 사업자번호, 공급가액, 세액, 발행일 정보만 있고, 대상 PoC정보나 SK브로드밴드 정산담당자 정보는 제공되지 않는다. 세금계산서는 서비스가 제공되는 매체 단위인 PoC 별로 발행된다. #NCSS내 세금계산서 조회 및 전표발행 기능 정의 SK브로드밴드 SAP에 등록된 위 "배경 지식"에 기술한 조건의 세금계산서를 조회해 정산담당자는 본인이 계약을 가지고 있는 모든 CP로부터 발행된 세금계산서 목록만 필터링해 조회할 수 있어야 한다. 조회된 세금계산서 목록 화면에서 세금계산서 중 하나를 선택해 세부 팝업(=임시전표 발행 화면) 으로 들어가면 자신이 담당하는 계약별로 PoC단위 그룹핑되어 산출된 복수개의 정산결과 금액들과 대조, 선택해 세금계산서-정산결과 매칭함으로 SAP에 임시전표를 발행할 수 있어야 한다. 세금계산서는 사업자명, 사업자번호, 공급가액, 세액, 발행일 정보만 있어, 세금계산서 목록 화면 제공 정보 세금계산서 발행일자, 세금계산서 번호, 파트너사명, 매입금액(세금계산서 상의 세액이 포함되지 않은 공급가액), 전표발행상태, 매칭PoC 이들 제공 항목 별로 필터링해서 조회할 수 있도록 제공 전표발행상태 : 이미 세금계산서-정산결과를 매칭해 임시전표 발행된 항목은 "발행완료"로 상태 표시되고, 아직 매칭되지 않은 건 "미발행"으로 구분해 상태 표기 매칭PoC : 세금계산서-정산결과를 매칭해 임시전표 발행시 매칭된 정산결과의 PoC 표기 임시전표 발행 화면 제공 정보 팝업 화면으로 제공 팝업화면 좌측에는 "세금게산서 정보" 제목 이하로 세금계산서 발행일자, 세금계산서 번호, 파트너사명, 매입금액, 전표발행상태, 매칭PoC 표시하고 팝업화면 우측에는 "정산 정보 매핑" 제목 이하로 해당 CP의 PoC별 정산금액 목록 제공, 이 목록중에 세금계산서상 매입금액과 일치하는 정산금액이 있으면 자동으로 체크박스에 매칭 표시 CP의 PoC별 정산금액 목록 우측의 "상세내역" 버튼을 클릭하면, 해당 목록의 정산금액이 어떤 계약과 PoC들에서 각각 얼마의 정산금액이 발생한건지 세부 내역 확인 화면 제공 전표밣행상태가 "미발행"상태일때문 팝업 화면 우측 하단에 "임시전표 발행" 버튼이 활성화됨 #개선 포인트 세금계산서는 사업자명, 번호, 금액 정보만 있지 대상 PoC와 SKB 정산담당자 정보는 없으므로, PoC(B tv, IP-CATV, T Play) 별 세금계산서가 어떤 것인지 기본적으로 매핑이 불가하나 일일이 정산담당자가 세금계산서-정산결과의 금액을 대조하여 전표를 발행하면 사용성이 떨어지므로, 기본적으로 담당자의 해당 CP 대상 계약(SVOD, TVOD)을 PoC 별로 합산한 정산결과 금액이 CP에서 계약에 대한 PoC별 발행 내역과 일치해야 하므로 NCSS에서 판단시 정산담당자가 자신의 세금계산서-전표 발의 대상 CP를 조회하는 세금계산서 조회 화면상에서 발행된 세금계산서상 금액과 해당 CP의 정산결과 금액 중 일치 금액이 있을시 이를 자동 매칭하여 세금계산서 목록 화면상에 해당 정산대상금액도 같이 노출하고 이 리스트의 배경을 하이라이트되게 다른색으로 표기하여, 맨앞의 체크박스 멀티로 이들 대상 선택해 화면 하단의 "임시전표 발행" 버튼을 누르면 선택된 대상은 일괄로 SAP 임시 전표가 발행되도록 사용성 개선 - Initial Deployment

6d53cd9 verified about 1 year ago

Raw

History Blame Contribute Delete

33.6 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>NCSS CP 정산 시스템 - 세금계산서 관리</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
	<script>
	tailwind.config = {
	theme: {
	extend: {
	colors: {
	primary: '#3b82f6',
	secondary: '#10b981',
	highlight: '#fef3c7',
	dark: '#1f2937',
	}
	}
	}
	}
	</script>
	<style>
	.highlight-row {
	background-color: #fef3c7;
	}
	.receipt-matched {
	animation: pulse 1.5s infinite;
	}
	@keyframes pulse {
	0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.3); }
	70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
	100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
	}
	.receipt-card {
	transition: all 0.3s ease;
	}
	.receipt-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	}
	</style>
	</head>
	<body class="bg-gray-50 min-h-screen">
	<div class="container mx-auto px-4 py-8">
	<!-- 헤더 영역 -->
	<header class="mb-8">
	<div class="flex justify-between items-center">
	<div>
	<h1 class="text-3xl font-bold text-dark">NCSS CP 정산 시스템</h1>
	<p class="text-gray-600">세금계산서 조회 및 전표발행</p>
	</div>
	<div class="flex items-center space-x-4">
	<div class="relative">
	<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
	<i class="fas fa-user text-gray-400"></i>
	</div>
	<span class="pl-8 text-gray-700">김정산 (정산담당자)</span>
	</div>
	<button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition">
	<i class="fas fa-sign-out-alt mr-2"></i>로그아웃
	</button>
	</div>
	</div>
	</header>

	<!-- 필터 영역 -->
	<div class="bg-white rounded-lg shadow-md p-6 mb-6">
	<h2 class="text-xl font-semibold mb-4 text-dark">세금계산서 조회 필터</h2>
	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">기간</label>
	<div class="flex space-x-2">
	<input type="date" class="w-full border-gray-300 rounded-md p-2 border focus:ring-primary focus:border-primary">
	<span class="flex items-center">~</span>
	<input type="date" class="w-full border-gray-300 rounded-md p-2 border focus:ring-primary focus:border-primary">
	</div>
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">CP사명</label>
	<select class="w-full border-gray-300 rounded-md p-2 border focus:ring-primary focus:border-primary">
	<option value="">전체</option>
	<option value="1">넷플릭스</option>
	<option value="2">디즈니+</option>
	<option value="3">웨이브</option>
	<option value="4">티빙</option>
	</select>
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">PoC</label>
	<select class="w-full border-gray-300 rounded-md p-2 border focus:ring-primary focus:border-primary">
	<option value="">전체</option>
	<option value="Btv">B tv</option>
	<option value="IP-CATV">IP-CATV</option>
	<option value="TPlay">T Play</option>
	</select>
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">전표 상태</label>
	<select class="w-full border-gray-300 rounded-md p-2 border focus:ring-primary focus:border-primary">
	<option value="">전체</option>
	<option value="issued">발행완료</option>
	<option value="not_issued">미발행</option>
	</select>
	</div>
	</div>
	<div class="mt-4 flex justify-end">
	<button id="searchBtn" class="bg-primary text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition">
	<i class="fas fa-search mr-2"></i>조회
	</button>
	</div>
	</div>

	<!-- 알림 영역 -->
	<div id="autoMatchAlert" class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mb-6 rounded hidden">
	<div class="flex items-center">
	<i class="fas fa-info-circle text-green-500 mr-3 text-xl"></i>
	<div>
	<p class="font-semibold">자동 매칭 완료</p>
	<p class="text-sm">세금계산서 금액과 정산결과 금액이 일치하는 <span id="matchedCount">3</span>건이 자동으로 매칭되었습니다.</p>
	</div>
	</div>
	</div>

	<!-- 결과 영역 -->
	<div class="bg-white rounded-lg shadow-md overflow-hidden">
	<div class="flex justify-between items-center p-4 border-b">
	<h2 class="text-xl font-semibold text-dark">세금계산서 목록</h2>
	<div class="text-sm text-gray-600">
	<span class="font-medium">총 <span id="totalCount">12</span>건</span>
	<span class="mx-2">\|</span>
	<span class="text-green-600">자동매칭 <span id="autoMatchedCount">3</span>건</span>
	</div>
	</div>

	<!-- 테이블 영역 -->
	<div class="overflow-x-auto">
	<table class="min-w-full divide-y divide-gray-200">
	<thead class="bg-gray-50">
	<tr>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
	<input type="checkbox" class="rounded text-primary focus:ring-primary">
	</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">발행일자</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">세금계산서 번호</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">파트너사명</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">매입금액</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">전표상태</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">매칭PoC</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">매칭금액</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">액션</th>
	</tr>
	</thead>
	<tbody class="bg-white divide-y divide-gray-200">
	<!-- 자동 매칭된 행 (하이라이트) -->
	<tr class="highlight-row receipt-matched">
	<td class="px-6 py-4 whitespace-nowrap">
	<input type="checkbox" checked class="rounded text-primary focus:ring-primary">
	</td>
	<td class="px-6 py-4 whitespace-nowrap">2023-10-10</td>
	<td class="px-6 py-4 whitespace-nowrap">20231010-001</td>
	<td class="px-6 py-4 whitespace-nowrap">넷플릭스</td>
	<td class="px-6 py-4 whitespace-nowrap">12,500,000 원</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">미발행</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">B tv</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-green-600">
	<i class="fas fa-check-circle text-green-500 mr-1"></i> 12,500,000 원
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<button class="text-primary hover:text-blue-700" onclick="showReceiptDetail('20231010-001')">
	<i class="fas fa-search-plus"></i> 상세보기
	</button>
	</td>
	</tr>
	<!-- 일반 행 -->
	<tr>
	<td class="px-6 py-4 whitespace-nowrap">
	<input type="checkbox" class="rounded text-primary focus:ring-primary">
	</td>
	<td class="px-6 py-4 whitespace-nowrap">2023-10-05</td>
	<td class="px-6 py-4 whitespace-nowrap">20231005-001</td>
	<td class="px-6 py-4 whitespace-nowrap">디즈니+</td>
	<td class="px-6 py-4 whitespace-nowrap">8,750,000 원</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">미발행</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">-</td>
	<td class="px-6 py-4 whitespace-nowrap">-</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<button class="text-primary hover:text-blue-700" onclick="showReceiptDetail('20231005-001')">
	<i class="fas fa-search-plus"></i> 상세보기
	</button>
	</td>
	</tr>
	<!-- 발행완료 행 -->
	<tr>
	<td class="px-6 py-4 whitespace-nowrap">
	<input type="checkbox" disabled class="rounded text-gray-400 focus:ring-gray-400">
	</td>
	<td class="px-6 py-4 whitespace-nowrap">2023-09-28</td>
	<td class="px-6 py-4 whitespace-nowrap">20230928-001</td>
	<td class="px-6 py-4 whitespace-nowrap">웨이브</td>
	<td class="px-6 py-4 whitespace-nowrap">15,200,000 원</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">발행완료</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">IP-CATV</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-gray-500">
	<i class="fas fa-check-circle text-gray-400 mr-1"></i> 15,200,000 원
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<button class="text-gray-400 cursor-not-allowed">
	<i class="fas fa-search-plus"></i> 상세보기
	</button>
	</td>
	</tr>
	<!-- 추가 행들... -->
	</tbody>
	</table>
	</div>

	<!-- 페이지네이션 및 액션 버튼 -->
	<div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
	<div class="flex-1 flex justify-between sm:hidden">
	<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
	이전
	</a>
	<a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
	다음
	</a>
	</div>
	<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
	<div>
	<p class="text-sm text-gray-700">
	총 <span class="font-medium">12</span>건 중 <span class="font-medium">1</span>-<span class="font-medium">10</span>건 표시
	</p>
	</div>
	<div>
	<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
	<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
	<span class="sr-only">이전</span>
	<i class="fas fa-chevron-left"></i>
	</a>
	<!-- Current: "z-10 bg-primary-50 border-primary-500 text-primary-600", Default: "bg-white border-gray-300 text-gray-500 hover:bg-gray-50" -->
	<a href="#" aria-current="page" class="z-10 bg-primary-50 border-primary-500 text-primary-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
	1
	</a>
	<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
	2
	</a>
	<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
	3
	</a>
	<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
	<span class="sr-only">다음</span>
	<i class="fas fa-chevron-right"></i>
	</a>
	</nav>
	</div>
	</div>
	<div class="ml-4">
	<button id="issueBtn" class="bg-green-600 text-white px-6 py-2 rounded-lg hover:bg-green-700 transition disabled:bg-gray-300 disabled:cursor-not-allowed">
	<i class="fas fa-file-invoice-dollar mr-2"></i>임시전표 발행
	</button>
	</div>
	</div>
	</div>
	</div>

	<!-- 세금계산서 상세 팝업 (임시전표 발행 화면) -->
	<div id="receiptModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
	<div class="relative top-20 mx-auto p-5 border w-4/5 shadow-lg rounded-md bg-white" style="max-width: 1200px;">
	<div class="flex justify-between items-center border-b pb-3">
	<h3 class="text-xl font-semibold text-dark">세금계산서 상세 및 정산 매칭</h3>
	<button onclick="closeModal()" class="text-gray-500 hover:text-gray-700">
	<i class="fas fa-times"></i>
	</button>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
	<!-- 세금계산서 정보 -->
	<div class="bg-gray-50 p-4 rounded-lg">
	<h4 class="text-lg font-semibold mb-4 text-dark border-b pb-2">세금계산서 정보</h4>
	<div class="space-y-4">
	<div class="grid grid-cols-2 gap-4">
	<div>
	<p class="text-sm text-gray-500 mb-1">발행일자</p>
	<p class="font-medium" id="receiptDate">2023-10-10</p>
	</div>
	<div>
	<p class="text-sm text-gray-500 mb-1">세금계산서 번호</p>
	<p class="font-medium" id="receiptNo">20231010-001</p>
	</div>
	</div>
	<div>
	<p class="text-sm text-gray-500 mb-1">파트너사명</p>
	<p class="font-medium" id="partnerName">넷플릭스</p>
	</div>
	<div class="grid grid-cols-2 gap-4">
	<div>
	<p class="text-sm text-gray-500 mb-1">매입금액</p>
	<p class="font-medium" id="receiptAmount">12,500,000 원</p>
	</div>
	<div>
	<p class="text-sm text-gray-500 mb-1">전표상태</p>
	<p id="receiptStatus">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">미발행</span>
	</p>
	</div>
	</div>
	<div>
	<p class="text-sm text-gray-500 mb-1">매칭PoC</p>
	<p id="matchedPoc">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">B tv</span>
	</p>
	</div>
	</div>
	</div>

	<!-- 정산 정보 매칭 -->
	<div class="bg-gray-50 p-4 rounded-lg">
	<h4 class="text-lg font-semibold mb-4 text-dark border-b pb-2">정산 정보 매칭</h4>
	<div class="overflow-x-auto">
	<table class="min-w-full divide-y divide-gray-200">
	<thead class="bg-gray-100">
	<tr>
	<th scope="col" class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">선택</th>
	<th scope="col" class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">PoC</th>
	<th scope="col" class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">정산금액</th>
	<th scope="col" class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">상태</th>
	<th scope="col" class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">액션</th>
	</tr>
	</thead>
	<tbody class="bg-white divide-y divide-gray-200">
	<!-- 자동 매칭된 항목 -->
	<tr class="bg-green-50">
	<td class="px-3 py-4 whitespace-nowrap">
	<input type="checkbox" checked class="rounded text-green-600 focus:ring-green-600">
	</td>
	<td class="px-3 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">B tv</span>
	</td>
	<td class="px-3 py-4 whitespace-nowrap">
	<span class="font-medium">12,500,000 원</span>
	</td>
	<td class="px-3 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">매칭 가능</span>
	</td>
	<td class="px-3 py-4 whitespace-nowrap">
	<button class="text-primary hover:text-blue-700" onclick="showDetail('B tv')">
	<i class="fas fa-info-circle"></i> 상세내역
	</button>
	</td>
	</tr>
	<!-- 다른 항목 -->
	<tr>
	<td class="px-3 py-4 whitespace-nowrap">
	<input type="checkbox" class="rounded text-primary focus:ring-primary">
	</td>
	<td class="px-3 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">IP-CATV</span>
	</td>
	<td class="px-3 py-4 whitespace-nowrap">
	<span class="font-medium">8,750,000 원</span>
	</td>
	<td class="px-3 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">금액 불일치</span>
	</td>
	<td class="px-3 py-4 whitespace-nowrap">
	<button class="text-primary hover:text-blue-700" onclick="showDetail('IP-CATV')">
	<i class="fas fa-info-circle"></i> 상세내역
	</button>
	</td>
	</tr>
	<!-- 추가 항목들... -->
	</tbody>
	</table>
	</div>
	<div class="mt-4 p-3 bg-yellow-50 rounded border border-yellow-200 text-sm">
	<i class="fas fa-exclamation-circle text-yellow-500 mr-2"></i>
	대표 계약: SVOD - 2023년 넷플릭스 계약 (계약번호: NCT-2023-001)
	</div>
	<div class="mt-4 text-right">
	<button id="issueSingleBtn" class="bg-green-600 text-white px-6 py-2 rounded-lg hover:bg-green-700 transition">
	<i class="fas fa-file-invoice-dollar mr-2"></i>임시전표 발행
	</button>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- 정산 상세 내역 팝업 -->
	<div id="detailModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
	<div class="relative top-20 mx-auto p-5 border w-3/4 shadow-lg rounded-md bg-white" style="max-width: 900px;">
	<div class="flex justify-between items-center border-b pb-3">
	<h3 class="text-xl font-semibold text-dark">정산 상세 내역 - <span id="detailPocTitle">B tv</span></h3>
	<button onclick="closeDetailModal()" class="text-gray-500 hover:text-gray-700">
	<i class="fas fa-times"></i>
	</button>
	</div>

	<div class="mt-4">
	<h4 class="text-md font-semibold mb-2 text-dark">기본 정보</h4>
	<div class="grid grid-cols-3 gap-4 mb-4">
	<div>
	<p class="text-sm text-gray-500 mb-1">PoC</p>
	<p class="font-medium" id="detailPoc">B tv</p>
	</div>
	<div>
	<p class="text-sm text-gray-500 mb-1">정산 금액</p>
	<p class="font-medium" id="detailAmount">12,500,000 원</p>
	</div>
	<div>
	<p class="text-sm text-gray-500 mb-1">정산 기간</p>
	<p class="font-medium" id="detailPeriod">2023-10-01 ~ 2023-10-31</p>
	</div>
	</div>

	<h4 class="text-md font-semibold mb-2 mt-6 text-dark">계약별 상세 내역</h4>
	<div class="overflow-x-auto">
	<table class="min-w-full divide-y divide-gray-200">
	<thead class="bg-gray-100">
	<tr>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">계약유형</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">계약번호</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">정산금액</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">담당자</th>
	</tr>
	</thead>
	<tbody class="bg-white divide-y divide-gray-200">
	<tr>
	<td class="px-6 py-4 whitespace-nowrap">SVOD</td>
	<td class="px-6 py-4 whitespace-nowrap">NCT-2023-001</td>
	<td class="px-6 py-4 whitespace-nowrap">9,500,000 원</td>
	<td class="px-6 py-4 whitespace-nowrap">김정산</td>
	</tr>
	<tr class="bg-gray-50">
	<td class="px-6 py-4 whitespace-nowrap">TVOD</td>
	<td class="px-6 py-4 whitespace-nowrap">NCT-2023-002</td>
	<td class="px-6 py-4 whitespace-nowrap">3,000,000 원</td>
	<td class="px-6 py-4 whitespace-nowrap">김정산</td>
	</tr>
	<!-- 합계 행 -->
	<tr class="bg-blue-50">
	<td class="px-6 py-4 whitespace-nowrap font-semibold" colspan="2">총합</td>
	<td class="px-6 py-4 whitespace-nowrap font-semibold">12,500,000 원</td>
	<td class="px-6 py-4 whitespace-nowrap"></td>
	</tr>
	</tbody>
	</table>
	</div>

	<div class="mt-6 flex justify-end">
	<button onclick="closeDetailModal()" class="bg-gray-200 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-300 transition">
	닫기
	</button>
	</div>
	</div>
	</div>
	</div>

	<script>
	// 모달 컨트롤 함수들
	function showReceiptDetail(receiptNo) {
	document.getElementById('receiptModal').classList.remove('hidden');
	document.body.style.overflow = 'hidden';

	// 모달에 데이터 채우기 (실제 구현에서는 AJAX로 데이터를 가져와야 함)
	document.getElementById('receiptNo').textContent = receiptNo;
	// 다른 필드들도 채우기...
	}

	function closeModal() {
	document.getElementById('receiptModal').classList.add('hidden');
	document.body.style.overflow = 'auto';
	}

	function showDetail(poc) {
	document.getElementById('detailModal').classList.remove('hidden');
	document.getElementById('detailPocTitle').textContent = poc;
	document.getElementById('detailPoc').textContent = poc;
	// 다른 필드들도 채우기...
	}

	function closeDetailModal() {
	document.getElementById('detailModal').classList.add('hidden');
	}

	// 페이지 로드 시 자동 매칭 알림 표시
	document.addEventListener('DOMContentLoaded', function() {
	const autoMatchAlert = document.getElementById('autoMatchAlert');
	setTimeout(() => {
	autoMatchAlert.classList.remove('hidden');
	// 5초 후 알림 자동 숨기기
	setTimeout(() => {
	autoMatchAlert.classList.add('hidden');
	}, 5000);
	}, 1000);

	// 체크박스 상태에 따라 발행 버튼 활성화/비활성화
	const checkboxes = document.querySelectorAll('tbody input[type="checkbox"]');
	const issueBtn = document.getElementById('issueBtn');

	checkboxes.forEach(checkbox => {
	checkbox.addEventListener('change', function() {
	const checkedBoxes = document.querySelectorAll('tbody input[type="checkbox"]:checked');
	issueBtn.disabled = checkedBoxes.length === 0;
	});
	});

	// 조회 버튼 클릭 이벤트 (실제 구현에서는 AJAX 호출)
	document.getElementById('searchBtn').addEventListener('click', function() {
	alert('조회 기능이 실행되었습니다. 실제 구현에서는 필터 조건에 맞는 데이터를 서버에서 가져옵니다.');
	// 애니메이션 효과로 사용자에게 피드백 제공
	this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>조회 중...';
	setTimeout(() => {
	this.innerHTML = '<i class="fas fa-search mr-2"></i>조회';
	}, 1500);
	});

	// 발행 버튼 클릭 이벤트
	issueBtn.addEventListener('click', function() {
	alert('임시전표 발행이 요청되었습니다. 실제 구현에서는 선택된 세금계산서에 대해 SAP 연동을 수행합니다.');
	});

	// 단건 발행 버튼 클릭 이벤트
	document.getElementById('issueSingleBtn').addEventListener('click', function() {
	alert('단건 임시전표 발행이 요청되었습니다. 세금계산서 번호: ' + document.getElementById('receiptNo').textContent);
	closeModal();
	});
	});
	</script>
	<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=r2d209/ncss2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>