|
|
@@ -1,181 +0,0 @@
|
|
|
-<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
|
|
|
-<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
|
|
|
-<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
|
|
|
-<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
|
|
|
-<%@ taglib uri = "http://java.sun.com/jsp/jstl/functions" prefix = "fn" %>
|
|
|
-<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
|
|
|
-
|
|
|
-<jsp:include page="/WEB-INF/jsp/include/head.jsp"></jsp:include>
|
|
|
-<script>
|
|
|
-
|
|
|
- const tagSet = new Set();
|
|
|
- let editForm = null;
|
|
|
- let tagInputArea = null;
|
|
|
- let tagList = null;
|
|
|
-
|
|
|
- window.onload = () => {
|
|
|
- editForm = window.document.querySelector('#editor-form');
|
|
|
- tagInputArea = window.document.querySelector('#tag-input-area');
|
|
|
- tagList = window.document.querySelector('.tag-list');
|
|
|
- }
|
|
|
-
|
|
|
- // window.addEventListener('keypress', (event) => {
|
|
|
- // const target = event.target;
|
|
|
-
|
|
|
- // if (event.keyCode === 13 && target.tagName !== 'TEXTAREA') {
|
|
|
- // event.preventDefault();
|
|
|
- // if (target.id === 'tag-input-area') {
|
|
|
- // const inputValue = tagInputArea.value.trim();
|
|
|
- // if (inputValue !== '') {
|
|
|
- // addTag(tagInputArea.value.trim());
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
- // });
|
|
|
-
|
|
|
- function enterKey(){
|
|
|
- const target = event.target;
|
|
|
-
|
|
|
- if (event.keyCode === 13) {
|
|
|
- event.preventDefault();
|
|
|
- const inputValue = tagInputArea.value.trim();
|
|
|
- if (inputValue !== '') {
|
|
|
- addTag(tagInputArea.value.trim());
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- const addTag = (tag) => {
|
|
|
- if (!tagSet.has(tag)) {
|
|
|
- const spanTag = window.document.createElement('span');
|
|
|
- spanTag.classList.add('tag');
|
|
|
- spanTag.textContent = tag;
|
|
|
-
|
|
|
- const btnDelete = window.document.createElement('i');
|
|
|
- btnDelete.classList.add('fas');
|
|
|
- btnDelete.classList.add('fa-times');
|
|
|
- btnDelete.onclick = (event) => {
|
|
|
- tagList.removeChild(spanTag); // 엘리먼트 제거
|
|
|
- tagSet.delete(tag); // 태그 집합에서 태그 제거
|
|
|
- }
|
|
|
-
|
|
|
- spanTag.append(btnDelete);
|
|
|
- tagList.append(spanTag);
|
|
|
- tagSet.add(tag);
|
|
|
- tagInputArea.value = "";
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- const editFormSubmit = () => {
|
|
|
- if (validateForm()) {
|
|
|
- const json = {};
|
|
|
-
|
|
|
- json['title'] = editForm['article-title'].value;
|
|
|
- json['subtitle'] = editForm['subtitle'].value;
|
|
|
- json['content'] = editForm['article-body'].value;
|
|
|
- json['tags'] = Array.from(tagSet).join(',');
|
|
|
- json['created'] = new Date();
|
|
|
-
|
|
|
- const options = {
|
|
|
- body: JSON.stringify(json),
|
|
|
- method: "post",
|
|
|
- headers: {
|
|
|
- "Content-Type": "application/json"
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- fetch("/article", options)
|
|
|
- .then(response => {
|
|
|
- console.log(response);
|
|
|
- if (response.status === 201) {
|
|
|
- location.href = "/";
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- const validateForm = () => {
|
|
|
- const articleTitle = editForm['article-title'].value;
|
|
|
- console.log(articleTitle);
|
|
|
- if(articleTitle === null || articleTitle === ""){
|
|
|
- alert("제목을 입력해주세요.");
|
|
|
- return false;
|
|
|
- }
|
|
|
- const subtitle = editForm['subtitle'].value;
|
|
|
- if(subtitle === null || subtitle === ""){
|
|
|
- alert("부제목을 입력해주세요.");
|
|
|
- return false;
|
|
|
- }
|
|
|
- const articleBody = editForm['article-body'].value;
|
|
|
- if(articleBody === null || articleBody === ""){
|
|
|
- alert("내용을 입력해주세요.");
|
|
|
- return false;
|
|
|
- }
|
|
|
-
|
|
|
- return true;
|
|
|
- }
|
|
|
-</script>
|
|
|
-</head>
|
|
|
-<body>
|
|
|
- <jsp:include page="/WEB-INF/jsp/include/header.jsp"></jsp:include>
|
|
|
-
|
|
|
- <!-- Editor -->
|
|
|
- <div class="container main editor-page">
|
|
|
- <div class="row">
|
|
|
- <div class="col-10">
|
|
|
- <form
|
|
|
- name="editorForm"
|
|
|
- id="editor-form"
|
|
|
- class="form-group"
|
|
|
- method="post"
|
|
|
- action="/article"
|
|
|
- onsubmit="return false"
|
|
|
- >
|
|
|
- <!-- onsubmit="return validateForm()" -->
|
|
|
- <div class="form-data">
|
|
|
- <input
|
|
|
- type="text"
|
|
|
- class="form-control"
|
|
|
- name="article-title"
|
|
|
- placeholder ="Article Title"
|
|
|
- autocomplete="off"
|
|
|
- >
|
|
|
- </div>
|
|
|
- <div class="form-data">
|
|
|
- <input
|
|
|
- type="text"
|
|
|
- class="form-control form-control-sm"
|
|
|
- name="subtitle"
|
|
|
- placeholder ="What's this article about?"
|
|
|
- autocomplete="off"
|
|
|
- >
|
|
|
- </div>
|
|
|
- <div class="form-data">
|
|
|
- <textarea
|
|
|
- class="form-control form-control-sm"
|
|
|
- rows="8"
|
|
|
- name="article-body"
|
|
|
- placeholder="Write your article (in markdown)"
|
|
|
- ></textarea>
|
|
|
- </div>
|
|
|
- <div class="form-data">
|
|
|
- <input
|
|
|
- id="tag-input-area"
|
|
|
- type="text"
|
|
|
- class="form-control form-control-sm tag-form"
|
|
|
- name="tags"
|
|
|
- placeholder="Enter tags"
|
|
|
- autocomplete="off"
|
|
|
- onkeydown="enterKey()"
|
|
|
- >
|
|
|
- <div class="tag-list">
|
|
|
-
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <button class="btn-signUp" onclick="editFormSubmit()">Publish Article</button>
|
|
|
- </form>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</body>
|
|
|
-</html>
|
