185 lines
7.5 KiB
HTML
185 lines
7.5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="ko">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>AJAX 테스트 페이지 - 새로운 계산 로직</title>
|
||
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||
|
|
<style>
|
||
|
|
body { font-family: Arial, sans-serif; margin: 20px; }
|
||
|
|
.test-section { margin: 20px 0; padding: 15px; border: 1px solid #ddd; }
|
||
|
|
input, button { margin: 5px; padding: 5px; }
|
||
|
|
.result { margin-top: 10px; padding: 10px; background-color: #f5f5f5; }
|
||
|
|
.error { color: red; }
|
||
|
|
.success { color: green; }
|
||
|
|
.calculation-form { background-color: #f9f9f9; padding: 15px; border-radius: 5px; }
|
||
|
|
.calculation-form input { width: 100px; margin: 5px; }
|
||
|
|
.calculation-form label { display: inline-block; width: 120px; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>AJAX 테스트 페이지 - 새로운 계산 로직</h1>
|
||
|
|
|
||
|
|
<div class="test-section">
|
||
|
|
<h3>1. 새로운 계산 로직 테스트</h3>
|
||
|
|
<div class="calculation-form">
|
||
|
|
<label>면적 길이 (㎡):</label>
|
||
|
|
<input type="number" id="testAreaLength" value="10" step="0.01"><br>
|
||
|
|
<label>면적 단가 (원/㎡):</label>
|
||
|
|
<input type="number" id="testAreaPrice" value="30000" step="1000"><br>
|
||
|
|
<label>수량:</label>
|
||
|
|
<input type="number" id="testSu" value="1" step="1"><br>
|
||
|
|
<button onclick="testNewCalculation()">새로운 계산 로직 테스트</button>
|
||
|
|
</div>
|
||
|
|
<div id="newCalcResult" class="result"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test-section">
|
||
|
|
<h3>2. fetch_length_data.php 테스트</h3>
|
||
|
|
<label>길이 입력: <input type="number" id="testLength" value="10" step="0.01"></label>
|
||
|
|
<label>행 인덱스: <input type="number" id="testRowIndex" value="0"></label>
|
||
|
|
<button onclick="testFetchLengthData()">테스트 실행</button>
|
||
|
|
<div id="fetchResult" class="result"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test-section">
|
||
|
|
<h3>3. DOM 요소 확인</h3>
|
||
|
|
<button onclick="checkDOMElements()">DOM 요소 확인</button>
|
||
|
|
<div id="domResult" class="result"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="test-section">
|
||
|
|
<h3>4. JSON 데이터 확인</h3>
|
||
|
|
<button onclick="checkJSONData()">JSON 데이터 확인</button>
|
||
|
|
<div id="jsonResult" class="result"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// 새로운 계산 로직 테스트
|
||
|
|
function testNewCalculation() {
|
||
|
|
const areaLength = parseFloat($('#testAreaLength').val());
|
||
|
|
const areaPrice = parseFloat($('#testAreaPrice').val());
|
||
|
|
const su = parseFloat($('#testSu').val());
|
||
|
|
|
||
|
|
let unitPrice = 0;
|
||
|
|
let totalPrice = 0;
|
||
|
|
|
||
|
|
// 과거 로직 적용
|
||
|
|
if (areaPrice > 0) {
|
||
|
|
unitPrice = Math.round(areaLength * areaPrice);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!areaLength && !areaPrice) {
|
||
|
|
totalPrice = Math.round(su * unitPrice);
|
||
|
|
} else if (areaLength && !areaPrice) {
|
||
|
|
totalPrice = Math.round(areaLength * unitPrice * su);
|
||
|
|
} else {
|
||
|
|
totalPrice = Math.round(su * unitPrice);
|
||
|
|
}
|
||
|
|
|
||
|
|
$('#newCalcResult').html(
|
||
|
|
'<div class="success">새로운 계산 로직 결과:</div>' +
|
||
|
|
'<div>면적 길이: ' + areaLength + ' ㎡</div>' +
|
||
|
|
'<div>면적 단가: ' + areaPrice.toLocaleString() + ' 원/㎡</div>' +
|
||
|
|
'<div>수량: ' + su + '</div>' +
|
||
|
|
'<div><strong>계산된 단가: ' + unitPrice.toLocaleString() + ' 원</strong></div>' +
|
||
|
|
'<div><strong>계산된 합계: ' + totalPrice.toLocaleString() + ' 원</strong></div>'
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
function testFetchLengthData() {
|
||
|
|
const length = parseFloat($('#testLength').val());
|
||
|
|
const rowIndex = parseInt($('#testRowIndex').val());
|
||
|
|
|
||
|
|
$('#fetchResult').html('요청 중...');
|
||
|
|
|
||
|
|
$.ajax({
|
||
|
|
url: 'fetch_length_data.php',
|
||
|
|
type: 'POST',
|
||
|
|
data: {
|
||
|
|
length: length,
|
||
|
|
rowIndex: rowIndex,
|
||
|
|
inputType: 'area_length'
|
||
|
|
},
|
||
|
|
dataType: 'json',
|
||
|
|
timeout: 10000,
|
||
|
|
success: function(response) {
|
||
|
|
$('#fetchResult').html(
|
||
|
|
'<div class="success">성공!</div>' +
|
||
|
|
'<pre>' + JSON.stringify(response, null, 2) + '</pre>'
|
||
|
|
);
|
||
|
|
},
|
||
|
|
error: function(xhr, status, error) {
|
||
|
|
$('#fetchResult').html(
|
||
|
|
'<div class="error">오류 발생!</div>' +
|
||
|
|
'<div>Status: ' + status + '</div>' +
|
||
|
|
'<div>Error: ' + error + '</div>' +
|
||
|
|
'<div>Response: ' + xhr.responseText + '</div>'
|
||
|
|
);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function checkDOMElements() {
|
||
|
|
const elements = [
|
||
|
|
'#detailTable',
|
||
|
|
'.su-input',
|
||
|
|
'.area-length',
|
||
|
|
'.area-price',
|
||
|
|
'.unit-price',
|
||
|
|
'.total-price',
|
||
|
|
'#totalsum',
|
||
|
|
'#koreantotalsum'
|
||
|
|
];
|
||
|
|
|
||
|
|
let result = '<h4>DOM 요소 확인 결과:</h4>';
|
||
|
|
elements.forEach(selector => {
|
||
|
|
const count = $(selector).length;
|
||
|
|
result += `<div>${selector}: ${count}개</div>`;
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#domResult').html(result);
|
||
|
|
}
|
||
|
|
|
||
|
|
function checkJSONData() {
|
||
|
|
let result = '<h4>JSON 데이터 확인 결과:</h4>';
|
||
|
|
|
||
|
|
if (typeof detailJsonData !== 'undefined') {
|
||
|
|
result += '<div class="success">detailJsonData 변수 존재</div>';
|
||
|
|
result += '<div>타입: ' + typeof detailJsonData + '</div>';
|
||
|
|
if (Array.isArray(detailJsonData)) {
|
||
|
|
result += '<div>배열 길이: ' + detailJsonData.length + '</div>';
|
||
|
|
result += '<pre>' + JSON.stringify(detailJsonData, null, 2) + '</pre>';
|
||
|
|
} else {
|
||
|
|
result += '<pre>' + JSON.stringify(detailJsonData, null, 2) + '</pre>';
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
result += '<div class="error">detailJsonData 변수가 정의되지 않음</div>';
|
||
|
|
}
|
||
|
|
|
||
|
|
if (typeof rowArrayData !== 'undefined') {
|
||
|
|
result += '<div class="success">rowArrayData 변수 존재</div>';
|
||
|
|
result += '<div>타입: ' + typeof rowArrayData + '</div>';
|
||
|
|
if (Array.isArray(rowArrayData)) {
|
||
|
|
result += '<div>배열 길이: ' + rowArrayData.length + '</div>';
|
||
|
|
result += '<pre>' + JSON.stringify(rowArrayData, null, 2) + '</pre>';
|
||
|
|
} else {
|
||
|
|
result += '<pre>' + JSON.stringify(rowArrayData, null, 2) + '</pre>';
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
result += '<div class="error">rowArrayData 변수가 정의되지 않음</div>';
|
||
|
|
}
|
||
|
|
|
||
|
|
$('#jsonResult').html(result);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 페이지 로드 시 자동으로 DOM 요소 확인
|
||
|
|
$(document).ready(function() {
|
||
|
|
setTimeout(function() {
|
||
|
|
checkDOMElements();
|
||
|
|
checkJSONData();
|
||
|
|
}, 1000);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|