[스프링 프로젝트] 마이페이지 - 내 게시글 보기 view

이전 글)

 

 

---

마이페이지에서는 내가 쓴 게시글과 댓글을 확인할 수 있다.

페이지 구성은 이렇게 되어 있다.

 

 

게시글의 경우, 한번에 10개의 게시글을 볼 수 있게 설정해 두었고, 게시글이 10개가 넘어가면 페이지가 나타난다.

페이지는 5개까지 보이고,  5개의 페이지가 넘어가면 '[다음]' 버튼을 눌러 페이지를 이동할 수 있다.

일반 게시판과 마찬가지로 제목을 누를 경우 해당 게시글로 이동한다(조회수는 올라가지 않는다).

수정 · 삭제 버튼을 통해 게시글을 직접 수정 · 삭제할 수 있다.

글쓰기 버튼을 통해 게시글을 쓸 수 있고, 게시글 작성이 완료되면 마이페이지로 돌아온다.

전체 삭제 버튼을 통해 본인이 작성한 전체 게시글을 삭제할 수 있다.

 

댓글의 경우, 한번에 5개의 댓글을 볼 수 있게 설정해 두었고, 댓글이 5개가 넘어가면 페이지가 나타난다.

페이지는 5개까지 보이고,  5개의 페이지가 넘어가면 '[다음]' 버튼을 눌러 페이지를 이동할 수 있다.

게시글 상세보기 기능은 구현하지 않았고 개별 삭제와 전체 삭제만 구현했다.

 

 

내 게시글)

<div class="banana">
	<div class="profile">
		<div class="profile_pic">
			<img src="${path}/resources/img/profile_pic.png" alt="프로필">
		</div>
		<div class="profile_intro">
			<span style="font-size: 25px; margin-bottom: 10px;">${loginUser.usernick}님</span>
			<span style="font-size: 15px;">자유게시판 게시글 수: ${page.count}개 / 댓글 수: ${replypage.count}개</span>
		</div>
	</div>
	<div class="boardcontents">
		<div id="contents">
			<ul class="tabs">
				<li class="tab-link current" data-tab="tab-1">내가 쓴 글</li>
				<li class="tab-link" data-tab="tab-2" onclick="location.href='${path}/profile/my_free_reply?num=1'">내가 쓴 댓글</li>
			</ul>
			<div id="tab-1" class="tab-content current" style="height: 525px;">
				<form name="form1" method="post" id="form1">
					<input type="hidden" name="b_writer" value="${loginUser.userid}">
					<input type="hidden" name="num" value="${select}">
					<ul class="ul_news_title">
						<table>
							<tr>
								<td class="boardnum">번호</td>
								<td class="title">제목</td>
								<td class="writer_id">작성자</td>
								<td class="date">작성일자</td>
								<td class="view">조회수</td>
								<td class="etc">&nbsp;</td>
							</tr>
						</table>
					</ul>
				</form>
				<c:forEach items="${list}" var="freelist">
					<ul class="ul_news">
						<table>
							<tr>
								<td class="boardnum">${freelist.b_num}</td>
								<td class="title"><a href="/profile/my_free_detail?b_num=${freelist.b_num}&reply_num=1"><span>${freelist.b_title}</span></a></td>
								<td class="writer_id">${freelist.b_writer}</td>
								<td class="date"><fmt:formatDate value="${freelist.b_date}" pattern="yyyy-MM-dd" /></td>
								<td class="view">${freelist.view_cnt}</td>
								<td class="etc">
									<div class="modify_div">
										<form method="get" style="width: 50px;" action="${path}/profile/my_free_modify">
											<div id="write_notice">
												<input type="hidden" name="b_num" value="${freelist.b_num}">
												<input type="hidden" name="num" value="${select}">
												<input type="submit" class="modify_btn" value="수정">
											</div>
										</form>
									</div>
									<div class="delete_div">
										<form method="post" style="width: 70px;" action="${path}/profile/my_free_delete">
											<div id="write_notice">
												<input type="hidden" name="b_num" value="${freelist.b_num}">
												<input type="hidden" name="num" value="${select}">
												<input type="submit" class="delete_btn" value="삭제" onclick="return delete_check();">
											</div>
										</form>
									</div>
								</td>
							</tr>
						</table>
					</ul>
				</c:forEach>
				<div class="deleteandwrite_btn">
					<form method="get" class="free_write" action="${path}/profile/my_free_write">
						<div id="write_notice">
							<input type="hidden" name="b_writer" value="${loginUser.userid}">
							<input type="hidden" name="num" value="${select}">
							<input type="submit" class="modify_btn" value="글쓰기">
						</div>
					</form>
					<form method="post" class="free_delete" action="${path}/profile/my_free_delete_all">
						<div id="write_notice">
							<input type="hidden" name="b_writer" value="${loginUser.userid}">
							<input type="hidden" name="num" value="${select}">
							<input type="submit" class="delete_btn" value="전체 삭제" onclick="return delete_check();">
						</div>
					</form>
				</div>
				<div class="btns">
					<ul class="pagination">
						<c:if test="${page.prev}">
							<li>
								[<a href='${path}/profile/my_free?num=${page.startPageNum-1}'>이전</a>]
							</li>
						</c:if>
						<c:forEach begin="${page.startPageNum}" end="${page.endPageNum}" var="num">
							<li>
								<c:if test="${select != num}">
									<a href="${path}/profile/my_free?num=${num}">${num}</a>
								</c:if>
								<c:if test="${select == num}">
									<b style="font-weight: 700; color: red; text-decoration: underline;">${num}</b>
								</c:if>
							</li>
						</c:forEach>
						<c:if test="${page.next}">
							<li>
								[<a href="${path}/profile/my_free?num=${page.endPageNum+1}">다음</a>]
							</li>
						</c:if>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>

 

 

내 댓글)

 

<div class="banana">
	<div class="profile">
		<div class="profile_pic">
			<img src="${path}/resources/img/profile_pic.png" alt="프로필">
		</div>
		<div class="profile_intro">
			<span style="font-size: 25px; margin-bottom: 10px;">${loginUser.usernick}님</span>
			<span style="font-size: 15px;">자유게시판 게시글 수: ${page.count}개 / 댓글 수: ${replypage.count}개</span>
		</div>
	</div>
	<div class="boardcontents">
		<div id="contents">
			<ul class="tabs">
				<li class="tab-link" data-tab="tab-1" onclick="location.href='${path}/profile/my_free?num=1'">내가 쓴 글</li>
				<li class="tab-link current" data-tab="tab-2">내가 쓴 댓글</li>
			</ul>
			<div id="tab-2" class="tab-content current" style="height: 615px;">
				<form name="form1" method="post" id="form1">
					<input type="hidden" name="table_name" value="notice_list">
					<ul class="ul_news_title" style="display: block;">
						<div class=reply>
							<span class="reply" style="margin: 0 auto;">댓글</span>
						</div>
					</ul>
				</form>
				<c:forEach items="${replylist}" var="free_reply">
					<ul class="ul_news" style="text-align: left; height: 100px;">
						<div class="reply_contents">
							<span>${free_reply.c_contents}</span>
							<span class="date" style="font-size: 10px; color: gray;">
								<fmt:formatDate value="${free_reply.c_date}" pattern="yyyy.MM.dd HH:mm:ss" />
							</span>
							<span class="view" style="font-size: 12px;">${free_reply.b_title}</span>
						</div>
						<form method="post" action="${path}/profile/my_free_reply_delete" name="reply_delete_form">
							<div id="write_notice">
								<input type="hidden" name="c_num" value="${free_reply.c_num}">
								<input type="hidden" name="num" value="${replyselect}">
								<input type="submit" class="delete_btn" value="삭제" onclick="return delete_check();">
							</div>
						</form>
					</ul>
				</c:forEach>
				<form method="post" class="deleteall_btn" action="${path}/profile/my_free_reply_delete_all">
					<div class="deleteandwrite_btn">
						<div id="write_notice">
							<input type="hidden" name="c_writer" value="${loginUser.userid}">
							<input type="hidden" name="num" value="${replyselect}">
							<input type="submit" class="delete_btn" value="전체 삭제" onclick="return delete_check();">
						</div>
					</div>
				</form>
				<div class="btns">
					<ul class="pagination">
						<c:if test="${replypage.prev}">
							<li>
								[<a href='${path}/profile/my_free_reply?num=${replypage.startPageNum-1}'>이전</a>]
							</li>
						</c:if>
						<c:forEach begin="${replypage.startPageNum}" end="${replypage.endPageNum}" var="reply_num">
							<li>
								<c:if test="${replyselect != reply_num}">
									<a href="${path}/profile/my_free_reply?num=${reply_num}">${reply_num}</a>
								</c:if>
								<c:if test="${replyselect == reply_num}">
									<b style="font-weight: 700; color: red; text-decoration: underline;">${reply_num}</b>
								</c:if>
							</li>
						</c:forEach>
						<c:if test="${replypage.next}">
							<li>
								[<a href="${path}/profile/my_free_reply?num=${replypage.endPageNum+1}">다음</a>]
							</li>
						</c:if>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>

 

 

게시글 및 댓글 삭제 부분에 있는 delete_check() 함수는 삭제할지 여부를 재차 확인하는 함수이다.

 

function delete_check() {
	if (confirm("정말로 삭제하시겠습니까?")) {
		return true;
	} else {
		return false;
	}
}

 

이렇게 간단하게만 구성되어 있다.

 

---

다음 글)