-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
ca39627
commit f5e6b2f
Showing
2 changed files
with
170 additions
and
170 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
334 changes: 167 additions & 167 deletions
334
...main/resources/templates/test/mypage.html → src/main/resources/templates/mypage.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,168 +1,168 @@ | ||
<!DOCTYPE html> | ||
<html xmlns="http://www.w3.org/1999/xhtml" | ||
xmlns:th="http://www.thymeleaf.org" | ||
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" | ||
layout:decorate="~{layout/layout}"> | ||
|
||
<th:block layout:fragment="head"> | ||
<title>마이 페이지</title> | ||
<link th:href="@{/css/mypage.css}" rel="stylesheet"/> | ||
</th:block> | ||
|
||
<div th:replace="~{/fragments/header}"></div> | ||
<main th:fragment="content"> | ||
<div class="wrap"> | ||
<h1>마이 페이지</h1> | ||
<section class="user-info-section"> | ||
<p th:text="'이메일 : '+${user.email}"></p> | ||
<p th:text="'닉네임 : '+${user.nickname}"></p> | ||
<div class="btn-div"> | ||
<button class="ui-button" th:onclick="|location.href='@{/mypage/update/{userId}(userId=${user.id})}'|">정보 수정</button> | ||
<!-- 계정 삭제 처리 --> | ||
<form id="delete-form" th:action="@{/mypage/{userId}(userId=${user.id})}" method="post"> | ||
<input type="hidden" name="_method" value="delete" /> | ||
<button type="submit">계정 삭제</button> | ||
</form> | ||
<button class="ui-button" th:if="${user.role eq 'admin'}" th:onclick="|location.href='/mypage/admin'|">관리자 페이지</button> | ||
</div> | ||
</section> | ||
<section class="board-table-section"> | ||
<h3 class="table-title">내가 작성한 게시글</h3> | ||
<ul class="board-table-header"> | ||
<li class="no">번호</li> | ||
<li class="title">제목</li> | ||
<li class="create-time">생성 일시</li> | ||
</ul> | ||
<ul class="board-table-body"> | ||
<li th:each="board : ${boardPage.content}"> | ||
<p class="no" th:text="${board.id}"></p> | ||
<a class="title" th:href="@{/boards/{id}(id=${board.id}, team=${board.team})}" th:text="${board.title}"></a> | ||
<p class="create-time" th:text="${#dates.format(board.createdAt, 'yyyy-MM-dd HH:mm')}"></p> | ||
</li> | ||
</ul> | ||
<div th:if="${boardPage.totalPages > 0}"> | ||
<ul class="pagination"> | ||
<!-- 이전 페이지 버튼 --> | ||
<li class="page-item" th:classappend="${boardPage.hasPrevious()} ? '' : 'disabled'"> | ||
<a class="page-link" th:href="@{/mypage(boardPage=${boardPage.number > 0 ? boardPage.number : 1}, commentPage=${commentPage.number+1})}" th:disabled="${boardPage.number == 0}"> | ||
<span>이전</span> | ||
</a> | ||
</li> | ||
<!-- 페이지 번호 표시 --> | ||
<li th:each="page : ${#numbers.sequence(1, boardPage.totalPages)}" | ||
th:classappend="${boardPage.number + 2 == page} ? 'active' : ''"> | ||
<form th:action="@{/mypage}" method="get"> | ||
<input type="hidden" name="boardPage" th:value="${page}" /> | ||
<input type="hidden" name="commentPage" th:value="${commentPage.number+1}" /> | ||
<button type="submit" class="page-link" th:text="${page}"></button> | ||
</form> | ||
</li> | ||
<!-- 다음 페이지 버튼 --> | ||
<li class="page-item" th:classappend="${boardPage.hasNext()} ? '' : 'disabled'"> | ||
<a class="page-link" th:href="@{/mypage(boardPage=${boardPage.totalPages < boardPage.number + 2 ? boardPage.number + 1 : boardPage.number + 2}, commentPage=${commentPage.number+1})}" th:disabled="${!boardPage.hasNext()}"> | ||
<span>다음</span> | ||
</a> | ||
</li> | ||
</ul> | ||
</div> | ||
</section> | ||
<section class="comment-table-section"> | ||
<h3 class="table-title">내가 작성한 댓글</h3> | ||
<ul class="comment-table-header"> | ||
<li class="no">번호</li> | ||
<li class="comment">내용</li> | ||
<li class="move">게시글</li> | ||
<li class="create-time">생성 일시</li> | ||
</ul> | ||
<ul class="comment-table-body"> | ||
<li th:each="comment, commentIndex : ${commentPage.content}"> | ||
<p class="no" th:text="${commentIndex.index + 1}"></p> | ||
<p class="comment" th:text="${comment.content}"></p> | ||
<a class="move" th:href="@{/boards/{boardId}(boardId=${comment.board.id})}">게시글로 이동</a> | ||
<p class="create-time" th:text="${#dates.format(comment.createdAt, 'yyyy-MM-dd HH:mm')}"></p> | ||
</li> | ||
</ul> | ||
<div th:if="${commentPage.totalPages > 0}"> | ||
<ul class="pagination"> | ||
<!-- 이전 페이지 버튼 --> | ||
<li class="page-item" th:classappend="${commentPage.hasPrevious() ? '' : 'disabled'}"> | ||
<a class="page-link" th:href="@{/mypage(boardPage=${boardPage.number+1}, commentPage=${commentPage.number > 0 ? commentPage.number: 1})}"> | ||
<span>이전</span> | ||
</a> | ||
</li> | ||
|
||
<!-- 페이지 번호 표시 --> | ||
<li th:each="page : ${#numbers.sequence(1, commentPage.totalPages)}" | ||
th:classappend="${commentPage.number + 2 == page ? 'active' : ''}"> | ||
<form th:action="@{/mypage}" method="get"> | ||
<input type="hidden" name="boardPage" th:value="${boardPage.number+1}" /> | ||
<input type="hidden" name="commentPage" th:value="${page}" /> | ||
<button type="submit" class="page-link" th:text="${page}"></button> | ||
</form> | ||
</li> | ||
|
||
<!-- 다음 페이지 버튼 --> | ||
<li class="page-item" th:classappend="${commentPage.hasNext() ? '' : 'disabled'}"> | ||
<a class="page-link" th:href="@{/mypage(boardPage=${boardPage.number+1}, commentPage=${commentPage.totalPages > commentPage.number + 2 ? commentPage.number + 2 : commentPage.totalPages})}"> | ||
<span>다음</span> | ||
</a> | ||
</li> | ||
</ul> | ||
</div> | ||
</section> | ||
</div> | ||
</main> | ||
<div th:replace="~{/fragments/footer}"></div> | ||
<script> | ||
document.getElementById("delete-form").addEventListener("submit", async function(event) { | ||
event.preventDefault(); // 폼 제출을 일단 방지 | ||
|
||
// 비밀번호 입력을 받는 프롬프트 대화상자 표시 | ||
var deletePassword = prompt("계정 삭제를 위해 비밀번호를 입력하세요:"); | ||
|
||
if (deletePassword === null || deletePassword === "") { | ||
alert("비밀번호를 입력해야 계정 삭제를 진행할 수 있습니다."); | ||
return; // 입력이 없는 경우 함수 종료 | ||
} | ||
|
||
// 입력된 비밀번호와 현재 로그인된 사용자의 비밀번호 비교 | ||
async function checkDeletePassword() { | ||
try { | ||
const response = await fetch("/checkCurrentPassword", { | ||
method: "POST", | ||
headers: { | ||
"Content-Type": "application/x-www-form-urlencoded", | ||
}, | ||
body: `currentPassword=${encodeURIComponent(deletePassword)}` | ||
}); | ||
const data = await response.json(); | ||
if (!data.available) { | ||
alert("비밀번호가 일치하지 않습니다. 계정 삭제를 진행할 수 없습니다."); | ||
return false; // 비밀번호가 일치하지 않으므로 false 반환 | ||
} else { | ||
return true; // 비밀번호가 일치하므로 true 반환 | ||
} | ||
} catch (error) { | ||
console.error('비밀번호 확인 중 오류 발생:', error); | ||
return false; // 오류가 발생했으므로 false 반환 | ||
} | ||
} | ||
|
||
// 비밀번호 확인 함수 호출 | ||
const isPasswordCorrect = await checkDeletePassword(); | ||
if (!isPasswordCorrect) { | ||
return; // 비밀번호가 일치하지 않으면 함수 종료 | ||
} | ||
|
||
// 비밀번호가 확인되면 계정 삭제 수행 | ||
if (confirm("정말로 계정을 삭제하시겠습니까? 계정을 삭제하면 모든 정보가 영구적으로 삭제됩니다.")) { | ||
|
||
alert("계정이 성공적으로 삭제되었습니다."); | ||
event.target.submit(); | ||
|
||
} else { | ||
alert("계정 삭제가 취소되었습니다."); | ||
} | ||
|
||
}); | ||
<!DOCTYPE html> | ||
<html xmlns="http://www.w3.org/1999/xhtml" | ||
xmlns:th="http://www.thymeleaf.org" | ||
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" | ||
layout:decorate="~{layout/layout}"> | ||
|
||
<th:block layout:fragment="head"> | ||
<title>마이 페이지</title> | ||
<link th:href="@{/css/mypage.css}" rel="stylesheet"/> | ||
</th:block> | ||
|
||
<div th:replace="~{fragments/header.html}"></div> | ||
<main th:fragment="content"> | ||
<div class="wrap"> | ||
<h1>마이 페이지</h1> | ||
<section class="user-info-section"> | ||
<p th:text="'이메일 : '+${user.email}"></p> | ||
<p th:text="'닉네임 : '+${user.nickname}"></p> | ||
<div class="btn-div"> | ||
<button class="ui-button" th:onclick="|location.href='@{/mypage/update/{userId}(userId=${user.id})}'|">정보 수정</button> | ||
<!-- 계정 삭제 처리 --> | ||
<form id="delete-form" th:action="@{/mypage/{userId}(userId=${user.id})}" method="post"> | ||
<input type="hidden" name="_method" value="delete" /> | ||
<button type="submit">계정 삭제</button> | ||
</form> | ||
<button class="ui-button" th:if="${user.role eq 'admin'}" th:onclick="|location.href='/mypage/admin'|">관리자 페이지</button> | ||
</div> | ||
</section> | ||
<section class="board-table-section"> | ||
<h3 class="table-title">내가 작성한 게시글</h3> | ||
<ul class="board-table-header"> | ||
<li class="no">번호</li> | ||
<li class="title">제목</li> | ||
<li class="create-time">생성 일시</li> | ||
</ul> | ||
<ul class="board-table-body"> | ||
<li th:each="board : ${boardPage.content}"> | ||
<p class="no" th:text="${board.id}"></p> | ||
<a class="title" th:href="@{/boards/{id}(id=${board.id}, team=${board.team})}" th:text="${board.title}"></a> | ||
<p class="create-time" th:text="${#dates.format(board.createdAt, 'yyyy-MM-dd HH:mm')}"></p> | ||
</li> | ||
</ul> | ||
<div th:if="${boardPage.totalPages > 0}"> | ||
<ul class="pagination"> | ||
<!-- 이전 페이지 버튼 --> | ||
<li class="page-item" th:classappend="${boardPage.hasPrevious()} ? '' : 'disabled'"> | ||
<a class="page-link" th:href="@{/mypage(boardPage=${boardPage.number > 0 ? boardPage.number : 1}, commentPage=${commentPage.number+1})}" th:disabled="${boardPage.number == 0}"> | ||
<span>이전</span> | ||
</a> | ||
</li> | ||
<!-- 페이지 번호 표시 --> | ||
<li th:each="page : ${#numbers.sequence(1, boardPage.totalPages)}" | ||
th:classappend="${boardPage.number + 2 == page} ? 'active' : ''"> | ||
<form th:action="@{/mypage}" method="get"> | ||
<input type="hidden" name="boardPage" th:value="${page}" /> | ||
<input type="hidden" name="commentPage" th:value="${commentPage.number+1}" /> | ||
<button type="submit" class="page-link" th:text="${page}"></button> | ||
</form> | ||
</li> | ||
<!-- 다음 페이지 버튼 --> | ||
<li class="page-item" th:classappend="${boardPage.hasNext()} ? '' : 'disabled'"> | ||
<a class="page-link" th:href="@{/mypage(boardPage=${boardPage.totalPages < boardPage.number + 2 ? boardPage.number + 1 : boardPage.number + 2}, commentPage=${commentPage.number+1})}" th:disabled="${!boardPage.hasNext()}"> | ||
<span>다음</span> | ||
</a> | ||
</li> | ||
</ul> | ||
</div> | ||
</section> | ||
<section class="comment-table-section"> | ||
<h3 class="table-title">내가 작성한 댓글</h3> | ||
<ul class="comment-table-header"> | ||
<li class="no">번호</li> | ||
<li class="comment">내용</li> | ||
<li class="move">게시글</li> | ||
<li class="create-time">생성 일시</li> | ||
</ul> | ||
<ul class="comment-table-body"> | ||
<li th:each="comment, commentIndex : ${commentPage.content}"> | ||
<p class="no" th:text="${commentIndex.index + 1}"></p> | ||
<p class="comment" th:text="${comment.content}"></p> | ||
<a class="move" th:href="@{/boards/{boardId}(boardId=${comment.board.id})}">게시글로 이동</a> | ||
<p class="create-time" th:text="${#dates.format(comment.createdAt, 'yyyy-MM-dd HH:mm')}"></p> | ||
</li> | ||
</ul> | ||
<div th:if="${commentPage.totalPages > 0}"> | ||
<ul class="pagination"> | ||
<!-- 이전 페이지 버튼 --> | ||
<li class="page-item" th:classappend="${commentPage.hasPrevious() ? '' : 'disabled'}"> | ||
<a class="page-link" th:href="@{/mypage(boardPage=${boardPage.number+1}, commentPage=${commentPage.number > 0 ? commentPage.number: 1})}"> | ||
<span>이전</span> | ||
</a> | ||
</li> | ||
|
||
<!-- 페이지 번호 표시 --> | ||
<li th:each="page : ${#numbers.sequence(1, commentPage.totalPages)}" | ||
th:classappend="${commentPage.number + 2 == page ? 'active' : ''}"> | ||
<form th:action="@{/mypage}" method="get"> | ||
<input type="hidden" name="boardPage" th:value="${boardPage.number+1}" /> | ||
<input type="hidden" name="commentPage" th:value="${page}" /> | ||
<button type="submit" class="page-link" th:text="${page}"></button> | ||
</form> | ||
</li> | ||
|
||
<!-- 다음 페이지 버튼 --> | ||
<li class="page-item" th:classappend="${commentPage.hasNext() ? '' : 'disabled'}"> | ||
<a class="page-link" th:href="@{/mypage(boardPage=${boardPage.number+1}, commentPage=${commentPage.totalPages > commentPage.number + 2 ? commentPage.number + 2 : commentPage.totalPages})}"> | ||
<span>다음</span> | ||
</a> | ||
</li> | ||
</ul> | ||
</div> | ||
</section> | ||
</div> | ||
</main> | ||
<div th:replace="~{fragments/footer.html}"></div> | ||
<script> | ||
document.getElementById("delete-form").addEventListener("submit", async function(event) { | ||
event.preventDefault(); // 폼 제출을 일단 방지 | ||
|
||
// 비밀번호 입력을 받는 프롬프트 대화상자 표시 | ||
var deletePassword = prompt("계정 삭제를 위해 비밀번호를 입력하세요:"); | ||
|
||
if (deletePassword === null || deletePassword === "") { | ||
alert("비밀번호를 입력해야 계정 삭제를 진행할 수 있습니다."); | ||
return; // 입력이 없는 경우 함수 종료 | ||
} | ||
|
||
// 입력된 비밀번호와 현재 로그인된 사용자의 비밀번호 비교 | ||
async function checkDeletePassword() { | ||
try { | ||
const response = await fetch("/checkCurrentPassword", { | ||
method: "POST", | ||
headers: { | ||
"Content-Type": "application/x-www-form-urlencoded", | ||
}, | ||
body: `currentPassword=${encodeURIComponent(deletePassword)}` | ||
}); | ||
const data = await response.json(); | ||
if (!data.available) { | ||
alert("비밀번호가 일치하지 않습니다. 계정 삭제를 진행할 수 없습니다."); | ||
return false; // 비밀번호가 일치하지 않으므로 false 반환 | ||
} else { | ||
return true; // 비밀번호가 일치하므로 true 반환 | ||
} | ||
} catch (error) { | ||
console.error('비밀번호 확인 중 오류 발생:', error); | ||
return false; // 오류가 발생했으므로 false 반환 | ||
} | ||
} | ||
|
||
// 비밀번호 확인 함수 호출 | ||
const isPasswordCorrect = await checkDeletePassword(); | ||
if (!isPasswordCorrect) { | ||
return; // 비밀번호가 일치하지 않으면 함수 종료 | ||
} | ||
|
||
// 비밀번호가 확인되면 계정 삭제 수행 | ||
if (confirm("정말로 계정을 삭제하시겠습니까? 계정을 삭제하면 모든 정보가 영구적으로 삭제됩니다.")) { | ||
|
||
alert("계정이 성공적으로 삭제되었습니다."); | ||
event.target.submit(); | ||
|
||
} else { | ||
alert("계정 삭제가 취소되었습니다."); | ||
} | ||
|
||
}); | ||
</script> |