개발 진행에 따른 기록 작성(★★★★★)

1. 엔티티 재 설계

1. 어떠한 이유로 해당 기능을 사용하였는지

2. 해당 기능의 코드는 어떠한 로직을 가지고 있는지

📌 댓글 등록하기

    //-------- 로드실행---------------------------------------- 
    $(document).ready(function () {
        var param = document
            .location
            .href
            .split("?");
        console.log(param[1])

        var settings = {
            "url": "http://localhost:8080/api/contact/inquiries/" + param[1],
            "method": "GET",
            "timeout": 0
        };
        //----------------------------------agax --------------------------- 필요변수 여기에 선언
        $
            .ajax(settings)
            .done(function (response) {
                console.log(response);
                let inquiryId = response['id']
                let title = response['title']
                let content = response['content']
                let createdDate = response['createdDate']
                let username1 = response['username']  //댓글 유저이름


                //------------------------------ 게시글 보여주기 -----------------------------------
                let temp_html = `<div class="container">
        <table class="table table-hover" width="1000" id="textBox">
            <tr>
                <td>제목 </td>
                <td colspan="4" align="left">${title}</td>
                </tr>
            <tr align="center">
                <td>작성일</td>
                <td>${createdDate}</td>
                <td>작성자</td>
                <td>${username1}</td>
            </tr>
            <tr height="300">
                <td colspan="5" align="left">${content}</td>
            </tr>
        </table>
            <button type="button" class="btn btn-outline-secondary border">
                <a href="contactNotice.html">목록보기</a>
            </button>
            <button type="button" class="btn btn-outline-secondary border" id="b-edit">
                <a href="contactEdit-Notice.html?${inquiryId}">수정</a>
            </button>
            <button type="button" class="btn btn-outline-secondary border" name ='b-delete'>
                <a href="contactNotice.html">삭제</a>
            </button>
            <section class="mb-5">
                <div class="card bg-light">
                    <div class="card-body"  id = "comment">
                        <!-- Comment form-->
                        <form class="mb-4"><textarea id ="t-commentSave"class="form-control" rows="3" placeholder="댓글을 남겨주세요"></textarea> 
                            <button type="button" name='enrollComment'>댓글등록</button></form>
                        
            
                        <!-- Comment with nested comments-->
                        
                        
                        <!-- Single comment-->
                    
                    </div>
                </div>
            </section>
        </div>`
                $('#textEditBox').append(temp_html)
                
                
// -----------------------------[댓글보여주기 실행]-------------------------------------------------
let commentList = response['comments']
console.log(commentList)

for (let i = 0; i < commentList.length; i++) {
    var username = commentList[i]['username']
    var commentContent = commentList[i]['comments']
    var commentCreatedDate = commentList[i]['createdDate']
    var commentId = commentList[i]['id']
    console.log(username + " 닉네임이군")


    var comment = `<div class="d-flex">                       
        <div class="ms-3">
        <div class="fw-bold">${username}</div>
        <div class="text-black-50">${commentContent}</div> 
        <p class="text-black-50">${commentCreatedDate}

        <button name="creatRe" id="reply_${commentId}" >답글</button>
        <button name="editComment" id ="edit_${commentId}">수정</button>
        <button name="delComment" id ="comment_${commentId}">삭제</button>


        <span style="display: none;" id="toggleEdit_${commentId}">
            <textarea id="editCommentContent_${commentId}"></textarea> 
            <button name="saveEdit" id="commentEdit_${commentId}">댓글수정</button>
            </span>

        <span style="display: none;" id="toggleRe_${commentId}">
            <textarea id="replyCommentContent_${commentId}"></textarea> 
            <button name="saveRe" id="commentSave_${commentId}">답글작성</button>
            </span>
            <div class="d-flex mt-4">
            <div class="ms-3" id='commentReply_${commentId}'>

                            </div>

        </p>

        </div>
</div>`
    $('#inquiryComment').append(comment)

     
}

});
})

※ 입력값이 들어가면 어떠한 코드를 통해 어떠한 값으로 변화하는지

📌 댓글 보여주기

3. 코드를 작성하며 발견된 버그나 오류는 어떠한게 있었는지 그리고 어떻게 해결하였는지.

3-1 ....부모댓글은 나오지만 대댓글 구현이 쉽지 않다. ㅠㅠ 값을 불러오는데서 for문 안에서만 문제가 생기는 건 뭔지..

재귀함수 사용하여 1차 구현 >.<ㅎ