[spring boot, jsp, js] 로그인유저의 차량종류에 해당하는 주유표준단가로 계산하기

Controller

//로그인유저의 차종류(ex.준중형차)
CarVo userCar = carService.findCarByUserSeq(authUser.getSeq());
if (userCar != null && userCar.getCarKind() != null) {
    String userCarKind = userCar.getCarKind();
    model.addAttribute("userCarKind", userCarKind);
} else {
    model.addAttribute("userCarKind", "null");
}

//이번 달 주유표준단가
List<StdGasPriceVo> list = stdGasPriceService.stdGasPriceByThisMonth(stdGasPriceVo);
model.addAttribute("list" , list);

 

컨트롤러에서 로그인유저의 자동차 종류를 구하고, 

이번달 주유표준단가 리스트를 구한다.

 

 

JSP

<span id="userCarKind" style="display:none;">${userCarKind }</span>

---중략

<tbody>
    <tr>
        <td onchange="optionControl()" style="text-align:center;"> <!-- 구분 -->
            <select id="carKind" name="flag">
                <option value="" >:: 선택 ::</option>
                <option value="복리후생비">복리후생비</option>
                <option value="차량유지비">차량유지비</option>
                <option value="여비교통비">여비교통비</option>
                <option value="기타">기타</option>
            </select>
        </td>
        <td> <!-- 신청금액 -->
            <input id="Application_amount" name="amount" type="text" value="" placeholder="0">
        </td>
        <td> <!-- 주행거리 -->
            <input id="distance_driven" name="mileage" type="text" value="" placeholder="0">
        </td>
    </tr>
</tbody>

---중략

<!-- 현재 월에 해당하는 차량종류별 표준단가(계산용 데이터) --> 
<div id="carTypePrices" style="display:none">
    <c:forEach var="list" items="${list}" varStatus="status">
        <div class="price light">${list.light}</div>
        <div class="price compact">${list.compact}</div>
        <div class="price subMidSize">${list.subMidSize}</div>
        <div class="price midSize">${list.midSize}</div>
        <div class="price semiLarge">${list.semiLarge}</div>
        <div class="price large">${list.large}</div>
        <div class="price electric">${list.electric}</div>
    </c:forEach>
</div>

 

 

JS

//차량 종류별 단가 정보
var carTypePrices = {};
document.querySelectorAll('#carTypePrices .price').forEach(function(element) {
    var carType = element.classList[1]; // 두 번째 클래스 이름이 차량 종류
    var price = Number(element.textContent);
    carTypePrices[carType] = price;
});

console.log(carTypePrices);

var carKindMapping = {
    '경차': 'light',
    '소형차': 'compact',
    '준중형차': 'subMidSize',
    '중형차': 'midSize',
    '준대형차': 'semiLarge',
    '대형차': 'large',
    '전기차': 'electric'
};

//구분옵션제어
function optionControl() {
	var selectedOption = document.getElementById('carKind').value;
	var distanceInput = document.getElementById('distance_driven');
	var AppamountInput = document.getElementById('Application_amount');
	
	distanceInput.disabled = false;
	AppamountInput.disabled = false;
	    
    switch(selectedOption) {
    case '복리후생비':
    case '여비교통비':
    case '기타':
        distanceInput.disabled = true;
        break;
    case '차량유지비':
        AppamountInput.disabled = true;
        distanceInput.addEventListener('input', calculateApplicationAmount); // 주행거리 입력 시 계산
        break;
    }
	
}

function calculateApplicationAmount() {
	var userCarKindKorean = document.getElementById('userCarKind').textContent.trim(); 
	var userCarKind = carKindMapping[userCarKindKorean]; // 한글 차량 종류명을 영문 키로 매핑
    var distance = document.getElementById('distance_driven').value; // 주행거리 입력 값
    var pricePerUnit = carTypePrices[userCarKind]; // 사용자 차량의 단가
    
    // 주행거리 입력 값이 비어있거나 숫자가 아닌 경우 신청 금액 필드를 비워주고 함수를 종료
    if (!distance || isNaN(distance)) {
        document.getElementById('Application_amount').value = '';
        return; // 함수 종료
    }
    
    if (distance && pricePerUnit) { // 주행거리가 유효하고, 단가 정보가 있을 경우
        var applicationAmount = distance * pricePerUnit; // 거리 * 해당월,차종별 주유표준단가
        document.getElementById('Application_amount').value = applicationAmount; 
    }
}

콘솔로 찍어본 차종별,해당월 주유표준단가

 

 

 

✅ 최종 결과 : 차량유지비를 선택하면 신청금액 input이 disabled처리되고, 주행거리를 입력하면 주유표준단가로 계산되어 신청금액에 찍히도록 완성하였다.