231017_TIL

git branch --list
git checkout {BY}

firebase로 게시판

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<link href="../css/board.css" rel="stylesheet" />
<style>
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
    integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
    crossorigin="anonymous"></script>

<!-- <script type="module" src="../javaScript/board.js"></script> -->
<script type="module">
    import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js'
    import { getFirestore } from 'https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js'
    import {
        collection,
        addDoc,
        getDoc,
        doc,
        updateDoc,
        deleteDoc,
        orderBy,
    } from 'https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js'
    import { getDocs } from 'https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js'

    const firebaseConfig = {
        apiKey: '-----------------',
        authDomain: '----om',
        projectId: 'spa---f',
        storageBucket: 'spar--.com',
        messagingSenderId: '170----39',
        appId: '---fc9f25bde5a5d733a',
        measurementId: '---PZX2',
    }

    // Firebase 인스턴스 초기화
    const app = initializeApp(firebaseConfig)
    const db = getFirestore(app)

    // 게시판 데이터 가져오기
    let docs = await getDocs(collection(db, 'board'));


    $('#boardTbody').empty();
    console.log(docs);
    // 뭔가 번호방법이 있을거같은데 찾아봐야함
    let idx = 1;
    docs.forEach((doc) => {
        let row = doc.data();
        let id = doc.id;
        let boardDateTime = row.boardDateTime;
        let boardTitle = row.boardTitle;
        let boardContent = row.boardContent;

        let temp_html = `
            <tr data-documentId=${id}>
                <td>${idx++}</td>
                <td>${boardDateTime}</td>
                <td class="boardTitleTd">${boardTitle}</td>
            </tr>
        `;
        $('#boardTbody').append(temp_html);
    });

    // 게시판 등록
    $('#boardModalWriteBtn').on('click', async function () {
        let boardTitle = $('#boardTitle').val();
        let boardContent = $('#boardContent').val();

        let doc = {
            'boardId': '',
            'boardDateTime': getDateTime(),
            'boardTitle': boardTitle,
            'boardContent': boardContent
        };
        await addDoc(collection(db, "board"), doc);
        window.location.reload();
    });

    // 게시판 제목 클릭시
    $(document).on('click', '.boardTitleTd', async function () {
        let id = this.parentNode.dataset.documentid;

        let docRef = doc(db, 'board', id);
        let docSnap = await getDoc(docRef);
        let docData = docSnap.data();

        $('#boardTitle').val(docData.boardTitle);
        $('#boardContent').val(docData.boardContent);

        $('#boardModalWriteBtn').hide();
        $('#boardModalUpdateBtn').show();
        $('#boardModalDeleteBtn').show();

        let bsBoardModal = new bootstrap.Modal($('#boardModal'));
        bsBoardModal.show();

        // 수정버튼 
        $('#boardModalUpdateBtn').click(async function () {
            await updateDoc(docRef, {
                boardTitle: $('#boardTitle').val(),
                boardContent: $('#boardContent').val()
            });
            window.location.reload();
        });

        // 삭제버튼 
        $('#boardModalDeleteBtn').click(async function () {
            await deleteDoc(docRef);
            window.location.reload();
        });
    });

</script>
<script>
    // 글쓰기 버튼 클릭시
    $(document).on('click', '#boardModalBtn', function () {
        $('#boardModalForm')[0].reset();

        $('#boardModalWriteBtn').show();
        $('#boardModalUpdateBtn').hide();
        $('#boardModalDeleteBtn').hide();

        let bsBoardModal = new bootstrap.Modal($('#boardModal'));
        bsBoardModal.show();
    });

    function getDateTime() {
        let now = new Date();
        //연도 구하기
        let nowYear = now.getFullYear();
        //달 구하기
        let nowMonth = now.getMonth() + 1;
        //일 구하기
        let nowDate = now.getDate();
        //현재 시 구하기
        let nowHours = now.getHours();
        //현재 분 구하기
        let nowMins = now.getMinutes();
        //현재 초 구하기
        let nowSec = now.getSeconds();

        let today = `${nowYear}-${nowMonth}-${nowDate} ${nowHours}:${nowMins}:${nowSec}`;

        return today;
    }

</script>

    <!-- board -->
    <div>
        <h4>회의록게시판</h4>
        <table class="table">
            <thead class="table-light">
                <tr>
                    <th>번호</th>
                    <th>날짜</th>
                    <th>제목</th>
                </tr>
            </thead>
            <tbody id="boardTbody">
            </tbody>
        </table>

        <div class="">
            <nav aria-label="...">
                <ul class="pagination justify-content-center">
                    <li class="page-item disabled">
                        <a class="page-link" href="#" tabindex="-1" aria-disabled="true">＜</a>
                    </li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item active" aria-current="page">
                        <a class="page-link" href="#">2</a>
                    </li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item">
                        <a class="page-link" href="#">＞</a>
                    </li>
                </ul>
            </nav>
        </div>

        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
            <!-- <button class="btn btn-primary me-md-2" type="button">글쓰기</button> -->
            <button class="btn btn-secondary" type="button" id="boardModalBtn">글쓰기</button>
        </div>

        <div class="modal" id="boardModal" tabindex="-1">
            <form id="boardModalForm">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">회의록</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div>
                                <div class="mb-3">
                                    <label for="boardTitle" class="form-label">제목</label>
                                    <input type="text" class="form-control" id="boardTitle" placeholder="제목">
                                </div>
                                <div class="mb-3">
                                    <label for="boardContent" class="form-label">내용</label>
                                    <textarea class="form-control" id="boardContent" placeholder="내용"
                                        rows="5"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
                            <button type="button" class="btn btn-secondary" id="boardModalWriteBtn">등록</button>
                            <button type="button" class="btn btn-secondary" id="boardModalUpdateBtn">수정</button>
                            <button type="button" class="btn btn-secondary" id="boardModalDeleteBtn">삭제</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- board end -->
</div>
<!-- wrap end -->