게시글 하단에 댓글 기능 추가 : 댓글 리스트 출력
-- 댓글 출력 --
1. com_comment.js 작성
- controller에 게시글 번호를 보내 해당 게시글의 댓글 list 가져오기
- jsp에서 저장해놓은 com_num을 controller로 보내서 Com_CommentVO로 생성된 List를 받아오기
- 가져온 list를 for문을 이용하여 출력
- 현재 로그인한 아이디(ses.id)와 작성 아이디(ccvo.id)가 동일 : 수정/삭제버튼 추가, 댓글내용 수정 가능 설정
- 현재 로그인한 아이디(ses.id)와 작성 아이디(ccvo.id)가 비동일 : 댓글내용 수정 불가능 설정 (readonly=readonly)
- 수정한 댓글(ccvo.com_com_isMod가 Y) : '수정됨'이 뜨도록 설정 = 추후 수정 코드 mapper에서 변경필요
- 만약 list가 없다면 '댓글이 없습니다. 첫 번째 댓글을 달아주세요!'가 출력되도록 설정
- 추가 작성
- 댓글 저장 js에 코드 추가
- 댓글 작성 후 '작성하기' 버튼 클릭
- -> 저장완료
- -> 리스트 출력되는 코드(getCommentList(cmtData.com_num);) 추가
// -- 댓글 출력 --
async function spreadCommentFromServer(com_num){
console.log(">>> com_num : " + com_num);
try {
const resp = await fetch('/com_comment/commentList/'+com_num);
const result = await resp.json();
return result;
} catch (error) {
console.log(error);
}
}
function getCommentList(com_num){
spreadCommentFromServer(com_num).then(result => {
console.log("Controller(DB) -> JS : " + (( result.length > 0 )? "OK":"FAIL"));
const content = document.getElementById("comment_list");
if(result.length > 0){
content.innerHTML = ''; //기존의 값을 비우고
for(let ccvo of result){
let div = `<div class="comment_content">`;
div += `<div><span class="nickname">${ccvo.nickname}</span>`;
if(`${ccvo.id}` === '1111'){
div += `<button type="button" class="modBtn">✂ 수정</button>`;
div += `<button type="button" class="delBtn">✕ 삭제</button></div>`;
div += `<input type="text" id="cmtTextMod" value="${ccvo.com_com_content}">`;
}else{
div += `</div>`;
div += `<input type="text" id="cmtTextMod" value="${ccvo.com_com_content}" readonly=readonly>`;
}
div += `<div><div><span>${ccvo.com_com_mod_date} •</span>`;
div += `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="10" fill="currentColor" class="bi bi-suit-heart-fill" viewBox="0 0 16 16">
<path d="M4 1c2.21 0 4 1.755 4 3.92C8 2.755 9.79 1 12 1s4 1.755 4 3.92c0 3.263-3.234 4.414-7.608 9.608a.513.513 0 0 1-.784 0C3.234 9.334 0 8.183 0 4.92 0 2.755 1.79 1 4 1z"/>
</svg>`;
div += `<span> 2</span>`;
if(`${ccvo.com_com_isMod}` === 'Y'){
div += `<span>• 수정됨</span>`;
}
div += `</div>`;
div += `<button class="like_button">`;
div += `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-suit-heart" viewBox="0 0 16 16">
<path d="m8 6.236-.894-1.789c-.222-.443-.607-1.08-1.152-1.595C5.418 2.345 4.776 2 4 2 2.324 2 1 3.326 1 4.92c0 1.211.554 2.066 1.868 3.37.337.334.721.695 1.146 1.093C5.122 10.423 6.5 11.717 8 13.447c1.5-1.73 2.878-3.024 3.986-4.064.425-.398.81-.76 1.146-1.093C14.446 6.986 15 6.131 15 4.92 15 3.326 13.676 2 12 2c-.777 0-1.418.345-1.954.852-.545.515-.93 1.152-1.152 1.595L8 6.236zm.392 8.292a.513.513 0 0 1-.784 0c-1.601-1.902-3.05-3.262-4.243-4.381C1.3 8.208 0 6.989 0 4.92 0 2.755 1.79 1 4 1c1.6 0 2.719 1.05 3.404 2.008.26.365.458.716.596.992a7.55 7.55 0 0 1 .596-.992C9.281 2.049 10.4 1 12 1c2.21 0 4 1.755 4 3.92 0 2.069-1.3 3.288-3.365 5.227-1.193 1.12-2.642 2.48-4.243 4.38z"/>
</svg>`;
div += `</button></div>`;
div += `<div class="comment_line"></div>`;
div += `<div style="display: none;" data-num="${ccvo.com_com_num}"></div></div>`;
content.innerHTML += div;
}
}else{ // 댓글 없는 경우
let div = `<div>댓글이 없어요. 첫 번째 댓글을 달아주세요!</div>`;
content.innerHTML += div;
}
})
}
2. Com_CommentController 작성
- com_comment.js에서 받아온 com_num이용
//댓글 리스트 출력
@GetMapping(value="/commentList/{com_num}", produces = {MediaType.APPLICATION_JSON_VALUE} )
public ResponseEntity<List<Com_CommentVO>> selectCom_CommentList(@PathVariable("com_num") int com_num){
log.info(">>> com_com_num : " +com_num);
List<Com_CommentVO> commentList = ccsv.selectCom_commentList(com_num);
log.info(">>> com_List : " +commentList.toString());
return new ResponseEntity<List<Com_CommentVO>>(commentList, HttpStatus.OK);
}
3. Com_CommentService 작성
package com.bewithme.www.service;
import java.util.List;
import com.bewithme.www.domain.Com_CommentVO;
public interface Com_CommentService {
List<Com_CommentVO> selectCom_commentList(int com_com_num);
}4. Com_CommentServiceImpl 작성
@Override
public List<Com_CommentVO> selectCom_commentList(int com_num) {
//댓글 리스트 출력
log.info("com_comment ServiceImpl list in!");
log.info(">>> serviceImpl com_num : "+com_num);
return ccdao.selectList(com_num);
}5. Com_CommentDAO작성
package com.bewithme.www.repository;
import java.util.List;
import com.bewithme.www.domain.Com_CommentVO;
public interface Com_CommentDAO {
List<Com_CommentVO> selectList(int com_num);
}
6. Com_CommentMapper 작성
<select id="selectList" resultType="com.bewithme.www.domain.Com_CommentVO">
select * from com_comment where com_num = #{com_num}
order by com_com_reg_date desc
</select>
7.Com_Comment.jsp에 화면 출력시 댓글이 뜨도록 하는 코드 추가
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/resources/css/com_comment.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<title>com_comment</title>
</head>
<body>
<div class="container">
<!-- 좌측/ 전체 동일한 메뉴바 부분 -->
<div class="left">
<img src="/resources/img/logo.png" class="logo" alt="">
<div class="menu_bar">
<button><a href=""> 🏠<span> Home</span></a></button><br>
<button><a href="">📝<span> Subject</span></a></button><br>
<button><a href="/community/communitypage">📖<span class="not"> Community</span></a></button><br>
<button><a href="">📁<span> Q&A</span></a></button><br>
</div>
<div class="sebu">
<button><a href="">⚙ Setting</a></button><br>
<button><a href="">🗑 Log out</a></button><br>
</div>
</div>
<!-- 우측/ Comment 부분 -->
<div class="right">
<!-- 고정/ 메뉴 선택 -->
<div class="nav_bar">
<div class="nav">
<button> 전체 </button>
<button> 개발 </button>
<button> 상담 </button>
<button> MY </button>
</div>
<a href="#" class="question">
<button>💡 질문하기</button>
</a>
</div>
<div class="nav_line"></div>
<!-- 스크롤/ 게시글, 댓글 출력 -->
<div class="main">
<a href="#end" id="top"></a>
<!-- 게시글 -->
<c:set var="cvo" value="${cvo}"></c:set>
<div class="board">
<div class="board_header">
<p>${cvo.com_category}</p>
<h1 class="title">${cvo.com_title}</h1>
<div class="writer">${cvo.nickname}</div>
<div class="reaction">
<div class="reaction_left">
<span>${cvo.com_reg_date} |</span>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="bi bi-chat" viewBox="0 0 16 16">
<path d="M2.678 11.894a1 1 0 0 1 .287.801 10.97 10.97 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8.06 8.06 0 0 0 8 14c3.996 0 7-2.807 7-6 0-3.192-3.004-6-7-6S1 4.808 1 8c0 1.468.617 2.83 1.678 3.894zm-.493 3.905a21.682 21.682 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a9.68 9.68 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105z"/>
</svg> ${comment_cnt} |
</span>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="12" fill="currentColor" class="bi bi-suit-heart-fill" viewBox="0 0 16 16">
<path d="M4 1c2.21 0 4 1.755 4 3.92C8 2.755 9.79 1 12 1s4 1.755 4 3.92c0 3.263-3.234 4.414-7.608 9.608a.513.513 0 0 1-.784 0C3.234 9.334 0 8.183 0 4.92 0 2.755 1.79 1 4 1z"/>
</svg> ${cvo.com_like_cnt}
</span>
</div>
<div class="reaction_right">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="13" fill="currentColor" class="bi bi-eye-fill" viewBox="0 0 16 16">
<path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/>
<path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/>
</svg>
${cvo.com_cnt}
</div>
</div>
</div><!--class="board_header"-->
<div class="line"></div>
<div class="board_content">
${cvo.com_content}
</div><!--class="board_content"-->
<div class="board_footer">
<!-- 이전글/ 다음글 -->
</div>
<div class="line"></div>
</div><!--class="board"-->
<!-- 해당 댓글 -->
<div class="comment">
<div class="comment_count">
댓글 <span>${comment_cnt}</span>
</div>
<!--작성부분-->
<div class="comment_write">
<textarea placeholder="내용을 입력해 주세요." maxlength="500" wrap="soft" id="com_com_content"></textarea>
<div class="cw_line"></div>
<div>
<span>{ses.nickname}</span>
<button type="submit" id="subBtn">작성하기</button>
</div>
</div>
<div class="comment_list" id="comment_list">
<!--댓글리스트 출력부분-->
</div>
</div><!--class="comment"-->
</div><!--class="main"-->
<div class="up">
<a href="#top" id="end">
<span class="material-symbols-outlined">
arrow_upward
</span>
</a>
</div>
</div><!--class="right"-->
</div>
<script type="text/javascript" src="/resources/js/com_comment.js"></script>
<script type="text/javascript">
const com_num = '<c:out value="${cvo.com_num}" />';
getCommentList(com_num)
</script>
</body>
</html>
'Spring > Spring 공부' 카테고리의 다른 글
| [BEWITHME/SPRING] 댓글 기능 - 수정/삭제 (0) | 2023.07.18 |
|---|---|
| [BEWITHME/SPRING] 댓글 기능 - 작성 (저장) (0) | 2023.07.18 |
| [mapper] parameterType=""을 2개 넣는 방법 (0) | 2023.07.13 |
| [spring] security 2. Board list 게시판 리스트 (2) | 2023.06.23 |
| [spring] security 2. Board register 게시판 작성 + 저장 (0) | 2023.06.22 |