[Spring][쇼핑몰 프로젝트][32] 상품 목록 화면 구현(이미지 출력)

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

 

목표

상품 목록 화면 상품 이미지 출력

 

 저번 포스팅에서 구현한 상품 목록 화면에 '상품 이미지'가 출력되도록 구현하는 것이 목표입니다.

 

 

 

 

순서

1. 구현 방향

2. BookServiceImpl.java

3. search.jsp

4. 테스트

 

 

 

1. 구현 방향

 상품 목록 페이지에 상품 이미지를 넣기 위해 작성해둔 <div> 태그가 있습니다.

 

그림 1-1 search.jsp

 

 해당 태그 내부에 상품에 대한 이미지를 출력시키고, 이미지가 없다면 이미지 없음을 뜻하는 이미지를 출력시키는 것이 목표입니다.

 

 구현의 마지막 단계에서는 BookController.java 클래스에 만들어둔 "/display?fileName=OOO" url 매핑 메서드를 호출하여 이미지를 호출할 것입니다. 이 메서드를 사용하기 위해선 위해선 해당 상품의 fileName(경로+/s+uuid+파일이름)에 대한 데이터를 서버에 전송해주어야 합니다. 

 

그림 1-2 BookController.java 

 

 

 그런데 현재의 목록 페이지 뷰(View)에 전달한 "list"객체엔 상품 이미지에 대한 정보를 포함하고 있지 않습니다.

 

그림 1-3 BookController.java

 

 

 '상품 이미지 정보'를 얻기 위해서 뷰에서 Javascript 코드를 통해 '상품 이미지 정보'를 따로 요청 할 수도 있습니다.( 해당 방식은 [Spring][쇼핑몰 프로젝트][28] 상품 상세 페이지 이미지 출력 - 2 포스팅에서 사용했습니다.)

 

 하지만 이번 구현에서는 상품 리스트에 대한 정보를 담고 있는 "list"에  상품 이미지에 대한 정보가 함께 담길 수 있도록 작업을 할 것입니다.

 

 

 

2. BookServiceImpl.java

 검색결과로서 상품에 대한 정보를 반환해주는 Service단계의 메서드인 getGoodsList() 메서드를 수정해줄 것입니다. 해당 메서드는 사용자가 검색한 결과의 상품 정보(BookVO)를 List 자료구조에 담아서 반환을 해주었습니다. 우리는 해당 메서드가 각 상품의 이미지에 대한 정보도 포함시켜서 반환하도록 만들어 줄 것입니다.

 

그림 2-1 getGoodsList() 메서드

 

 

 상품 이미지에 대한 정보를 담기 위한 클래스 혹은 변수를 따로 추가 해 줄 필요는 없습니다. getGoodsList() 메서드는 상품 정보가 저장된 BookVO를 요소로하는 List 자료구조를 반환하는데, 이미지 정보를 저장 할 수 있는 AttachImageVO클래스를 타입으로 하는 변수가 BookVO에서 imageList로 선언되어져 있기 때문입니다.

 

그림 2-2 imageList 변수

 

 따라서 우리는 Service단계의 메서드가 BookVO클래스의 imageList 변수에 이미지 정보를 저장하도록 하는 코드를 추가해주기만 하면 됩니다. 이미지 정보를 저장하도록 하는 작업에 앞서 상품 이미지 정보를 DB로부터 가져오는 Mapper 메서드가 필요로 합니다. 그런데 이미 우리가 원하는 기능을 하는 Mapper 메서드를 이전에 작성해두었습니다. AttachMapper 인터페이스에 있는 getAttachList() 메서드입니다. 해당 메서드는 상품의 id값(bookId)을 넘겨주면 해당 상품에 대한 이미지 정보가 담긴 데이터들을 List 타입으로 반환을 해줍니다.

 

그림 2-4

 

 앞서 말한 작업들을 수행하도록 코드를 수정해주겠습니다. 

 

 코드를 수정해주기 전에 AttachMapper의 메서드를 사용해야하기 때문에 BookServiceImpl.java 클래스에 AttachMapper 객체를 의존성 주입해주는 코드를 추가해줍니다.

 

	@Autowired
	private AttachMapper attachMapper;

 

 

 

 getGoodsList() 메서드의 return값이 변수에 담기지 않고 Mapper메서드를 호출하여 반환받은 객체를 그대로 반환하도록 작성이 되어 있는데 해당 객체에 추가적인 작업 후 반환을 해야 하기  때문에 먼저 return 값을 먼저 지워주겠습니다. 그리고 추가해줄 코드는 return 바로 윗 공간에 작성해 줄 것입니다.

 

 

 

 List<BookVO>타입인 list 변수를 선언하고 앞서 지워준 Mapper 메서드를 작성하여 변수를 초기화해줍니다.

 

		List<BookVO> list = bookMapper.getGoodsList(cri);

 

 현재 list 변수에는 상품에 정보를 담고 있는 BookVO객체가 List의 요소로 담겨 있는 상태입니다. 우리는 각 요소로 있는 BookVO객체 하나하나에 이미지 정보를 추가하는 작업을 해주기 위해서 forEach메서드를 작성해줍니다.

 

		List<BookVO> list = bookMapper.getGoodsList(cri);
		
		list.forEach(book -> {
			
		});

 

 작성해준 forEach 메서드는 List객체에 담긴 모든 요소(BookVO객체)를 순회하면서 구현부에 작성된 코드를 실행시켜줍니다.

 

 forEach 구현부에는 이미지 정보를 DB로부터 호출하여 그 값을 BookVO객체의 imageList에 저장하는 코드를 작성해줍니다.

 

		List<BookVO> list = bookMapper.getGoodsList(cri);
		
		list.forEach(book -> {
			
			int bookId = book.getBookId();
			
			List<AttachImageVO> imageList = attachMapper.getAttachList(bookId);
			
			book.setImageList(imageList);
			
		});

 

 마지막으로 getGoodsList() 메서드의 retrun값에 상품 정보와 상품 이미지 정보가 담긴"list"변수를 작성해줍니다.

 

그림 2-7

 

 

3. search.jsp

 list에 담긴 상품 이미지 정보를 어떻게 꺼내서 쓰냐를 결정해야 합니다. 전 이미지가 들어가는 <td> 태그 안에 새로운 <div> 태그를 추가해주고, data속성을 사용해서 새로 추가 해준 <div> 태그에 상품 이미지 정보를 심어 줄 것입니다. 태그에 심어진 데이터를 활용하여 Javascript코드를 통해 이미지가 출력이 되도록 만들 것입니다.

 

 class 속성 값이 'image'인 <td> 태그 내부에 상품 이미지 정보가 심어진 <div> 태그를 추가해줍니다. 그리고 추가해준 <div>태그 내부에 <img> 태그를 추가해줍니다.

 

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

 

그림 3-1

 

 

 이미지가 출력되도록 Javascript코드 작업을 해주겠습니다. 상품 이미지는 목록 페이지가 만들어질 때 같이 호출이 되어야 하기 대문에 $(document). ready(function() 메서드 구현부에 코드를 추가해주겠습니다.

 

그림 3-2

 

 본격적으로 코드를 작성하기 전 작성될 2개의 메서드를 소개하겠습니다.

 

 첫 번째 메서드는 $(선택자).each(function(i,obj)); 입니다. 선택자로 지명된 태그가 여러 개일 경우 $(선택자)를 통해 해당 태그 객체를 호출하게 되면, 해당 선택자를 가지는 모든 태그가 담긴 객체가 반환이 되게 됩니다. 이 객체에 each(function) 메서드를 호출하게 되면 동일한 선택자를 가진 모든 태그 객체를 순회하여 each메서드의 구현부에 작성된 코드를 실행하게 됩니다.

 

 두 번째 메서드는 $(선택자).data("속성명") 입니다. 태그에 데이터를 심기 위해서 우리는 앞서 "data-속성명 ='속성값'" 으로 작성을 하였습니다. 작성해둔 속성 값을 얻기 위해서. data() 메서드의 파라미터로 속성명을 부여하면 속성 값을 얻을 수 있습니다.

 

 class속성명이 image_wrap인 <div> 태그 객체를 호출하여 each(function()) 메서드를 호출하는 코드를 작성해줍니다.

 

		/* 이미지 삽입 */
		$(".image_wrap").each(function(i, obj){
			
		});

 

 i는 순회하면서 실행될 때의 idnex이고 obj는 그 순서의 객체입니다. 작업의 대상이 되는 <div> 태그 객체를 쉽게 호출하기 위해 bobj 변수를 선언하고 인자인 obj를 활용하여 해당 객체로 초기화해줍니다.

 

		/* 이미지 삽입 */
		$(".image_wrap").each(function(i, obj){
			
			const bobj = $(obj);
			
		});

 

  태그에 심어둔 파일 정보 데이터를 호출하여 각 변수에 저장해줍니다.

 

		/* 이미지 삽입 */
		$(".image_wrap").each(function(i, obj){
			
			const bobj = $(obj);
			
			const uploadPath = bobj.data("path");
			const uuid = bobj.data("uuid");
			const fileName = bobj.data("filename");
			
		});

 

 해당 데이터들을 조합하여 "/display" 매핑 메서드의 파라미터로 전달시킬 fileName 데이터를 만든 뒤 fileCallPath 변수에 저장을 해줍니다.

 

		/* 이미지 삽입 */
		$(".image_wrap").each(function(i, obj){
			
			const bobj = $(obj);
			
			const uploadPath = bobj.data("path");
			const uuid = bobj.data("uuid");
			const fileName = bobj.data("filename");
			
			const fileCallPath = encodeURIComponent(uploadPath + "/s_" + uuid + "_" + fileName);
			
			
		});

 

 클래스 속성명이 .image_wrap 인 <div> 태그 내부에 있는 <img> 태그를 호출하고, <imv> 태그에 이미지를 호출하는 url을 값으로 가지는 src 속성이 추가되도록 작성합니다.

 

		/* 이미지 삽입 */
		$(".image_wrap").each(function(i, obj){
			
			const bobj = $(obj);
			
			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);
			
		});

 

그림 3-3

 

 

4. 테스트

 이미지가 정상적으로 나오는지 확인을 합니다.

 

그림 4-1

 

 

 

5. 이미지 없는 경우

 현재 이미지가 없는 경우는 아무것도 출력이 되지 않습니다. 사용자에게 좀 더 확실히 이미지가 없다는 것을 알리기 위해 이전 포스팅에서 저장해둔 goodsNoimage.png(/resources/img) 이미지가 출력되도록 해보겠습니다.

 

(<div>태그에 심어진) 이미지 파일 정보를 변수에 담고 <img> 태그에 src 속성을 부여해주는 코드를 if문으로 감싸줍니다. 

 

그림 5-1

 

 

 해당 코드가 실행이 되어야 할 조건 이미지 파일 데이터가 있는 경우입니다. 따라서 클래스 속성명이 image_wrap인 <div> 태그에 심어둔 data-bookid 속성 값이 있는 경우에 실행이 되도록 아래와 같이 조건문을 부여해줍니다. 

 

			if(bobj.data("bookid"))

 

그림 5-2

 

 

 if문에 else 문을 추가해주고 해당 구현부에는 <img> 태그에 goodsNoImage.png 이미지 파일이 출력되도록 코드를 추가해줍니다.

 

			else {
				$(this).find("img").attr('src', '/resources/img/goodsNoImage.png');
			}

 

그림 5-3

 

 

 이미지에 대한 css설정을 추가해주기 위해 search.css 파일에 아래의 css 코드를 추가해주었습니다.

 

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

 

 

 

 상품 목록 페이지로 이동하여 정상적을 출력이 되는지 확인합니다.

 

 

 

 

REFERENCE

• 코드로배우는 스프링 웹 프로젝트(남가람북스)

 

 

DATE

• 2020.09.17