220 lines
7.0 KiB
HTML
220 lines
7.0 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="ko">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<title>계약 리스트 조회 테스트</title>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
font-family: Arial, sans-serif;
|
||
|
|
margin: 20px;
|
||
|
|
background-color: #f5f5f5;
|
||
|
|
}
|
||
|
|
.container {
|
||
|
|
max-width: 1200px;
|
||
|
|
margin: 0 auto;
|
||
|
|
background-color: white;
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 8px;
|
||
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
h1 {
|
||
|
|
color: #333;
|
||
|
|
text-align: center;
|
||
|
|
margin-bottom: 30px;
|
||
|
|
}
|
||
|
|
.test-section {
|
||
|
|
margin-bottom: 30px;
|
||
|
|
padding: 20px;
|
||
|
|
border: 1px solid #ddd;
|
||
|
|
border-radius: 5px;
|
||
|
|
background-color: #fafafa;
|
||
|
|
}
|
||
|
|
.test-section h2 {
|
||
|
|
color: #0066cc;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
}
|
||
|
|
button {
|
||
|
|
background-color: #0066cc;
|
||
|
|
color: white;
|
||
|
|
padding: 10px 20px;
|
||
|
|
border: none;
|
||
|
|
border-radius: 4px;
|
||
|
|
cursor: pointer;
|
||
|
|
margin-right: 10px;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
button:hover {
|
||
|
|
background-color: #0052a3;
|
||
|
|
}
|
||
|
|
.result {
|
||
|
|
margin-top: 15px;
|
||
|
|
padding: 10px;
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
border-radius: 4px;
|
||
|
|
background-color: white;
|
||
|
|
max-height: 300px;
|
||
|
|
overflow-y: auto;
|
||
|
|
}
|
||
|
|
.success {
|
||
|
|
border-color: #4caf50;
|
||
|
|
background-color: #f9fff9;
|
||
|
|
}
|
||
|
|
.error {
|
||
|
|
border-color: #f44336;
|
||
|
|
background-color: #fff9f9;
|
||
|
|
}
|
||
|
|
table {
|
||
|
|
width: 100%;
|
||
|
|
border-collapse: collapse;
|
||
|
|
margin-top: 10px;
|
||
|
|
}
|
||
|
|
th,
|
||
|
|
td {
|
||
|
|
border: 1px solid #ddd;
|
||
|
|
padding: 8px;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
th {
|
||
|
|
background-color: #f2f2f2;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
.loading {
|
||
|
|
text-align: center;
|
||
|
|
color: #666;
|
||
|
|
font-style: italic;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<h1>📋 계약 리스트 조회 테스트</h1>
|
||
|
|
|
||
|
|
<!-- 테스트 1: 전체 리스트 조회 -->
|
||
|
|
<div class="test-section">
|
||
|
|
<h2>🔍 테스트 1: 전체 리스트 조회</h2>
|
||
|
|
<p>저장된 모든 계약 데이터를 조회합니다.</p>
|
||
|
|
<button onclick="testAllList()">전체 리스트 조회</button>
|
||
|
|
<div id="result1" class="result"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 테스트 2: 2025년 데이터 조회 -->
|
||
|
|
<div class="test-section">
|
||
|
|
<h2>📅 테스트 2: 2025년 데이터 조회</h2>
|
||
|
|
<p>2025년도 계약 데이터만 조회합니다.</p>
|
||
|
|
<button onclick="testYearFilter()">2025년 데이터 조회</button>
|
||
|
|
<div id="result2" class="result"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 테스트 3: 영업번호별 조회 -->
|
||
|
|
<div class="test-section">
|
||
|
|
<h2>🔢 테스트 3: 영업번호별 조회</h2>
|
||
|
|
<p>특정 영업번호(25C-로 시작하는)로 조회합니다.</p>
|
||
|
|
<button onclick="testContractNoFilter()">영업번호 조회</button>
|
||
|
|
<div id="result3" class="result"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 테스트 4: 페이징 조회 -->
|
||
|
|
<div class="test-section">
|
||
|
|
<h2>📄 테스트 4: 페이징 조회</h2>
|
||
|
|
<p>페이징 처리된 리스트를 조회합니다.</p>
|
||
|
|
<button onclick="testPagingList()">페이징 리스트 조회</button>
|
||
|
|
<div id="result4" class="result"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// 공통 AJAX 함수
|
||
|
|
function makeRequest(url, data, resultElementId) {
|
||
|
|
const resultElement = document.getElementById(resultElementId);
|
||
|
|
resultElement.innerHTML =
|
||
|
|
'<div class="loading">⏳ 데이터를 조회하는 중...</div>';
|
||
|
|
|
||
|
|
fetch(url, {
|
||
|
|
method: "GET",
|
||
|
|
headers: {
|
||
|
|
"Content-Type": "application/x-www-form-urlencoded",
|
||
|
|
},
|
||
|
|
credentials: "include",
|
||
|
|
})
|
||
|
|
.then((response) => {
|
||
|
|
if (!response.ok) {
|
||
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
||
|
|
}
|
||
|
|
return response.text();
|
||
|
|
})
|
||
|
|
.then((html) => {
|
||
|
|
resultElement.className = "result success";
|
||
|
|
resultElement.innerHTML = `
|
||
|
|
<h3>✅ 조회 성공</h3>
|
||
|
|
<p><strong>응답 크기:</strong> ${html.length} bytes</p>
|
||
|
|
<p><strong>응답 내용 (처음 500자):</strong></p>
|
||
|
|
<pre style="max-height: 200px; overflow-y: auto; background-color: #f8f8f8; padding: 10px; border-radius: 4px;">${html.substring(
|
||
|
|
0,
|
||
|
|
500
|
||
|
|
)}...</pre>
|
||
|
|
`;
|
||
|
|
|
||
|
|
// 테이블 데이터 파싱 시도
|
||
|
|
const parser = new DOMParser();
|
||
|
|
const doc = parser.parseFromString(html, "text/html");
|
||
|
|
const rows = doc.querySelectorAll("table tbody tr");
|
||
|
|
|
||
|
|
if (rows.length > 0) {
|
||
|
|
resultElement.innerHTML += `
|
||
|
|
<p><strong>조회된 데이터 건수:</strong> ${rows.length}건</p>
|
||
|
|
<p><strong>첫 번째 데이터:</strong></p>
|
||
|
|
<div style="background-color: #f0f8ff; padding: 10px; border-radius: 4px;">
|
||
|
|
${rows[0].innerHTML}
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch((error) => {
|
||
|
|
resultElement.className = "result error";
|
||
|
|
resultElement.innerHTML = `
|
||
|
|
<h3>❌ 조회 실패</h3>
|
||
|
|
<p><strong>오류 메시지:</strong> ${error.message}</p>
|
||
|
|
<p><strong>해결 방법:</strong></p>
|
||
|
|
<ul>
|
||
|
|
<li>서버가 실행 중인지 확인 (http://localhost:8090)</li>
|
||
|
|
<li>로그인이 필요한지 확인</li>
|
||
|
|
<li>매퍼 파일 수정사항이 반영되었는지 확인</li>
|
||
|
|
</ul>
|
||
|
|
`;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// 테스트 1: 전체 리스트 조회
|
||
|
|
function testAllList() {
|
||
|
|
makeRequest("/contractMgmt/contractList.do", {}, "result1");
|
||
|
|
}
|
||
|
|
|
||
|
|
// 테스트 2: 2025년 데이터 조회
|
||
|
|
function testYearFilter() {
|
||
|
|
makeRequest("/contractMgmt/contractList.do?Year=2025", {}, "result2");
|
||
|
|
}
|
||
|
|
|
||
|
|
// 테스트 3: 영업번호별 조회
|
||
|
|
function testContractNoFilter() {
|
||
|
|
makeRequest(
|
||
|
|
"/contractMgmt/contractList.do?contract_no=25C",
|
||
|
|
{},
|
||
|
|
"result3"
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 테스트 4: 페이징 조회
|
||
|
|
function testPagingList() {
|
||
|
|
makeRequest("/contractMgmt/getPagingContractList.do", {}, "result4");
|
||
|
|
}
|
||
|
|
|
||
|
|
// 페이지 로드 시 자동으로 전체 리스트 조회
|
||
|
|
window.onload = function () {
|
||
|
|
console.log("🚀 계약 리스트 조회 테스트 페이지가 로드되었습니다.");
|
||
|
|
console.log("💡 각 테스트 버튼을 클릭하여 데이터 조회를 확인하세요.");
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|