detailView 변경

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

@@ -71,27 +71,27 @@
 					class="date">05.02 13:00</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 class="reply-view-reply">
+								<span class="user"><span class="id">익명6</span><span
+									class="date">05.02 13:00</span></span> <span class="text">여기는 댓글의
+									댓글(답글)정보!3333</span>
+									<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 +200,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;
+// 					})
 					
 				})
 				

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

@@ -58,4 +58,5 @@ button:hover{cursor:pointer;}
 .reply-input textarea{border:0;resize:none;width:calc(100% - 130px);height:42px;border:1px solid #999;border-radius:4px;padding:10px;}
 .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-reply{background: #ffffff;padding:14px;border-radius:4px;margin:14px 10px 0 10px;}
 .reply-view .user{margin:0 0 10px 0;}