📅 2024-09-18 개인프로젝트 19일차 - 선수 조회 페이지(1)

TODO

1. 선수 조회 페이지

1. 선수 조회 페이지

1. 선수 조회 페이지 구현 사진
   
2. 소속구단명, 포지션, 이름별로 검색해서 form으로 제출하면 잘 된다.
   
3. 근데.. 왜 ajax는 오류가 나는거지? 아래처럼 false로 도배가 된다.
   
4. 내가 짠 ajax 코드인데 뭐가 문제일까 고민을 해봐도 param값을 가져오질 못하는거 말고는 알아낸게 없다..(5시간째..)

<script>
const teamColors = {
	    'KIA': '#F6C7C7',
	    '삼성': '#C4D6FF',
	    'LG': '#E1B7F6',
	    '두산': '#F4D3A0',
	    'KT': '#C4E1F3',
	    'SSG': '#E0E0E0',
	    '롯데': '#F7C4C4',
	    '한화': '#F5B7B1',
	    'NC': '#C8E6C9',
	    '키움': '#B3E5FC'
	};

	// 검색버튼 눌렀을 때
	document.getElementById('search-button').addEventListener('click', function() {
	    var teamName = encodeURIComponent(document.getElementById('team-filter').value);
	    var position = encodeURIComponent(document.getElementById('position-filter').value);
	    var name = encodeURIComponent(document.getElementById('name-filter').value);
	    var page = 1;

	    console.log(`teamName: ${teamName}, position: ${position}, name: ${name}`);

	    fetch(`/players?teamName=${teamName}&position=${position}&name=${name}`)
	        .then(response => response.json())
	        .then(data => {
	        	console.log('데이터 : ', data);
	            var tbody = document.getElementById('player-table-body');
	            tbody.innerHTML = ''; // 행 초기화

	            data.forEach(player => {
	            	console.log('선수 데이터:', player);  // 개별 player 데이터 출력
	                var tr = document.createElement('tr');

	                // 배경색이 구단컬러로 바뀌게 하는 코드
	                var teamColor = teamColors[player.teamName] || '#FFFFFF'; // 기본 배경색

	                tr.innerHTML = `
	                    <td>${player.number || ''}</td>
	                    <td style="background-color: ${teamColor}; border:2px solid; border-radius:5px; 
                        color:white; padding:7px;">${player.teamName || ''}</td>
	                    <td>${player.name || ''}</td>
	                    <td>${player.position || ''}</td>
	                    <td>${player.birthDate || ''}</td>
	                    <td>${player.height}cm / ${player.weight}kg</td>
	                    <td>${player.career || ''}</td>
	                `;

	                tbody.appendChild(tr);
	            });
	            document.querySelector('.point').textContent = data.length;
	        })
	        .catch(error => console.error('Error:', error));
	});
</script>

5. 머리를 너무 쓰니까 더 굳는 느낌 내일 이어서 해야겠다..