[메리크리] 편지쓰기 / 편지보기

저번 글에서 편지를 DB에 저장하고 관리자만 편지를 볼 수 있도록 설정하기로 결론지었다.

따라서 이 글에서는 편지를 DB에 저장하고, 관리자 페이지를 만들어 볼 것이다!

📍 DB에 편지 저장하기

[letter.js]

[insertLetterTable.php]

음악 저장하는 거랑 똑같이 js에서 편지 데이터(작성자, 편지내용, 편지지)를 php로 날리고, DB에 저장하면 끝

---

📍 편지 보기

1. 편지 보기 UI

[ckletter.html]

	<div class="title">
        <h1>은진 님께 온 편지</h1>
    </div>
    <!-- 동적으로 편지가 추가됨 -->
    <div id="letterContainer"></div>

[ckletter.css]

#letterContainer {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

DB에 저장된 편지를 2열로 보여줄 수 있도록 letterContainer를 만든다.

 

[ckletter.js]

// 편지 추가
        function loadePage(writer, letter, paper) {
                
                const letterContainer = document.getElementById('letterContainer');
                
                // 편지지, 받는이, 편지내용, 보내는이 element 생성
                const letterBox = document.createElement('div'); // 편지 box
                const receiverDV = document.createElement('div'); // from. 은진
                const writerDV = document.createElement('div'); // 편지 내용
                const letterDV = document.createElement('div'); // to. 유저

                // style 처리를 위해 className 설정
                letterBox.className = 'letterBox';
                receiverDV.className = 'receiver';
                letterDV.className = 'letter';
                writerDV.className = 'writer';

                // 편지지 설정
                letterBox.style.backgroundImage = `url('${paper}')`;

                // 받는이 설정
                receiverDV.innerHTML = `<h1 style="font-size:40px;">to. 은진</h1>`;

                // 편지내용 설정
                letter = letter.replace(/\n/g, '<br>'); // 줄띄움
                letterDV.innerHTML = `<p style="font-size:40px;">${letter}</p>`;

                // 보내는이 설정
                writerDV.innerHTML = `<h1 style="font-size:40px;">from. ${writer}</h1>`;

                // 편지Box에 받는이, 편지내용, 보내는이 담기
                letterBox.appendChild(receiverDV);
                letterBox.appendChild(letterDV);
                letterBox.appendChild(writerDV);

                // container에 편지box 추가
                letterContainer.appendChild(letterBox);
        }

동적으로 편지들을 추가할 수 있도록 loadPage라는 함수를 만든다.

letterContainer가 편지가 추가될 space이다. 여기에 letterBox라는 편지 하나하나를 추가한다.

 

letterBox는 배경으로 편지지(paper)가 설정되고, 받는사람(receiver), 편지내용(letter), 보내는사람(writer)이 추가되어 한 장의 편지지로 만들어진 후 letterContainer에 추가된다.

---

2. DB에서 편지 가져오기

[ckletter.js]

// DB에 저장된 music 가져오기
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                // 서버에서 받아온 JSON 데이터를 JavaScript 객체로 변환
                var letterData = JSON.parse(xhr.responseText);

                // letterData를 활용하여 원하는 작업 수행
                for (var i = 0; i < letterData.length; i++) {
                    var name = letterData[i].name;
                    var letter = letterData[i].letter;
                    var paper = letterData[i].paper;

                    // 편지 추가
                    loadePage(name, letter, paper);
                }
            } else {
                console.log("오류");
            }
        };
        xhr.open("GET", "getLetterTable.php", true);
        xhr.send();

[getLetterTable.php]

// letter_table에서 name, letter, paper 열을 선택
$sql = "SELECT name, letter, paper FROM letter_table";
$result = $conn->query($sql);

// 결과 배열로 변환
$data = [];
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $data[] = $row;
    }
}

편지 데이터(작성자, 내용, 편지지)를 DB에서 읽어와 loadpage를 실행한다.

---

3. 스크롤바

편지가 긴 경우에는 편지 Box를 튀어나가기 때문에 스크롤 설정을 하여 편지 내용이 박스 밖으로 튀어나가지 않도록 한다.

/* 스크롤바 */
::-webkit-scrollbar {
	width: 10px;  /* 세로축 스크롤바 길이 */
	height: 20px;  /* 가로축 스크롤바 길이 */
}
::-webkit-scrollbar-track-piece {
	background-color: transparent;	
    /* 스크롤 바 배경 색상 */
}
::-webkit-scrollbar-thumb {
	border-radius: 8px;
	background-color: red; /*스크롤 바 색상*/
}
.letter{
    width: 95%;
    overflow:auto;
    margin: 0 auto;
    font-family: 'EF_jejudoldam';
    text-align: center;
    height: 310px;
}

---

📍결과

연말 연초에 너무 바빴던 이슈로 이제야 글을 쓴다..

이미 프로젝트는 완성했고~ 배포도 했고~ 친구들에게 편지도 받았다.. ㅎㅎ