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-23 15:37:51 +09:00
parent d6043543a1
commit 0ce20e4bf1
8 changed files with 634 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/templates/content/bookmarks.html
+75 -14
View File
@@ -7,11 +7,52 @@
<head>
<title>Bookmarks</title>
<style>
.scrollable-content {
max-height: 500px; /* 콘텐츠 영역의 최대 높이를 지정 */
max-width: 500px;
overflow-y: auto; /* 세로 내용이 넘칠 경우 스크롤바 자동 생성 */
-webkit-overflow-scrolling: touch; /* 모바일에서 부드러운 스크롤 효과 */
/* --- [수정] 북마크 이미지 영역 스크롤 및 카드 크기 고정 --- */
/* 1. 각 북마크 카드의 전체 높이를 720px로 고정합니다. */
.swiper-slide .box.feature {
height: 720px;
padding-bottom: 50px;
}
/* 2. 여러 이미지를 담는 컨테이너의 스타일을 정의합니다. */
.image-flick-container {
height: 450px; /* 이미지 영역의 높이를 450px로 고정합니다. (값 조절 가능) */
overflow-y: auto; /* 이 높이를 넘어가는 이미지는 세로 스크롤됩니다. */
border: 1px solid #eee;
border-radius: 5px;
background-color: #f0f0f0; /* 스크롤 영역 배경색을 살짝 추가 */
margin-bottom: 1em; /* 이미지 영역과 텍스트 영역 사이의 간격 */
}
/* 3. 스크롤 영역 내부의 이미지 스타일을 지정합니다. */
.image-flick-container img {
width: 100%; /* 이미지를 컨테이너 너비에 맞춥니다. */
height: auto; /* 이미지 비율을 유지합니다. */
display: block;
margin-bottom: 10px; /* 이미지들 사이에 약간의 간격을 줍니다. */
}
.image-flick-container img:last-child {
margin-bottom: 0;
}
/* 4. (선택) 스크롤바 디자인을 개선합니다. */
.image-flick-container::-webkit-scrollbar {
width: 8px;
}
.image-flick-container::-webkit-scrollbar-track {
background: #e9e9e9;
}
.image-flick-container::-webkit-scrollbar-thumb {
background: #bbb;
border-radius: 10px;
}
.image-flick-container::-webkit-scrollbar-thumb:hover {
background: #999;
}
</style>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
@@ -67,20 +108,26 @@
<section class="box feature" style="margin: 0; height: 100%; display: flex; flex-direction: column;">
<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 th:case="'IMAGE'" class="image-flick-container">
<th:block th:each="image : ${bookmark.images}" th:if="${image.isVisible}">
<img th:src="${apiBaseUrl + image.url}" alt="Bookmark Image" />
</th:block>
</div>
<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 th:case="'VIDEO'" class="video-container bookmark-image-container">
<th:block th:each="image : ${bookmark.images}" th:if="${image.isVisible and #lists.size(bookmark.images) > 0}">
<video controls style="width: 100%;">
<source th:src="${apiBaseUrl + image.url}" type="video/mp4">
</video>
</th:block>
</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" />
onclick="showBookmarkOptions(this)" class="bookmark-image-container">
<th:block th:each="image : ${bookmark.images}" th:if="${image.isVisible}">
<img th:src="${apiBaseUrl + mage.url}" alt="Bookmark Image" />
</th:block>
</a>
</div>
@@ -90,6 +137,14 @@
<h3 th:text="${bookmark.title}">북마크 제목</h3>
<p th:if="${bookmark.userComment}" th:text="${bookmark.userComment}"></p>
</header>
<div class="bookmark-meta-container" style="margin: 1em 0;">
<div th:if="${bookmark.category != null and !#strings.isEmpty(bookmark.category)}">
<span class="tag-item" th:text="${bookmark.category}"></span>
</div>
<div th:if="${bookmark.tags != null and !#lists.isEmpty(bookmark.tags)}">
<span th:each="tag : ${bookmark.tags}" class="tag-item" th:text="'#' + ${tag}"></span>
</div>
</div>
<p th:text="${#strings.abbreviate(bookmark.description, 100)}"></p>
</div>
@@ -104,6 +159,12 @@
<button class="button alt small" th:onclick="toggleCommentSection([[${bookmark.id}]])">
💬 Comments
</button>
<button class="button alt small"
th:if="${#authentication.principal != null && #authentication.principal instanceof T(org.springframework.security.core.userdetails.UserDetails) && #authentication.principal.username == bookmark.userId}"
th:data-bookmark-id="${bookmark.id}"
onclick="openBookmarkEditPopup(this)">
✏️ 수정
</button>
</div>
<section class="comment-section" th:id="|comment-section-${bookmark.id}|" style="display: none; margin-top: 1em; text-align: left;">
@@ -116,7 +177,7 @@
</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>
<p style="margin:0;">댓글을 작성하려면 <a href="javascript:void(0);" class="open-login-popup" to="#loginPopup">로그인</a>이 필요합니다.</p>
</div>
<div th:id="|comments-list-${bookmark.id}|" style="margin-top: 1em;">
src/main/resources/templates/fragments/includes.html
+2 -1
View File
@@ -57,7 +57,8 @@
enc: /*[[${enc ?: ''}]]*/,
keyword: /*[[${keyword ?: ''}]]*/,
// --- [핵심 추가] ---
token: /*[[${jwtToken}]]*/
token: /*[[${jwtToken}]]*/,
apiBaseUrl : /*[[${apiBaseUrl}]]*/
};
</script>
</th:block>
src/main/resources/templates/layout/default_layout.html
+15 -7
View File
@@ -74,7 +74,8 @@
</div>
</div>
<div id="bookmark-edit-popup" class="pop_layer">
<div id="bookmark-edit-popup" class="pop_layer" style="max-width: 600px;">
<div class="pop_container">
<div class="pop_conts">
<h2>북마크 수정</h2>
@@ -94,20 +95,27 @@
</select>
<div class="form-control-wrapper" onclick="openBookmarkCategoryPopup('edit-bookmark-category-display', 'edit-bookmark-category')">
<strong>카테고리</strong>
<strong>카테고리:</strong>
<div id="edit-bookmark-category-display" class="tag-display-box">카테고리 선택</div>
</div>
<input type="hidden" id="edit-bookmark-category">
<div class="form-control-wrapper" onclick="openBookmarkTagPopup('edit-bookmark-tags-display', 'edit-bookmark-tags')">
<strong>태그</strong>
<strong>태그:</strong>
<div id="edit-bookmark-tags-display" class="tag-display-box">태그 선택</div>
</div>
<input type="hidden" id="edit-bookmark-tags">
<hr>
<label>이미지 관리</label>
<div id="edit-bookmark-images-list" class="images-list-container">
</div>
<input type="file" id="add-bookmark-image-input" multiple accept="image/*" style="display: none;">
<button type="button" class="button small" onclick="document.getElementById('add-bookmark-image-input').click();">이미지 추가</button>
<div style="margin-top: 1.5em; text-align: right;">
<button type="button" class="button primary" onclick="submitBookmarkUpdate()">변경사항 저장</button>
<a href="#" class="button alt btn_layerClose">취소</a>
<button type="button" class="button" onclick="submitBookmarkUpdate()">변경사항 저장</button>
<button type="button" class="button alt btn_layerClose">취소</button>
</div>
</div>
</div>
@@ -123,7 +131,7 @@
<input type="text" id="new-bookmark-category-input" placeholder="새 카테고리 입력 후 Enter">
<div style="margin-top: 1.5em;">
<button type="button" class="button primary" onclick="applyBookmarkCategory()">적용</button>
<a href="#" class="button alt btn_layerClose">취소</a>
<a href="javascript:void(0);" class="button alt" onclick="this.closest('.pop_layer').style.display='none'">취소</a>
</div>
</div>
</div>
@@ -139,7 +147,7 @@
<input type="text" id="new-bookmark-tag-input" placeholder="새 태그 입력 후 Enter">
<div style="margin-top: 1.5em;">
<button type="button" class="button primary" onclick="applyBookmarkTags()">적용</button>
<a href="#" class="button alt btn_layerClose">취소</a>
<a href="javascript:void(0);" class="button alt" onclick="this.closest('.pop_layer').style.display='none'">취소</a>
</div>
</div>
</div>