Spring/Spring-eclipse

[BEWITHME/SPRING] 댓글 기능 - 출력

congs 2023. 7. 18. 22:06

 

게시글 하단에 댓글 기능 추가 : 댓글 리스트 출력

 

 

-- 댓글 출력 --

 

1. com_comment.js 작성

-  controller에 게시글 번호를 보내 해당 게시글의 댓글 list 가져오기

  1. jsp에서 저장해놓은 com_num을 controller로 보내서 Com_CommentVO로 생성된 List를 받아오기
  2. 가져온 list를 for문을 이용하여 출력 
    1. 현재 로그인한 아이디(ses.id)와 작성 아이디(ccvo.id)가 동일 : 수정/삭제버튼 추가, 댓글내용 수정 가능 설정
    2. 현재 로그인한 아이디(ses.id)와 작성 아이디(ccvo.id)가 비동일 : 댓글내용 수정 불가능 설정 (readonly=readonly)
    3. 수정한 댓글(ccvo.com_com_isMod가 Y) :  '수정됨'이 뜨도록 설정 = 추후 수정 코드 mapper에서 변경필요
  3. 만약 list가 없다면 '댓글이 없습니다. 첫 번째 댓글을 달아주세요!'가 출력되도록 설정

-  추가 작성

  1. 댓글 저장 js에 코드 추가
    1. 댓글 작성 후 '작성하기' 버튼 클릭
    2. -> 저장완료
    3. -> 리스트 출력되는 코드(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 작성

  1. 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-eclipse' 카테고리의 다른 글

[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

'Spring/Spring-eclipse'의 다른글

  • 현재글[BEWITHME/SPRING] 댓글 기능 - 출력

관련글

티스토리툴바