MY PROJECT(7)Trouble Shooting - 경기일정에 따른 일정표시

• 경기일정에 따른 일정표시
• 🚨 문제🚨
  • 경기일정에 해당하는 정보를 달력에 표시 해줘야 한다
  • controller에서 jsp로 경기정보 배열을 넘겨줬는데 인식을 하지 못한다
  • scheduleData[1].stadium 이런식으로 숫자를 지정해주면 값을 찾는데 그냥 i 값을 주면 찾기 못한다
  • 홈경기/원정경기를 구분해야한다
• 🌠 해결방법🌠
  
  • // scheduleData 스케줄과 경기장을 담은 배열 + 경기번호 var scheduleData = []; <c:forEach var="item" items="${schedule}"> var date = "${item.date.substring(0, 5)}"; var stadium = "${item.stadium}"; var game = "${item.game}"; var num = "${item.num}"; var round = "${item.round}"; scheduleData.push({ date: date, stadium: stadium, game: game, num: num, round: round}); </c:forEach>
  • controller에서 받아온 경기정보 배열을 다시 풀어서 저장해서 사용!

  • function isGameToday(currentDate, allDatesOfMonth, gameDates) { // 경기 있는 날
            const formattedCurrentDate = getFormattedDate(currentDate);
            return gameDates.includes(formattedCurrentDate);
    }
     if (isGameToday(currentDay, allDatesOfMonth, gameDates)) {
    
            	 for(let i = 0; i < scheduleData.length; i++){
            		 
            		  const formatcurrentDay = getFormattedDate(currentDay);
            		  const formatcurrentDayYear = getFormattedDateYear(currentDay);
            		  if(formatcurrentDay == scheduleData[i].date){
            		  const gameimg = document.createElement("div");
                   	  gameimg.classList.add("gameimg"); // div의 클래스명을 지정해줘
                   	  dayCell.appendChild(gameimg);
                      
                      				：
                      				：

  • 경기가 있는 날의 날짜와 달력에서 현재날짜를 비교하는 함수로 경기있는 날에 대한 표시를 해줌
  •  

    https://velog.io/@ohyo555/0321

  • // scheduleData[i].game에서 팀 이름 추출
    const gameInfo = scheduleData[i].game.split(" ");
    const team1 = gameInfo[0];
    const team2 = gameInfo[gameInfo.length - 1];
    const score = gameInfo[1] + " : " + gameInfo[3];
    const num = scheduleData[i].num;
    const round = scheduleData[i].round.substring(0,4);
    
    if (scheduleData[i].stadium === "대전충무체육관") {
    	dayCell.classList.add("highlight2");
    } else {
    dayCell.classList.add("highlight3");
    }
    
    // 홈 팀
    const firstChildDiv = document.createElement("div");
    firstChildDiv.textContent = team1;
    firstChildDiv.classList.add("gameteam1");
    gameimg.appendChild(firstChildDiv);
    
    const team1Image = document.createElement("img");
    team1Image.src = GameTeamInfo(team1); // 팀 1 이미지의 경로를 지정해줘
    team1Image.alt = team1; // 대체 텍스트로 팀 1 이름을 설정해줘
    firstChildDiv.appendChild(team1Image);

     
  • 경기정보에서 경기장이 "대전충무체육관"인 경우 나눠서 class이름을 주고 해당 class에 css설정을 해주는 방식

  • project_0325 경기일정 정보

  • project_0326 경기정보 모달

• ✨ 알게된 점✨
  • 배열을 jsp에서 활용하기까지의 과정이 오래걸렸고 해당 배열을 새로 정의해줘야 하는지 몰라서 오래걸렸다..
    그래도 새로 배열에 잘 담아서 원하는 정보들을 저장할 수 있었다
  • 경기가 있는 날에 대한 표시를 하기위해서는 내가 배열에 저장한 경기일이 문자형이었기 때문에 달력에 해당하는 날짜는 Date형식이라 형식을 바꿔서 비교해야 날짜비교가 가능했다