main.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rolling</title>
    <link rel="shortcut icon" type="image/x-icon" href="../img/logo.svg">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
    <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
</head>

<body>
    <header>
        <!-- <i class="bi bi-chevron-left"></i> -->
        <div class="title" onclick="goHome()">Rolling</div>
    </header>
    <main>
        <div class="add-page">
            <button class="add-btn">
                <a href="./rolling-paper-creating.html">
                    <img src="./img/plus.png" alt="페이지 더 만들기">
                </a>
            </button>
        </div>
        <div class="list">
            <div class="search">
                <input type="text" class="search" id="search" onkeydown="doKeyDown(event)">

                <img src="img/search-outline.svg" alt="검색버튼" onclick="doKeyDown(event=`onclick`)">

            </div>
            <div class="pages"></div>
        </div>
    </main>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        showRollingPaperList();


        // 2. ajax 함수 이용해서 api 호출, success 응답 호출 해보기
        function showRollingPaperList() {

            $.support.cors = true;
            $.ajax({
                type: 'get',           // 타입 (get, post, put 등등)
                url: 'http://localhost:3000/api/rollingpapers',           // 요청할 서버url
                async: true,            // 비동기화 여부 (default : true)
                dataType: 'json',       // 데이터 타입 (html, xml, json, text 등등)
                data: {},
                success: function (result) { // 결과 성공 콜백함수
                    result.result.forEach((result) => {
                        var lastDate = parseInt(result.created_at.substr(9, 1)) + 1;// +1을 하지 않으면 12일이 11일이 됨
                        console.log(result);
                        setRollingPaperHtml(result.id, result.title, result.sender, result.created_at.substr(0, 9) + lastDate.toString());
                    });
                }
            });
        }

        function setRollingPaperHtml(id, title, sender, date) {
            $(".pages").append(getRollingPaperHtml(id, title, sender, date));// html - 덮어씌우기, append - 추가하기
        }

        function getRollingPaperHtml(id, title, sender, date) {
            return `<div class="paper" id="paper" onclick="showRollingPaper(${id})">
                        <div class="title">${title}</div>
                        <div class="detail">
                            <div class="from">From. ${sender}</div>
                            <div class="date">${date}</div>
                        </div>
                    </div>`;
        }

        function showRollingPaper(id) {
            console.log("creating입니다");
            location.href = `./write-rolling-paper.html?paper_id=${id}`;
        }
    </script>
    <script>
        // 검색
        function doKeyDown(event) {
            if (event.keyCode === 13 || event === 'onclick') {// enter키이거나 검색 버튼이 클릭됐다면
                var input = $("#search").val();
                if (input === '') {// 빈칸 검색이면 전체 롤링페이퍼 띄우기
                    deleteDivList();
                    showRollingPaperList();
                } else {
                    deleteDivList();
                    findIncludedWord(input);// 검색한 값에 따른 title 보기
                }
            }
        }

        // 해당 키워드가 포함되어있는지를 확인
        function findIncludedWord(input) {
            // window.location.replace('main.html?title='+input);
            $.support.cors = true;
            $.ajax({
                type: 'get',           // 타입 (get, post, put 등등)
                url: 'http://localhost:3000/api/rollingpapers',           // 요청할 서버url
                async: true,            // 비동기화 여부 (default : true)
                dataType: 'json',       // 데이터 타입 (html, xml, json, text 등등)
                data: {},
                success: function (result) { // 결과 성공 콜백함수
                    result.result.forEach((result) => {
                        // var div = document.getElementById("paper");
                        // div.remove();
                        deleteDivList();
                        var title = result.title;
                        // console.log(typeof title);
                        if (title.includes(input)) {
                            // console.log(title);
                            search(result.id);
                        }
                    });
                }
            });
        }

        // 제목으로 검색하기
        function search(id) {
            $.support.cors = true;
            $.ajax({
                type: 'get',           // 타입 (get, post, put 등등)
                url: 'http://localhost:3000/api/rollingpapers',           // 요청할 서버url
                async: true,            // 비동기화 여부 (default : true)
                dataType: 'json',       // 데이터 타입 (html, xml, json, text 등등)
                data: {},
                success: function (result) { // 결과 성공 콜백함수
                    result.result.forEach((result) => {
                        if (result.id === id) {
                            var lastDate = parseInt(result.created_at.substr(9, 1)) + 1;// +1을 하지 않으면 12일이 11일이 됨
                            console.log(result);
                            setRollingPaperHtml(result.id, result.title, result.sender, result.created_at.substr(0, 9) + lastDate.toString());
                        }
                    });
                }
            });
        }

        // (검색) 롤링페이퍼 div 전체 지우기
        function deleteDivList() {
            var div = document.getElementById("paper");
            if ( div ) // div태그가 있는지 확인
                div.remove();
        }
    </script>
    <script src="./js/script.js"></script>

</body>

</html>