[js] 판매자 권한의 거래전 -> 거래후 상태변화 Button 만들기

Spring 골프 중고 용품 플랫폼을 만들면서
1. 판매자 일때만 보이고
2. 누르면 문구가 '거래전' -> '거래중'으로 바뀌며
3. 상품 VO(ProductVO)의 거래상태(dealState)값이 '거래전:0', '거래중:1'으로 변하는
버튼을 만들어야 했다.

자바스크립트 코드(2,3번 처리)

<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

var dealState = ${product.dealState}; //int형인 product.dealState의 값을 받음
var state = parseInt(dealState); //parseInt로 파라미터값(String)->int로 변환 

state = 0; //거래상태 디폴트 : 거래전 
		
		$('#deal').click(function(){ //id="deal" 버튼 클릭시 일어나는 이벤트
			//alert('안녕2');
			
		if(state == 0){ //거래전(0) -> 거래후(1) 변경하고 싶을 때 
			alert('안녕33');
//---------------------------1.버튼비활성화----------------------------------
			const target1 = document.getElementById('button'); //채팅하기 버튼 
			target1.disabled = 'disabled'; //버튼 비활성화 
            
			const target2 = document.getElementById('addtocart'); //결제하기 버튼 
			target2.disabled = 'disabled'; //버튼 비활성화 
			//(마이페이지에서 할때는 버튼 비활성화는 script로 따로 빼야할듯..)
//---------------------------1.버튼비활성화----------------------------------

//---------------------------2.버튼문구변경-----------------------------------
			const btnElement = document.getElementById('deal');
			btnElement.value = "거래중"; //버튼 value바꿈 
//---------------------------2.버튼문구변경-----------------------------------

//---------------------------3.변수값 변경------------------------------------
			state =1; //거래후로 값 변경 
//---------------------------3.변수값 변경------------------------------------
			
		//$('#state').append(state); -> state 값 변환 확인용
			
		}else if(state == 1){ //거래후-> 거래전 변경하고 싶을 때 
			alert('안녕44');
		
//---------------------------1.버튼비활성화----------------------------------
			const target1 = document.getElementById('button');//채팅하기
			target1.disabled = false; //버튼 비활성화 
			const target2 = document.getElementById('addtocart');//결제하기
			target2.disabled = false; //버튼 비활성화 
			//(마이페이지에서 할때는 버튼 비활성화는 script로 따로 빼야할듯..)
//---------------------------1.버튼비활성화----------------------------------

//---------------------------2.버튼문구변경-----------------------------------
			const btnElement = document.getElementById('deal');
			btnElement.value = "거래전"; //버튼 value바꿈 
//---------------------------2.버튼문구변경-----------------------------------

//---------------------------3.변수값 변경------------------------------------
			state = 0; //거래전으로 값 변경 
//---------------------------3.변수값 변경------------------------------------
			
		//$('#state').append(state); -> state 값 변환 확인용
		}

			
		});
		
		
	});
    
 </script>
    

판매자 권한일때만 노출되도록 제어

if문(JSTL): 판매자 아이디 = 세션 로그인 아이디

					<!-- 판매자 아이디 = 세션 로그인 아이디 같을 시에만 거래전버튼 활성화 -->
					<div>
						<c:if test="${product.seller_id == user_id }">
						<input type="button" id="deal" value="거래전" onclick="changeBtnName();">
						</c:if>
					</div>
					<!-- 판매자 아이디 = 세션 로그인 아이디 같을 시에만 거래전버튼 활성화 -->