자바와 jsp로 캘린더 만들기 下

전글에 이어서..

CalendarVO[][] contents_data_arr = new CalendarVO[32][4];
		if (contents_list.isEmpty() != true) {
			int j = 0;
			for (int i = 0; i < contents_list.size(); i++) {

				int date = Integer.parseInt(String.valueOf(contents_list.get(i).getCustom_date()).substring(
						String.valueOf(contents_list.get(i).getCustom_date()).length() - 2,
						String.valueOf(contents_list.get(i).getCustom_date()).length()));

				// 저장되어 있는 총 컨텐츠 갯수가 1개가 넘을 경우
				if (i > 0) {

					// i번째 컨텐츠 등록 날짜와 i-1번째 컨텐츠 등록 날짜를 비교
					int date_check = Integer.parseInt(String.valueOf(contents_list.get(i - 1).getCustom_date())
							.substring(String.valueOf(contents_list.get(i - 1).getCustom_date()).length() - 2,
									String.valueOf(contents_list.get(i - 1).getCustom_date()).length()));
					// i번째 컨텐츠 등록 날짜와 i-1번째 컨텐츠 등록 날짜가 같을 경우
					// 즉, 같은 날에 등록된 컨텐츠 갯수가 1개 이상일 경우
					if (date_check == date) {
						j = j + 1;
						contents_data_arr[date][j] = contents_list.get(i);
						// 같은 날에 등록된 컨텐츠 갯수가 1개일 경우
					} else {
						j = 0;
						contents_data_arr[date][j] = contents_list.get(i);
					}
					// // 저장되어 있는 총 컨텐츠 갯수가 1개일 경우
				} else {
					contents_data_arr[date][j] = contents_list.get(i);
				}
			}
		}

		// 실질적인 달력 데이터 리스트에 데이터 삽입 시작
		// 일단 시작 인덱스까지 아무것도 없는 데이터 삽입
		for (int i = 1; i < Integer.parseInt(String.valueOf(today_info.get("start"))); i++) {
			calendarData = new DateUtil(null, null, null, null, null);
			dateList.add(calendarData);
		}

		// 날짜 삽입
		for (int i = Integer.parseInt(String.valueOf(today_info.get("startDay"))); i <= Integer
				.parseInt(String.valueOf(today_info.get("endDay"))); i++) {
			CalendarVO[] contents_data_arr3 = new CalendarVO[4];
			contents_data_arr3 = contents_data_arr[i];

			// 특정 날짜가 오늘에 해당할 경우 value에 'today'라는 값을 넣어준다.
			if (i == Integer.parseInt(String.valueOf(today_info.get("today")))) {
				calendarData = new DateUtil(String.valueOf(dateData.getYear()), String.valueOf(dateData.getMonth()),
						String.valueOf(i), "today", contents_data_arr3);
			} else {
				calendarData = new DateUtil(String.valueOf(dateData.getYear()), String.valueOf(dateData.getMonth()),
						String.valueOf(i), "normal_date", contents_data_arr3);
			}
			dateList.add(calendarData);
		}

		// 달력 빈 곳 빈 데이터로 삽입
		int index = 7 - dateList.size() % 7;

		if (dateList.size() % 7 != 0) {

			for (int i = 0; i < index; i++) {
				calendarData = new DateUtil(null, null, null, null, null);
				dateList.add(calendarData);
			}
		}

적절히 주석을 달아놔서 크게 어려운 부분은 없을 텐데, 아마 [32][4]의 2차원 배열을 생성하는 부분이 의아할 것이다.
사실 별 의미 없다 [32]는 한 달의 일(DATE)수를 의미하고 [4]는 같은 날짜에 등록할 수 있는 최대 컨텐츠 갯수이다. (4로 한건 별 의미 없다 코드 원작성자 분이 최대 등록 갯수를 4개로 지정하셨길래 그냥 나도 굳이 수정하지 않은것 뿐)

이걸 왜 이렇게 하냐. 순수하게 달력만을 그릴 때, 루프를 돌며 며칠인지, 무슨 요일인지, TODAY여부 등의 여러가지 정보를 담은 순수한 날짜 정보만 담겨있는 달력 배열을 만들게 된다. 그리고 나중에 컨텐츠 정보를 추가하게 되는건데 만약에 [32]라는 길이가 정해져 있는 배열이 아니라 List를 이용한 유동적 길이를 가지는 배열에 정보를 담고 같이 합치게 된다면 엄청난 오류가 발생한다.
해당 날짜에 상관 없이 배열의 길이상, 위치상 1에 해당하게 되니 이를 달력 배열과 합치게 된다면 무조건 1~4일에 컨텐츠가 들어가게 되는 것이다.
따라서 길이를 [32]로 고정시켜 놓고 루프를 돌면서 해당 날짜(DATE)에 컨텐츠 정보가 같이 들어갈 수 있게 하는 것.. 말이 중구난방이라 이해가 될 지는 모르겠지만.. 하여튼 대충 그런 이유이다.

어쨌뜬 위의 과정을 통해 하루하루마다 날짜의 정보와 컨텐츠의 정보가 담겨있는 배열이 완성된다!
이제 이걸 뷰(jsp)에 뿌려주기만 하면 완성. 코드 원작성자 분이 너무나도 친절하시게 jsp의 코드까지 작성해주셔서 자세한 설명은 생략하고 컨텐츠 정보가 출력되는 부분만 언급하겠다.

<div style="display: flex; justify-content: center;">
													<!-- 제일 처음 등록된 컨텐츠 하나만 보이도록 begin값과 end값 지정-->
    <c:forEach var="contents_list" items="${dateList.contents_data_arr}" varStatus="status" begin="0" end="0">
        <c:if test="${!empty contents_list.poster_path }">
            <a href="${pageContext.request.contextPath}/contents/detail.do?contents_type=${contents_list.contents_type }&contents_num=${contents_list.contents_num}">
                <div style="width: 100px; position: relative;">
                	<!-- 포스터가 출력되는 부분 -->
                    <img src="${contents_list.poster_path }" style="width: 100%; max-height: 140px;">
                </div>
            </a>
        </c:if>
    </c:forEach>
    <!-- + 아이콘을 만들기 위한 부분 -->
    			<!-- 등록되어 있는 컨텐츠가 2개 이상일 경우, 최초 한번만 + 아이콘이 생성될 수 있도록 begin값과 end값 지정 -->
    <c:forEach var="contents_list" items="${dateList.contents_data_arr}" varStatus="status" begin="1" end="1">
    <!-- 길이가 4로 고정되어있는 배열이기 때문에 등록되어 있는 컨텐츠가 없어도 반복문을 돌기 때문에 공란이 출력되지 않도록 컨텐츠가 있는 경우에만 보여지도록 조건 설정 -->
        <c:if test="${!empty contents_list.poster_path }">
        									<!-- 이미지 위에 +아이콘이 출력될 수 있도록 transform을 이용해 위치를 고정시켜준다 -->
            <div class="dropdown" data-hover="dropdown" style="position: absolute; transform: translate(125%, 370%);">
            	<!-- + 아이콘을 누르면 드롭다운 토글이 실행된다 -->
                <a class="btn dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false" style="border-radius: 100%; background: white; padding: 3px 8px; opacity: .7;">
                <span style="font-size: 14px; color: #74747b;">+</span></a>
        </c:if>
        <!-- + 아이콘 마우스 오버 및 클릭시 보여지게 되는 부분 -->
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
            <c:forEach var="contents_list" items="${dateList.contents_data_arr}" varStatus="status" begin="1" end="3">
                <c:if test="${!empty contents_list.poster_path }">
                    <li><a class="dropdown-item" href="${pageContext.request.contextPath}/contents/detail.do?contents_type=${contents_list.contents_type }&contents_num=${contents_list.contents_num}">
                            <div style="width: 100px; position: relative;">
                                <img src="${contents_list.poster_path }" style="width: 100%; max-height: 140px;">
                            </div>
                        </a></li>

                </c:if>
            </c:forEach>
    </c:forEach>
    </ul>
</div>

위의 과정을 통해서 짜잔 완성
적절히 css를 수정해서 호버 및 클릭 효과를 줘봤다
역시 프론트엔드가 제일 어렵다.. 휴