lun_admin/lunBackServer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

....

Browse Source
This commit is contained in:
lun_admin
2025-09-19 16:32:24 +09:00
parent 5e0db4ff03
commit 4b652c4df5
25 changed files with 1166 additions and 730 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/templates/content/bookmarks.html
+109 -51
View File
@@ -2,9 +2,35 @@
<html
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
layout:decorate="~{layout/default_layout}">
<head>
<title>Bookmarks</title>
<style>
.scrollable-content {
max-height: 500px; /* 콘텐츠 영역의 최대 높이를 지정 */
max-width: 500px;
overflow-y: auto; /* 세로 내용이 넘칠 경우 스크롤바 자동 생성 */
-webkit-overflow-scrolling: touch; /* 모바일에서 부드러운 스크롤 효과 */
}
</style>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const swiper = new Swiper('.bookmark-swiper', {
loop: false,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
});
</script>
</head>
<th:block layout:fragment="content">
<section class="wrapper style2">
@@ -12,71 +38,103 @@
<header class="major">
<h2>Bookmarks</h2>
<p>다른 사용자들이 저장한 유용한 페이지들을 둘러보세요.</p>
<div class="filter-controls" style="margin-bottom: 2em; text-align: center;">
<div style="margin-bottom: 1em;">
<strong>카테고리:</strong>
<a th:href="@{/bookmarks}" th:classappend="${currentCategory == null && currentTag == null} ? 'button small' : 'button alt small'">전체</a>
<a th:each="cat : ${allCategories}"
th:href="@{/bookmarks(category=${cat})}"
th:text="${cat}"
th:classappend="${currentCategory == cat} ? 'button small' : 'button alt small'"></a>
</div>
<div>
<strong>태그:</strong>
<a th:each="tg : ${allTags}"
th:href="@{/bookmarks(tag=${tg})}"
th:text="'#' + ${tg}"
th:classappend="${currentTag == tg} ? 'button small' : 'button alt small'"></a>
</div>
</div>
</header>
</div>
</section>
<section class="wrapper style1">
<div class="container">
<div class="row">
<div class="col-12" th:if="${bookmarksPage.empty}">
<p style="text-align: center;">아직 저장된 페이지가 없습니다.</p>
</div>
<div class="col-4 col-6-medium col-12-small" th:each="bookmark : ${bookmarksPage.content}">
<section class="box feature">
<a href="javascript:void(0);"
th:data-url="${bookmark.url}"
th:data-title="${bookmark.title}"
onclick="showBookmarkOptions(this)" class="image featured">
<img th:src="${bookmark.thumbnailUrl ?: '/images/pic01.jpg'}" alt="Thumbnail" />
</a>
<div class="inner">
<header>
<h3 th:text="${bookmark.title}">북마크 제목</h3>
<p th:if="${bookmark.userComment}" th:text="${bookmark.userComment}" style="font-style: italic; color: #007bff;"></p>
</header>
<p th:text="${#strings.abbreviate(bookmark.description, 100)}"></p>
<div class="swiper bookmark-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide" th:each="bookmark : ${bookmarksPage.content}">
<section class="box feature" style="margin: 0; height: 100%; display: flex; flex-direction: column;">
<div class="bookmark-controls" style="margin-top: 1em; padding-top: 1em; border-top: 1px solid #eee;">
<div class="vote-controls" th:data-bookmark-id="${bookmark.id}" style="text-align: center; margin-bottom: 1em;">
<button class="button small alt" th:onclick="handleBookmarkVote(this, 'like')">
👍 (<span class="like-count" th:text="${bookmark.voteCount}">0</span>)
</button>
<button class="button small alt" th:onclick="handleBookmarkVote(this, 'unlike')" style="margin-left: 0.5em;">
👎 (<span class="unlike-count" th:text="${bookmark.unlikeCount}">0</span>)
</button>
<div th:switch="${bookmark.bookmarkType}">
<div th:case="'IMAGE'" class="image-flick-container scrollable-content">
<img th:each="imageUrl : ${bookmark.contentUrls}" th:src="${apiBaseUrl + imageUrl}" alt="Bookmark Image" />
</div>
<a href="javascript:void(0);" th:onclick="toggleCommentSection('[[${bookmark.id}]]')" class="button small fit">댓글 보기</a>
<div th:id="'comment-section-' + ${bookmark.id}" class="comment-section" style="display: none; margin-top: 1em;">
<div th:id="'comments-list-' + ${bookmark.id}" class="comments-list"></div>
<textarea th:id="'comment-input-' + ${bookmark.id}" placeholder="댓글을 입력하세요..." style="margin-top: 1em;"></textarea>
<button class="button small" th:onclick="submitBookmarkComment('[[${bookmark.id}]]')">등록</button>
<div th:case="'VIDEO'" class="video-container" th:if="${!#lists.isEmpty(bookmark.contentUrls)}">
<video controls style="width: 100%;">
<source th:src="${apiBaseUrl + bookmark.contentUrls[0]}" type="video/mp4">
</video>
</div>
<a th:case="'URL'"
href="javascript:void(0);"
th:data-url="${bookmark.url}"
th:data-title="${bookmark.title}"
onclick="showBookmarkOptions(this)" class="image featured scrollable-content">
<img th:each="imageUrl : ${bookmark.contentUrls}" th:src="${apiBaseUrl + imageUrl}" alt="Bookmark Image" />
</a>
</div>
<footer style="font-size: 0.8em; color: #888; text-align: right; margin-top: 1em;">
by <span th:text="${bookmark.userId}"></span>
</footer>
</div>
</section>
<div class="inner" style="flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between;">
<div>
<header>
<h3 th:text="${bookmark.title}">북마크 제목</h3>
<p th:if="${bookmark.userComment}" th:text="${bookmark.userComment}"></p>
</header>
<p th:text="${#strings.abbreviate(bookmark.description, 100)}"></p>
</div>
<div>
<div class="vote-controls" style="margin-top: 1em; text-align: center;" th:data-bookmark-id="${bookmark.id}">
<button class="button small" onclick="handleBookmarkVote(this, 'like')">
👍 Like (<span class="like-count" th:text="${bookmark.voteCount}">0</span>)
</button>
<button class="button small" onclick="handleBookmarkVote(this, 'unlike')">
👎 Unlike (<span class="unlike-count" th:text="${bookmark.unlikeCount}">0</span>)
</button>
<button class="button alt small" th:onclick="toggleCommentSection([[${bookmark.id}]])">
💬 Comments
</button>
</div>
<section class="comment-section" th:id="|comment-section-${bookmark.id}|" style="display: none; margin-top: 1em; text-align: left;">
<th:block sec:authorize="isAuthenticated()">
<div class="comment-form-container">
<textarea th:id="|comment-input-${bookmark.id}|" placeholder="댓글을 입력하세요..." style="width: 100%;"></textarea>
<button th:onclick="submitBookmarkComment([[${bookmark.id}]])" class="button small" style="margin-top: 0.5em;">등록</button>
</div>
</th:block>
<div sec:authorize="isAnonymous()" style="padding: 1em; text-align: center; border: 1px dashed #ccc; margin-bottom: 1em;">
<p style="margin:0;">댓글을 작성하려면 <a th:href="@{/home.bs(action='login')}">로그인</a>이 필요합니다.</p>
</div>
<div th:id="|comments-list-${bookmark.id}|" style="margin-top: 1em;">
</div>
</section>
</div>
</div>
</section>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<nav th:if="${bookmarksPage.totalPages > 1}" style="text-align: center; margin-top: 2.5em;">
<ul class="pagination">
<li th:classappend="${bookmarksPage.first} ? 'disabled'">
<a th:href="@{/bookmarks(page=${bookmarksPage.number - 1})}" class="button alt small">Prev</a>
</li>
<li th:each="pageNum : ${#numbers.sequence(0, bookmarksPage.totalPages - 1)}">
<a th:href="@{/bookmarks(page=${pageNum})}"
th:text="${pageNum + 1}"
th:class="${pageNum == bookmarksPage.number} ? 'button small' : 'button alt small'"></a>
</li>
<li th:classappend="${bookmarksPage.last} ? 'disabled'">
<a th:href="@{/bookmarks(page=${bookmarksPage.number + 1})}" class="button alt small">Next</a>
</li>
</ul>
</nav>
<div th:if="${bookmarksPage.empty}">
<p style="text-align: center;">아직 저장된 페이지가 없습니다.</p>
</div>
</div>
</section>
</th:block>
src/main/resources/templates/content/error_page.html
+25
View File
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/default_layout}">
<th:block layout:fragment="content">
<section class="wrapper style1">
<div class="container" style="text-align: center; padding: 4em 0;">
<header class="major">
<h2 th:text="|오류가 발생했습니다 (${statusCode})|">오류가 발생했습니다</h2>
<p th:text="${errorMessage}" style="font-size: 1.5em; color: #e85a4f;">오류 메시지</p>
</header>
<div class="box" style="max-width: 600px; margin: 2em auto; text-align: left;">
<p th:text="${errorDescription}">
오류에 대한 상세 설명입니다. 이 페이지는 접근이 금지되었거나, 요청 처리 중 문제가 발생했을 수 있습니다.
</p>
</div>
<a th:href="@{/}" class="button primary">홈으로 돌아가기</a>
</div>
</section>
</th:block>
</html>
src/main/resources/templates/content/user/my_info.html
+145 -6
View File
@@ -155,6 +155,17 @@
<label for="visibility-public" class="custom-label">전체 공개</label>
</div>
</div>
<div class="form-control-wrapper" onclick="openBookmarkCategoryPopup('new-bookmark-category-display', 'new-bookmark-category')">
<strong>카테고리</strong>
<div id="new-bookmark-category-display" class="tag-display-box">카테고리 선택</div>
</div>
<input type="hidden" id="new-bookmark-category">
<div class="form-control-wrapper" onclick="openBookmarkTagPopup('new-bookmark-tags-display', 'new-bookmark-tags')">
<strong>태그</strong>
<div id="new-bookmark-tags-display" class="tag-display-box">태그 선택</div>
</div>
<input type="hidden" id="new-bookmark-tags">
<button id="save-bookmark-btn" class="button primary" style="margin-top: 1em;">저장하기</button>
</div>
</div>
@@ -162,15 +173,26 @@
<div class="box" style="margin-top: 2em;">
<h4>저장된 목록</h4>
<div id="bookmarks-list" class="row">
<div class="col-4 col-12-medium">
<div class="col-12" th:if="${#lists.isEmpty(myBookmarks)}">
<p style="text-align: center; padding: 2em 0;">저장한 페이지가 없습니다.</p>
</div>
<div class="col-4 col-12-medium" th:each="bookmark : ${myBookmarks}" th:id="|bookmark-row-${bookmark.id}|">
<section class="box feature">
<a href="#" class="image featured"><img src="/images/pic01.jpg" alt="" /></a>
<a th:href="${bookmark.url}" target="_blank" class="image featured">
<img th:src="${apiBaseUrl + bookmark.displayImageUrl}" alt="Bookmark Thumbnail" />
</a>
<div class="inner">
<header>
<h2>카드 제목</h2>
<p>사용자 코멘트가 여기에 들어갑니다.</p>
<h2 th:text="${bookmark.title ?: '제목 없음'}">카드 제목</h2>
<p th:if="${!#strings.isEmpty(bookmark.userComment)}" th:text="${bookmark.userComment}">사용자 코멘트</p>
</header>
<p style="font-size: 0.8em; color: #888;">원본 페이지 설명...</p>
<p style="font-size: 0.8em; color: #888;" th:text="${#strings.abbreviate(bookmark.description, 100)}">원본 페이지 설명...</p>
<div class="actions" style="margin-top: 1em; text-align: right;">
<button class="button small" th:onclick="openEditBookmarkModal([[${bookmark.id}]])">수정</button>
<button class="button small alt" th:onclick="deleteBookmark([[${bookmark.id}]])">삭제</button>
</div>
</div>
</section>
</div>
@@ -497,6 +519,8 @@
// [수정] 선택된 공개 범위(visibility) 값을 읽어오는 코드 추가
const visibility = document.querySelector('input[name="visibility"]:checked').value;
const category = document.getElementById('new-bookmark-category').value;
const tags = document.getElementById('new-bookmark-tags').value;
const bookmarkData = {
url: urlInput.value.trim(),
@@ -506,7 +530,9 @@
thumbnailUrl: ogData.thumbnailUrl,
userComment: comment,
// [수정] bookmarkData 객체에 visibility 프로퍼티 추가
visibility: visibility
visibility: visibility,
category: category,
tags: tags
};
if (!bookmarkData.url) {
@@ -532,6 +558,119 @@
}
});
});
/**
* [수정] 북마크 수정 팝업을 열고 데이터를 채우는 함수
*/
async function openEditBookmarkModal(bookmarkId) {
try {
// /api/** 경로는 JWT 인증 헤더(Authorization)가 필요합니다.
// 이는 전역 fetch 인터셉터 등에서 처리된다고 가정합니다.
const response = await fetch(`/api/bookmarks/${bookmarkId}`,{
headers: {
'Authorization': `Bearer ${serverData.token}` // 헤더에 토큰 추가
},
});
if (!response.ok) {
throw new Error(`서버 응답: ${response.status}`);
}
const bookmark = await response.json();
// 이 부분은 모달 요소가 없어서 실패했었습니다.
// 이제 default_layout.html에 요소가 추가되었습니다.
document.getElementById('edit-bookmark-id').value = bookmark.id;
document.getElementById('edit-bookmark-title').value = bookmark.title || '';
document.getElementById('edit-bookmark-comment').value = bookmark.userComment || '';
document.getElementById('edit-bookmark-visibility').value = bookmark.visibility || 'PRIVATE';
document.getElementById('edit-bookmark-category-display').innerHTML = bookmark.category ? `<span class="tag-item">${bookmark.category}</span>` : '카테고리 선택';
document.getElementById('edit-bookmark-category').value = bookmark.category || '';
document.getElementById('edit-bookmark-tags-display').innerHTML = (bookmark.tags || []).map(t => `<span class="tag-item">#${t}</span>`).join(' ') || '태그 선택';
document.getElementById('edit-bookmark-tags').value = (bookmark.tags || []).join(',');
// 공통 openPopup 함수 사용
const dummyEl = document.createElement('div');
dummyEl.setAttribute('to', '#bookmark-edit-popup');
openPopup(dummyEl);
} catch(error) {
console.error("수정 모달 열기 실패:", error);
showAlert('오류', '북마크 정보를 불러오는 데 실패했습니다. 로그인 상태를 확인해주세요.', 'error');
}
}
/**
* [수정] 북마크 수정 내용을 서버에 제출하는 함수
*/
async function submitBookmarkUpdate() {
const bookmarkId = document.getElementById('edit-bookmark-id').value;
const tagsValue = document.getElementById('edit-bookmark-tags').value;
const updatedData = {
title: document.getElementById('edit-bookmark-title').value,
userComment: document.getElementById('edit-bookmark-comment').value,
visibility: document.getElementById('edit-bookmark-visibility').value,
category: document.getElementById('edit-bookmark-category').value,
tags: tagsValue ? tagsValue.split(',').map(t => t.trim()).filter(t => t) : []
};
try {
const response = await fetch(`/api/bookmarks/${bookmarkId}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${serverData.token}` // 헤더에 토큰 추가
},
body: JSON.stringify(updatedData)
});
if (response.ok) {
showAlert('성공', '북마크 정보가 수정되었습니다.', 'success');
location.reload(); // 변경 사항을 확인하기 위해 페이지 새로고침
} else {
const errorData = await response.text();
showAlert('오류', `수정에 실패했습니다: ${errorData}`, 'error');
}
} catch (error) {
console.error('Error updating bookmark:', error);
showAlert('오류', '네트워크 오류로 수정에 실패했습니다.', 'error');
}
}
/**
* [신규] 북마크를 삭제하는 함수.
* 'deleteBookmark is not defined' 오류를 해결합니다.
*/
async function deleteBookmark(bookmarkId) {
// common.js의 공통 확인 모달 사용
const confirmed = await showConfirm('삭제 확인', '이 북마크를 정말로 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.');
if (confirmed) {
try {
// /api/** 경로는 상태가 없는(stateless) JWT 인증을 사용하므로 CSRF 토큰이 필요 없습니다.
const response = await fetch(`/api/bookmarks/${bookmarkId}`, {
method: 'DELETE',
headers: {
'Authorization': `Bearer ${serverData.token}` // 헤더에 토큰 추가
},
});
if (response.ok) {
showAlert('성공', '북마크가 삭제되었습니다.', 'success');
// 페이지에서 삭제된 항목 제거
document.getElementById(`bookmark-row-${bookmarkId}`).remove();
} else {
const errorData = await response.text();
showAlert('오류', `삭제에 실패했습니다: ${errorData}`, 'error');
}
} catch (error) {
console.error('Error deleting bookmark:', error);
showAlert('오류', '네트워크 오류로 삭제에 실패했습니다.', 'error');
}
}
}
</script>
</th:block>
</html>