게시판 구현 / 7. 파일 업로드(notice)

2024.07.22 - [스프링 프레임워크] - 게시판 구현 / 7. 파일 업로드(boardFile)

게시판 구현 / 7. 파일 업로드(boardFile)

 

이전 boardFile에 이어 notice(공지사항)도 수정해보겠다.

 

---

[controller 수정]

@GetMapping("/notice-detail.do")
public String noticeDetailView(BoardDto boardDto, Model model) {
    boardService = applicationContext.getBean("noticeServiceImpl", BoardService.class);
    model.addAttribute("notice", boardService.getBoard(boardDto.getId()));
    // fileList를 key값으로 갖는 값을 모델에 입력
    model.addAttribute("fileList", boardService.getBoardFileList(boardDto.getId()));
    return "board/notice-detail";
}

 

[impl]

@Override
public List<BoardFileDto> getBoardFileList(int id) {
    return noticeDao.getNoticeFileList(id);
}

 

[dao]

public List<BoardFileDto> getNoticeFileList(int id) {
    return mybatis.selectList("NoticeDao.getNoticeFileList", id);
}

 

[mapper]

<select id="getNoticeFileList" parameterType="int" resultType="boardFile">
    SELECT ID
         , BOARD_ID
         , FILENAME
         , FILEORIGINNAME
         , FILEPATH
         , FILETYPE
        FROM NOTICE_FILE
        WHERE BOARD_ID = #{id}
</select>

 

[notice-detail]

<div id="preview" class="mt-3 text-center"
     data-placeholder="파일을 첨부하려면 파일선택 버튼을 누르세요.">
     // 수정
    <c:forEach items="${fileList}" var="file">
        <div class="upload-file-div">
            <c:choose>
                 // 수정
                <c:when test="${file.filetype eq 'image'}">
                    <img id="img${file.id}"
                         class="upload-file"
                         src="/upload/${file.filename}"
                         alt="${file.fileoriginname}">
                </c:when>
                <c:otherwise>
                     // 수정
                    <img id="img${file.id}"
                         class="upload-file"
                         src="/static/images/defaultFileImg.png"
                          // 수정
                         alt="${file.fileoriginname}">
                </c:otherwise>
            </c:choose>
            <input type="button"
                    class="upload-file-delete-btn"
                    value="x"
                     // 수정
                    deleteFile="${file.id}">
             // 수정
            <p id="filename${file.id}"
               class="upload-file-name">
                // 수정
                ${file.fileoriginname}
            </p>
        </div>
    </c:forEach>
</div>

---

삭제기능

 

[dao]

public void delete(int id) {
    System.out.println("NoticeDao의 delete 메소드 실행");

    mybatis.delete("NoticeDao.deleteFiles", id);

    mybatis.delete("NoticeDao.delete", id);

    System.out.println("NoticeDao의 delete 메소드 실행 종료");
}

 

[mapper]

<delete id="deleteFiles" parameterType="int">
    DELETE FROM NOTICE_FILE
        WHERE BOARD_ID = #{id}
</delete>

 

---

[controller 수정]

 - ajax 주의

    @PostMapping("/notice-list-ajax.do")
    @ResponseBody
    public Map<String, Object> noticeListAjax(@RequestParam Map<String, String> searchMap, Criteria cri) {
        boardService = applicationContext.getBean("noticeServiceImpl", BoardService.class);

//        cri.setAmount(9);

		// List에 Map형식으로 입력
        List<Map<String, Object>> noticeList = new ArrayList<>();

        boardService.getBoardList(searchMap, cri).forEach(boardDto -> {
            List<BoardFileDto> boardFileDtoList = boardService.getBoardFileList(boardDto.getId());

            Map<String, Object> map = new HashMap<>();

			// 1. Map의 String 부분
            map.put("boardDto", boardDto);

            if(boardFileDtoList.size() > 0)
            	// 1. Map의 Object 부분
                map.put("file", boardFileDtoList.get(0));

            noticeList.add(map);
        });

        Map<String, Object> returnMap = new HashMap<>();

        returnMap.put("noticeList", noticeList);

        return returnMap;
    }

 

[notice-list 수정]

<div class="container mt-3 mb-5 w-75 card-wrapper">
	// 수정	
    <c:forEach items="${noticeList}" var="notice">
        <div class="card" style="width: 18rem;">
            <c:choose>
            	// 수정
                <c:when test="${notice.file != null and notice.file.filetype eq 'image'}">
                    <img class="bd-placeholder-img card-img-top" width="100%" height="180"
                        // 수정
                         src="/upload/${notice.file.filename}"
                         // 수정
                         alt="${notice.file.fileoriginname}">
                </c:when>
                <c:otherwise>
                    <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect></svg>
                </c:otherwise>
            </c:choose>
            <div class="card-body">
            	// 수정
                <h5 class="card-title">${notice.boardDto.title}</h5>
                <p class="card-text">작성일:
                	// 수정
                    <javatime:format value="${notice.boardDto.regdate}" pattern="yyyy-MM-dd"/>
                </p>
                // 수정
                <a href="/board/update-cnt.do?id=${notice.boardDto.id}&type=notice" class="btn btn-outline-secondary btn-sm">자세히 보기</a>
            </div>
        </div>
    </c:forEach>
</div>

 

$.ajax({
    url: '/board/notice-list-ajax.do',
    type: 'post',
    data: $("#search-form").serialize(),
    success: (obj) => {
        console.log(obj);
        let htmlStr = "";
        for(let i = 0; i < obj.noticeList.length; i++) {
            htmlStr += `
                <div class="card" style="width: 18rem;">
                	// 수정
                    \${makeImageElement(obj.noticeList[i].file)}
                    <div class="card-body">
                        // 수정
                        <h5 class="card-title">\${obj.noticeList[i].boardDto.title}</h5>
                        // 수정
                        <p class="card-text">작성일: \${obj.noticeList[i].boardDto.regdate[0]}-\${zeroDate(obj.noticeList[i].boardDto.regdate[1])}-\${zeroDate(obj.noticeList[i].boardDto.regdate[2])}</p>
                        // 수정
                        <a href="/board/update-cnt.do?id=\${obj.noticeList[i].boardDto.id}&type=notice" class="btn btn-outline-secondary btn-sm">자세히 보기</a>
                    </div>
                </div>
            `;
        }
        // console.log(htmlStr);
        $(".card-wrapper").append(htmlStr);
    },
    error: (err) => {
        console.log(err);
    }
});

 

 - script 수정

<script>
    $(() => {
        const makeImageElement = (file) => {
            console.log(file);
            if(typeof file != 'undefined' && file.filetype === 'image') {
                console.log("aaaa");
                // 수정
                return `<img class="bd-placeholder-img card-img-top" width="100%" height="180" src="/upload/\${file.filename}" alt=\${file.fileoriginname}>`
            }

            return ``;
        }