[myhomeController] - selectMyHome()

// 이 게시글에 사용된 제품 목록 불러오기
    	   	List<MyhomeDomain> productInfo = myhomeService.getProdName(boardMyhomeArticleNo);
    	    mav.addObject("productInfo",productInfo);
          

[board.xml]

<!-- 상품검색 가져오기 -->
	<select id="getProdName" parameterType="int" resultType="MyhomeDomain">
	    <![CDATA[
	        SELECT 
	            t.productName,
	            t.productNO,
	            (
	                SELECT i.imageFileName
	                FROM image i
	                WHERE i.articleNO = t.productNO
	                  AND i.imageType = '상품'
	                  AND ROWNUM = 1
	            ) AS prodImageName
	        FROM (
	            SELECT 
	                b.productName, 
	                MIN(p.productNO) AS productNO
	            FROM boardMyhomeProduct b
	            JOIN product p ON b.productName = p.productName
	            WHERE b.boardMyhomeArticleNo = #{boardMyhomeArticleNo}
	            GROUP BY b.productName
	        ) t
	    ]]>
	</select>

• 현재 boardMyhomeArticleNo가 같은 product테이블에서 productNo를 찾고 ,하나의 대표productNo만 가져온다.
• 대표 productNo마다 image테이블의 imageFileName을 하나만 가져온다. AS prodImageName 로 매핑. ( imageFileName 도메인 이미 커버이미지로 쓰고 있어서)

[myhomeSelect.jsp]

<!-- 이 게시물에 사용된 제품 --> 
<div class="myhomeProduct">
	<h3>이 게시글에 사용된 제품</h3>
	
	<div class="productSliderWrap">
	    <c:if test="${not empty productInfo}">
		    <div class="arrow" id="prevArrow">
		      <img src="${contextPath}/resources/image/prev.png">
		    </div>
		    
	        <div class="productGrid">
	            <c:forEach var="prod" items="${productInfo}">
	            	<a href="${contextPath }/product/selectProduct.do?productNO=${prod.productNO}&productName=${prod.productName}" class="productItem">              
	                    <img class="prodImage" src="${contextPath}/product/productThumbnail.do?articleNO=${prod.productNO}&image=${prod.prodImageName}" />
	                    <p class="productName">${prod.productName}</p>
	                </a>
	            </c:forEach>
	        </div>
	              
		    <div class="arrow" id="nextArrow">
		      <img src="${contextPath}/resources/image/next.png">
		    </div> 	        
	    </c:if>
	
	    <c:if test="${empty productInfo}">
	        <p class="noProduct">소개할 상품이 없어요 😢</p>
	    </c:if> 
		
	</div>		
</div> 

• productInfo 로 제품정보 가져온다.

• productThumbnail 기존 썸네일 재활용

• prevArrow, nextArrow 페이징 (메인에서 사용된 카테고리 페이징 약간 변형)

// 이 게시글에 사용된 제품 페이징
    const itemsPerPage = 4; // 페이지당 아이템 수
    let currentPage = 0;

    const allItems = Array.from(document.querySelectorAll('.productItem'));
    const totalPages = Math.ceil(allItems.length / itemsPerPage);

    const prevArrow = document.getElementById('prevArrow');
    const nextArrow = document.getElementById('nextArrow');
    
    if (totalPages <= 1) {
        prevArrow.style.display = 'none';
        nextArrow.style.display = 'none';
    }

    function renderPage(page) {
        // 전체 숨기기
        allItems.forEach(item => item.style.display = 'none');

        // 현재 페이지의 항목만 보이게
        const start = page * itemsPerPage;
        const end = start + itemsPerPage;
        const currentItems = allItems.slice(start, end);

        currentItems.forEach(item => item.style.display = 'block');

        // 버튼 상태 업데이트
        prevArrow.disabled = page === 0;
        nextArrow.disabled = page === totalPages - 1;
    }

    prevArrow.addEventListener('click', () => {
        // 현재 첫 페이지면 마지막으로 이동
        if (currentPage === 0) {
            currentPage = totalPages - 1;
        } else {
            currentPage--;
        }
        renderPage(currentPage);
    });

    nextArrow.addEventListener('click', () => {
        // 현재 마지막 페이지면 처음으로 이동
        if (currentPage === totalPages - 1) {
            currentPage = 0;
        } else {
            currentPage++;
        }
        renderPage(currentPage);
    });
    
    // 첫 페이지 렌더링
    renderPage(currentPage);