JUST GO

[공통] 게시판 만들기 본문

Spring Boot/학습내용

[공통] 게시판 만들기

root_go 2022. 11. 15. 12:44

bbs/write.html

<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>스터디 - 글 쓰기</title>
    <th:block th:replace="~{fragments/head :: common}"></th:block>
    <link rel="stylesheet" th:href="@{/bbs/resources/stylesheets/write.css}">
    <script defer th:src="@{/resources/libraries/ckeditor/ckeditor.js}"></script>
    <script defer th:src="@{/bbs/resources/scripts/write.js}"></script>
</head>
<body>
<th:block th:replace="~{fragments/body :: header}"></th:block>
<th:block th:replace="~{fragments/body :: cover}"></th:block>
<main class="--main main">
    <form class="content --content" id="form">
    <hi class="title">글 쓰기</hi>
    <table class="table" id="table">
        <tbody>
            <tr>
                <th>제목</th>
                <td>
                    <label class="label">
                        <span hidden>제목</span>
                        <input class="--object-input input" maxlength="100" name="title" placeholder="제목을 입력해 주세요." type="text">
                    </label>
                </td>
            </tr>
        <tr>
            <th>내용</th>
            <td>
                <label class="label">
                    <span hidden>내용</span>
                    <textarea class="--object-input input" maxlength="10000" name="content" placeholder="내용을 입력해주세요." type="text"></textarea>
                </label>
            </td>
        </tr>
        <tr class="warning-row" rel="warningRow">
            <th></th>
            <td>
                <span class="warning">
                    <i class="icon fa-solid fa-triangle-exclamation"></i>
                    <span class="text">제목을 입력해 주세요.</span>
                </span>
            </td>
        </tr>
        <tr>
            <th></th>
            <td>
                <div class="button-container">
                    <input class="--object-button" name="back" type="button" value="돌아가기">
                    <input class="--object-button" name="submit" type="submit" value="작성하기">
                </div>
            </td>
        </tr>
        </tbody>
    </table>
    </form>
</main>
<th:block th:replace="~{fragments/body :: footer}"></th:block>
</body>
</html>

bbs/write.css

@charset "UTF-8";

body > .main > .content {
    margin: 5rem 0;

    align-items: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

body > .main > .content > .title {
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 2.5rem;
}

#form > .table .warning-row {
    /*display: none;*/
}

#form > .table .warning-row.visible {
    display: table-row;
}

#form > .table .warning-row .warning {
    background-color: rgb(231, 76, 60);
    border-radius: 0.375rem;
    color: rgb(255, 255, 255);
    font-size: 1rem;
    margin-top: 0.25rem;
    padding: 1rem 1.25rem;

    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

#form > .table .warning-row .warning > .icon {
    /*animation-name: anim-warning-icon;*/
    /*animation-duration: 1.5s;*/
    /*animation-iteration-count: infinite;*/
    /*animation-timing-function: ease-in-out;*/
    font-size: 1.5rem;
    margin: 0 1.25rem 0 0.25rem;
}

#form > .table .warning-row .warning > .text {
    flex: 1;
    text-align: justify;
}

#form > .table .button-container {
    align-items: stretch;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 0.25rem;
}

#form > .table .button-container > [name="back"] {
    background-color: rgb(86, 101, 115);
}

#form > .table .button-container > [name="back"]:hover {
    background-color: rgb(65, 82, 98);
}

#form > .table .button-container > [name="back"]:active {
    background-color: rgb(44, 62, 80);
}

bbs/write.js

const form = window.document.getElementById('form');

const Warning = {
    getElement: () => form.querySelector('[rel="warningRow"]'),
    show: (text) => {
        const warningRow = Warning.getElement();
        warningRow.querySelector('.text').innerText = text;
        warningRow.classList.add('visible');
    },
    hide: () => Warning.getElement().classList.remove('visible')
};

let editor;
ClassicEditor
    .create(form['content'])
    .then( e => editor = e );

form['back'].addEventListener('click', () => window.history.length < 2 ? window.close() : window.history.back());

form.onsubmit = e => {
    e.preventDefault();
    Warning.hide();

    if (form['title'].value === ''){
        Warning.show('제목을 입력해 주세요.');
        form['title'].focus();
        return false;
    }
    if (editor.getData() === ''){
        Warning.show('내용을 입력해 주세요.');
        editor.focus();
        return false;
    }

}

 

'Spring Boot > 학습내용' 카테고리의 다른 글

[공통] 페이징(Paging) 혹은 페이지네이션(Pagination)  (1) 2022.11.30
[공통] 글 수정 구현  (0) 2022.11.28
[공통] 라이브러리  (1) 2022.11.15
js intersectionobserver 이용해봐도 좋음  (0) 2022.11.14
[공통] 게시글  (0) 2022.11.14
'Spring Boot/학습내용' Related Articles more