RE_PROJECT 01 | 게시글 상세페이지, 게시글 삭제하기

✅ 게시글 상세페이지 만들기 ✅ 

메인 페이지에서 게시글을 클릭하면 그 게시글의 상세페이지를 보여주는 기능을 구현한다.

 

 

 

✔️ tweet/urls.py 에 url추가

path('tweet/<int:id>', views.detail_tweet, name='detail-tweet'),

➡️ 게시글은 게시글마다 id가 존재한다. 경로를 게시글의 id인 숫자로 지정해주면 그 게시글의 상세페이지로 이동하도록 설정한다.

 

 

 

✔️ tweet/views.py 에서 detail_tweet 로직 작성하기

@login_required
def detail_tweet(request, id):
    my_tweet = TweetModel.objects.get(id=id)
    tweet_comment = TweetComment.objects.filter(tweet_id=id).order_by('-created_at')
    return render(request, 'tweet/tweet_detail.html', {'tweet':my_tweet, 'comment':tweet_comment})

 

 

 

✔️ template/tweet/home.html에서 이미지를 클릭하면 상세페이지로 이동하도록 링크 설정

<a href="/tweet/{{ tw.id }}">
  <img class="feed_img" src="https://us.123rf.com/450wm/thesomeday123/thesomeday1231712/thesomeday123171200009/91087331-%EB%82%A8%EC%84%B1%EC%9D%84%EC%9C%84%ED%95%9C-%EA%B8%B0%EB%B3%B8-%EC%95%84%EB%B0%94%ED%83%80-%ED%94%84%EB%A1%9C%ED%95%84-%EC%95%84%EC%9D%B4%EC%BD%98-%ED%9A%8C%EC%83%89-%EC%82%AC%EC%A7%84-%EC%9E%90%EB%A6%AC-%ED%91%9C%EC%8B%9C-%EC%9E%90-%EC%9D%BC%EB%9F%AC%EC%8A%A4%ED%8A%B8-%EB%B2%A1%ED%84%B0.jpg?ver=6">
</a>

 

 

 

✔️ 실행 화면

 

 

 

✅ 게시글 삭제하기 ✅ 

 

✔️ tweet/urls.py 에서 경로 추가

path('tweet/delete/<int:id>', views.delete_tweet, name='delete-tweet'),

➡️ 게시글의 id를 받아와서 삭제해준다.

 

 

 

✔️ tweet/views.py 에서 delete_tweet 작성

@login_required
def delete_tweet(request, id):
	my_tweet = TweetModel.objects.get(id=id)
    my_tweet.delete()
    return redirect('/tweet/')

 

 

✔️ templates/tweet/tweet_detail.html 에 삭제버튼 추가 

{% if tweet.author == user %}
<div style="float: right">
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-light" data-bs-toggle="modal" data-bs-target="#exampleModal">
        <span class="material-symbols-outlined">delete</span>
    </button>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">게시물 삭제</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    게시물을 정말 삭제하시겠습니까?
                </div>
                <div class="modal-footer">
                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <button type="button" class="btn btn-light me-md-2"><a href="/tweet/delete/{{ tweet.id }}">
                                <span class="material-symbols-outlined" style="color:black;">delete</span>
                            </a></button>
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                            <span class="material-symbols-outlined">close</span></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endif %}

➡️ 로그인한 사용자와 게시글을 작성한 사용자가 일치하면 삭제버튼이 보이게 된다. 삭제버튼을 눌렀을 때는 삭제 여부를 확인하는 모달팝업창이 띄워진다. 게시글 삭제는 게시글 상세페이지로 들어가야 가능하다!

 

 

 

✔️ 실행 화면