.....

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

@@ -11,12 +11,17 @@
     <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 currentTitle =  [[${defaultTitle}]]
+    <script th:inline="javascript" >
+
         var editor
-        let onChange = () => {console.log(editor.getMarkdown())}
         document.addEventListener("DOMContentLoaded", onLoaded);
         function onLoaded() {
+            baseData.id = [[${srcPost.id}]];
+            baseData.title = [[${srcPost.title}]];
+            baseData.content = [[${srcPost.content}]];
+            baseData.firstPostLat = [[${srcPost.firstPostLat}]];
+            baseData.firstPostLon = [[${srcPost.firstPostLon}]];
+            baseData.writeTime = [[${srcPost.writeTime}]];
             getLocation()
             var style = getComputedStyle(document.body)
             console.log(style.getPropertyValue('--ContentVerticalMargin'))

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

@@ -4,16 +4,52 @@
         xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
         layout:decorate="~{layout/default_layout}">
 <th:block layout:fragment="head">
+    <script type="text/javascript" th:src="@{/js/blog.js}"></script>
+    <link th:href="@{/css/blog.css}" rel="stylesheet" />
+    <script type="text/javascript" th:src="@{/js/toast-ui-view.js}"></script>
+    <link th:href="@{/css/toast-ui-dark.css}" rel="stylesheet" />
+    <script th:inline="javascript">
+        let editor
+        document.addEventListener("DOMContentLoaded", onLoaded);
+        function onLoaded() {
+            var els = document.getElementsByClassName('content')
+            for (i=0;i<els.length;i++) {
+                var item = $(els[i])
+                console.log(item[0])
 
+                console.log(item.attr("data"))
+                new toastui.Editor({
+                    el: item[0],
+                    width : (item[0].getBoundingClientRect().width * 0.8) + 'px',
+                    height : (item[0].getBoundingClientRect().width * 0.8) + 'px',
+                    viewer: true,
+                    usageStatistics : false,
+                    initialValue: item.attr("data"),
+                    theme:"dark",
+                });
+            }
+        }
+    </script>
 </th:block>
 <th:block layout:fragment="content" id="content">
-    <table id="main_layer">
-        <tr id="where" th:each="location : ${locations}">
-        <tr id="posts" th:each="post : ${posts}">
-            <td class="post_item"><span th:text="${#dates.format(post.writeTime, 'dd/MMM/yyyy HH:mm')}"></span></td>
-            <td class="post_item"><span th:text="${post.title}"></span></td>
-            <td class="post_item"><span th:text="${post.id}"></span></td>
-        </tr>
-    </table>
+    <div id="main_layer">
+        <th:block th:if="${PERMISSION != 'OK'}">
+            <h1>권한이 없는 뎁쇼?!</h1>
+        </th:block>
+        <th:block th:if="${PERMISSION == 'OK'}">
+            <div class="post_layer">
+                <th:block class="posts_layer"    id="posts" th:each="posts ,postsStat: ${chunkedPosts}">
+                    <th:block class="posts_layer" th:class="${#strings.append(rowKey,postsStat.index)}" th:each="post, postStast : ${posts}">
+                        <div class="post_item" th:onclick="goToEditor([[${path}]],[[${post.id}]],[[${SK}]])" >
+                            <span id="postTitle" class="post_attr" th:text="${post.title}"></span>
+                            <div id="content" class="post_attr content" th:attr="data=${post.content}"></div>
+                            <span id="writeDate" class="post_attr" th:text="${#dates.format(post.writeTime, 'dd/MMM/yyyy HH:mm')}"></span>
+                            <span id="postId" class="post_attr" th:text="${post.id}"></span>
+                        </div>
+                    </th:block>
+                </th:block>
+            </div>
+        </th:block>
+    </div>
 </th:block>
 </html>

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

@@ -5,9 +5,7 @@
         layout:decorate="~{layout/default_layout}"
 >
 <th:block layout:fragment="head">
-    <script type="text/javascript"   src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
     <script type="text/javascript" th:src="@{/js/toast-ui-view.js}"></script>
-    <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">
@@ -15,7 +13,7 @@
         let onChange = () => {console.log(editor.getMarkdown())}
         document.addEventListener("DOMContentLoaded", onLoaded);
         function onLoaded() {
-            var h = document.querySelector('#content').getBoundingClientRect().height + 'px'
+            var h = document.querySelector('#main_layer').getBoundingClientRect().height + 'px'
             editor = new toastui.Editor({
                 el: document.querySelector('#editor'),
                 height: '500px',