22년 11월 17일 TIL

내일은 발표하는날! 오늘은 많은 일들이 있었지만 잘 넘겨서 프로젝트 완성 단계까지 왔다.

 

팀원들 모두 개인페이지에서는 댓글 기능까지 완성했고 메인페이지는 수정 기능을 제외하고는 모두 완성했다.

거의 완성

오늘의 GOAT 

맨위의 [Four Glass] 제목에 마우스 커서를 갖다 괄호가 좌우로 퍼졌다가 때면 다시 원래대로 돌아온다.

CSS가 직관적으로 결과가 나오기 때문에 좀 더 재미있는것 같다. (복붙이지만)

h1.sixth {
    position: relative;
}

h1.sixth:before,
h1.sixth:after {
    content: '[';
    display: inline-block;
    position: relative;
    top: 1px;
    height: 100%;
    font-size: 1.25em;
    color: tomato;

    transition: all 0.5s ease;
}

h1.sixth:after {
    content: ']';
}

h1.sixth:hover:before {
    transform: translateX(-5px);
}

h1.sixth:hover:after {
    transform: translateX(5px);
}

 

위 화면의 CSS 파일의 내용이다

* {
    font-family: 'Gowun Dodum', sans-serif;
}

body {
    background-color: black;
}

h1 {
    color: white;
}

.mytitle {
    padding-top: 20px;
    height: 80px;
    color: white;

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.left-box {
    padding-left: 20px;
    padding-top: 20px;

}

.center-box {
    background-position: center;
    background-size: cover;

    color: white;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.right-box {

}

h1.sixth {
    position: relative;
}

h1.sixth:before,
h1.sixth:after {
    content: '[';
    display: inline-block;
    position: relative;
    top: 1px;
    height: 100%;
    font-size: 1.25em;
    color: tomato;

    transition: all 0.5s ease;
}

h1.sixth:after {
    content: ']';
}

h1.sixth:hover:before {
    transform: translateX(-5px);
}

h1.sixth:hover:after {
    transform: translateX(5px);
}

.mymain {
    margin: 20px;
    border: 3px solid black;

    min-width: 1300px;
    min-height: 1200px;
    background-position: center;
    background-size: cover;
    background-image:linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/static/image/notepad.jpg");

    color: black;
    flex-direction: column;
    
}

.mycard {
    padding: 10px;
    text-align: center;

    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: auto;
}

.introduce {
    color: white;
    margin-right: 10px;
    flex: auto;
    min-width: 400px;
    border: 1px solid black;
    padding: 10px;
}

.card {

    margin: 10px;
    padding: 10px;
    width: 200px;


}

.commentForm {
    border: 1px solid black;
    margin: 10px;
    padding: 20px;
}


.commentteb {

    margin-top: 20px;
    box-shadow: 0px 0px 3px 0px black;
    padding: 20px;

    overflow: auto;
    word-break: break-all;
}

.commentteb > .card {
    width: 95%;
}

/*.myphoto {*/
/*    margin: 20px;*/
/*    border: 3px solid black;*/
/*    background-color: green;*/
/*    min-width: 1200px;*/
/*    background-position: center;*/
/*    background-size: cover;*/
/*    background-image: url("/static/image/night.jpg");*/

/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*}*/
#name{
  width:100px
}
#comment{
  width:200px
}
#pass{
  width:100px
}

 

 

비밀번호 입력 시 이 창이 뜨고, 입력하면 댓글 내용이 바뀐다.

댓글로 들어갈 탬플릿이다. button class="${idx}" 를 통해 삭제 버튼과 수정 버튼을 만들었다.

let temp_html = `<div className="card" style="max-width: 990px; border: 1px solid black; padding: 5px; margin: 5px;>
                                            <div class="card-body">
                                            <h5 class="card-title">${name}</h5>
                                            <p class="card-text"> -- ${comment}</p>
                                            <button class="${idx}" id="delbtn" className="card-link" style="margin-right: 5px">삭제</a>
                                            <button class="${idx}" id="corbtn" className="card-link">수정</button>
                                            </div></div>`
                $(add_tag).append(temp_html)

 

버튼을 누르면 삭제 또는 수정을 하는 자바스크립트 파일이다. 오늘의 핵심

$(document).ready(function () {
    show_comment('/fourglass/team2_get_cmt', '#comment-list') //댓글을 보일 리스트
});

$(document).on('click', '#delbtn', function () {
    let num = prompt('비밀번호를 입력하세요.')
    let id = $(this).attr('class')

    function find_comment(callbackfunc) {
        $.ajax({
            type: 'POST',
            url: '/fourglass/team2_find_cmt',
            data: {'id_give': id},
            success: function (response) {
                console.log(response['result'])
                let result = response['result']
                if (num === result[0]['pass']) {
                    callbackfunc(result[0]['idx'])
                } else {
                    alert("비밀번호가 일치하지 않습니다.")
                }
            }
        })
    }

    find_comment(function (idx) {
        $.ajax({
            type: 'POST',
            url: 'fourglass/team2_del_cmt',
            data: {'id_give': idx},
            success: function (response) {
                alert(response['msg'])
                location.reload()
            }
        })
    })
})


$(document).on('click', '#corbtn', function () {
    let num = prompt('비밀번호를 입력하세요.')
    let id = $(this).attr('class')

    function find_comment(callbackfunc) {
        $.ajax({
            type: 'POST',
            url: '/fourglass/team2_find_cmt',
            data: {'id_give': id},
            success: function (response) {
                console.log(response['result'])
                let result = response['result']
                if (num === result[0]['pass']) {
                    callbackfunc(result[0]['idx'])
                } else {
                    alert("비밀번호가 일치하지 않습니다.")
                }
            }
        })
    }

    find_comment(function (idx) {
        let comment = prompt('내용을 입력해 주세요.')
        $.ajax({
            type: 'POST',
            url: 'fourglass/team2_cor_cmt',
            data: {'id_give': idx, 'comment_give': comment},
            success: function (response) {
                alert(response['msg'])
                location.reload()
            }
        })
    })
})

웹페이지가 처음 로딩되고 show_comment함수를 실행한다. DB에서 자료를 불러와 탬플릿에 넣고 표시해준다(댓글)

$(document).ready(function () {
    show_comment('/fourglass/team2_get_cmt', '#comment-list') //댓글을 보일 리스트
});

 

삭제 버튼을 클릭하면 실행되는 함수다.

$(document).on('click', '#delbtn', function () {
    let num = prompt('비밀번호를 입력하세요.')
    let id = $(this).attr('class')

    function find_comment(callbackfunc) {
        $.ajax({
            type: 'POST',
            url: '/fourglass/team2_find_cmt',
            data: {'id_give': id},
            success: function (response) {
                console.log(response['result'])
                let result = response['result']
                if (num === result[0]['pass']) {
                    callbackfunc(result[0]['idx'])
                } else {
                    alert("비밀번호가 일치하지 않습니다.")
                }
            }
        })
    }

    find_comment(function (idx) {
        $.ajax({
            type: 'POST',
            url: 'fourglass/team2_del_cmt',
            data: {'id_give': idx},
            success: function (response) {
                alert(response['msg'])
                location.reload()
            }
        })
    })
})

수정 버튼을 클릭하면 실행되는 함수로 위와 동일하지만 콜백되는 부분이 다르다

$(document).on('click', '#corbtn', function () {
    let num = prompt('비밀번호를 입력하세요.')
    let id = $(this).attr('class')

    function find_comment(callbackfunc) {
        $.ajax({
            type: 'POST',
            url: '/fourglass/team2_find_cmt',
            data: {'id_give': id},
            success: function (response) {
                console.log(response['result'])
                let result = response['result']
                if (num === result[0]['pass']) {
                    callbackfunc(result[0]['idx'])
                } else {
                    alert("비밀번호가 일치하지 않습니다.")
                }
            }
        })
    }

    find_comment(function (idx) {
        let comment = prompt('내용을 입력해 주세요.')
        $.ajax({
            type: 'POST',
            url: 'fourglass/team2_cor_cmt',
            data: {'id_give': idx, 'comment_give': comment},
            success: function (response) {
                alert(response['msg'])
                location.reload()
            }
        })
    })
})