Compare commits

...

4 Commits

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

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

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