이미지 슬라이드 구현 문제 해결

1. 상황

타임리프로 이미지 슬라이드를 구현하려 함.

 

2. 문제

th:each를 사용하여 div박스를 image 데이터의 수 많큼 반복 생성되는데 active 코드가 모든 div에 들어가는 문제 발생

 

3. 해결방법

해당 문제는 프론트의 영역이라 판단하여 데이터를 제약 조건하에 프론트로 전달하여 고정 된 틀에 값을 입력하도록 수정

th:each를 사용하지 않고 코드 구현

카페 등록시 등록 가능 이미지를 3장으로 고정하여 해당 데이터를 사용할 때 데이터의 수가 변하지 않도록 처리하였다.

 

<div class="carousel-inner">
    <div class="carousel-item active">
        <img th:src="${cafeDetailResponseDto.getCafeImgUrls().get(0)}" class="d-block" style="width:100%">
    </div>
    <div th:if="${cafeDetailResponseDto.getCafeImgUrls().get(1)} != null" class="carousel-item">
        <img th:src="${cafeDetailResponseDto.getCafeImgUrls().get(1)}" class="d-block" style="width:100%">
    </div>
    <div th:if="${cafeDetailResponseDto.getCafeImgUrls().get(2)} != null" class="carousel-item">
        <img th:src="${cafeDetailResponseDto.getCafeImgUrls().get(2)}" class="d-block" style="width:100%">
    </div>
</div>