...

build.gradle.kts

@@ -42,6 +42,7 @@ dependencies {
 	implementation("org.jetbrains.kotlin:kotlin-reflect")
 	implementation("org.jetbrains.kotlinx:kotlinx-coroutines-reactor")
 	implementation("org.springframework.boot:spring-boot-starter-thymeleaf")
+	implementation("nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect")
 	implementation("org.springframework.boot:spring-boot-starter-security")
 	compileOnly("org.projectlombok:lombok")
 	runtimeOnly("org.mariadb.jdbc:mariadb-java-client")
@@ -52,6 +53,7 @@ dependencies {
 	testRuntimeOnly("org.junit.platform:junit-platform-launcher")
 }
 
+
 kotlin {
 	compilerOptions {
 		freeCompilerArgs.addAll("-Xjsr305=strict")

src/main/kotlin/kr/lunaticbum/back/lun/controllers/BlogController.kt

@@ -26,9 +26,9 @@ class BlogController() {
     @Autowired
     lateinit var logService: LogService
 
-    @GetMapping("/write")
+    @GetMapping("write")
     fun writ() : ModelAndView{
-        val vm = ModelAndView("/content/blog/write")
+        val vm = ModelAndView("content/blog/write")
 //        when(System.currentTimeMillis() % 5L) {
 //            0L -> vm.modelMap.put(EncTypeKey,"T4")
 //            1L ->    vm.modelMap.put(EncTypeKey,"T3")
@@ -39,6 +39,20 @@ class BlogController() {
         return vm
     }
 
+    @GetMapping("viewer/{blogId}")
+    fun viewer(@PathVariable blogId : String) : ModelAndView{
+        val vm = ModelAndView("content/blog/viewer")
+//        when(System.currentTimeMillis() % 5L) {
+//            0L -> vm.modelMap.put(EncTypeKey,"T4")
+//            1L ->    vm.modelMap.put(EncTypeKey,"T3")
+//            2L ->    vm.modelMap.put(EncTypeKey,"T2")
+//            else -> vm.modelMap.put(EncTypeKey,"T0")
+//        }
+
+        return vm
+    }
+
+
     @Value("\${image.upload.path}")
     private val uploadPath: String? = null
 
@@ -47,13 +61,13 @@ class BlogController() {
 
 
     @ResponseBody
-    @GetMapping("/post/images/{fileName}")
+    @GetMapping("post/images/{fileName}")
     fun getImage(@PathVariable fileName : String) : Resource {
         val imgUploadPath = ("file:" +uploadPath + File.separator + fileName)
         return UrlResource.from(imgUploadPath)
     }
 
-    @PostMapping("/post/imageUpload")
+    @PostMapping("post/imageUpload")
     fun postImage(@RequestPart("file") upload: MultipartFile, res: HttpServletResponse, req: HttpServletRequest) : ResponseEntity<FileSaveResult>  {
         var lResultCode = 0
         var lResultMsg = "Suscces"

src/main/kotlin/kr/lunaticbum/back/lun/controllers/BumsPrivate.kt

@@ -3,9 +3,7 @@ package kr.lunaticbum.back.lun.controllers
 import com.google.gson.Gson
 import jakarta.servlet.http.HttpServletRequest
 import kr.lunaticbum.back.lun.configs.GlobalEnvironment
-import kr.lunaticbum.back.lun.model.RequestModel
+import kr.lunaticbum.back.lun.model.*
-import kr.lunaticbum.back.lun.model.ResponceResult
-import kr.lunaticbum.back.lun.model.User
 import kr.lunaticbum.back.lun.utils.LogService
 import org.springframework.beans.factory.annotation.Autowired
 import org.springframework.http.MediaType
@@ -24,17 +22,21 @@ class BumsPrivate {
     @Autowired
     lateinit var logService: LogService
 
+    @Autowired
+    lateinit var locationService: LocationLogService
+
     @ResponseBody
-    @PostMapping("/save/loc.api")
+    @PostMapping("save/loc.api")
     fun login(httpServletRequest: HttpServletRequest, @RequestBody jsonString: String) : ResponseEntity<ResponceResult> {
         logService.log("${httpServletRequest.requestURI}")
         logService.log(jsonString)
         var lResultCode = 0
         var lResultMsg = "Suscces"
-        val decodedBytes: ByteArray = Base64.getDecoder().decode(jsonString)
+        val decodedBytes: ByteArray = Base64.getMimeDecoder().decode(jsonString)
         String(decodedBytes).let {
-            Gson().fromJson<RequestModel>(it, RequestModel::class.java)?.let { model ->
+            Gson().fromJson<LocationLog>(it, LocationLog::class.java)?.let { model ->
-
+                logService.log(model.toString())
+                locationService.save(model)
             }
         }
         val responce = ResponseEntity.ok().contentType(MediaType.APPLICATION_JSON).body(ResponceResult().apply {

src/main/kotlin/kr/lunaticbum/back/lun/controllers/Telegram.kt

@@ -33,13 +33,13 @@ class Telegram {
     lateinit var logService: LogService
 
     @ResponseBody
-    @GetMapping("/hello")
+    @GetMapping("hello")
     fun hello(): String {
         return "hello1212"
     }
 
     @ResponseBody
-    @PostMapping("/webhook")
+    @PostMapping("webhook")
     fun test(httpServletRequest: HttpServletRequest, @RequestBody  update : TelegramUpdate?) {
         try {
             logService.log("test strat ${update}")

src/main/kotlin/kr/lunaticbum/back/lun/controllers/UserController.kt

@@ -38,10 +38,10 @@ class UserController {
     @Autowired
     lateinit var userManager: UserManager
 
-    @GetMapping("/join")
+    @GetMapping("join")
     fun hello(httpServletRequest: HttpServletRequest): ModelAndView {
         logService.log("onJoin")
-        val vm = ModelAndView("/content/user/join")
+        val vm = ModelAndView("content/user/join")
 //        when(System.currentTimeMillis() % 5L) {
 //            0L -> vm.modelMap.put(EncTypeKey,"T4")
 //            1L ->    vm.modelMap.put(EncTypeKey,"T3")
@@ -57,10 +57,10 @@ class UserController {
         return vm
     }
 
-    @GetMapping("/login")
+    @GetMapping("login")
     fun userLogin(httpServletRequest: HttpServletRequest): ModelAndView {
         logService.log("onJoin")
-        val vm = ModelAndView("/content/user/login")
+        val vm = ModelAndView("content/user/login")
 //        when(System.currentTimeMillis() % 5L) {
 //            0L -> vm.modelMap.put(EncTypeKey,"T4")
 //            1L ->    vm.modelMap.put(EncTypeKey,"T3")
@@ -74,7 +74,7 @@ class UserController {
 
 
     @ResponseBody
-    @PostMapping("/login.ajax")
+    @PostMapping("login.ajax")
     fun login(httpServletRequest: HttpServletRequest, @RequestBody jsonString: String) : ResponseEntity<ResponceResult> {
         logService.log("${httpServletRequest.requestURI}")
         logService.log(jsonString)
@@ -129,7 +129,7 @@ class UserController {
 
 
     @ResponseBody
-    @PostMapping("/joinUser.ajax")
+    @PostMapping("joinUser.ajax")
     fun joinUser(httpServletRequest: HttpServletRequest, @RequestBody jsonString: String) : ResponseEntity<ResponceResult> {
         logService.log("${httpServletRequest.requestURI}")
         logService.log(jsonString)

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

@@ -1,4 +1,91 @@
 package kr.lunaticbum.back.lun.model
 
+import kr.lunaticbum.back.lun.utils.LogService
+import lombok.AllArgsConstructor
+import lombok.Data
+import lombok.NoArgsConstructor
+import org.springframework.beans.factory.annotation.Autowired
+import org.springframework.data.mongodb.core.mapping.Document
+import org.springframework.data.mongodb.repository.ReactiveMongoRepository
+import org.springframework.stereotype.Repository
+import org.springframework.stereotype.Service
+import reactor.core.publisher.Mono
+
 class BumsPrivate {
+}
+
+@Data
+@NoArgsConstructor
+@AllArgsConstructor
+@Document(collection = "LocationLog")
+class LocationLog  {
+    var mFeatureName: String? = null
+    var mAddressLines: ArrayList<String> = arrayListOf()
+    var mAdminArea: String? = null
+    var mSubAdminArea: String? = null
+    var mLocality: String? = null
+    var mSubLocality: String? = null
+    var mThoroughfare: String? = null
+    var mSubThoroughfare: String? = null
+    var mPremises: String? = null
+    var mPostalCode: String? = null
+    var mCountryCode: String? = null
+    var mCountryName: String? = null
+    var mLatitude = 0.0
+    var mLongitude = 0.0
+    var mHasLatitude = false
+    var mHasLongitude = false
+    var mPhone: String? = null
+    var mUrl: String? = null
+    var time : Long = 0L
+
+    override fun toString(): String {
+        val buffer = StringBuffer()
+        buffer.append(mFeatureName).append("|").append("\n")
+        buffer.append(mAddressLines.joinToString(" , ")).append("|").append("\n")
+        buffer.append(mAdminArea).append("|").append("\n")
+        buffer.append(mSubAdminArea).append("|").append("\n")
+        buffer.append(mLocality).append("|").append("\n")
+        buffer.append(mSubLocality).append("|").append("\n")
+        buffer.append(mThoroughfare).append("|").append("\n")
+        buffer.append(mSubThoroughfare).append("|").append("\n")
+        buffer.append(mPremises).append("|").append("\n")
+        buffer.append(mPostalCode).append("|").append("\n")
+        buffer.append(mCountryCode).append("|").append("\n")
+        buffer.append(mCountryName).append("|").append("\n")
+        buffer.append(mLatitude).append("|").append("\n")
+        buffer.append(mLongitude).append("|").append("\n")
+        buffer.append(mPhone).append("|").append("\n")
+        buffer.append(mUrl).append("|").append("\n")
+        return buffer.toString()
+    }
+}
+
+@Repository
+interface LocationLogRepository : ReactiveMongoRepository<LocationLog, String> {
+
+
+    fun save(log:  LocationLog): Mono<LocationLog>
+}
+interface LocationService {
+
+}
+
+@Service
+class LocationLogService : LocationService {
+    @Autowired
+    private lateinit var logService: LogService
+
+    @Autowired
+    private lateinit var logRepository: LocationLogRepository
+
+
+
+    fun save(log: LocationLog) {
+        println("saved msg before ${log}")
+        logRepository.save(log).subscribe( {  println("saved msg after ${it}") },{e -> e.printStackTrace()},{
+            println("saved msg  comp")
+        })
+
+    }
 }

src/main/resources/application.properties

@@ -25,6 +25,7 @@ spring.data.mongodb.authentication-database=admin
 spring.data.mongodb.database=l
 spring.thymeleaf.prefix=classpath:/templates/
 spring.thymeleaf.suffix=.html
+spring.thymeleaf.enabled=true
 # ?? ???? ??? ?? ? ?? ????.
 spring.devtools.livereload.enabled=true
 # thymeleaf? ?? ??? ??? ???. cache=false ??(???? true)

src/main/resources/static/css/common.css

@@ -1,17 +1,38 @@
+:root {
+    --WindowFull : 100svh;
+    --TopHeight: 50px;
+    --FooterHeight: 120px;
+}
+
 body, html {
-    height: 100%;
+    background-color: black;
+    margin: 0px;
+    margin-left: 2.5%;
+    margin-right: 2.5%;
+    height: 100lvh;
+    width: 95%;
 }
 
-.header {
+header {
+    align-content: center;
+    position: relative;
     background-color: Gray;
-    height: 20%
+    height: var(--TopHeight);
 }
 
-.content {
+#content {
-    height:60%;
+    position: relative;
+    height: calc(var(--WindowFull) - calc(var(--FooterHeight) + var(--TopHeight)));
 }
 
-.footer {
+#content > * {
-    background-color: yellow;
+    margin-top: 5px;
-    height: 20%
+    margin-bottom: 5px;
+}
+
+footer {
+    align-content: center;
+    position: relative;
+    height: var(--FooterHeight);
+    background-color: aquamarine;
 }

src/main/resources/static/css/toast-ui-dark.css

@@ -0,0 +1,474 @@
+@charset "utf-8";
+.toastui-editor-dark.toastui-editor-defaultUI {
+    border-color: #494c56;
+    color: #eee;
+}
+
+.toastui-editor-dark .toastui-editor-md-container,
+.toastui-editor-dark .toastui-editor-ww-container {
+    background-color: #121212;
+}
+
+.toastui-editor-dark .toastui-editor-defaultUI-toolbar {
+    background-color: #232428;
+    border-bottom-color: #303238;
+}
+
+.toastui-editor-dark .toastui-editor-toolbar-icons {
+    background-position-y: -49px;
+    border-color: #232428;
+}
+
+.toastui-editor-dark .toastui-editor-toolbar-icons:not(:disabled):hover {
+    background-color: #36383f;
+    border-color: #36383f;
+}
+
+.toastui-editor-dark .toastui-editor-toolbar-divider {
+    background-color: #303238;
+}
+
+.toastui-editor-dark .toastui-editor-tooltip {
+    background-color: #535662;
+}
+
+.toastui-editor-dark .toastui-editor-tooltip .arrow {
+    background-color: #535662;
+}
+
+.toastui-editor-dark .toastui-editor-defaultUI-toolbar .scroll-sync::before {
+    color: #8f939f;
+}
+
+.toastui-editor-dark .toastui-editor-defaultUI-toolbar .scroll-sync.active::before {
+    color: #67ccff;
+}
+
+.toastui-editor-dark .toastui-editor-defaultUI-toolbar .switch {
+    background-color: #2b4455;
+}
+
+.toastui-editor-dark .toastui-editor-defaultUI-toolbar input:checked + .switch {
+    background-color: #2b4455;
+}
+
+.toastui-editor-dark .toastui-editor-defaultUI-toolbar .switch::before {
+    background-color: #8f939f;
+}
+
+.toastui-editor-dark .toastui-editor-defaultUI-toolbar input:checked + .switch::before {
+    background-color: #67ccff;
+}
+
+.toastui-editor-dark .toastui-editor-main .toastui-editor-md-splitter {
+    background-color: #303238;
+}
+
+.toastui-editor-dark .toastui-editor-mode-switch {
+    border-top-color: #393b42;
+    background-color: #121212;
+}
+
+.toastui-editor-dark .toastui-editor-mode-switch .tab-item {
+    border-color: #393b42;
+    background-color: #232428;
+    color: #757a86;
+}
+
+.toastui-editor-dark .toastui-editor-mode-switch .tab-item.active {
+    border-top-color: #121212;
+    background-color: #121212;
+    color: #eee;
+}
+
+.toastui-editor-dark .toastui-editor-popup,
+.toastui-editor-dark .toastui-editor-context-menu {
+    background-color: #121212;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
+    border-color: #494c56;
+}
+
+.toastui-editor-dark .toastui-editor-popup-add-heading ul li:hover {
+    background-color: #36383f;
+}
+
+.toastui-editor-dark .toastui-editor-popup-body label {
+    color: #9a9da3;
+}
+
+.toastui-editor-dark .toastui-editor-popup-body input[type='text'] {
+    background-color: transparent;
+    color: #eee;
+    border-color: #303238;
+}
+
+.toastui-editor-dark .toastui-editor-popup-body input[type='text']:focus {
+    outline-color: #67ccff;
+}
+
+.toastui-editor-dark .toastui-editor-popup-body input[type='text'].disabled {
+    color: #969aa5;
+    border-color: #303238;
+    background-color: rgba(48, 50, 56, 0.4);
+}
+
+.toastui-editor-dark .toastui-editor-popup-add-image .toastui-editor-tabs .tab-item {
+    border-bottom-color: #292e37;
+    color: #eee;
+}
+
+.toastui-editor-dark .toastui-editor-popup-add-image .toastui-editor-tabs .tab-item:hover {
+    border-bottom-color: #3c424d;
+}
+
+.toastui-editor-dark .toastui-editor-popup-add-image .toastui-editor-tabs .tab-item.active {
+    color: #67ccff;
+    border-bottom-color: #67ccff;
+}
+
+.toastui-editor-dark .toastui-editor-popup-body .toastui-editor-file-name {
+    border-color: #303238;
+    color: #eee;
+}
+
+.toastui-editor-dark .toastui-editor-popup-body .toastui-editor-file-select-button {
+    border-color: #303238;
+    background-color: #232428;
+    color: #eee;
+}
+
+.toastui-editor-dark .toastui-editor-popup-body .toastui-editor-file-select-button:hover {
+    border-color: #494c56;
+}
+
+.toastui-editor-dark.toastui-editor-defaultUI .toastui-editor-close-button {
+    color: #eee;
+    border-color: #303238;
+    background-color: #232428;
+}
+
+.toastui-editor-dark.toastui-editor-defaultUI .toastui-editor-close-button:hover {
+    border-color: #494c56;
+}
+
+.toastui-editor-dark.toastui-editor-defaultUI .toastui-editor-ok-button {
+    color: #121212;
+    background-color: #67ccff;
+}
+
+.toastui-editor-dark.toastui-editor-defaultUI .toastui-editor-ok-button:hover {
+    color: #121212;
+    background-color: #32baff;
+}
+
+.toastui-editor-dark .toastui-editor-popup-add-table .toastui-editor-table-cell {
+    border-color: #303238;
+    background-color: #121212;
+}
+
+.toastui-editor-dark .toastui-editor-popup-add-table .toastui-editor-table-cell.header {
+    border-color: #303238;
+    background-color: #232428;
+}
+
+.toastui-editor-dark .toastui-editor-popup-add-table .toastui-editor-table-selection-layer {
+    border-color: rgba(103, 204, 255, 0.4);
+    background-color: rgba(103, 204, 255, 0.1);
+}
+
+.toastui-editor-dark .toastui-editor-popup-add-table .toastui-editor-table-description {
+    color: #eee
+}
+
+.toastui-editor-dark .toastui-editor-md-tab-container {
+    background-color: #232428;
+    border-bottom-color: #303238;
+}
+
+.toastui-editor-dark .toastui-editor-md-tab-container .tab-item {
+    border-color: #393b42;
+    background-color: #2d2f34;
+    color: #757a86;
+}
+
+.toastui-editor-dark .toastui-editor-md-tab-container .tab-item.active {
+    border-bottom-color: #121212;
+    background-color: #121212;
+    color: #eee;
+}
+
+
+.toastui-editor-dark .toastui-editor-context-menu .menu-group {
+    border-bottom-color: #303238;
+    color: #eee;
+}
+
+.toastui-editor-dark .toastui-editor-context-menu .menu-item span::before {
+    background-position-y: -126px;
+}
+
+.toastui-editor-dark .toastui-editor-context-menu li:not(.disabled):hover {
+    background-color: #36383f;
+}
+
+.toastui-editor-dark .toastui-editor-context-menu li.disabled {
+    color: #969aa5;
+}
+
+.toastui-editor-dark .toastui-editor-dropdown-toolbar {
+    border-color: #494c56;
+    background-color: #232428;
+}
+
+.toastui-editor-dark .ProseMirror,
+.toastui-editor-dark .toastui-editor-contents p,
+.toastui-editor-dark .toastui-editor-contents h1,
+.toastui-editor-dark .toastui-editor-contents h2,
+.toastui-editor-dark .toastui-editor-contents h3,
+.toastui-editor-dark .toastui-editor-contents h4,
+.toastui-editor-dark .toastui-editor-contents h5,
+.toastui-editor-dark .toastui-editor-contents h6 {
+    color: #fff;
+}
+
+.toastui-editor-dark .toastui-editor-contents h1,
+.toastui-editor-dark .toastui-editor-contents h2 {
+    border-color: #fff;
+}
+
+.toastui-editor-dark .toastui-editor-contents del {
+    color: #777980;
+}
+
+.toastui-editor-dark .toastui-editor-contents blockquote {
+    border-color: #303135;
+}
+
+.toastui-editor-dark .toastui-editor-contents blockquote p,
+.toastui-editor-dark .toastui-editor-contents blockquote ul,
+.toastui-editor-dark .toastui-editor-contents blockquote ol {
+    color: #777980;
+}
+
+.toastui-editor-dark .toastui-editor-contents pre {
+    background-color: #232428;
+}
+
+.toastui-editor-dark .toastui-editor-contents pre code {
+    background-color: transparent;
+    color: #fff;
+}
+
+.toastui-editor-dark .toastui-editor-contents code {
+    color: #c1798b;
+    background-color: #35262a;
+}
+
+.toastui-editor-dark .toastui-editor-contents div {
+    color: #fff;
+}
+
+.toastui-editor-dark .toastui-editor-ww-code-block-language {
+    border-color: #303238;
+    background-color: #121212;
+}
+
+.toastui-editor-dark .toastui-editor-ww-code-block-language input {
+    color: #fff;
+}
+
+.toastui-editor-dark .toastui-editor-contents .toastui-editor-ww-code-block:after {
+    background-color: #232428;
+    border: 1px solid #393b42;
+    color: #eee;
+    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjIuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuugiOydtOyWtF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiCgkgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzAgMzAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMwIDMwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6I2ZmZjt9Cjwvc3R5bGU+CjxnPgoJPGc+CgkJPGc+CgkJCTxnPgoJCQkJPGc+CgkJCQkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTE1LjUsMTIuNWwyLDJMMTIsMjBoLTJ2LTJMMTUuNSwxMi41eiBNMTgsMTBsMiwybC0xLjUsMS41bC0yLTJMMTgsMTB6Ii8+CgkJCQk8L2c+CgkJCTwvZz4KCQk8L2c+Cgk8L2c+CjwvZz4KPC9zdmc+Cg==');
+}
+
+.toastui-editor-dark .toastui-editor-contents .toastui-editor-custom-block-editor {
+    background: #392d31;
+    color: #fff;
+    border-color: #327491;
+}
+
+.toastui-editor-dark .toastui-editor-custom-block.ProseMirror-selectednode .toastui-editor-custom-block-view {
+    color: #fff;
+    border-color: #327491;
+}
+
+.toastui-editor-dark .toastui-editor-custom-block-view button {
+    background-color: #232428;
+    border-color: #393b42;
+    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjIuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuugiOydtOyWtF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiCgkgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzAgMzAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMwIDMwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6I2ZmZjt9Cjwvc3R5bGU+CjxnPgoJPGc+CgkJPGc+CgkJCTxnPgoJCQkJPGc+CgkJCQkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTE1LjUsMTIuNWwyLDJMMTIsMjBoLTJ2LTJMMTUuNSwxMi41eiBNMTgsMTBsMiwybC0xLjUsMS41bC0yLTJMMTgsMTB6Ii8+CgkJCQk8L2c+CgkJCTwvZz4KCQk8L2c+Cgk8L2c+CjwvZz4KPC9zdmc+Cg==');
+}
+
+.toastui-editor-dark .toastui-editor-custom-block-view button:hover {
+    background-color: #232428;
+    border-color: #595c68;
+}
+
+.toastui-editor-dark .toastui-editor-custom-block-view .info {
+    color: #65acca;
+}
+
+.toastui-editor-dark .toastui-editor-contents table {
+    border-color: #303238;
+}
+
+.toastui-editor-dark .toastui-editor-contents table th,
+.toastui-editor-dark .toastui-editor-contents table td {
+    border-color: #303238;
+}
+
+.toastui-editor-dark .toastui-editor-contents table th {
+    background-color: #3a3c42;
+}
+
+.toastui-editor-dark .toastui-editor-contents table td,
+.toastui-editor-dark .toastui-editor-contents table td p {
+    color: #fff;
+}
+
+.toastui-editor-dark .toastui-editor-contents td.toastui-editor-cell-selected {
+    background-color: rgba(103, 204, 255, 0.5);
+}
+
+.toastui-editor-dark .toastui-editor-contents th.toastui-editor-cell-selected {
+    background-color: rgba(103, 204, 255, 0.3);
+}
+
+.toastui-editor-dark table.ProseMirror-selectednode {
+    outline-color: #67ccff;
+}
+
+.toastui-editor-dark .html-block.ProseMirror-selectednode {
+    outline-color: #67ccff;
+}
+
+.toastui-editor-dark .toastui-editor-contents ul,
+.toastui-editor-dark .toastui-editor-contents menu,
+.toastui-editor-dark .toastui-editor-contents ol,
+.toastui-editor-dark .toastui-editor-contents dir {
+    color: #55575f;
+}
+
+.toastui-editor-dark .toastui-editor-contents ul > li::before {
+    background-color: #55575f;
+}
+
+.toastui-editor-dark .toastui-editor-contents hr {
+    border-color: #55575f;
+}
+
+.toastui-editor-dark .toastui-editor-contents a {
+    color: #4b96e6;
+}
+
+.toastui-editor-dark .toastui-editor-contents a:hover {
+    color: #1f70de;
+}
+
+.toastui-editor-dark .toastui-editor-contents .image-link:hover::before {
+    border-color: #393b42;
+    background-color: #232428;
+    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj4KICAgICAgICA8ZyBzdHJva2U9IiNFRUUiIHN0cm9rZS13aWR0aD0iMS41Ij4KICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICA8Zz4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNy42NjUgMTUuMDdsLTEuODE5LS4wMDJjLTEuNDg2IDAtMi42OTItMS4yMjgtMi42OTItMi43NDR2LS4xOTJjMC0xLjUxNSAxLjIwNi0yLjc0NCAyLjY5Mi0yLjc0NGgzLjg0NmMxLjQ4NyAwIDIuNjkyIDEuMjI5IDIuNjkyIDIuNzQ0di4xOTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDQ1IC0xNzQzKSB0cmFuc2xhdGUoMTA0MCAxNzM4KSB0cmFuc2xhdGUoNSA1KSBzY2FsZSgxIC0xKSByb3RhdGUoNDUgMzcuMjkzIDApIi8+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTEyLjMyNiA0LjkzNGwxLjgyMi4wMDJjMS40ODcgMCAyLjY5MyAxLjIyOCAyLjY5MyAyLjc0NHYuMTkyYzAgMS41MTUtMS4yMDYgMi43NDQtMi42OTMgMi43NDRoLTMuODQ1Yy0xLjQ4NyAwLTIuNjkyLTEuMjI5LTIuNjkyLTIuNzQ0VjcuNjgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDQ1IC0xNzQzKSB0cmFuc2xhdGUoMTA0MCAxNzM4KSB0cmFuc2xhdGUoNSA1KSBzY2FsZSgxIC0xKSByb3RhdGUoNDUgMzAuOTk2IDApIi8+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=');
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
+}
+
+.toastui-editor-dark .toastui-editor-contents .task-list-item::before {
+    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgc3Ryb2tlPSIjNTU1NzVGIj4KICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTAzMCAtMzE2KSB0cmFuc2xhdGUoNzg4IDE5MikgdHJhbnNsYXRlKDI0MiAxMjQpIj4KICAgICAgICAgICAgICAgICAgICA8cmVjdCB3aWR0aD0iMTciIGhlaWdodD0iMTciIHg9Ii41IiB5PSIuNSIgcng9IjIiLz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==');
+    background-color: transparent;
+}
+
+.toastui-editor-dark .toastui-editor-contents .task-list-item.checked::before {
+    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgZmlsbD0iIzRCOTZFNiI+CiAgICAgICAgICAgIDxnPgogICAgICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTE2IDBjMS4xMDUgMCAyIC44OTUgMiAydjE0YzAgMS4xMDUtLjg5NSAyLTIgMkgyYy0xLjEwNSAwLTItLjg5NS0yLTJWMkMwIC44OTUuODk1IDAgMiAwaDE0em0tMS43OTMgNS4yOTNjLS4zOS0uMzktMS4wMjQtLjM5LTEuNDE0IDBMNy41IDEwLjU4NSA1LjIwNyA4LjI5M2wtLjA5NC0uMDgzYy0uMzkyLS4zMDUtLjk2LS4yNzgtMS4zMi4wODMtLjM5LjM5LS4zOSAxLjAyNCAwIDEuNDE0bDMgMyAuMDk0LjA4M2MuMzkyLjMwNS45Ni4yNzggMS4zMi0uMDgzbDYtNiAuMDgzLS4wOTRjLjMwNS0uMzkyLjI3OC0uOTYtLjA4My0xLjMyeiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEwNTAgLTI5NikgdHJhbnNsYXRlKDc4OCAxOTIpIHRyYW5zbGF0ZSgyNjIgMTA0KSIvPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K');
+}
+
+.toastui-editor-dark .toastui-editor-md-delimiter,
+.toastui-editor-dark .toastui-editor-md-code.toastui-editor-md-delimiter,
+.toastui-editor-dark .toastui-editor-md-thematic-break,
+.toastui-editor-dark .toastui-editor-md-link,
+.toastui-editor-dark .toastui-editor-md-table,
+.toastui-editor-dark .toastui-editor-md-block-quote {
+    color: #55575f;
+}
+
+.toastui-editor-dark .toastui-editor-md-meta,
+.toastui-editor-dark .toastui-editor-md-html {
+    color: #55575f;
+}
+
+.toastui-editor-dark .toastui-editor-md-link.toastui-editor-md-link-url.toastui-editor-md-marked-text {
+    color: #777980;
+}
+
+.toastui-editor-dark .toastui-editor-md-block-quote .toastui-editor-md-marked-text,
+.toastui-editor-dark .toastui-editor-md-list-item .toastui-editor-md-meta {
+    color: #b3b5bc;
+}
+
+.toastui-editor-dark .toastui-editor-md-link.toastui-editor-md-link-desc.toastui-editor-md-marked-text,
+.toastui-editor-dark .toastui-editor-md-list-item-style.toastui-editor-md-list-item-odd {
+    color: #4b96e6;
+}
+
+.toastui-editor-dark .toastui-editor-md-list-item-style.toastui-editor-md-list-item-even {
+    color: #ef6767;
+}
+
+.toastui-editor-dark .toastui-editor-md-table .toastui-editor-md-table-cell {
+    color: #fff;
+}
+
+.toastui-editor-dark .toastui-editor-md-code.toastui-editor-md-marked-text {
+    color: #c1798b;
+}
+
+.toastui-editor-dark .toastui-editor-md-code {
+    background-color: #35262a;
+}
+
+.toastui-editor-dark .toastui-editor-md-code-block-line-background {
+    background-color: #232428;
+}
+
+.toastui-editor-dark .toastui-editor-md-code-block .toastui-editor-md-meta {
+    color: #aaa;
+}
+
+.toastui-editor-dark .toastui-editor-md-custom-block {
+    color: #fff;
+}
+
+.toastui-editor-dark .toastui-editor-md-custom-block-line-background {
+    background-color: #392d31;
+}
+
+.toastui-editor-dark .toastui-editor-md-custom-block .toastui-editor-md-delimiter {
+    color: #327491;
+}
+
+.toastui-editor-dark .toastui-editor-md-custom-block .toastui-editor-md-meta {
+    color: #65acca;
+}
+
+.toastui-editor-dark .toastui-editor-contents .toastui-editor-md-preview-highlight::after {
+    background-color: rgba(255, 250, 193, 0.5);
+}
+
+.toastui-editor-dark .toastui-editor-contents th.toastui-editor-md-preview-highlight,
+.toastui-editor-dark .toastui-editor-contents td.toastui-editor-md-preview-highlight {
+    background-color: rgba(255, 250, 193, 0.5);
+}
+
+.toastui-editor-dark .toastui-editor-contents th.toastui-editor-md-preview-highlight {
+    color: #fff;
+}
+
+.toastui-editor-dark .toastui-editor-contents th.toastui-editor-md-preview-highlight,
+.toastui-editor-dark .toastui-editor-contents td.toastui-editor-md-preview-highlight {
+    background-color: rgba(255, 250, 193, 0.25);
+}
+
+.toastui-editor-dark .toastui-editor-contents .toastui-editor-md-preview-highlight::after {
+    background-color: rgba(255, 250, 193, 0.25);
+}

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

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html
+        xmlns:th="http://www.thymeleaf.org"
+        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+        layout:decorate="~{layout/default_layout}"
+>
+<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">
+        let editor
+        let onChange = () => {console.log(editor.getMarkdown())}
+        document.addEventListener("DOMContentLoaded", onLoaded);
+        function onLoaded() {
+            var h = document.querySelector('#content').getBoundingClientRect().height + 'px'
+            editor = new toastui.Editor({
+                el: document.querySelector('#editor'),
+                height: '500px',
+                width:'100%',
+                viewer: true,
+                usageStatistics : false,
+                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",
+            });
+        }
+        function save() {
+            console.log(editor.getHTML())
+        }
+    </script>
+</head>
+<div layout:fragment="content" id="content">
+    <input id="title_layer" />
+    <div id="editor" ></div>
+    <div id="hashtag_layer">
+        <select > </select>
+        <input id="hashtag"  />
+    </div>
+    <div id="controll_layer" >
+        <button onclick="save()">asdsad</button>
+    </div>
+</div>
+</html>

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

@@ -1,24 +1,19 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml"
+<html
-      xmlns:th="http://www.thymeleaf.org"
+        xmlns:th="http://www.thymeleaf.org"
-      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
-      layout:decorate="~{layout/default_layout}">
+        layout:decorate="~{layout/default_layout}"
-
+>
-<th:block layout:fragment="head">
+<head>
-    <meta charset="utf-8">
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-    <!-- TOAST UI Editor CDN(JS) -->
-    <!--    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>-->
-    <!--    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>-->
-    <!--    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>-->
     <script type="text/javascript"   src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
-    <script type="text/javascript"  src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
+    <script type="text/javascript" th:src="@{/js/toast-ui.js}"></script>
-    <!-- TOAST UI Editor CDN(CSS) -->
+    <link th:href="@{/css/toast-ui.css}" rel="stylesheet" />
-    <link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
+    <link th:href="@{/css/toast-ui-dark.css}" rel="stylesheet" />
-    <link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor-dark.css" />
+<!--    <link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor-dark.css" />-->
-    <title>Spring Boot</title>
     <script th:inline="javascript">
         let editor
+        let onChange = () => {console.log(editor.getMarkdown())}
+        document.addEventListener("DOMContentLoaded", onLoaded);
         function onLoaded() {
             var h = document.querySelector('#content').getBoundingClientRect().height + 'px'
             editor = new toastui.Editor({
@@ -49,20 +44,18 @@
                     "let test= = 'real test'\n" +
                     "```"
                 ,
+                theme:"dark",
                 initialEditType:"wysiwyg",
-                // events : {
-                //   change : this.onChange
-                // },
                 hooks: {
                     addImageBlobHook: (blob, callback) => {
                         const formData = new FormData();
                         formData.append('file', blob);
 
-                        let url = 'blog/post/images/';
+                        let url = 'post/images/';
                         $.ajax({
                             type: 'POST',
                             enctype: 'multipart/form-data',
-                            url: 'blog/post/imageUpload',
+                            url: 'post/imageUpload',
                             data: formData,
                             dataType: 'json',
                             processData: false,
@@ -82,26 +75,19 @@
             });
         }
         function save() {
-            console.log(editor.getMarkdown())
+            console.log(editor.getHTML())
         }
     </script>
-    <link th:href="@{/css/common.css}" rel="stylesheet" />
+</head>
-    <script type="text/javascript" th:src="@{/js/common.js}"></script>
+<div layout:fragment="content" id="content">
-    <script type="text/javascript" th:src="@{/js/user.js}"></script>
+    <input id="title_layer" />
-</th:block>
+    <div id="editor" ></div>
-<body onload="onLoaded()">
-<th:block layout:fragment="header" th:include="@{/fragments/header}"></th:block>
-<div layout:fragment='content' class='content' id='content' style="padding: 10px">
-    <input id="title_layer"  style="width:100%; height:50px; font-size:30px; border-width: 1px; align-content: center; margin: 10px"/>
-    <div id="editor" style="width:90%; font-size:15px; border-width: 0px; align-content: center"></div>
     <div id="hashtag_layer">
-        <select style="width:40%; height:30px; font-size:15px; border-width: 0px"> </select>
+        <select > </select>
-        <input id="hashtag"  style="width:40%; height:30px; font-size:15px; border-width: 0px"/>
+        <input id="hashtag"  />
     </div>
-    <div id="controll_layer"  style="width: 100%">
+    <div id="controll_layer" >
         <button onclick="save()">asdsad</button>
     </div>
 </div>
-<th:block layout:fragment="footer" th:include="@{/fragments/footer}"></th:block>
+</html>
-</body>
-</html>

src/main/resources/templates/content/home.html

@@ -11,12 +11,12 @@
   <link th:href="@{/css/common.css}" rel="stylesheet" />
 </th:block>
 <body>
-<th:block layout:fragment="header" th:include="@{/fragments/header}"></th:block>
+<th:block layout:fragment="header" th:include="@{fragments/header}"></th:block>
 
 <div layout:fragment="content" class="content">
   <h2>This is Content</h2>
 </div>
 
-<th:block layout:fragment="footer" th:include="@{/fragments/footer}"></th:block>
+<th:block layout:fragment="footer" th:include="@{fragments/footer}"></th:block>
 </body>
 </html>

src/main/resources/templates/content/user/join.html

@@ -1,25 +1,19 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml"
+<html
-      xmlns:th="http://www.thymeleaf.org"
+        xmlns:th="http://www.thymeleaf.org"
-      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
-      layout:decorate="~{layout/default_layout}">
+        layout:decorate="~{layout/default_layout}"
-
+>
-<th:block layout:fragment="head">
+<head>
-    <title>Spring Boot</title>
+    <!--css,JS 추가영역-->
     <script th:inline="javascript">
         function jopinClick() {
-            onclickJoin([[${enc}]],[[${key}]])
+            onclickJoin([[${enc}]],[[${keyword}]])
         }
     </script>
-    <!--/* css */-->
-    <link th:href="@{/css/common.css}" rel="stylesheet" />
-    <script type="text/javascript" th:src="@{/js/common.js}"></script>
     <script type="text/javascript" th:src="@{/js/user.js}"></script>
-</th:block>
+</head>
-<body onload="checkDebug()">
+<div layout:fragment="content" id="content">
-<th:block layout:fragment="header" th:include="@{/fragments/header}"></th:block>
-
-<div layout:fragment="content" class="content">
     <table>
         <tr>
             <td><h2>회원가입</h2></td>
@@ -37,7 +31,4 @@
         <tr><td><input type="submit" value="가입하기" class="btn" onclick="jopinClick()"></td></tr>
     </table>
 </div>
-
-<th:block layout:fragment="footer" th:include="@{/fragments/footer}"></th:block>
-</body>
 </html>

src/main/resources/templates/content/user/login.html

@@ -17,7 +17,7 @@
     <script type="text/javascript" th:src="@{/js/user.js}"></script>
 </th:block>
 <body onload="checkDebug()">
-<th:block layout:fragment="header" th:include="@{/fragments/header}"></th:block>
+<th:block layout:fragment="header" th:include="@{fragments/header}"></th:block>
 
 <div layout:fragment="content" class="content">
     <table>
@@ -29,6 +29,6 @@
     </table>
 </div>
 
-<th:block layout:fragment="footer" th:include="@{/fragments/footer}"></th:block>
+<th:block layout:fragment="footer" th:include="@{fragments/footer}"></th:block>
 </body>
 </html>

src/main/resources/templates/fragments/footer.html

@@ -1,5 +1,6 @@
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
+<!DOCTYPE html>
-<div class="footer">
+<html xmlns:th="http://www.thymeleaf.org">
-  <h2>Footer</h2>
+<footer th:fragment="footer">
-</div>
+  asdasdasd
+</footer>
 </html>

src/main/resources/templates/fragments/header.html

@@ -1,5 +1,6 @@
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
+<!DOCTYPE html>
-<div class="header">
+<html xmlns:th="http://www.thymeleaf.org">
-  <h2>Header</h2>
+<header th:fragment="header">
-</div>
+    header.html
+</header>
 </html>

src/main/resources/templates/layout/default_layout.html

@@ -1,15 +1,24 @@
-<html lang="ko"
+<!DOCTYPE html>
-      xmlns:th="http://www.thymeleaf.org"
+<html
-      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
+        lagn="ko"
+        xmlns:th="http://www.thymeleaf.org"
+        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+        xmlns="http://www.w3.org/1999/html">
 
-<!--/* 이곳에 각 view가 위치합니다. */-->
+<head>
-<th:block layout:fragment="head"></th:block>
+  <meta charset="UTF-8" />
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <link th:href="@{/css/common.css}" rel="stylesheet" />
+  <script type="text/javascript" th:src="@{/js/common.js}"></script>
+  <meta name="Referrer" content="origin">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
+</head>
+<body>
+<div th:replace="fragments/header :: header"></div>
 
-<div>
+<div layout:fragment="content"></div>
-  <div layout:fragment="header"></div>
 
-  <div layout:fragment="content"></div>
+<div th:replace="fragments/footer :: footer"></div>
-
+</body>
-  <div layout:fragment="footer"></div>
-</div>
 </html>