24.04.03_TIL ( 팀 프로젝트 : 스파르타 게시판 ) _ 2. Git & Github 합치기

[ 첫번째 프로젝트 ] 

 

 

스파르타 게시판을 만들어 보자.

 

 

 

 

 

 

* 팀 스로젝트로 팀과의 협업이 중요하다.

 

0. 기획하기

https://tia13.tistory.com/42

24.04.01_TIL (ChatGPT 웹종 팀 프로젝트) _ 0. 기획하기

 

1. 프론트앤드 / 백앤드

https://tia13.tistory.com/43

24.04.02_TIL (ChatGPT 웹종 팀 프로젝트) _ 1. 프론트앤드/백앤드

 

 

 

팀원들과 각자 나누어 작업을 진행하였다.

추가로 수정할 사항이나 바꾸어야 할 부분을 회의로 결정하여 프론트앤드와 백앤드를 수정하였다.

 

내가 맡은 두번째 페이지에서는 메인 로고를 수정하고 댓글을 작성 하였을 때 수정, 삭제에서 수정 부분을 추가해달라고 하였다.

댓글에 수정을 눌렀을 때 화면이 바뀌거나 댓글을 그 자리에서 바로 수정할 수 있도록 바꾸어야 한다.

 

<script> /* 댓글 수정하는 것에 대한 스크립트*/
                    function editComment() {
                        var commentTextElement = document.getElementById('commentText');
                        var currentComment = commentTextElement.innerText;

                        var commentInput = document.createElement('textarea');
                        commentInput.value = currentComment;
                        commentInput.style.resize = 'none';
                        commentInput.style.border = '1px solid #ccc';
                        commentInput.style.padding = '5px';
                        commentInput.style.width = '100%';

                        var buttonContainer = document.createElement('div');
                        buttonContainer.className = 'button-container'; // 버튼을 감싸는 div 요소에 클래스 추가

                        var saveButton = document.createElement('button');
                        saveButton.textContent = '저장';
                        saveButton.style.border = 'none'; /* 테두리 제거 */
                        saveButton.style.background = 'none'; /* 배경 제거 */
                        saveButton.style.color = 'red'; /* 글자 색상 지정 */
                        saveButton.style.cursor = 'pointer'; /* 커서 모양 변경 */
                        saveButton.onclick = function() {
                            var editedComment = commentInput.value;
                            commentTextElement.innerText = editedComment;
                            commentInput.parentElement.removeChild(commentInput);
                            saveButton.parentElement.removeChild(saveButton);
                            cancelButton.parentElement.removeChild(cancelButton);
                            buttonContainer.parentElement.removeChild(buttonContainer);
                        };

                        var cancelButton = document.createElement('button');
                        cancelButton.textContent = '취소';
                        cancelButton.style.border = 'none'; /* 테두리 제거 */
                        cancelButton.style.background = 'none'; /* 배경 제거 */
                        cancelButton.style.color = 'red'; /* 글자 색상 지정 */
                        cancelButton.style.cursor = 'pointer'; /* 커서 모양 변경 */
                        cancelButton.onclick = function() {
                            commentInput.parentElement.removeChild(commentInput);
                            saveButton.parentElement.removeChild(saveButton);
                            cancelButton.parentElement.removeChild(cancelButton);
                            buttonContainer.parentElement.removeChild(buttonContainer);
                        };

                        commentTextElement.innerHTML = '';
                        commentTextElement.appendChild(commentInput);
                        buttonContainer.appendChild(saveButton);
                        buttonContainer.appendChild(cancelButton);
                        commentTextElement.appendChild(buttonContainer); // 버튼 컨테이너를 댓글 텍스트 엘리먼트에 추가
                    }
                </script>
                <div class="comment-actions">
                    <button onclick="editComment()">수정</button>
                    <a href="#" class="delete-link">삭제</a>
                </div>

 

 

스크립트로 추가하여 바로 그 자리에서 수정할 수 있도록 해주었다.

 

 

 

수정 버튼을 누르면 위의 화면으로 바뀌게 되고 저장을 누르면 저장, 취소를 누르면 취소하여 원래 댓글로 다시 돌아간다.

 

 

수정을 하게 되면 위와 같이 댓글이 수정되는 것을 볼 수 있다.

 

 

 

++ 여기서 해결해야할 것이 생겼다ㅜㅜ

++ 자바스크립트로 html 로 프론트앤드의 코드를 작성한 것은 좋았지만... 백앤드로 작업을 옮기는(?) 작업이 해결이 안된다.....

++ 작성자는 수정이 안되지만 수정된 내용, 수정되기 전의 내용 등을 백앤드로 옮겼다가 다시 구현을 해야하는데 프론트앤드에서 백앤드로 옮기는 코드를 프론트앤드에 작업해야한다...ㅎㅎ....다시 강의를 듣고 와야겠다 :)ㅎ....

 

 

  

튜터님이 적용하라고 설명해주신거.. 사실 반정도만 이해감...

 

프론트앤드에서 해결을 못해서 백앤드 분이 다시 코드를 짜셨다..ㅎㅎ

 

<ul class="comment-list">
            <!-- 댓글 아이템 -->
            {% for comment in data.comments %}
            <li class="comment-item">
                <div class="comment-header">
                    <span class="comment-author">{{ comment.comment_writer|e }}</span>
                    <span class="comment-date">{{ comment.comment_created_at|e }}</span>
                </div>
                <div class="comment-content" id="comment-content">
                    {{ comment.comment_content|e }}
                </div>

                <div class="comment-edit" id="comment-edit">
                    <form id="comment-edit" action="/post/{{data.post.post_id}}/{{comment.comment_id}}/edit"
                        method="POST">
                        <textarea name="comment-edit" id="comment-edit"
                            rows="3">{{ comment.comment_content|e }}</textarea>
                        <button onclick="reset()">취소</button>
                        <button type="submit">수정</button>
                    </form>
                </div>
                
                <div class="comment-actions" id="comment-action">
                    <button type="button" class="edit-link" onclick="edit()">수정</button>
                    <a href="/post/{{data.post.post_id}}/{{comment.comment_id}}/delete" class="delete-link">삭제</a>
                </div>
        <script>
        function edit() {
            document.getElementById("comment-content").style.display = "none";
            document.getElementById("comment-edit").style.display = "block";
            document.getElementById("comment-action").style.display = "none";
        }
        function reset() {
            document.getElementById("comment-content").style.display = "block";
            document.getElementById("comment-edit").style.display = "none";
            document.getElementById("comment-action").style.display = "block";
        }
    </script>
            </li>
            {% endfor %}
        </ul>

 

 

.comment-edit {
    display: none;
}

.comment-edit textarea {
    width: 100%;
    margin-bottom: 10px;
    resize: none;
    }
    
.comment-edit button {
    background-color: rgb(233, 7, 7);
    color: white;
    padding: 10px 20px; /* 버튼 안쪽 여백 */
    border: none; /* 주변 테두리 없음*/
    cursor: pointer; /*포인터 손모양으로 변경*/
    border-radius: 5px; /* 모서리 둥글게*/
    font-size: 16px;
    float: right; /* 오른쪽으로 정렬 */
    }
    
.comment-edit button:hover {
    background-color: rgb(233, 7, 7);
    }

 

 

 

 

# 댓글 수정
@app.route('/post/<p_id>/<c_id>/edit', methods=['GET', 'POST'])
def comment_update(p_id, c_id):
    if request.method == "POST":
        new_content = request.form.get('comment-edit')
        comment_data = Comment.query.filter_by(
            post_id=p_id, comment_id=c_id).first()
        comment_data.comment_content = new_content
        db.session.add(comment_data)
        db.session.commit()
        return redirect(url_for('post', id=p_id))

 

 

 

html, css, python 을 수정하여서 진행하였다.

댓글 수정은 되는데... 이제 프론트앤드와 다듬기만 남은 듯 하다. ㅠㅠ 우리 팀 화이팅...!