📅 2024-10-04 개인프로젝트 31일차 - 구단순위 페이지 구현

TODO

1. 구단순위 페이지 구현

---

1. 구단순위 페이지 구현

1. KBO 홈페이지 구단순위 접속해보니 현재날짜기준 -1을 한 날짜가 기본값으로 설정되어 있었다는걸 알 수 있었다..(이젠 정규시즌이 끝나서 마지막경기가 종료된 날짜(2024-10-01)로 되어있지만...)

2. 아무튼 HTML을 까보니 구단순위에 해당하는 테이블 말고도 다른 데이터의 테이블이 존재했는데 둘의 클래스명이 'tData'로 동일했다..

3. 구단순위에 해당하는 테이블이 HTML 코드 상에서 처음(first)으로 존재해서 아래와 같은 로직을 추가했다.
   

4. tData에서 필요한 요소들을 크롤링하기 위해 세부적으로 tData 테이블을 분석해서 로직을 구성했다.

• 아래는 구성한 로직
  

5. 크롤링 전체로직

@Component
public class GameRankCrawl {
	public List<GameRank> crawl() {
		List<GameRank> rankings = new ArrayList<>();

		// 크롬 드라이버 경로 설정
		System.setProperty("webdriver.chrome.driver",
				"C:/work_YGC/sts-4.24.0.RELEASE-workspace/baseball_ygc/chromedriver.exe");

		// 크롬 옵션 설정 (headless 모드)
		ChromeOptions options = new ChromeOptions();

		// 크롬 드라이버 생성
		WebDriver driver = new ChromeDriver(options);

		try {
			// 하루 전날 날짜 가져오기 (형식: yyyy.MM.dd)
			LocalDate yesterday = LocalDate.now().minusDays(1);
			DateTimeFormatter formatter = DateTimeFormatter.ofPattern("yyyy.MM.dd");
			String yesterdayFormatted = yesterday.format(formatter);

			// KBO 구단순위 페이지 접속
			driver.get("https://www.koreabaseball.com/Record/TeamRank/TeamRankDaily.aspx");

			// 페이지에 표시된 날짜가 하루 전날과 일치하는지 확인
			WebElement dateElement = driver
					.findElement(By.id("cphContents_cphContents_cphContents_lblSearchDateTitle"));
			String displayedDate = dateElement.getText();

			if (!displayedDate.equals(yesterdayFormatted)) {
				driver.navigate().refresh();
			}

			// 하루 전날 기준으로 구단 순위 데이터 크롤링
			// tData라는 클래스명을 가진 테이블 중에서 처음으로 등장하는 테이블 선택
			WebElement firstTable = driver.findElement(By.cssSelector("table.tData:first-of-type"));
			List<WebElement> rows = firstTable.findElements(By.cssSelector("table.tData > tbody > tr"));
			for (WebElement row : rows) {
				String rank = row.findElement(By.cssSelector("td:first-child")).getText(); // 순위(ex : 1, 2, 3 ...)
				String teamName = row.findElement(By.cssSelector("td:nth-child(2)")).getText(); // 구단명
				String games = row.findElement(By.cssSelector("td:nth-child(3)")).getText(); // 총 진행한 게임 수
				String wins = row.findElement(By.cssSelector("td:nth-child(4)")).getText();	// 승리한 횟수
				String losses = row.findElement(By.cssSelector("td:nth-child(5)")).getText(); // 패배한 횟수
				String draws = row.findElement(By.cssSelector("td:nth-child(6)")).getText(); // 무승부한 횟수
				String winningPercentage = row.findElement(By.cssSelector("td:nth-child(7)")).getText(); // 승률
				String gamesBehind = row.findElement(By.cssSelector("td:nth-child(8)")).getText(); // 1위와의 게임차

				rankings.add(new GameRank(rank, teamName, games, wins, losses, draws, winningPercentage, gamesBehind));
			}

		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			driver.quit();
		}

		return rankings;
	}

}

6. vo패키지 안에 아래사진과 같은 GameRank라는 클래스 생성
   

7. 구단 순위 페이지 전체 HTML 구성
   

8. 현재 날짜를 가져오는 함수 로직
   

9. 경기일정 · 결과에서 사용했던 스피너 + 구단 순위 Ajax 요청 로직
   

10. 스피너 및 데이터를 잘 불러온다!

• 스피너 로딩
  
• 데이터 크롤링한 모습
  

✔ 이제 여기에 달력 API 연동해서 일자별로 볼 수 있게 처리해야겠지..?

---

앞으로 남은거

✔ 선수 정보에 선수 사진 넣기 - 아마 DB도 수정될거 같다. 그럼 ERD도 바꿔야겠지?
✔ 달력 API
✔ 예매버튼 누르면 a태그로 해당 예매사이트로 이동(디자인도 같이)
✔ 구단순위(달력 API 연동), 선수 기록 페이지
✔ KBO 뉴스 크롤링, 게시글 관련 페이지
✔ 문의사항 이메일로 보낼지, 작성하고 작성시에 입력한 비밀번호(암호키?)로 접근할지 결정하기
✔ 디자인 바꾸기