[방방곡곡] info 페이지 출력 - 1차

1. info 리스트 출력

• 컨텐츠 테이블 type_id 로 조회
select * from content_tb where CONTENT_TYPE_ID = 12 limit 10;

• contentReposiroty
리턴되는 데이터가 많아 query.setMaxResults(10); 넣어놓음

public List<Content> findByContentTypeId(String contentTypeId) {
    Query query = em. createQuery("select c from Content c where c.contentTypeId = :contentTypeId", Content.class);
    query.setParameter("contentTypeId", contentTypeId);
    query.setMaxResults(10);
    List<Content> contentList = query.getResultList();
    return contentList;
}

• contentService

public ContentResponse.infoListDTO 정보컨텐츠(String contentTypeId){
    List<Content> contentList = contentRepository.findByContentTypeId(contentTypeId);
    return new ContentResponse.infoListDTO(contentList);
}

• 리턴을 위한 dto
이미지가 없는 경우가 있어 빈 문자열 일 때는 임의로 지정한 이미지가 들어가도록 함.

public class ContentResponse {

    @Data
    public static class infoListDTO{
        private List<ContentDTO> contents = new ArrayList<>();
       
        public infoListDTO(List<Content> contentList) {

            for (Content content : contentList) {
                this.contents.add(new ContentDTO(content));
            }
       
        }

        @Data
        public static class ContentDTO {
            private String title;
            private String contentId;
            private String addr1;
            private String areaCode;
            private String contentTypeId;
            private String firstImage;

            // Content 엔티티를 DTO로 변환
            public ContentDTO(Content content) {
                this.title = content.getTitle();
                this.contentId = content.getContentId();
                this.addr1 = content.getAddr1();
                this.areaCode = content.getAreaCode();
                this.contentTypeId = content.getContentTypeId();
                this.firstImage = content.getFirstImage();
                if(this.firstImage == ""){
                    this.firstImage="/images/noimg.jpg";
                }
            }
        }
    }

}

• mustache

{{#model.contents}}
	<div class="place__content__box">
	    <div style="display: none" name="contentId">{{contentId}}</div>
	        <img src="{{firstImage}}">
	    <div class="place__content__wrapper">
	        <div>{{title}}</div>
	        <div>{{addr1}}</div>
	        <div>40년 전통의 손맛을 자랑하고 있는 손두부전문점</div>
	        <div>해시태그 # 해시 해시# 해시 </div>
	    </div>
	    <div class="place__content__more">
	        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
	            class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
	            <path
	                d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0" />
	        </svg>
	    </div>
	</div>
	{{/model.contents}}

2. info 조회 count 추가

• repository
고민되는 점 : contentTypeId 만 매개변수로 받고 있어 area.code, sigungu.code 는 대응 못함.

public long countByContentTypeId(String contentTypeId) {
    Query query = em.createQuery("select count(*) from Content where contentTypeId = :contentTypeId");
    query.setParameter("contentTypeId", contentTypeId);
    return (Long) query.getSingleResult();
}

• service
contentList 와 같은 메서드 안에서 호출한다.



따라서 dto 에도 count 추가 해야함

• mustache

3. 지역 (area) 추가

• AreaRepositotry
area 는 모든 내용을 리턴하기 때문에 쿼리문이 간단.
그러나 sigungu 엔티티와 양방향 매핑 되어있기 때문에 DTO 가 필수이다.

    public List<Area> findAll(){
        Query query = em.createQuery("SELECT a FROM Area a", Area.class);
        List<Area> areaList = query.getResultList();
        return areaList;
    }

• service

public ContentResponse.infoListDTO 정보컨텐츠(String contentTypeId){
      long count = contentRepository.countByContentTypeId(contentTypeId);
      List<Content> contentList = contentRepository.findByContentTypeId(contentTypeId);
      List<Area> areaList = areaRepository.findAll();
      return new ContentResponse.infoListDTO(contentList, count, areaList);
}

위의 코드와 동일한 페이지에서 나타나기 때문에 같은 DTO 에 데이터 매핑 해야함.

• DTO
저부분이 추가되어야함..!

public class ContentResponse {

    @Data
    public static class infoListDTO{
        private long count;
        private List<ContentDTO> contents = new ArrayList<>();
        private List<AreaDTO> areas = new ArrayList<>();

        public infoListDTO(List<Content> contentList, long count, List<Area> areaList) {
            this.count = count;
            for (Content content : contentList) {
                this.contents.add(new ContentDTO(content));
            }
            for(Area area : areaList) {
                this.areas.add(new AreaDTO(area));
            }
        }

        @Data
        public static class AreaDTO{
            private String code;
            private String name;

            public AreaDTO(Area area) {
                this.code = area.getCode();
                this.name = area.getName();
            }
        }

    }

}

 

• mustache

  <div class="place__box2">
            <div class="place__name1">
                <div>#전국</div>
                {{#model.areas}}
                    <div name="code" value="{{code}}">#{{name}}</div>
                {{/model.areas}}
            </div>