[JavaScript] 31. JavaScript를 사용한 게시글 상세보기 기능 만들기(2)

2024년 08월 29일

Song hyun
작성자
2024.08.29.:27

728x90

[JavaScript] 31. JavaScript를 사용한 게시글 상세보기 기능 만들기(2)

1.board-detail.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>글 상세 보기</title>
    <link rel="stylesheet" href="../css/common.css" />
    <link rel="stylesheet" href="../css/header.css" />
</head>
<body>
    <header>
        <nav class="nav-container">
          <div class="nav-item">
            <span class="menu-link" id="board">게시판</span>
          </div>
          <div class="nav-item" id="authLinks">
            <span class="menu-link" id="signIn">로그인</span>
            <span class="menu-link" id="signUp">회원가입</span>
          </div>
        </nav>
      </header>
    
    <main class="content-wrapper">
        <section class="form-title">
            <h1>상세 보기 by JS</h1>
        </section>

        <section>
            <table>
                <tr>
                    <th>제목</th>
                    <td>
                        <input type="text" class="inputs title" readonly="true" id="title">
                    </td>
                </tr>
                <tr>
                    <th>작성자</th>
                    <td>
                        <input type="text" class="inputs username"  readonly="true" id="username">
                    </td>
                </tr>
                <tr>
                    <th>내용</th>
                    <td>
                        <div class="img-box" id="imgBox"></div>
                        <pre name="" id="content" class="content"></pre>
                    </td>
                </tr>
            </table>

            <div class="btn-area">
                <button type="button" class="btn update-button">수정</button>
                &nbsp; &nbsp;
                <button type="button" class="btn delete-button">삭제</button>
            </div>

        </section>
      
    </main>
    <script src="../js/header.js"></script>
    <script src="../js/boardDetail.js"></script>
</body>
</html>

2.boardDetail.js

// 1. 해당 게시글에 대한 정보를 가져오기 
// 2. DOM API 
// 3. 삭제, 수정 버튼 활성화 여부 (권한 확인)
// 4. 삭제 기능만들기, 수정 기능 만들기 (권한 확인)

document.addEventListener('DOMContentLoaded', function() {

    // 1. 쿼리스트링 경로에 정보를 추출 방법 
    const urlParams = new URLSearchParams(window.location.search);
    // console.log(urlParams.get("id"));
    // 2. path , http:naver.com:8080/path/to/page
    // window.location.pathname; 경로 추출 가능   -->  /path/to/page
    const postId = urlParams.get('id');
    const storedBoardList = JSON.parse(localStorage.getItem('boardList'));
    const user = JSON.parse(localStorage.getItem('user')); // 현재 사용자 정보 가져오기 
    let currentPost; 

    if(storedBoardList && postId ) {
        currentPost = null;

        for( let i = 0; i < storedBoardList.length; i++) {
            let post = storedBoardList[i];
            if(post.id ===  parseInt(postId)) {
                currentPost = post;
                break;
            }
        }
        if(!currentPost) {
            alert('해당 게시글을 찰을 수 없습니다.');
            location.href = 'board-list.html';
        }
    } // end of if 

    // 2. DOM API 사용 
    const titleElement = document.querySelector("#title");
    const usernameElement = document.querySelector("#username");
    const imgBoxElement = document.querySelector("#imgBox");
    const contentElement = document.querySelector("#content");

    if(currentPost != null) {
        titleElement.value = currentPost.title; 
        usernameElement.value = currentPost.username; 
        
        // 사용자가 등록한 이미지 뿌려주기 
        if(currentPost.imgData != null) {
            const imgElement  =  document.createElement('img'); // JS 코드로 이미지 태그 생성 
            imgElement.src = currentPost.imgData;
            // 스타일도 설정하고자 한다면 
            imgElement.style.width = "100%";
            imgElement.style.heigh = "auto";

            // 부모태그로 사용 
            imgBoxElement.appendChild(imgElement);
        }
    }

    // 3. 사용자자  권한 확인 
    const deleteButton = document.querySelector(".delete-button");
    const updateButton = document.querySelector(".update-button");

    if(user &&  currentPost.username === user.username) {
        deleteButton.style.display = "block";
        updateButton.style.display = "block";
    } else {
        deleteButton.style.display = "none";
        updateButton.style.display = "none";
    } // end of if 

    // 삭제 기능 구현 (권한 확인)
    deleteButton.addEventListener("click", function() {
        if(confirm("정말 삭제하겠습니까?")) {
            const updateBoardList = [];
            for(let i = 0; i < storedBoardList.length; i++) {
                if(storedBoardList[i].id !== parseInt(postId)) {
                    updateBoardList.push(storedBoardList[i]);
                }
            }
            localStorage.setItem('boardList', JSON.stringify(updateBoardList));
            alert('게시글이 정상 삭제 되었습니다.');
            location.href = 'board-list.html';
        }
    });

    // 수정 화면 이동 처리 (권한 확인) -- 도전과제 

});

728x90

'HTML,CSS, JS > JavaScript' 카테고리의 다른 글

[JavaScript] 짐코딩 - (2) 콜백 함수란? (0)	2024.11.06
[JavaScript] 짐코딩 - (1) 동기와 비동기는 뭘까? (1)	2024.11.06
[JavaScript] 30. JavaScript를 사용한 게시글 상세보기 기능 만들기(1) (0)	2024.08.28
[JavaScript] 29. JavaScript를 사용한 글쓰기 기능 만들기 (0)	2024.08.28
[JavaScript] 28. JavaScript를 사용한 목록 페이지 만들기(3) (0)	2024.08.26

다음 글이 없습니다.

이전 글이 없습니다.

[JavaScript] 31. JavaScript를 사용한 게시글 상세보기 기능 만들기(2)

'HTML,CSS, JS > JavaScript' 카테고리의 다른 글

티스토리툴바