django conversation-detail by CBV with DetailView

url 설정

config/urls.py

urlpatterns = [
    path("conversations/", include("conversations.urls", namespace="conversations")),
]

conversations/urls.py

from django.urls import path
from conversations import views


app_name = "conversations"

urlpatterns = [
    path(
        "<int:host_pk>/<int:guest_pk>/<int:room_pk>/",
        views.createConversation,
        name="create-conversation",
    ),
    path(
        "<int:pk>/conversation-detail/",
        views.ConversationDetailView.as_view(),
        name="conversation-detail",
    ),
]

CBV(Class Based View)

conversations/views.py

  CBV는 django에서 정의한 여러가지 View들을 이용한다. 그 중 DetailView를 이용해서 conversations-detail page를 작성한다.

# conversations/views.py

from django.views.generic import DetailView

from conversations import models as conversation_models
from users import mixins


class ConversationDetailView(mixins.LoggedInOnlyView, DetailView):

    """ Conversation Detail View Definition """

    model = conversation_models.Conversation
    template_name = "pages/conversations/conversation_detail.html"

templates

pages/conversations/conversation_detail.html

{% extends 'base.html' %}

{% load remainder_op %}

{% block page_title %}
    Conversation-{{room}}
{% endblock page_title %}

{% block content %}
    <div class="flex flex-col items-center justify-items-center">
        <main class="border border-gray-500 p-6 rounded-lg w-1/2">
            <div class="flex items-center justify-center mb-10">
                {% include 'mixins/conversation_avatars.html' with conversation=conversation %}
            </div>
            <div class="flex flex-col">
                {% for message in conversation.messages.all %}
                    <div class=" {% if message.user.pk == user.pk %}self-end text-right{% endif %}">
                        <div class="mb-2 text-sm font-medium text-gray-600">{{message.user.first_name}}</div>
                        <div class="text-base mb-4 font-medium p-3 rounded-lg max-w-xs
                        {% if message.user.pk == user.pk %}
                            bg-green-500
                            text-white
                        {% else %}
                            bg-gray-300
                        {% endif %}
                        ">
                        {{message.message}}
                        </div>
                    </div>
                    {% endfor %}
                </div>
                <div class="flex justify-center">
                <form action="#" class="flex flex-col mt-10 rounded-2xl shadow-lg h-10 w-1/3" method="POST">
                    {% csrf_token %}
                    <input class="text-center outline-none" name="message" placeholder="Write a Message" required />
                </form>
            </div>
        </main>
    </div>
{% endblock content %}

참고 자료

• 노마드 코더의 Airbnb 클론 강의

소스 코드

github.com/zpskek/airbnb-clone-v3/commit/7b15b779061720e0f024f594b3676515bcc319a1