Q&A

질문있어요

2 years, 10 months ago

dlqslek123

안녕하세요 교재와 강의 병행하고 있습니다.

강의에는 없는 내용이기는 하지만 궁금해서 여쭤보게 되었습니다

가 대댓글 기능을 구현 중에 있어요

그런데 문제가 있습니다.

현재 detail 페이지에 comment_form이 < div id="comment_area"> 바로 아래 위치하고 있었고 , 제가 아래에 recomment_form을 추가로 불러온 상태입니다.

근데 제가 comment_form 위치가 마음에 안들어서 comment_area의 맨 아래로 위치 시켰는데 comment_form에서 POST가 안 보내지고 detail 페이지로 리다이렉트 되버립니다.

여기서 recomment_form을 삭제하면 아주 잘 됩니다

이유가 뭘까요? 

힌트라도 주시면 ...흑흑..흑..흑흑..흑

< post_detail.html >

<!-- Comment 영역 -->
<div id="comment-area">

    <!-- Single Comment -->
    <!-- Post에 연결된 comment_set이 있는지 -->
    {% if post.comment_set.exists %}
    {% for comment in post.comment_set.iterator %}
    <div class="media mb-4" id="comment-{{ comment.pk }}" >
        <!-- Google 로그인 한 사람인 경우에 대해서 comment_get_avatar_url 함수처리가 된다 -->
        <img class="d-flex mr-3 rounded-circle" src="{{ comment.get_avatar_url }}" alt="{{ comment.author }}" width="60px">
        <div class="media-body">

            {% if user.is_authenticated and comment.author == user %}  <!-- comment.pk : 로그인을 하였고 , comment 작성자가 현재 로그인한 유저와 같은 경우에 대해서 -->
            <div class="float-right">
                <!-- 댓글 삭제/수정 버튼 navbar dropdown에 넣기 -->
                <nav class="navbar navbar-expand-lg navbar-light ">
                    <div class="collapse navbar-collapse">
                        <ul class="navbar-nav">
                            <li class="nav-item dropdown">
                                <a class="nav-link " href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <i class="fas fa-ellipsis-v"></i>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                    <a class="dropdown-item" href="/blog/update_comment/{{ comment.pk }}/">댓글 수정</a>
                                    <a class="dropdown-item" href="#" data-toggle="modal" data-target="#deleteCommentModal-{{ comment.pk }}">댓글 삭제</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>

            <!-- modal 생성 {{ comment.pk }} -->
            <div class="modal fade" id="deleteCommentModal-{{ comment.pk }}" tabindex="-1" aria-labelledby="deleteCommentModal-{{ comment.pk }}ModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="deleteCommentModal-{{ comment.pk }}ModalLabel"> 댓글을 삭제하시겠습니까?</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <!-- delete 버튼 클릭시 modal body에 댓글 내용 띄우기 -->
                            <del>{{ comment.content | linebreaks }}</del>
                        </div>
                        <div class="modal-footer">
                            <a role="button" type="button" class="btn btn-secondary" data-dismiss="modal">Close</a>
                            <a role="button" type="button" class="btn btn-danger"  href="/blog/delete_comment/{{ comment.pk }}/">Delete</a>
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}


            <!-- 댓글 작성자 / 댓글 생성 시간 -->
            <h5 class="mt-0">{{ comment.author.username }}
                {% if comment.created_string == False %}
                <small class="text-muted">{{ comment.created_at | date:'m월 d일' }}</small>
                {% else %}
                <small class="text-muted">{{ comment.created_string  }}</small>
                {% endif %}

                <!-- 댓글 업데이트 시간 -->
                {% if comment.is_updated %} <!-- return 값을 받아왔다는 것은 댓글이 수정됐다라는 뜻 -->
                <small class="font-weight-bold">
                    (수정됨)
                </small>
                {% endif %}
            </h5>

            <!-- 댓글 내용 -->
            {{ comment.content | safe }} <!-- linebreaks : 댓글 코멘트 줄바꿈 처리 가능 -->

            <!-- 댓글 업데이트 시간 -->
            {% if comment.is_updated %} <!-- return 값을 받아왔다는 것은 댓글이 수정됐다라는 뜻 -->
            <small class="font-weight-bold float-right">
                Updated On : {{ comment.updated_at | date:"Y.m.d H:i"  }}
            </small>
            {% endif %}
        </div>
    </div>
    <hr/>
    {% endfor %}
    {% endif %}

<!--     로그인 한 상태에서만 대댓글 클릭 가능 -->
                {% if request.user.is_authenticated %}
                    <!-- reply comment -->
                    <a type="button" class="btn btn-light btn-sm">
                        <i class="fas fa-reply"> Reply ({{ comment.recomment_set.count }})</i>
                    </a>
                {% endif %}
                <!-- recomment_Form -->
                <form id="recomment-form" method="post" action="/blog/{{ comment.pk}}/reply_comment/">
                    {% csrf_token %}
                    {{  recomment_form | crispy }}
                    <input type="hidden" name="comment" value="{{ comment.pk }}">
                    <button  type="submit" class="btn btn-secondary btn-sm float-right" >
                        작성 완료
                    </button>
                </form>
<!--     대댓글 하나하나를 for문으로 분리시켜서 하나씩 뜨게 함 -->
                {% for recom in comment.recomment_set.iterator %}
                <h5 class="mt-0">
                    <!-- 대댓글 작성자 / 대댓글 생성 시간 -->
                    {{ recom.author }}

                    <!-- 대댓글 생성 시간 -->
                    <small>{{ recom.created_at }}</small>
                </h5>

                <!-- 대댓글 내용 -->
                {{ recom.content }}

                <!-- 로그인 했고 리퀘스트 유저가 대댓글 작성자와 같은 경우-->
                {% if request.user.is_authenticated and  request.user == recom.author %}
                <div class="float-right">
                    <!-- Edit Button -->
                    <a role="button"
                       class="btn btn-sm btn-info "
                       id="recomment-update-btn"
                       href="/blog/update_comment/{{ comment.pk }}/"><i class="fas fa-pen"></i>&nbsp;댓글 수정</a>

                    <!-- Delete Button -->
                    <a role="button"
                       class="btn btn-sm btn-danger "
                       id="recomment-delete-btn"
                       data-toggle="modal"
                       data-target="#deleteReCommentModal-{{ comment.pk }}"
                       href="#">댓글 삭제</a> <!-- 현재 comment의 pk값을 가지고오면 된다. -->
                </div>
                {% endif %}
                <br/>
                <hr/>
                {% endfor %}

    <!-- Comments Form -->
    <div class="card my-4">
        <h4 class="card-header"><i class="far fa-comment-dots"></i>&nbsp;댓글 ({{ post.comment_set.count }}) </h4> <!-- comment : -->
        <div class="card-body">
            <!-- 로그인 한 상태의 댓글 form -->
            {% if user.is_authenticated  %}
            <form id="comment-form" method="POST" action="{{ post.get_absolute_url}}new_comment/"> <!-- submit 처리 시 url -->
                {% csrf_token %} <!-- {% csrf_token %} : django가 직접 만들어준 form인 것인지 봇이 특정 코드를 POST방식으로 계속 던져서 만들어진 댓글인지 확인하는 절차 POST를 보낼 때 value값이 유효한지 계속 확인-->
                <div class="form-group">
                    {{ comment_form | crispy  }}
                </div>
                <button type="submit" class="btn btn-secondary btn-block float-right">작성하기</button>
            </form>
            {% else %}
            <!-- 로그인 하지 않은 상태의 댓글 form -->
            <a role="button" type="button" class="btn btn-outline-dark btn-block btn-sm" href="#" data-toggle="modal" data-target="#loginModal">Log in and leave a comment</a>
            {% endif %}
        </div>
    </div>
</div>