전반적인 Novel 완성

NJW·2023년 5월 16일

HCI project

목록 보기

12/14

Novel 완성

Novel From에 장르와 연재 상태 추가

일단 장르는 enum으로 되어 있기에 나는 화면에 해당 enum의 속성들이 셀렉트 박스로 들어가기를 원했다.

그렇기 때문이 일단 소설 등록 html에 thymeleaf를 이용해서 셀렉트 박스를 추가해줬다.

    <div>
        <select class="form-control" th:field="*{Genre}">
            <option th:each="genreValue : ${T(web.novelPlatform.entity.Genre).values()}"
                    th:value="${genreValue.name()}"
                    th:text="${genreValue.name()}">
                val
            </option>
        </select>
    </div>

그리고 소설 form에 해당 enum을 넣어준 후 컨트롤러로 가서 장르 enum을 위의 html로 옮겨주게 했다.

    @ModelAttribute("Genre")
    public Genre[] genres(){
        return Genre.values();
    }

참고로 말하자면 저기 ModelAttribute의 Genre는 html의 Genre와 연결이 되는 거 같다.

또한 소설을 등록하면 바로 연재 상태로 표시가 되도록 post 컨트롤러에 아래의 구문을 추가했다.

        novel.setSerialState(SerialState.Live);

무조건 Live로 들어가야 하므로 그냥 넣어줬다.

결과

Novel List 완성

지금까지 등록한 소설들을 보여주는 기능을 완성했다. 디자인 적인 부분을 완전히 신경쓰지 않아서 완성... 이라고 보기는 어려우나 일단은 어떻게 구현은 했으니까.

list

리스트로 모든 소설을 찾아서 그 리스트를 모델에 넣어 html로 옮겨주도록 했다.

    @GetMapping(value = "/novels")
    public String list(Model model){
        List<Novel> novels = novelService.findNovels();
        model.addAttribute("novels", novels);

        return "novels/novelList";
    }

뷰는 thymeleaf의 공식문서와 김영한님의 강의 자료를 참고했는데, 거의 비슷해서 어느 것을 봐도 괜찮을 듯싶다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang = "ko">
<head>
    <meta charset="UTF-8">
    <title>웹소설 연재 페이지</title>
</head>
<body>
<div>
    <table class = "table table-striped">
        <thead>
        <tr>
            <th>#</th>
            <th>제목</th>
            <th>소개</th>
            <th>장르</th>
            <th>연재 상황</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="novel : ${novels}">
            <td th:text="${novel.title}"></td>
            <td th:text="${novel.introduce}"></td>
            <td th:text="${novel.genre}"></td>
            <td th:text="${novel.serialState}"></td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>

소설을 등록하면 바로 소설 리스트 페이지로 가도록

처음에는 소설을 등록하면 첫 화면으로 가게 했다. 그러나 소설을 등록했는데, 바로 첫 화면으로 돌아가면 얼마나 황당할까? 당연히 소설 리스트 화면으로 가야 한다고 생각했다. 그래서 처음에는 소설 리스트 html을 리턴하도록 했다.

그러나 여기서 문제는 컨트롤러와 연결이 안 되고 바로 html로 들어가니 데이터 값이 안 나오고 틀만 나온다는 점이었다. 당연한 말이지만 컨트롤러와 연결이 되지 않으니 뷰는 받은 데이터가 없어서 그 html 틀만 보여주는 것이다. 이 부분을 어떻게 구현해야 할지 고민하다가 'redirect:/'에서 힌트를 얻었다. 만일 'redirect:/novels'로 해서 소설 리스트의 로컬 위치로 가게 한다면?

그 결과 내가 원하는 소설의 데이터 리스트가 나오는 것을 볼 수 있었다.

    @PostMapping("/novel/new") //데이터를 실제 등록
    //NovelForm이 넘어온다.
    //참고 꼭 넣어야 하는 게 있다면 form에다가 @Valid를 붙여준다.
    public String create(NovelForm form){
        Novel novel = new Novel();
        novel.setTitle(form.getTitle());
        novel.setIntroduce(form.getIntroduce());
        novel.setGenre(form.getGenre());
        novel.setSerialState(SerialState.Live);
        novelService.createNovel(novel);

        //소설 목록으로 넘어간다.
        return "redirect:/novels";
    }