[Spring][쇼핑몰 프로젝트][41] 주문 구현(주문 페이지) - 6

프로젝트 Github : https://github.com/sjinjin7/Blog_Project
프로젝트 포스팅 색인(index) : https://kimvampa.tistory.com/188

 

목표

주문 구현 - 페이지 구현

 

 '주문 페이지' 상품란에 이미지를 넣는 작업을 합니다. 이전 '상품 검색창', '상품 상세창', '장바구니 페이지'에서 이미지를 넣었던 방식과 동일합니다. 따라서 진행 위주로 빠르게 진행하겠습니다.

 

순서

1. OrderPageItemDTO

2. OrderServiceImpl.java

3. order.jsp

 

 

1. OrderPageItemDTO

 이미지 데이터를 담을 수 있는 AttachImageVO 객체를 요소로 가지는 List 타입의 변수를 추가 해줍니다.

 

	/* 상품 이미지 */
	private List<AttachImageVO> imageList;

 

그림 1-1

 

 

 추가 해준 변수의 getter/setter 메서드를 추가해주고 toString메서드를 수정해줍니다.

 

	public List<AttachImageVO> getImageList() {
		return imageList;
	}

	public void setImageList(List<AttachImageVO> imageList) {
		this.imageList = imageList;
	}

	@Override
	public String toString() {
		return "OrderPageItemDTO [bookId=" + bookId + ", bookCount=" + bookCount + ", bookName=" + bookName
				+ ", bookPrice=" + bookPrice + ", bookDiscount=" + bookDiscount + ", salePrice=" + salePrice
				+ ", totalPrice=" + totalPrice + ", point=" + point + ", totalPoint=" + totalPoint + ", imageList="
				+ imageList + "]";
	}

 

그림 1-2

 

 

2. OrderServiceImpl.java

 이미지 정보를 가져오는 Service 메서드가 정의된 AttachMapper 객체가 필요로 하기 때문에 의존성 주입 코드를 추가합니다.

 

	@Autowired
	private AttachMapper attachMapper;

 

그림 2-1

 

 

 상품 정보를 차례로 세팅하는 for문 내에 이미지 정보를 세팅해주는 코드를 추가해줍니다.

 

			List<AttachImageVO> imageList = attachMapper.getAttachList(goodsInfo.getBookId());
			
			goodsInfo.setImageList(imageList);

 

그림 2-2

 

 

3. order.jsp

태그 추가

 이미지가 들어갈 <td> 태그에 아래의 코드를 추가해줍니다.

 

		<div class="image_wrap" data-bookid="${ol.imageList[0].bookId}" data-path="${ol.imageList[0].uploadPath}" data-uuid="${ol.imageList[0].uuid}" data-filename="${ol.imageList[0].fileName}">
			<img>
		</div>

 

 

 

 Js 코드 추가

 사용자가 페이지에 이동했을 때 이미지가 출력이 되어야 하기 때문에 document ready function() 메서드에 이미지를 삽입하도록 동작하는 JS코드를 추가합니다.

 

	/* 이미지 삽입 */
	$(".image_wrap").each(function(i, obj){
		
		const bobj = $(obj);
		
		if(bobj.data("bookid")){
			const uploadPath = bobj.data("path");
			const uuid = bobj.data("uuid");
			const fileName = bobj.data("filename");
			
			const fileCallPath = encodeURIComponent(uploadPath + "/s_" + uuid + "_" + fileName);
			
			$(this).find("img").attr('src', '/display?fileName=' + fileCallPath);
		} else {
			$(this).find("img").attr('src', '/resources/img/goodsNoImage.png');
		}
		
	});

 

그림 3-2

 

css 코드

 추가 한 태그의 css 설정 코드를 order.css 파일에 추가합니다.

 

/* 이미지 */
.image_wrap{
	width: 100%;
	height: 100%;
}
.image_wrap img{
    max-width: 85%;
    height: auto;
    display: block;		
}

 

그림 3-3

 

 

 

4. 테스트

 '주문 페이지'로 이동하여 이미지가 출력되는지 확인합니다.

 

그림 4-1

 

 

REFERENCE

•  

 

 

DATE

• 2020.12.16