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:
lunaticbum 2025-08-05 16:14:01 +09:00
parent d6ea6dc154
commit 4dfc39751b
5 changed files with 237 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/main/kotlin/kr/lunaticbum/back/lun/model/Post.kt
View File

@ -96,8 +96,8 @@ class CommentService(private val commentRepository: CommentRepository) {
interface PostRepository : ReactiveMongoRepository<Post, String> {
fun findAllByModifyTime(time : Long? = 0): Flux<Post>
fun findAllByPostingTrue(pageable: Pageable): Flux<Post>
fun findTop10ByOrderByReadCountDesc(): Flux<Post>
fun findTop10ByOrderByModifyTimeDesc(): Flux<Post>
fun findTop5ByOrderByReadCountDesc(): Flux<Post>
fun findTop5ByOrderByModifyTimeDesc(): Flux<Post>
}
@ -124,15 +124,23 @@ class PostManager(
return postRepository.findAllByPostingTrue(pageable).takeLast(20).buffer(20).blockLast(Duration.ofSeconds(30)) ?: listOf()
}
fun getTop10Posts(): Flux<Post> {
return postRepository.findTop10ByOrderByReadCountDesc().map { p ->
return postRepository.findTop5ByOrderByReadCountDesc().map { p ->
p.title = URLDecoder.decode(p.title)
if (p.title?.isEmpty() == true) {
p.title = "무제(無題)"
}
println(p.title)
p
}
}
fun getRecent10Posts(): Flux<Post> {
return postRepository.findTop10ByOrderByModifyTimeDesc().map { p ->
return postRepository.findTop5ByOrderByModifyTimeDesc().map { p ->
p.title = URLDecoder.decode(p.title)
if (p.title?.isEmpty() == true) {
p.title = "무제(無題)"
}
println(p.title)
p
}

73
src/main/resources/static/css/blog.css
View File

@ -40,13 +40,18 @@
align-content: center;
top: 0;
bottom: 0;
color: white;
color: black;
/*background: #40404564;*/
position: relative;
border: 1px solid #393b42;
border: 1px solid #ccc;
height: var(--ButtonHeight);
border-radius: 10px;
background: #00000044;
background: #fafbfc;
}
#location_field {
line-height: initial;
height: initial;
}
/*#title_field {*/
/*font-size: 20px;*/
@ -164,3 +169,65 @@ a.btn_layerClose:hover {
/* border-radius: 10px;*/
/* background: #00000044;*/
/*}*/
.ql-font-sans-serif { font-family: Arial, Helvetica, sans-serif; }
.ql-font-serif { font-family: Georgia, serif; }
.ql-font-monospace { font-family: "Courier New", monospace; }
.ql-font-arial { font-family: Arial, sans-serif; }
.ql-font-georgia { font-family: Georgia, serif; }
.ql-font-comic-sans-ms { font-family: "Comic Sans MS", cursive, sans-serif; }
.ql-font-courier-new { font-family: "Courier New", Courier, monospace; }
.ql-font-roboto {
font-family: 'Roboto', sans-serif;
}
.ql-font-playfair-display {
font-family: 'Playfair Display', serif;
}
/* Quill 툴바 기본 정렬 및 스타일 통합 */
.ql-toolbar.ql-snow {
display: flex;
flex-wrap: wrap; /* 툴바 요소가 넘칠 경우 줄바꿈 */
align-items: center;
gap: 8px; /* 아이콘과 버튼 간 간격 */
padding: 8px 12px;
border-radius: 10px 10px 0 0;
background: #fafbfc;
}
#editor.ql-container.ql-snow {
display: flex;
flex-wrap: wrap; /* 툴바 요소가 넘칠 경우 줄바꿈 */
align-items: center;
gap: 8px; /* 아이콘과 버튼 간 간격 */
padding: 8px 12px;
border-radius: 10px 10px 10px 10px;
background: #fafbfc;
}
/* 툴바 내 각 툴 그룹 사이 구분선 및 여백 */
.ql-toolbar.ql-snow > span.ql-formats:not(:last-child) {
border-right: 1px solid #ddd;
margin-right: 18px;
padding-right: 10px;
}
/* 폰트 선택기 및 드롭다운 스타일 */
.ql-toolbar .ql-picker-label,
.ql-toolbar .ql-picker {
min-width: 2em;
height: 2.2em;
display: flex;
align-items: center;
}
/* 툴바 버튼 스타일 */
.ql-toolbar button {
min-width: 32px;
height: 32px;
margin: 0 2px;
display: flex;
align-items: center;
justify-content: center;
}

44
src/main/resources/static/js/common.js
View File

@ -25,7 +25,7 @@ document.addEventListener('DOMContentLoaded', function() {
const a = document.createElement('a');
a.id = item.id;
a.href = `${getMainPath()}/blog/viewer/${item.id}`;
a.textContent = `${item.title}[${year}/${month}/${day}]`
a.innerHTML = `${item.title}<br>[${year}/${month}/${day}]`
li.appendChild(a);
ul.appendChild(li);
});
@ -56,7 +56,7 @@ document.addEventListener('DOMContentLoaded', function() {
const a = document.createElement('a');
a.id = item.id;
a.href = `${getMainPath()}/blog/viewer/${item.id}`;
a.textContent = `${item.title}[${year}/${month}/${day}]`
a.innerHTML = `${item.title}<br>[${year}/${month}/${day}]`
li.appendChild(a);
ul.appendChild(li);
});
@ -393,16 +393,8 @@ function openLoginPopup(formType) {
function closePopup() {
document.getElementById('overlay').style.display = 'none';
}
//
// function submitForm(formType) {
// alert(formType === 'login' ? '로그인 시도' : '회원가입 시도');
// closePopup();
// }
function submitLoginForm() {
// const id = document.getElementById('loginId').value;
// const password = document.getElementById('loginPassword').value;
let user_id = document.getElementById('loginId')
let user_pw = document.getElementById('loginPassword')
let rememberMe = document.getElementById('rememberMe')
@ -427,26 +419,16 @@ function submitLoginForm() {
}
}
})
}
// AJAX 요청
// fetch('/login', {
// method: 'POST',
// headers: {
// 'Content-Type': 'application/json',
// },
// body: JSON.stringify({ id, password }),
// })
// .then(response => response.json())
// .then(data => {
// if (data.success) {
// alert('로그인 성공!');
// // 로그인 성공 후 처리 (예: 페이지 리다이렉트)
// } else {
// alert('로그인 실패: ' + data.message);
// }
// })
// .catch(error => {
// console.error('Error:', error);
// alert('로그인 중 오류가 발생했습니다.');
// });
function isDelta(content) {
try {
// Delta는 JSON이면서 'ops'라는 키를 포함
if (typeof content === "string") {
content = JSON.parse(content);
}
return typeof content === "object" && content.ops !== undefined;
} catch (e) {
return false; // JSON 파싱 실패하면 마크업(HTML)으로 간주
}
}

82
src/main/resources/templates/content/blog/viewer.html
View File

@ -6,34 +6,80 @@
layout:decorate="~{layout/default_layout}"
>
<th:block layout:fragment="head">
<script type="text/javascript" th:src="@{/js/toast-ui-view.js}"></script>
<link th:href="@{/css/toast-ui-dark.css}" rel="stylesheet" />
<script type="text/javascript" th:src="@{/js/blog.js}"></script>
<link th:href="@{/css/blog.css}" rel="stylesheet" />
<!-- Quill 스타일 시트 -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<!-- Quill 라이브러리 -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<!-- HTML 에디터 영역 -->
<!-- <div id="editor-container" style="height: 300px;"></div>-->
<!-- Quill 라이브러리 및 테마 -->
<link href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js"></script>
<!-- 테이블 플러그인 CSS & JS -->
<link href="https://cdn.jsdelivr.net/npm/quill-table-better@1/dist/quill-table-better.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/quill-table-better@1/dist/quill-table-better.js"></script>
<script th:inline="javascript">
let editor
let onChange = () => {console.log(editor.getMarkdown())}
document.addEventListener("DOMContentLoaded", onLoaded);
function onLoaded() {
var quill = null
document.addEventListener('DOMContentLoaded', function() {
const editorContainer = document.querySelector('#editor');
function setEditorHeight() {
const height = Math.max(window.innerHeight * 0.5, 300);
editorContainer.style.height = height + 'px';
}
baseData.title = [[${srcPost.title}]];
baseData.content = [[${srcPost.content}]];
baseData.firstPostLon = [[${srcPost.firstPostLon}]];
baseData.firstPostLat = [[${srcPost.firstPostLat}]];
document.getElementById('location_field').textContent = "Lat: " + baseData.firstPostLat + ", Lon: " + baseData.firstPostLon;
var requestOptions = {
method: 'GET',
};
fetch("https://api.geoapify.com/v1/geocode/reverse?lat="+baseData.firstPostLat+"&lon="+baseData.firstPostLon+"&apiKey=2b37a75bb0754086b5a1c4a7c3173ee8", requestOptions)
.then(response => response.json())
.then(function(result) {
try {
document.getElementById('location_field').textContent = result.features[0].properties.formatted
} catch (e) {
document.getElementById('location_field').innerHTML = "Lat: " + baseData.firstPostLat + "<br> Lon: " + baseData.firstPostLon;
}
})
.catch(error => console.log('error', error));
$('#title_layer').text(baseData.title)
editor = new toastui.Editor({
el: document.querySelector('#editor'),
height: '100%',
width:'100%',
viewer: true,
usageStatistics : false,
initialValue:baseData.content,
setEditorHeight();
window.addEventListener('resize', setEditorHeight);
var Font = Quill.import('formats/font');
Font.whitelist = ['sans-serif', 'serif', 'monospace', 'arial', 'georgia', 'comic-sans-ms', 'courier-new','roboto', 'playfair-display'];
Quill.register(Font, true);
Quill.register({ 'modules/table-better': QuillTableBetter }, true);
quill = new Quill(editorContainer, {
theme: 'snow',
modules: {
toolbar: [],
'table-better': {
language: 'en_US',
toolbarTable: true
},
keyboard: {
bindings: QuillTableBetter.keyboardBindings
}
}
});
}
function loadEditor() {
goToEditor([[${srcPost.id}]]);
}
quill.enable(false)
if (isDelta(baseData.content)) {
quill.setContents(baseData.content); // Delta 데이터라면 setContents
} else {
quill.clipboard.dangerouslyPasteHTML(baseData.content); // HTML 데이터라면 dangerouslyPasteHTML
}
document.querySelector('.ql-toolbar').style.display = 'none';
});
</script>
</th:block>
<th:block layout:fragment="content" id="content">
@ -62,7 +108,7 @@
<div style="width: 15px" ></div>
<div class="write_option btn-example" to="#popLayer2" onclick="openPopup(this)" id="hashtag_field"></div>
<div style="width: 15px" ></div>
<label class="write_option" readonly id="location_field"></label>
<div class="write_option" id="location_field" ></div>
</div>
<h3 id="write" th:text="${srcPost.firstAddress}"></h3>
<h3 id="modify" th:text="${srcPost.modifyAddress}"></h3>

180
src/main/resources/templates/content/blog/write.html
View File

@ -6,119 +6,95 @@
layout:decorate="~{layout/default_layout}"
>
<th:block layout:fragment="head" id="head">
<script type="text/javascript" th:src="@{/js/toast-ui.js}"></script>
<script type="text/javascript" th:src="@{/js/blog.js}"></script>
<link th:href="@{/css/blog.css}" rel="stylesheet" />
<link th:href="@{/css/toast-ui.css}" rel="stylesheet" />
<link th:href="@{/css/toast-ui-dark.css}" rel="stylesheet" />
<!-- <link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor-dark.css" />-->
<script th:inline="javascript">
var editor
let onChange = () => {console.log(editor.getMarkdown())}
document.addEventListener("DOMContentLoaded", onLoaded);
function onLoaded() {
var currentTitle = [[${defaultTitle}]]
getLocation()
var titleField = document.getElementById('title_field')
titleField.addEventListener("change", (event) => {
baseData.title = titleField.value
console.log(baseData.title)
});
titleField.value = currentTitle
var style = getComputedStyle(document.body)
console.log(style.getPropertyValue('--ContentVerticalMargin'))
console.log(window.c)
console.log(style.getPropertyValue('--FooterHeight'))
console.log(style.getPropertyValue('--TopHeight'))
var editorHeght = (
document.querySelector('#main_layer').getBoundingClientRect().height * 0.7
)
<!-- Quill 스타일 시트 -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
editor = new toastui.Editor({
el: document.querySelector('#editor'),
previewStyle: 'tab',
height: editorHeght + 'px',
width:'95%',
theme:'dark',
usageStatistics : false,
toolbar:null,
initialValue:
"# 제목 " +"\n" +
"평문 사이에 **볼드체** *이탤릭체*"+"\n" +
"~~어디쓰지~~"+"\n" +
"***"+"\n" +
"### 모라모라 " +"\n" +
"> 으흐흠..." +"\n" +
"* 쓸까?" +"\n" +
"1. 첫번째" +"\n" +
"* [x] 체크하자" +"\n" +
"* [ ] 체크하자" +"\n" +
" \|dd\|cc\|ff\|\n" +
" \|\-\-\-\|\-\-\-\|\-\-\-\|\n" +
" \|aa\|s\|s\|" +"\n" +
"[링크다](https://youtube.com)" +"\n" +
"`var test = 'real test'`" +"\n" +
"```\n" +
"let test= = 'real test'\n" +
"```"
,
theme:"dark",
initialEditType:"wysiwyg",
hooks: {
addImageBlobHook: (blob, callback) => {
const formData = new FormData();
formData.append('file', blob);
let uploadUrl = getMainPath() + "/blog/post/imageUpload";
let imageUrl = getMainPath() + '/blog/post/images/';
$.ajax({
type: 'POST',
enctype: 'multipart/form-data',
url: uploadUrl,
data: formData,
dataType: 'json',
processData: false,
contentType: false,
cache: false,
timeout: 600000,
success: function (data) {
imageUrl += data.fileName;
callback(imageUrl, '사진 대체 텍스트 입력');
},
error: function (e) {
callback('image_load_fail', '사진 대체 텍스트 입력');
}
});
<!-- Quill 라이브러리 -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<!-- HTML 에디터 영역 -->
<!-- <div id="editor-container" style="height: 300px;"></div>-->
<!-- Quill 라이브러리 및 테마 -->
<link href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js"></script>
<!-- 테이블 플러그인 CSS & JS -->
<link href="https://cdn.jsdelivr.net/npm/quill-table-better@1/dist/quill-table-better.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/quill-table-better@1/dist/quill-table-better.js"></script>
<script>
var quill = null
document.addEventListener('DOMContentLoaded', function() {
const editorContainer = document.querySelector('#editor');
function setEditorHeight() {
const height = Math.max(window.innerHeight * 0.5, 300);
editorContainer.style.height = height + 'px';
}
setEditorHeight();
window.addEventListener('resize', setEditorHeight);
var Font = Quill.import('formats/font');
Font.whitelist = ['sans-serif', 'serif', 'monospace', 'arial', 'georgia', 'comic-sans-ms', 'courier-new','roboto', 'playfair-display'];
Quill.register(Font, true);
Quill.register({ 'modules/table-better': QuillTableBetter }, true);
quill = new Quill(editorContainer, {
theme: 'snow',
modules: {
toolbar: [
[{ font: Font.whitelist }], // 폰트 목록 드롭다운 추가
[{ 'size': ['small', false, 'large', 'huge'] }], // 폰트 크기
['bold', 'italic', 'underline', 'strike'], // 글자 굵기, 기울임, 밑줄, 취소선
[{ 'color': [] }, { 'background': [] }], // 글자 색, 배경색
[{ 'header': 1 }, { 'header': 2 }, 'blockquote', 'code-block'], // 제목1,2, 인용, 코드 블록
[{ 'script': 'sub'}, { 'script': 'super' }], // 위첨자, 아래첨자
[{ 'list': 'ordered'}, { 'list': 'bullet' }], // 번호 있는 목록, 점 목록
[{ 'indent': '-1'}, { 'indent': '+1' }], // 들여쓰기 증가/감소
['link', 'image', 'video'],
['table-better'],// 링크, 이미지, 비디오
[{ 'direction': 'rtl' }], // 텍스트 방향 (오른쪽 → 왼쪽)
[{ 'align': [] }], // 정렬 옵션
['clean']
],
'table-better': {
language: 'en_US',
toolbarTable: true
},
keyboard: {
bindings: QuillTableBetter.keyboardBindings
}
}
});
}
function save() {
console.log(editor.getHTML())
console.log(editor.getMarkdown())
onclickWrite([[${enc}]],[[${keyword}]],editor.getMarkdown())
}
});
</script>
</th:block>
<th:block layout:fragment="content" id="content">
<div id="main_layer">
<th:block sec:authorize="isAnonymous()">
<h1>권한이 없는 뎁쇼?!</h1>
</th:block>
<th:block sec:authorize="isAuthenticated()">
<div class="layer">
<input id="title_field" class="write_option" />
<section class="wrapper style1">
<div class="container">
<div id="content">
<article>
<th:block sec:authorize="isAnonymous()">
<h1>권한이 없는 뎁쇼?!</h1>
</th:block>
<th:block sec:authorize="isAuthenticated()">
<div class="layer">
<input id="title_field" class="write_option" />
</div>
<div id="editor" ></div>
<div class="write_controllbox">
<div class="write_option btn-example" to="#popLayer1" onclick="openPopup(this)" ></div>
<div style="width: 15px" ></div>
<div class="write_option btn-example" to="#popLayer2" onclick="openPopup(this)" id="hashtag_field"></div>
<div style="width: 15px" ></div>
<label class="write_option" readonly id="location_field"></label>
</div>
<h1><button id="save" class="write_option" style="width: 100%; position: relative" onclick="save()">저장하셈</button></h1>
</th:block>
</article>
</div>
</div>
<div id="editor" ></div>
<div class="write_controllbox">
<div class="write_option btn-example" to="#popLayer1" onclick="openPopup(this)" ></div>
<div style="width: 15px" ></div>
<div class="write_option btn-example" to="#popLayer2" onclick="openPopup(this)" id="hashtag_field"></div>
<div style="width: 15px" ></div>
<label class="write_option" readonly id="location_field"></label>
</div>
<h1><button id="save" class="write_option" style="width: 100%; position: relative" onclick="save()">저장하셈</button></h1>
</th:block>
</section>
</div>
</th:block>
<th:block layout:fragment="popup_layer">