[JPA] 게시판 프로젝트 - 게시글 생성 기능 구현 (7)

 

 

이전 개발 단계 보러 가기

https://taetae99.tistory.com/36

벡엔드 토이 프로젝트(게시판) - MemberController MockMvc를 사용하여 테스트하기

 

 

목차

 

 

---

 

1. 주요 변경사항

 

 

 

1. 게시글 저장 오류 수정

게시글 저장과 관련한 컨트롤러 작성 도중 양방향 연관관계와 관련하여 문제가 발생했다.

 

이를 해결하는 과정을 아래의 링크로 남겨두었다.

 

https://taetae99.tistory.com/37

[트러블 슈팅] JPA 연관 관계 및 영속성 관리 문제 해결

 

 

 

2. BaseTimeEntity의 타입 변경 

 

기존에는 시간정보를 다루기 위하여 LocalDateTime을 포맷 없이 사용했다.

 

하지만 필요 없는 정보가 많아서 데이터를 포맷하여 사용하고 싶었다.

 

이와 관련해서 이전에 작성했던 BaseTimeEntity의 요구사항이 변경되었다고 가정하겠다. 

 

날짜, 시간("yyyy-MM-dd HH:mm")과 관련된 정보만 포맷하여 가져오도록 수정한다.

 

@MappedSuperclass
@EntityListeners(AuditingEntityListener.class)
@Getter
public abstract class BaseTimeEntity {

    @CreatedDate
    @Column(name = "created_date")
    private String createdDate;

    @LastModifiedDate
    @Column(name = "modified_Date")
    private String modifiedDate;

    @PrePersist
    public void onPrePersist(){
        this.createdDate = LocalDateTime.now().format(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm"));
        this.modifiedDate = this.createdDate;
    }
    @PreUpdate
    public void onPreUpdate(){
        this.modifiedDate = LocalDateTime.now().format(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm"));
    }

}

 

이전에 LocalDateTime 타입을 갖던 createDate, modifiedDate 필드의 타입을 String 타입으로 변경하였다.

 

@PrePersist와 @PreUpdate를 사용하여 필드가 생성 또는 수정 시에 지정된 형식으로 저장되도록 하였다.

 

이전에 뷰에 전달되는 데이터의 타입은 LocalDateTime이었기 때문에 사용되던 부분의 변경이 필요했다.

 

---

 

 

아래는 변경 후 반영 된 모습이다.

 

1. 게시판 목록

 

 

 

2. 마이 페이지

 

 

 

 

2. BoardController (게시글  컨트롤러)

 

 

@Controller
@RequiredArgsConstructor
public class BoardController {

    private final PostService postService;

    //게시글 조회 페이지
    @GetMapping("/board/post/{postId}")
    public String post(@PathVariable Long postId, @ModelAttribute CommentForm commentForm, Model model) {

        Post post = postService.findOne(postId);
        model.addAttribute("post",post);

        List<Comments> comments = post.getComments();
        model.addAttribute("comments", comments);

        return "post/postForm";
    }

    @GetMapping("/board/post/{postId}/edit")
    public String edit(@PathVariable Long postId, Model model) {

        Post post = postService.findOne(postId);
        PostForm postForm = PostForm.from(post);

        model.addAttribute("postForm", postForm);

        return "post/editPostForm";
    }

    @PostMapping("/board/write")
    public String create(@AuthenticationPrincipal MemberDetail memberDetail, @Valid PostForm postForm, BindingResult bindingResult) {

        if (bindingResult.hasErrors()) {
            return "post/createPostForm";
        }
        Long postId = postService.write(memberDetail.getMember().getId(), postForm.getTitle(), postForm.getContent());
        
        return "redirect:/board/post/"+postId;
    }

}

 

 

post는 게시글 상세 보기 페이지 요청 시 동작한다.

• URL 경로에서 {postId} 값을 받아 해당 게시글의 상세 정보를 검색하여 전달한다.
• 해당 게시글에 작성된 댓글 목록을 검색하여 전달한다.
• "post/postForm"에 데이터를 전달하고 상세 페이지가 렌더링 된다.

edit는 게시글 수정 페이지 요청 시 동작한다.

• URL 경로에서 {postId} 값을 받아 해당 게시글을 검색한다.
• 검색한 게시글을 뷰에 전달하기 위한 PostForm으로 변환하여 전달한다. PostForm에는 제목과 내용이 담겨있다.
• "post/editPostForm"에 데이터를 전달하고 수정 페이지가 렌더링 된다.

create는 게시글 작성 요청 시 동작한다.

• @Valid를 사용하여 PostForm에 대한 유효성 검사를 진행한다.
• 기존 PostService.createPost는 PostService.write로 메서드 명이 변경 되었고 매개변수도 수정되었다. 이와 관련해서는 위의 링크를 참고 바란다.
• 게시글이 성공적으로 작성되면 작성된 게시글 상세 보기 페이지로 리다이렉트 된다.

 

 

3. 게시글과 관련된 View작성

 

 

 

게시글 작성 페이지, 게시글 수정 페이지, 게시글 상세 보기 페이지가 필요하다.

 

 

1. 게시글 작성 페이지 

 

 

게시글 작성 시 제목과 내용을 필요로 한다. 

 

작성 완료 버튼을 클릭하면 해당 게시글 상세 보기 페이지로 이동한다.

 

게시글 작성 시 사용자가 입력한 데이터를 전달하는 PostForm은 다음과 같다.

 

@Getter
public class PostForm {

    @NotEmpty
    private String title;
    @NotEmpty
    private String content;

    protected PostForm(String title, String content) {
        this.title = title;
        this.content = content;
    }

    public static PostForm from(Post post) {
        return new PostForm(post.getTitle(), post.getContent());
    }
}

 

@NotEmpty 어노테이션을 사용하여 제목과 내용에 빈 값이 들어올 수 없도록 하였다. 

 

현재는 빈 값에 대해서만 유효성 검사를 진행하고 있다. 이는 요구사항을 제대로 만족하지 못한다.

 

이 부분에 대해서 기존 요구사항인 제목(500자), 내용(1000자)에 대한 요구사항을 만족하도록 수정을 진행할 것이다.

 

 

1-1. 빈 값이 전달되었을 경우

 

 

빈 값이 전달되면 유효성 검사가 실패한 부분에 대해서 경고 표시를 해준다.

 

이는 @Valid를 통해 유효성 검사가 진행되는 것이다.

 

 

 

2. 게시글 상세 보기 페이지 

 

댓글이 존재하지 않는 경우

 

댓글이 존재하는 경우

 

상세 보기 페이지에는 게시글과 관련된 정보(게시글 번호, 작성일, 작성자, 조회수, 제목, 내용)를 확인할 수 있다.

 

또한 댓글과 관련된 정보(작성자, 댓글, 작성일, 삭제와 신고 버튼을 담은 드롭다운 버튼)를 확인할 수 있다.

 

상세 보기 페이지로 가는 방법은 총 4가지 존재한다. 

1.  게시판에서 해당 게시글의 제목을 클릭한다.

2. 게시글 작성페이지에서 성공적으로 게시글 작성이 완료된다.

3. 게시글 수정페이지에서 성공적으로 게시글 수정이 완료된다.

4. 마이페이지에서 작성한 게시글 또는 댓글을 클릭한다.

 

 

 

4.  다음으로..

 

 

이번에는 양방향 연관관계와 영속성 관련 오류를 해결하는 것에 집중했다.

 

앞으로는 남은 게시글 기능을 위주로 마무리해 볼 계획이다. 앞으로 필요한 기능은 다음과 같다.

 

1. 조회 수 증가 기능 구현

2. 게시글 수정 및 삭제 기능 구현

3. 게시글 수정 및 삭제 버튼은 작성자만 볼 수 있도록 제한

4. PostForm에 대한 유효성 검사를 추가하여 요구사항 충족