...

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

@@ -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 findTop5ByOrderByReadCountDesc(): Flux<Post>
-    fun findTop10ByOrderByModifyTimeDesc(): 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
         }
 

src/main/resources/static/css/blog.css

@@ -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;
+}

src/main/resources/static/js/common.js

@@ -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 요청
+function isDelta(content) {
-    // fetch('/login', {
+    try {
-    //     method: 'POST',
+        // Delta는 JSON이면서 'ops'라는 키를 포함
-    //     headers: {
+        if (typeof content === "string") {
-    //         'Content-Type': 'application/json',
+            content = JSON.parse(content);
-    //     },
+        }
-    //     body: JSON.stringify({ id, password }),
+        return typeof content === "object" && content.ops !== undefined;
-    // })
+    } catch (e) {
-    //     .then(response => response.json())
+        return false; // JSON 파싱 실패하면 마크업(HTML)으로 간주
-    //     .then(data => {
+    }
-    //         if (data.success) {
-    //             alert('로그인 성공!');
-    //             // 로그인 성공 후 처리 (예: 페이지 리다이렉트)
-    //         } else {
-    //             alert('로그인 실패: ' + data.message);
-    //         }
-    //     })
-    //     .catch(error => {
-    //         console.error('Error:', error);
-    //         alert('로그인 중 오류가 발생했습니다.');
-    //     });
 }

src/main/resources/templates/content/blog/viewer.html

@@ -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
+        var quill = null
-        let onChange = () => {console.log(editor.getMarkdown())}
+        document.addEventListener('DOMContentLoaded', function() {
-        document.addEventListener("DOMContentLoaded", onLoaded);
+            const editorContainer = document.querySelector('#editor');
-        function onLoaded() {
+            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({
+            setEditorHeight();
-                el: document.querySelector('#editor'),
+            window.addEventListener('resize', setEditorHeight);
-                height: '100%',
+            var Font = Quill.import('formats/font');
-                width:'100%',
+            Font.whitelist = ['sans-serif', 'serif', 'monospace', 'arial', 'georgia', 'comic-sans-ms', 'courier-new','roboto', 'playfair-display'];
-                viewer: true,
+            Quill.register(Font, true);
-                usageStatistics : false,
+            Quill.register({ 'modules/table-better': QuillTableBetter }, true);
-                initialValue:baseData.content,
+
+            quill = new Quill(editorContainer, {
+                theme: 'snow',
+                modules: {
+                    toolbar: [],
+                    'table-better': {
+                        language: 'en_US',
+                        toolbarTable: true
+                    },
+                    keyboard: {
+                        bindings: QuillTableBetter.keyboardBindings
+                    }
+                }
             });
-        }
+            quill.enable(false)
-        function loadEditor() {
+            if (isDelta(baseData.content)) {
-            goToEditor([[${srcPost.id}]]);
+                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>

src/main/resources/templates/content/blog/write.html

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