026fe79dfb
#### 요구사항 - 기능 요구사항 __기본기능__ v 권한 구분 관리자 권한 구현 v 깃헙아이디, 구글아이디로 로그인 가능 v 블로그 기본 CRUD v 연관글 등록 v 이미지 삽입시 이미지서버에 선업로드 후 URL반환 v 댓글과 대댓글 구현 v 랜드화면은 무한스크롤 구현 v 카테고리 화면에서는 일반 페이징 v 토스트 에디터 사용 v 게시물 조회수 순위별 v 최근 게시물 v 최근 코멘트 노출 v 블로그 태그별 검색과 태그 보이기 v 일반 검색기능 v 썸네일 링크로 추가 -----11.18 - 카테고리 목록 설정 __추가기능__ - TOC - 글 1분단위 자동저장 - 새로운글 알람 보내기 - RSS피드 - 공유하기 기능 - 글 포스팅시 자동 커밋 푸시
151 lines
6.5 KiB
HTML
151 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html th:replace="~{layout/layout.html :: layout(~{::head}, ~{::section})}"
|
|
lang="ko" xmlns:th="http://www.thymeleaf.org"
|
|
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5" xmlns="http://www.w3.org/1999/html">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Jinia's Log - 글 작성</title>
|
|
<!-- SEO -->
|
|
<meta name="description" content=""/>
|
|
<meta name="keyword" content=""/>
|
|
<meta name="author" content="jinia"/>
|
|
<meta name="viewport" content="width=device-width, user-scalable = no, initial-scale=1.0"/>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
|
|
|
<!-- OPEN GRAPH(FACEBOOK, LINKEDIN) -->
|
|
<meta property="og:type" content=""/>
|
|
<meta property="og:description" content=""/>
|
|
<meta property="og:title" content=""/>
|
|
<meta property="og:image" content=""/>
|
|
<meta property="og:url" content=""/>
|
|
<meta property="og:site_name" content=""/>
|
|
|
|
<!-- twitter -->
|
|
<meta property="twitter:card" content=""/>
|
|
<meta property="twitter:title" content=""/>
|
|
<meta property="twitter:description" content=""/>
|
|
<meta property="twitter:image" content=""/>
|
|
<meta property="twitter:url" content=""/>
|
|
<meta property="twitter:creator" content=""/>
|
|
|
|
<link rel="icon" href=""/>
|
|
<link rel="apple-touch-icon" href=""/>
|
|
<link rel="short icon" type="image/x-icon" href=""/>
|
|
|
|
<!-- CSS RESET -->
|
|
<link rel="stylesheet" href="/node_modules/@toast-ui/editor/dist/toastui-editor.css"/>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"/>
|
|
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css"/>
|
|
<link rel="stylesheet" href="/node_modules/@yaireo/tagify/dist/tagify.css"/>
|
|
<link rel="stylesheet" href="/css/mainCss.css"/>
|
|
<link rel="stylesheet" href="/css/articleWrite.css"/>
|
|
|
|
<script src="https://kit.fontawesome.com/233840a552.js" crossorigin="anonymous"></script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<section>
|
|
|
|
<div id="thumbBox" style="display: none">
|
|
<div class="card d-flex align-items-center justify-content-center thumbBox">
|
|
<img src="" id="thumbnailPreView" class="card-img-top w-100 vh-100 cover thumbImg" alt="">
|
|
<button id="thumbDelBtn" class="thumbDelBtn"><i class="far fa-trash-alt "></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-xxl-none p-0" style="margin-bottom: 100px"></div>
|
|
|
|
<div class="container">
|
|
<div class="row justify-content-center mt-5 mb-3 g-0">
|
|
|
|
<div class="d-flex flex-row-reverse">
|
|
|
|
<button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#thumbnailModal">
|
|
썸네일 등록
|
|
</button>
|
|
|
|
<div class="modal fade" id="thumbnailModal" tabindex="-1" aria-labelledby="thumbnailModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="thumbnailModalLabel">썸네일 등록</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-footer">
|
|
|
|
<input type="text" id="thumbnail-url-upload-input" class="form-control">
|
|
<button class="btn btn-secondary" id="thumbnail-url-upload-btn">URL 업로드</button>
|
|
<label class="btn btn-secondary" for="thumbnail">파일 업로드</label>
|
|
<input type="file" id="thumbnail" name="thumbnail" accept="image/*" class="d-none">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<form class="" method="post" enctype="multipart/form-data" th:object="${articleDto}"
|
|
th:action="@{/article/write}" id="writeArticleForm">
|
|
|
|
<textarea type="text" name="thumbnailUrl" id="thumbnailUrl" hidden></textarea>
|
|
|
|
<div class="mt-3 mb-3">
|
|
<select id="category" name="category" class="form-select ps-3" aria-label="Select category">
|
|
<option selected>카테고리를 선택해주세요</option>
|
|
<option th:each="categoryOption : ${categoryInput}" th:value="${categoryOption.getTitle()}" th:text="${categoryOption.getTitle()}" >Java</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<input id="title" name="title" type="text" class="form-control ps-3" placeholder="제목을 입력해주세요" required max="30">
|
|
</div>
|
|
<div class="form-group">
|
|
<textarea type="text" name="content" id="content" hidden></textarea>
|
|
</div>
|
|
|
|
<div class="row justify-content-center mt-4 mb-3 g-0">
|
|
<label for="editor"></label>
|
|
<div class=" "><div style="background: white" id="editor"></div></div>
|
|
</div>
|
|
|
|
<div class="mt-3">
|
|
<input id="tags" type="text" name="tags" placeholder="태그"
|
|
class="form-control tagify-outside ps-3" aria-describedby="tagHelp"/>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
<!-- -->
|
|
|
|
|
|
<div class="row justify-content-evenly mt-4 mb-5 g-0">
|
|
<button class="btn btn-secondary col-4" onclick="post()">등 록</button>
|
|
<button class="btn btn-secondary col-4" onclick="javascript:history.back()">취 소</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!--scripts-->
|
|
|
|
<script th:inline="javascript">
|
|
const tags = [[${tagsInput}]];
|
|
let whitelist = [];
|
|
for (let tag of tags) {
|
|
whitelist.push(tag.name)
|
|
}
|
|
</script>
|
|
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="/node_modules/@yaireo/tagify/dist/tagify.min.js"></script>
|
|
<script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
|
|
<script src="/js/getCsrf.js"></script>
|
|
<script src="/js/editor.js"></script>
|
|
<script src="/js/tags.js"></script>
|
|
<script src="/js/thumbnail.js"></script>
|
|
|
|
</section>
|
|
|
|
</body>
|
|
</html> |