[인스타그램 클론코딩] 08. 홈 화면 구현(Back-End)

홈화면에는 유저들이 올린 게시글을 보여줄 예정이다. 또한 게시글에 대한 좋아요 기능과 댓글 기능까지 구현할 예정이다.

제일 먼저, 홈화면으로 들어왔을 때 보여줄 게시글 목록을 반환해주는 api를 제작한다.

 

1. DTO 작성

@Data
public class PostDto {

    private Long postId;
    private UserDto user;
    private String content;
    private List<PostFileDto> postFileList;

    @Builder
    public PostDto(Long postId, UserDto user, String content, List<PostFileDto> postFileList) {
        this.postId = postId;
        this.user = user;
        this.content = content;
        this.postFileList = postFileList;
    }
}

@Data
public class PostFileDto {

    private Long fileOrder;
    private String fileUrl;

    @Builder
    public PostFileDto(Long fileOrder, String fileUrl) {
        this.fileOrder = fileOrder;
        this.fileUrl = fileUrl;
    }

    public static PostFileDto toDto(PostFile postFile) {
        return PostFileDto.builder()
                .fileOrder(postFile.getPostFileIndex())
                .fileUrl(postFile.getPostFileUrl())
                .build();
    }
}

@Data
public class PostResponseDto {

    private List<PostDto> postList;

    @Builder
    public PostResponseDto(List<PostDto> postList) {
        this.postList = postList;
    }
}

 

- PostDto : 게시글에 대한 정보를 담을 DTO이고 postId, User정보, 게시글 내용, 올렸던 파일들에 대한 내용들을 포함한다.

- PostFileDto : 올렸던 파일들에 대한 정보를 담고있으며, 올린 순서와 Url을 포함한다.

- UserDto : Follow에서 구현했던 유저 DTO 에 대한 내용을 다시 사용한다.

- static PostFileDto toDto : Entity 객체를 Dto 객체로 변환하는 메서드로 static으로 구현하였다.

 

2. PostRepositorySupport 작성

- 쿼리를 직접 커스텀해서 사용할 수 있게 도와주는 queryDsl 라이브러리를 사용한다.

@Repository
public class PostRepositorySupport extends QuerydslRepositorySupport {

    private final JPAQueryFactory queryFactory;

    public PostRepositorySupport(JPAQueryFactory queryFactory) {
        super(Post.class);
        this.queryFactory = queryFactory;
    }

    public List<Post> getPosts(List<User> userList) {
        return queryFactory.selectFrom(post).where(post.user.in(userList)).orderBy(post.modifiedDate.desc()).fetch();
    }
}

 

- userList 목록을 받아와 그 유저들이 작성한 게시글을 모두 가져와 최근 수정시간 순으로 정렬하여 반환해준다.

 

3. PostService 게시글 목록 조회 기능 추가

@Transactional
public PostResponseDto getPostList(User follower) {

    // 게시글을 가져오기 위한 유저 목록 리스트(본인 + 팔로잉 인원)
    List<User> userList = new ArrayList<>();
    userList.add(follower);

    List<User> followingUserList = followRepositorySupport.followerList(follower);
    followingUserList.forEach((user) -> userList.add(user));

    // 해당 유저의 post와 postFile을 가져와 postList에 삽입한다.
    List<PostDto> postDtoList = new ArrayList<>();

    // 유저 리스트에 포함된 유저들의 모든 게시글을 수정시간 순으로 정렬하여 가져온다.
    List<Post> postList = postRepositorySupport.getPosts(userList);

    // 게시글에 대한 처리
    postList.forEach((post) -> {
        List<PostFile> postFileList = postFileRepository.findAllByPost(post);
        List<PostFileDto> postFileDtoList = new ArrayList<>();

        // PostFileDto로 변환
        postFileList.forEach((postFile) -> {
            postFileDtoList.add(PostFileDto.toDto(postFile));
        });

        // PostDtoList에 내용 삽입
        postDtoList.add(
                PostDto.builder()
                        .postFileList(postFileDtoList)
                        .postId(post.getId())
                        .content(post.getContent())
                        .user(UserDto.toDto(post.getUser()))
                        .build()
        );
    });

    return PostResponseDto.builder().postList(postDtoList).build();
}

 

- userList에 본인과 본인이 팔로잉한 유저들의 목록을 모두 집어 넣어, 그에 대한 게시글을 모두 찾아온다.

- 찾아온 게시글들에 대하여 앞서 작성한 Dto 형태에 맞추어 바꾼 후, postDtoList에 삽입하여 반환한다.

 

4. PostControlloer 수정

@GetMapping("/post-list")
public ResponseEntity getPostList(@CurrentUser User user) {
    try {
        return ResponseEntity.ok().body(postService.getPostList(user));
    } catch (Exception e) {
        return ResponseEntity.badRequest().body(e.getMessage());
    }
}