[Tistory] 게시글 리스트 보기

1. 화면

2. PostResponse - ListDTO 만들기

@Data
    public static class ListDTO {
        private Integer id;
        private String thumbnailFile; //썸네일
        private String title;
        private String content;
        private LocalDateTime createdAt;

        public ListDTO(Integer id, String thumbnailFile, String title, String content, LocalDateTime createdAt) {
            this.id = id;
            this.thumbnailFile = thumbnailFile;
            this.title = title;
            this.content = content;
            this.createdAt = createdAt;
        }
    }

3. PostJPARepository

• Post 엔티티에서 특정 사용자의 게시글 목록을 가져오는 쿼리, user.id가 :sessionUserId와 일치하는 게시글만 조회

// 게시글 리스트
    @Query("select new site.metacoding.blogv3.post.PostResponse$ListDTO(p.id, p.thumbnailFile, p.title, p.content, p.createdAt)" +
            "from Post p where p.user.id = :sessionUserId order by p.id desc")
    List<PostResponse.ListDTO> findByPostList(Integer sessionUserId);    

4. PostService

• postJPARepo.findByPostList(sessionUserId) 메서드를 호출하여, 데이터베이스에서 sessionUserId에 해당하는 사용자의 게시글 목록을 조회

// 게시글 리스트
    public List<PostResponse.ListDTO> postList(Integer sessionUserId){
        List<PostResponse.ListDTO> postLists = postJPARepo.findByPostList(sessionUserId);
        System.out.println("postLists"+ postLists);
        return postLists;
    }

5. PostController

// 게시글 리스트
    @GetMapping("/post/list")
    public String postList(HttpServletRequest request) {
        User user = (User) session.getAttribute("sessionUser");

        // 서비스 계층의 postService.postList() 메서드를 호출하여, 해당 사용자가 작성한 게시글 목록을 조회
        // 현재 로그인한 사용자의 ID로 게시글을 필터링 함
        List<PostResponse.ListDTO> listDTOs = postService.postList(user.getId());
        
        // 조회한 게시글 목록을 request 객체에 model이라는 이름으로 저장
        request.setAttribute("model", listDTOs);

        return "post/list";
    }

6. post - list.mustache

{{>/layout/post-header}}

<div class="container">
    <div class="d-flex justify-content-end my_mb_sm_1">
        <a href="/s/post/write-form" class="my_atag_none">
            <div class="my_icon_rounded_btn d-flex justify-content-center align-items-center"><i
                    class="fa-solid fa-pencil"></i></div>
        </a>
    </div>

    <div class="my_post_list">
        {{#model}}
            <div class="my_post_list_item">
                <div class="my_post_list_item_left">
                    <img src="/upload/{{thumbnailFile}}" width="100%" height="100%">
                    <!--                <div class="my_fakeimg"> </div>-->
                </div>
                <div class="my_post_list_item_right my_ellipsis">
                    <div class="my_text_title my_ellipsis">
                        {{title}}
                    </div>
                    <div class="my_text_body_sm">
                        {{createdAt}}
                    </div>
                    <div class="content-wrapper">
                        {{{content}}}
                    </div>

                    <div class="my_mt_md_1">
                        <a href="/post" class="my_success_btn">Read More</a>
                    </div>
                </div>
            </div>
        {{/model}}


        <div class="my_paging d-flex justify-content-center align-items-center my_mb_lg_1">
            <a class="my_atag_none my_mr_sm_1" href="/s/post/write-form"> <!-- /user/post?page=-->
                <i class="fa-solid fa-angle-left"></i>
            </a>

            <a class="my_atag_none" href="/user/post?page=">
                <div class="my_paging_number_box my_mr_sm_1">
                </div>
            </a>

            <a class="my_atag_none my_ml_sm_1" href="/user/post?page=">
                <i class="fa-solid fa-angle-right"></i>
            </a>

        </div>
    </div>
</div>


{{>/layout/footer}}

7. 화면 확인.. 사진이 ???

8. 정적 리소스 핸들러 - WebMvcConfig 생성

• addResourceHandlers() 메서드를 오버라이드하여 정적 파일(이미지, CSS, JS 등)에 대한 경로를 설정

@Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        WebMvcConfigurer.super.addResourceHandlers(registry);

        registry
                .addResourceHandler("/upload/**")
                .addResourceLocations("file:./upload/")
                .setCachePeriod(60 * 60) // 초 단위 => 한시간
                .resourceChain(true)
                .addResolver(new PathResourceResolver());

    }

9. 화면 재확인 - 사진 잘 나옴

10. 게시판 리스트의 생성 시간이 이상하다… 포맷이 안되어서 나옴

11. PostResponse - ListDTO 수정

@Data
    public static class ListDTO {
        private Integer id;
        private String thumbnailFile; //썸네일
        private String title;
        private String content;
        private String createdAt;


        public ListDTO(Integer id, String thumbnailFile, String title, String content, LocalDateTime createdAt) {
            this.id = id;
            this.thumbnailFile = thumbnailFile;
            this.title = title;
            this.content = content;

            // 여기서 바로 포맷팅 적용 (분 까지)
            this.createdAt = createdAt.format(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm"));
        }
    }

12. 게시판 리스트의 생성 시간 확인 - 잘나온다!