TodoList 10편 - 리스트 더보기 (디테일) 기능 구현

하나의 TodoList 는, 아래의 필드들을 가지고 있습니다.

Field	비고
name	할일의 제목
description	할일에 대한 설명
date_created	생성 날짜
date_deadline	데드라인 날짜
TodoList_images	외래키로, 관련된 이미지파일들을 보유
TodoList_files	외래키로, 관련된 파일들을 보유

리스트만 보여주는 페이지에서는,

간략하게만 보여주기 때문에, 관련 이미지와 파일들을 보여주고 있지 않지만,

더보기 버튼을 눌러서, 디테일을 보여줄때에는, 관련 이미지와 파일도 보여져야 될것 같습니다.

이를 진행하기 위해서는, 아래와 같은 순서를 거쳐야 합니다.

1. templates/todo/todolist_detail.html 파일을 생성후 작성

2. todo/views.py 파일에 detailview 를 추가

3. todo/urls.py 파일에서 detailview 를 호출할 url 설정

4. templates/todo/todolist_list.html 에서 todollist_detail 로 가는 URL 링크 추가

templates/todo/todolist_detail.html

templates/todo/todolist_detail.html 파일을 생성 후 아래와 같이 작성합니다.

{% extends 'base.html' %}

{% block title %}할일 정보{% endblock %}

{% block content %}

<div class="columns">

    
    <div class="card column">
        <header class="card-header">
          <p class="card-header-title">
            할일 : {{ todolist.name }}
          </p>
          <a href="#" class="card-header-icon" aria-label="more options">
            <span class="icon">
              <i class="fas fa-angle-down" aria-hidden="true"></i>
            </span>
          </a>
        </header>
        <div class="card-content">
          <div class="content">
            해야 할일 : {{ todolist.description }}
            <br>
            <hr>
            생성 날짜 : {{ todolist.date_created }}
            <br>
            데드 라인 : {{ todolist.date_deadline }}
            <hr>
            남은 일수 : {{ todolist.remaining_days }}
            <hr>
            관련 이미지 : 
            {% for image in todolist_images_set.all %}
            <img src="{{ image }}">
            {% endfor %}
            <hr>
            관련 파일 : 
            {% for file in todolist_files_set.all %}
            <a href="#">{{ file }}</a>
            {% endfor %}
          </div>
        </div>
        <footer class="card-footer">
          <a href="{% url 'todo:todolist' %}" class="card-footer-item"><button class="button is-link is-fullwidth">뒤로가기</button></a>
          <a href="#" class="card-footer-item"><button class="button is-warning is-fullwidth">수정하기</button></a>
          <a href="#" class="card-footer-item"><button class="button is-danger is-fullwidth">삭제하기</button></a>
        </footer>
      </div>
    
{% endblock content %}

todo/views.py 파일에 DetailView 추가

from django.shortcuts import render 
from .models import TodoList, TodoList_files, TodoList_images 
from django.views import generic 

# Create your views here. 


class IndexView(generic.ListView):
    context_object_name = 'to_do_list'
    
    def get_queryset(self):
        return TodoList.objects.all() 
    
class DetailView(generic.DetailView):
    model = TodoList 
    contxt_object_name = 'todolist'
    
    def get_queryset(self):
        return TodoList.objects.all()

DetailView 를 호출할 URL 설정

todo/urls.py 파일을 아래와 같이 DetailView 를 호출하는 URL 을 등록해줍니다.

from django.contrib import admin 
from django.urls import path 
from .views import IndexView, DetailView 

app_name = 'tdodo'

urlpatterns = [
    path('', IndexView.as_view(), name='todolist'),
    path('detail/<int:pk>/', DetailView.as_view(), name="todolist_detail"),
]

todolist_detail 로 가는 URL 링크를 추가

templates/todo/todolist_list.html 에서 todolist_detail 로 가는 링크를 추가 해줍니다.

<footer class="card-footer">
     <a href="/detail/{{ todo.id }}" class="card-footer-item"><button class="button is-primary is-fullwidth">더보기</button></a>
     <a href="#" class="card-footer-item"><button class="button is-warning is-fullwidth">수정하기</button></a>
     <a href="#" class="card-footer-item"><button class="button is-danger is-fullwidth">삭제하기</button></a>
   </footer>

마치며..

투두리스트의 디테일 보기 구현이 간단하게 되었습니다.

순서대로 하면 잘 구현 되는것을 확인할수 있었습니다. 하지만, 문제가 하나 발생합니다.

투두리스트에 이미지와 파일이 있어도, 이것이 디테일 페이지에서 표시가 되지 않습니다.

이를 위해서는, MEDIA 경로를 설정하고, URL 패턴에 MEDIA_URL 을 추가해주어야 합니다.