write-rolling-paper.html

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

<head>
    <meta charset="UTF-8">
    <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">
    <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="./css/write-rolling-paper.css">
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <div id="wrap">
        <header>
            <i class="bi bi-chevron-left" onclick="window.location.href='./main.html';"></i>
            <div class="title" onclick="goHome()">Rolling</div>
        </header>
        <main>
            <div class="top_box">
                <div class="rec_box">
                </div>
                <button id="sharebtn"><iconify-icon icon="ph:share-fat-fill" width="25"
                        height="23"></iconify-icon></button>
            </div>
            <div class="middle_box"></div>
            <div class="bottom_box">
                <div class="btn edit" onclick="createPaper()"><iconify-icon icon="mdi:pencil-add" width="30"
                        height="28"></iconify-icon></div>
                <div class="btn emoji" onclick="addEmoji()"><iconify-icon icon="mdi:emoji" width="30"
                        height="29"></iconify-icon></div>
                <div class="btn delete" onclick="deletePaper()"><i class="bi bi-trash3-fill"></i></div>
            </div>

        </main>
        <button class="send_btn">전송하기</button>
    </div>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script>

        const url = new URL(window.location.href);
        console.log(url);

        // URLSearchParams 객체
        const urlParams = url.searchParams;

        // URLSearchParams.get()
        let paper_id = urlParams.get('paper_id');
        let id;
        let content;
        let writer;
        let font;
        let receiver = "";

        // 2. ajax 함수 이용해서 api 호출, success 응답 호출 해보기
        $.support.cors = true;
        $.ajax({
            type: 'get',           // 타입 (get, post, put 등등)
            url: `http://localhost:3000/api/rollingpapers/${paper_id}`,           // 요청할 서버url
            async: true,            // 비동기화 여부 (default : true)
            dataType: 'json',       // 데이터 타입 (html, xml, json, text 등등)
            data: {},
            contentType: "application/json",
            success: function (result) { // 결과 성공 콜백함수
                console.log(result);
                receiver = result.result.receiver;
                setRollingPaperHtml(receiver);// 받는 사람 띄우기
            }
        });

        function setRollingPaperHtml(receiver) {
            $(".rec_box").append(getRollingPaperHtml(receiver));// html - 덮어씌우기, append - 추가하기
        }

        function getRollingPaperHtml(receiver) {
            return `<div class="rec_tit">To.</div>
                    <div id="recipient_input">${receiver}</div>`;
        }

        function createPaper() {
            console.log(paper_id);
            window.location.href = `../write-rolling-paper-creating.html?paper_id=${paper_id}`;
        }

        async function deletePaper() {
            // const url = new URL(window.location.href);
            paper_id = url.searchParams.get('paper_id');

            if (confirm("정말 이 롤링페이퍼를 삭제하시겠습니까?")) {
                $.ajax({
                    type: 'delete',
                    url: `http://localhost:3000/api/rollingpapers/${paper_id}`,
                    dataType: 'json',
                    success: function (result) {
                        location.href = `./main.html`;
                    },
                    error: function (error) {
                        console.error(error);
                        alert('페이퍼 삭제에 실패했습니다.');
                    }
                });
            }
        }

    </script>
    <script>
        // 2. ajax 함수 이용해서 api 호출, success 응답 호출 해보기
        $.support.cors = true;
        $.ajax({
            type: 'get',           // 타입 (get, post, put 등등)
            url: `http://localhost:3000/api/papers`,           // 요청할 서버url
            async: true,            // 비동기화 여부 (default : true)
            dataType: 'json',       // 데이터 타입 (html, xml, json, text 등등)
            data: {},
            contentType: "application/json",
            success: function (result) { // 결과 성공 콜백함수
                result.result.forEach((result) => {
                    if (result.paper_id === Number(paper_id)) {
                        console.log(result);
                        id = result.id;
                        content = result.content;
                        writer = result.writer;
                        font = result.font;
                        console.log(id + " " + content + " " + writer + " " + font);
                        showListPapers(paper_id, id, content, writer, font);// 받는 사람 띄우기
                        $(".memo").click(function () {
                            window.location.href = `../write-rolling-paper-viewing.html?paper_id=${paper_id}&id=${id}`;
                        });
                    }
                });
            }
        });

        function showListPapers(paper_id, id, content, writer, font) {
            var memo = document.createElement('div');
            var fromSender = document.createElement('div');

            memo.innerText = shortenWords(content);
            memo.style.fontFamily = font;
            fromSender.innerText = shortenWords(`From. ${writer}`, 13);
            memo.className = 'memo';
            fromSender.className = 'from_sender';

            paper.appendChild(memo);
            memo.appendChild(fromSender);
        }

        function showPaper(paper_id, id) {
            console.log("creating입니다");
            location.href = `./write-rolling-paper-viewing.html?paper_id=${paper_id}&id=${id}`;
        }

        function addEmoji() {
            location.href = `./add-rolling-emoji.html?paper_id=${paper_id}`;
        }
    </script>
    <script src="./js/script.js"></script>
    <script src="./js/write-rolling-paper.js"></script>
</body>

</html>