dbs333
/
RealWorld


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
							<%@ 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');
        
        const article = "${article}";

        if (article !== "") {
            editForm['article-title'].value = "${article.title}";
            editForm['subtitle'].value = "${article.subtitle}";
            editForm['article-body'].value = "${article.content}";

            const strTags = "${article.tags}";
            strTags.split(',').forEach(tag => {
                addTag(tag);
            });
        }
    }

    function enterKeys(){
        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);

            console.log(spanTag);

            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 => {
                    if (response.status === 201) {
                        return response.json();
                    }
                })
                .then(json => {
                    location.href = "/article/" + json.id;
                })
        }
    }

    const validateForm = () => {
        const articleTitle = editForm['article-title'].value;
        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>