Compare commits

..

4 Commits

  1. 92
      src/main/webapp/WEB-INF/view/jh/board/detailView.jsp
  2. 2
      src/main/webapp/web/css/common.css

92
src/main/webapp/WEB-INF/view/jh/board/detailView.jsp

@ -68,30 +68,25 @@
<div class="comment-view" id="test3"> <div class="comment-view" id="test3">
<span class="user"><span class="id">익명3</span><span <span class="user"><span class="id">익명3</span><span
class="date">05.02 13:00</span></span> <span class="text" id="text">여기는 댓글 class="date">05.02 13:00</span><span>답글</span></span> <span class="text" id="text">여기는 댓글
정보3333!</span> 정보3333!</span>
<!-- ** --> <!-- ** -->
<!-- <div class="reply-box"> --> <div class="reply-box">
<!-- <button type="button">답글</button> --> <!-- <button type="button">답글</button> -->
<!-- <div class="reply-input"> --> <!-- <div class="reply-input"> -->
<!-- <textarea placeholder="댓글을 입력해주세요"></textarea> --> <!-- <textarea placeholder="댓글을 입력해주세요"></textarea> -->
<!-- <button type="button">등록</button> --> <!-- <button type="button">등록</button> -->
<!-- </div> --> <!-- </div> -->
<!-- <div class="reply-view"> --> <div class="reply-view">
<!-- <span class="user"><span class="id">익명4</span><span --> <span class="user"><span class="id">익명6</span><span
<!-- class="date">05.02 13:00</span></span> <span class="text">여기는 댓글의 --> class="date">05.02 13:00</span></span> <span class="text">여기는 댓글의
<!-- 댓글(답글)정보!</span> --> 댓글(답글)정보!3333</span>
<!-- </div> --> </div>
<!-- <div class="reply-view"> --> <div class="reply-view">
<!-- <span class="user"><span class="id">익명5</span><span --> <span class="user"><span class="id">익명6</span><span
<!-- class="date">05.02 13:00</span></span> <span class="text">여기는 댓글의 --> class="date">05.02 13:00</span></span> <span class="text">여기는 댓글의
<!-- 댓글(답글)정보!2222</span> --> 댓글(답글)정보!3333</span>
<!-- </div> --> </div>
<!-- <div class="reply-view"> -->
<!-- <span class="user"><span class="id">익명6</span><span -->
<!-- class="date">05.02 13:00</span></span> <span class="text">여기는 댓글의 -->
<!-- 댓글(답글)정보!3333</span> -->
<!-- </div> -->
<!-- </div> --> <!-- </div> -->
<!-- ** --> <!-- ** -->
</div> </div>
@ -200,44 +195,63 @@
if(item.targetId==0) { if(item.targetId==0) {
var comment = var comment =
"<div class='comment-view' id='user" + (i+1) + "'>" + "<div class='comment-view' id='user" + (i+1) + "'>" +
"<span class='user'>" + "<span class='user'>" +
"<span class='id'>" + item.regUser + "</span>" + "<span class='id'>" + item.regUser + "</span>" +
"<span class='date'>" + item.regDate + "</span>" + "<span class='date'>" + item.regDate + "</span>" +
"<span>답글</span>" +
"</span>" + "</span>" +
"<span class='text' id='text'>" + item.content + "</span>" + "<span class='text' id='text'>" + item.content + "</span>" +
"</div>"
$.each(item.targetReplys, function(idx, it) {
var reply =
"<div class='reply-box'>" +
/* 답글 눌렀을 때 뜨는 것 */
"<div class='reply-view'>" +
"<span class='user'>" +
"<span class='id'>" + it.regUser + "</span>" +
"<span class='date'>" + it.regDate + "</span"> +
"<span>답글</span>" +
"</span>" +
"<span class='text'>" + it.content + "</span>" +
"</div>" +
"</div>" "</div>"
})
console.log(comment) console.log(comment)
// commentBox += comment; // commentBox += comment;
} }
$(".comment-input").after(comment); $(".comment-input").after(comment);
console.log("자식댓글") // console.log("자식댓글")
var replyBox = "" // var replyBox = ""
$.each(item.targetReplys, function(j, it) { // $.each(item.targetReplys, function(j, it) {
/* 자식이 있을경우에만 살이 붙음 */ // /* 자식이 있을경우에만 살이 붙음 */
console.log(it) // console.log(it)
// var boxbox = $('#' + it.targetId); // // var boxbox = $('#' + it.targetId);
let rb = $("<div/>"); //class reply-box라고 줘야함... 어케주지...... // let rb = $("<div/>"); //class reply-box라고 줘야함... 어케주지......
// $('#test3').append(rb) // // $('#test3').append(rb)
var targetId = it.targetId; // var targetId = it.targetId;
$('#user' + (it.targetId)).append(rb) // $('#user' + (it.targetId)).append(rb)
var reply = // var reply =
// "<div class='reply-box'>" + // // "<div class='reply-box'>" +
"<div class='reply-view'>" + // "<div class='reply-view'>" +
"<span class='user'>" + // "<span class='user'>" +
"<span class='id'>" + it.regUser + "</span>" + // "<span class='id'>" + it.regUser + "</span>" +
"<span class='date'>" + it.regDate + "</span>" + // "<span class='date'>" + it.regDate + "</span>" +
"</span>" + // "<span>답글</span>" +
"<span class='text'>" + it.content + "</span>" + // "</span>" +
"</div>" // "<span class='text'>" + it.content + "</span>" +
// "</div>" // "</div>"
rb.append(reply); // // "</div>"
replyBox += reply; // rb.append(reply);
}) // replyBox += reply;
// })
}) })

2
src/main/webapp/web/css/common.css

@ -59,3 +59,5 @@ button:hover{cursor:pointer;}
.reply-input button{width:120px;height:42px;background:#333;color:#fff;font-weight:500;border-radius:4px;} .reply-input button{width:120px;height:42px;background:#333;color:#fff;font-weight:500;border-radius:4px;}
.reply-view{background:#f4f4f4;padding:14px;border-radius:4px;margin:14px 10px 0 10px;} .reply-view{background:#f4f4f4;padding:14px;border-radius:4px;margin:14px 10px 0 10px;}
.reply-view .user{margin:0 0 10px 0;} .reply-view .user{margin:0 0 10px 0;}
.reply-view-reply{border-top:1px solid #ddd; background:#f4f4f4;padding:14px;border-radius:4px;margin:14px 10px 0 10px;}
Loading…
Cancel
Save