[게시판 프로젝트] 뷰 구현(1) - 타임리프를 사용하여 게시판/게시글 페이지 구현

 

서버 사이드 템플릿 타임리프을 사용하여,
게시판 페이지와 게시글 페이지를 만들어보겠습니다.

 

endpoints - 뷰

---

build-gradle 의존성 추가

//뷰 dependencies 추가
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

---

ArticleController - 기본 설정

@Controller
@RequestMapping("/articles")
public class ArticleController {
    /*
     * /articles
     * /articles/{article-id}
     * /articles/search
     * /articles/search-hashtag
     */

}

---

ArticleControllerTest - lombok 및 기본 설정

@DisplayName("View 컨트롤러 - 게시글")
@WebMvcTest(ArticleController.class)//test 대상이 되는 컨트롤러만 빈으로 읽어오기
class ArticleControllerTest {
    private final MockMvc mvc;

    public ArticleControllerTest(@Autowired MockMvc mvc) {//실제 소스코드에는 @Autowired 생략가능하지만, Test에서는 불가
        this.mvc = mvc;
    }

@Disabled("구현 중")
@DisplayName("[view][GET] 게시글 리스트 (게시판) 페이지 - 정상 호출")
@Test
public void givenNothing_whenRequestingArticlesView_thenReturnArticlesView() throws Exception {

    //given

    //when & then
    mvc.perform(get("/articles"))
            .andExpect(status().isOk())
            .andExpect(content().contentTypeCompatibleWith(MediaType.TEXT_HTML))
            .andExpect(view().name("articles/index"))
            .andExpect(model().attributeExists("articles"));
            //서버에서 게시글 목록을 내려줌 -> view에 모델애트리부트로 데이터를 밀어넣어줬다는 뜻
            //모델 애트리뷰트라는 맵에 해당 이름(articles)의 키가 있는지 체크 (내용 까지 검증하는 것은 아님)

}

@Disabled("구현 중")
@DisplayName("[view][GET] 게시글 단건(상세) 페이지 - 정상 호출")
@Test
public void givenNothing_whenRequestingArticleView_thenReturnArticleView() throws Exception {

    //given

    //when & then
    mvc.perform(get("/articles/1"))
            .andExpect(status().isOk())
            .andExpect(content().contentTypeCompatibleWith(MediaType.TEXT_HTML))
            .andExpect(view().name("articles/detail"))
            .andExpect(model().attributeExists("article"))
            .andExpect(model().attributeExists("articleComments"));

}

@Disabled("구현 중")
@DisplayName("[view][GET] 게시글 검색 전용 페이지 - 정상 호출")
@Test
public void givenNothing_whenRequestingArticleSearchView_thenReturnArticleSearchView() throws Exception {

    //given

    //when & then
    mvc.perform(get("/articles/search"))
            .andExpect(status().isOk())
            .andExpect(content().contentTypeCompatibleWith(MediaType.TEXT_HTML))
            .andExpect(view().name("articles/search"))
    ;

}

@Disabled("구현 중")
@DisplayName("[view][GET] 게시글 해시태그 검색 페이지 - 정상 호출")
@Test
public void givenNothing_whenRequestingArticleHashtagSearchView_thenReturnArticleHashtagSearchView() throws Exception {

    //given

    //when & then
    mvc.perform(get("/articles/search-hashtag"))
            .andExpect(status().isOk())
            .andExpect(content().contentTypeCompatibleWith(MediaType.TEXT_HTML))
            .andExpect(model().attributeExists("articles/search-hashtag"));


}

---

[view][GET] 게시글 리스트 (게시판) 페이지 - 정상 호출

• ArticleController

• ArticleControllerTest

• index. html

 

---

[view][GET] 게시글 단건(상세) 페이지 - 정상 호출

• ArticleController

• ArticleControllerTest

• detail.html