[shop] 메인화면(이미지) 구현하기

1. mapper

<select id="mainItem" resultMap="item">
SELECT ITEM_NAME 
	, ITEM_PRICE
	, S.ITEM_CODE
	, ATTACHED_NAME
FROM SHOP_ITEM S, ITEM_IMG I
WHERE I.ITEM_CODE = S.ITEM_CODE
AND IS_MAIN = 'Y'
ORDER BY I.ITEM_CODE DESC 
</select>



<mapper namespace="itemMapper">
<resultMap type="kh.study.shop.item.vo.ItemVO" id="item">
<id column="ITEM_CODE" property="itemCode"/>
<result column="ITEM_NAME" property="itemName"/>
<result column="ITEM_PRICE" property="itemPrice"/>
<result column="ITEM_COMMENT" property="itemComment"/>
<result column="REG_DATE" property="regDate"/>
<result column="ITEM_STOCK" property="itemStock"/>
<result column="CATE_CODE" property="cateCode"/>
<result column="ITEM_STATUS" property="itemStatus"/>

<association property="cateInfo" resultMap="adminMapper.cate"/>

<!-- imgVO 여러개를 imgList에 담겠다 -->
<!-- 컬렉션은 제일 마지막에 있어야 한다. 쿼리의 내부적 흐름 때문에 -->
<collection property="imgList" resultMap="adminMapper.img"/>

<!-- 실제로 실행하면 ImgList(imgVO(), imgVO()...이런식으로 
attachedName부분만 다르게 들어가 있음) -->


</resultMap>

2. controller

@GetMapping("/list")
	//boolean isLoginFail 로그인 실패할 때만 데이터를 true로 받아온다
	public String itemList(boolean isLoginFail, Model model) {
	
		//로그인 성공, 실패 여부 데이터를 html에 전달(로그인 실패했어도 메인 화면을 보이도록 하기 위함)
		model.addAttribute("isLoginFail", isLoginFail);
		
		//아이템리스트
		model.addAttribute("itemList", itemService.mainItem());
		
		return "content/item/item_list";	//templates 기준
		
	}

로그인 성공/실패 했을 때 

<th:block sec:authorize="isAnonymous()">
	
	<script type="text/javascript">
		alert('로그인 실패');
		location.href = '/item/list?isLoginFail=true';
	</script>

</th:block>

<th:block sec:authorize="isAuthenticated()">
	<div sec:authorize="hasRole('ROLE_MEMBER')">	<!-- sec가 if역할을 함 -->
		<script type="text/javascript">
			alert('환영합니다.');
			location.href = '/item/list';
		</script>
	</div>
	
	<!-- 관리자 페이지  -->
	<div sec:authorize="hasRole('ROLE_ADMIN')">
		<script type="text/javascript">
			alert('관리자님 환영합니다');
			location.href = '/admin/main';
		</script>
	</div>
	

</th:block>

 

3. html (메인화면)

	<div class="row mt-3">
  <th:block th:each="item : ${itemList}">
	 <div class="col-3 mb-4">
	 	<div class="card" style="width: 18rem;">
	 	
        	이미지 파일
	 	<!-- img th:src="@{'/image/' + ${img}}" -->
	 	<!-- img th:src= "@{/image/} + ${img} -->
	 	<!-- img th:src= "|@{/image/} ${img}| -->
	 	
		  <img th:src="|@{/image/}${item.imgList[0].attachedName}|" class="card-img-top" width="280px" height="380px">
		  <div class="card-body">
		    <h5 class="card-title" >
		     <a th:text="${item.itemName}" th:href="@{/item/itemDetail(itemCode=${item.itemCode})}"></a>
		    </h5>
		    <!-- 화폐 ${#numbers.formatCurrency(num)} -->
		    <p class="card-text"><span th:text="${#numbers.formatCurrency(item.itemPrice)}"></span> won </p>
		  </div>
		</div>
	 </div>
  </th:block>
	
</div>