21.01.13 상세페이지 markup 입력시 오류 수정 및 private, setter, getter 도입

<Article.java>

package com.sbs.example.mysqlTextBoard.dto;

import java.util.Map;

import lombok.Data;

@Data
public class Article {

	public Article(Map<String, Object> articlesMap) {
		this.id = (int) articlesMap.get("id");
		this.regDate = (String) articlesMap.get("regDate");
		this.updateDate = (String) articlesMap.get("updateDate");
		this.title = (String) articlesMap.get("title");
		this.body = (String) articlesMap.get("body");
		this.boardId = (int) articlesMap.get("boardId");
		this.memberId = (int) articlesMap.get("memberId");
		this.likesCount = (int) articlesMap.get("likesCount");
		this.commentsCount = (int) articlesMap.get("commentsCount");
		this.hitCount = (int) articlesMap.get("hitCount");


		if (articlesMap.containsKey("extra_memberName")) {
			this.extra_memberName = (String) articlesMap.get("extra_memberName");
		}

	}

	public Article() {

	}

	private int id;
	private String regDate;
	private String updateDate;
	private String title;
	private String body;
	private int boardId;
	private int memberId;
	private String extra_memberName;
	private int likesCount;
	private int commentsCount;
	private int hitCount;
	public int getId() {
		return id;
	}

}

 

<BuildService.java>

// 게시판 별 게시물 상세페이지 생성
	private void buildArticleDetailPages() {
		List<Board> boards = articleService.getBoards();

		for (Board board : boards) {
			List<Article> articles = articleService.getBoardArticlesByCodeForPrint(board.getCode());
			int articlesSize = articles.size();

			if (articlesSize <= 0) {
				continue;
			}
			int beforeArticleIndex = 0;
			int x = beforeArticleIndex;
			int beforeArticleId = articles.get(x).getId();

			// String head = getHeadHtml("article_detail");
			String sideBar = getSideBarHtml();
			String topButton = Util.getFileContents("site_template/top-button.html");
			String foot = Util.getFileContents("site_template/foot.html");

			String template = Util.getFileContents("site_template/detail.html");

			System.out.println("= article 상세페이지 생성 =");

			for (Article article : articles) {

				String head = getHeadHtml("article_detail", article);

				StringBuilder html = new StringBuilder();

				html.append(head);
				
				String articleBody = article.getBody();
				articleBody = articleBody.replaceAll("script", "t-script");
				
				StringBuilder body = new StringBuilder();

				body.append("<div class=\"article-detail-cell__board-name\">");
				body.append("<div>");
				body.append("<span>게시판 : </span><span>" + board.getName() + " 게시판</span>");
				body.append("</div>");
				body.append("</div>");
				body.append("<div class=\"article-detail-cell__id\">");
				body.append("<div>");
				body.append("<span>번호 : </span><span>" + article.getId() + "</span>");
				body.append("</div>");
				body.append("</div>");
				body.append("<div class=\"article-detail-cell__member-id\">");
				body.append("<div>");
				body.append("<span>작성자 : </span><span>" + article.getExtra_memberName() + "</span>");
				body.append("</div>");
				body.append("</div>");
				body.append("<div class=\"article-detail-cell__reg-date\">");
				body.append("<div>");
				body.append("<span>작성일 : </span><span>" + article.getRegDate() + "</span>");
				body.append("</div>");
				body.append("</div>");
				body.append("<div class=\"article-detail-cell__update-date\">");
				body.append("<div>");
				body.append("<span>수정일 : </span><span>" + article.getUpdateDate() + "</span>");
				body.append("</div>");
				body.append("</div>");
				body.append("<div class=\"article-detail-cell__hitsCount\">");
				body.append("<div>");
				body.append("<span>조회수 : </span><span>" + article.getHitCount() + "</span>");
				body.append("</div>");
				body.append("</div>");
				body.append("<div class=\"article-detail-cell__likesCount\">");
				body.append("<div>");
				body.append("<span>추천수 : </span><span>" + article.getLikesCount() + "</span>");
				body.append("</div>");
				body.append("</div>");
				body.append("<div class=\"article-detail-cell__commentsCount\">");
				body.append("<div>");
				body.append("<span>댓글수 : </span><span>" + article.getCommentsCount() + "</span>");
				body.append("</div><br>");
				body.append("</div>");
				body.append("<div class=\"article-detail-cell__title\">");
				body.append("<div>");
				body.append("<span>제목 : </span><span>" + article.getTitle() + "</span>");
				body.append("</div>");
				body.append("</div>");
				body.append("<script type\"text/x-template\">");
				body.append(articleBody);
				body.append("</script>");
				body.append("<div class=\"article-detail-cell__body height-70p toast-ui-viewer\">");
				body.append("<div>");
				//body.append("<span>" + article.getBody() + "</span>");
				body.append("</div>");
				body.append("</div><br>");
				body.append("<div class=\"article-detail-cell__tag\">");
				body.append("<nav># <a href=\"#\" target=\"_blank\">" + "tag.title" + "</a></nav>");
				body.append("</div><br><br>");

				// discus에게 정확한 페이지 경로 알려주기
				String domainUrl = Container.appConfig.getSiteDomain();
				String pageUrl = getArticleFileName(article);

				// 상세페이지 하단 메뉴

				StringBuilder pageMenuBody = new StringBuilder();

				if (article.getId() > beforeArticleId) {
					pageMenuBody.append("<div class=\"./\"><a href=\"article_detail_" + articles.get(x - 1).getId() + ".html"
							+ "\" class=\"hover-underline\">&lt 이전글</a></div>");
				}

				pageMenuBody.append("<div class=\"./\"><i class=\"fas fa-th-list\"></i><a href=\"" + board.getCode()
						+ "-list-1.html" + "\" class=\"hover-underline\"> 목록 </a></div>");
				if (x < articlesSize - 1) {
					pageMenuBody.append("<div class=\"./\"><a href=\"article_detail_" + articles.get(x + 1).getId() + ".html"
							+ "\"class=\"hover-underline\">다음글 &gt</a></div>");
				}

				String bodyTemplate = template.replace("[상세페이지 블록]", body); // list 템플릿에 mainBody 끼워넣고
				bodyTemplate = bodyTemplate.replace("[사이트 도메인]", domainUrl);
				bodyTemplate = bodyTemplate.replace("[사이트 이름.html]", pageUrl);
				html.append(bodyTemplate.replace("[상세페이지 하단 메뉴 블록]", pageMenuBody)); // bodyTemplate에 다시 pageMenuBody
																						// 끼워넣기
				html.append(sideBar);
				html.append(topButton);
				html.append(foot);

				String fileName = getArticleFileName(article);
				String path = "site/" + fileName;

				Util.writeFile(path, html.toString());

				System.out.println(path + " 생성");
				x++;
				beforeArticleId = articles.get(x - 1).getId();

			}
			System.out.println("= article 상세페이지 생성 종료 =");

		}
	}

<app.js>

function ArticleDetail__Body__init() {
	if (toastui === undefined) {
		return;
	}


/* 유튜브 함수 시작 */

	//유튜브 영상임을 감지하고 공간을 형성하는 함수
	function youtubePlugin() {
		toastui.Editor.codeBlockManager.setReplacer('youtube', youtubeId => {
			// Indentify multiple code blocks
			const wrapperId = `yt${Math.random()
				.toString(36)
				.substr(2, 10)}`;

			// Avoid sanitizing iframe tag
			setTimeout(renderYoutube.bind(null, wrapperId, youtubeId), 0);

			return `<div id="${wrapperId}"></div>`;
		});
	}
	//유튜브 영상 렌더링 함수
	function renderYoutube(wrapperId, youtubeId) {
		const el = document.querySelector(`#${wrapperId}`);

		el.innerHTML = `<div class="toast-ui-youtube-plugin-wrap"><iframe src="https://www.youtube.com/embed/${youtubeId}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>`;
	}
	/* 유튜브 함수 끝 */
	
	
	
	/* codepen 함수 시작 */
function codepenPlugin() {
  toastui.Editor.codeBlockManager.setReplacer('codepen', url => {
    const wrapperId = `yt${Math.random().toString(36).substr(2, 10)}`;

    // Avoid sanitizing iframe tag
    setTimeout(renderCodepen.bind(null, wrapperId, url), 0);

    return `<div id="${wrapperId}"></div>`;
  });
}

function renderCodepen(wrapperId, url) {
  const el = document.querySelector(`#${wrapperId}`);
  
  var urlParams = new URLSearchParams(url.split('?')[1]);
  var height = urlParams.get('height');

  el.innerHTML = `<div class="toast-ui-codepen-plugin-wrap"><iframe height="${height}" scrolling="no" src="${url}" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe></div>`;
}
/* codepen 함수 끝 */
	
	


/* toastui-viewr 함수 시작 */
function EditorViewer__init() {
	  $('.toast-ui-viewer').each(function(index, node) {
	    var initialValue = $(node).prev().html().trim().replace(/t-script/gi, 'script');

//	var body = document.querySelector('.article-detail-cell__body > div > span');
//	var initValue = body.innerHTML.trim();

	
	var viewer = new toastui.Editor.factory({
		el: node,
		initialValue: initialValue,
		viewer: true,
		plugins: [toastui.Editor.plugin.codeSyntaxHighlight, youtubePlugin, codepenPlugin]
	});
});
}
	EditorViewer__init();
}

ArticleDetail__Body__init();

/* toastui-viewr 함수 끝 */




/* top-button 옵션 시작 */
$(function() {  
  // 보이기 | 숨기기
  $(window).scroll(function() { 
    if ($(this).scrollTop() < 200) { 
    //200 넘으면 버튼이 보임 
     $('.top-button').fadeOut(); 
  } else { 
    $('.top-button').fadeIn();
  } 
  }); 
  // 버튼 클릭시 0 까지 animation 이동합니다. 
  $(".top-button").click(function() {
    $('html, body').animate({ 
      scrollTop : 0 }, 200); // 속도 200 
    return false; 
  }); 

});

/* top-button 옵션 끝 */