[ Java / SpringBoot / MVC / RESTful ] RESTful한 게시판 만들기10 / 첨부파일 존재하면 제목에 클립 이미지 보이기, 제목 기본값 넣기

[ 첨부파일의 존재여부를 확인하기 위한 방법 ]
1. 이미 구현해둔 첨부파일 정보 받아오는 쿼리를 그대로 사용한다.
    (파일과 관련된 모든 정보를 가져오기 때문에 효율적이지 않은 것 같다.)
2. dto와 mapper에 첨부파일의 존재여부를 확인하는 새로운 필드와 쿼리를 생성한다.
3. 기존 게시글 목록 조회 쿼리에 첨부파일의 존재여부를 확인하는 쿼리를 추가한다.

- 새로 생성하거나 추가한다면 COUNT와 EXISTS 중 무슨 쿼리를 사용할 것인가?
  COUNT는 데이터의 수를 EXISTS는 데이터의 존재여부를 확인한다.
   EXISTS를 사용해 파일의 여부만 체크하기로 함(존재하면 1 존재하지않으면 0 반환)
  어차피 파일 여부를 확인하는 쿼리는 게시글 조회시에만 필요할 것 같아서 기존 쿼리에 추가하기로 함

이미지는 미리 파일에 담아둔다.

[ 1. 쿼와 BoardDto 수정]

<select id="selectBoardList" parameterType="PagingVo" resultType="BoardDto">
    /* 게시글 목록 조회 */
    <![CDATA[
        SELECT
            board_idx,
            title,
            CASE
                WHEN EXISTS(
                    SELECT 
                        1 
                    FROM 
                        t_file
                    WHERE
                       board_idx = t_board.board_idx
                    AND
                       deleted_yn = 'N'
                )THEN 1
                ELSE 0
            END AS is_file,
            contents,
            hit_cnt,
            creator_id,
            created_datetime
        FROM
            t_board
        WHERE
            deleted_yn = 'N'
        ORDER BY board_idx DESC		
    ]]>		
    <if test="startIndex != null and startIndex > -1 ">
        LIMIT #{startIndex},#{rowPerPage};
    </if>
</select>

// BoardDto
private int isFile;

[ 2. BoardList.html 수정 ]

<!-- 기존 html -->
<td class="title">
    <a th:href="'/board/' + ${list.boardIdx}"  th:text="${list.title}"></a>
</td>​

<!-- 수정 후 html 제목 출력하는 a태그 뒤에 img 태그 추가해주면 된다. -->
<td class="title">
    <a th:href="'/board/' + ${list.boardIdx}"  th:text="${list.title}"></a>
    <img th:if="${list.isFile} == 1" src="/img/clip.png" class="clip_img">
</td>

첨부파일 표시 완료

 

게시글 작성할 때 제목을 안 쓰고 등록하니 제목이 텅 비어서 클릭이 안된다! - 삭제도 못 함...
결국 데이터 베이스에 직접 접근해서 지워줬다.
not null로 설정해둬도 공백이나 빈 문자열이 인식돼서 db에 등록이 되는 듯 하다.
처음에는 유효성 검사를 할까 했는데 그냥 데이터베이스 자체에 기본 값을 넣어주기로 했다.

ALTER TABLE t_board ALTER COLUMN title SET DEFAULT '[제목 없음]';​

그런데 여전히 제목이 텅텅 비어있다.
당연하다. 빈 문자열이 값으로 인식돼서 not null도 안통하는데 default가 통할리가.....

그래서 자바스크립트를 통해 빈 문자열이거나 공백이면 제목없음으로 세팅해서 서버로 전달하도록 했다.
굳이 value에 .trim()을 해주는 이유 공백일 경우 length가 0이 아니기 때문에 공백을 잘라주고 비교해준다.

insertBtn.addEventListener('click', e => {
        let title = document.querySelector('#title');
        let titleValue = title.value;
        title.value = titleValue.trim().length === 0 ? '제목 없음' : title;
        
        ... 기존에 있던 첨부파일 크기 체크 로직 ...
});

수정 버튼 이벤트핸들러에도 똑같이 추가해준다.

modifyBtn.addEventListener('click', () => {
    let title = document.querySelector('#title');
    let titleValue = title.value;
    title.value = titleValue.trim().length === 0 ? '제목 없음' : title;
            ... 기존에 있던 첨부파일 크기 체크 로직 ...
});

null 상태일 경우 데이터베이스에서 기본 값으로 제목 없음 넣어줄거기 때문에 굳이 null 비교는 안했다.