Todo 앱 카드보기,목록보기 만들기

우선 Todo 앱의 구조를 생각해보면,
1.카드형태로 할일 목록이 나열됨
2.표 형태로 할일/마감일/남은일자를 확인할수 있어야 함
3.상세보기를 누르면, 첨부사진과 첨부파일이 보여야 함

우선 1번을 위해서 부트스트랩을 적용하고, 카드를 설정해줌
listview는 저번에 만들어놓았으니까,

#todo_index.html
<br>
   <ul>
      <div class="row">
        {% for todo in todo_list %}
        <div class="col-sm-3">
          <div class="card">
            <div class="card-header"><h4>{{todo.name}}</h4></div>
            <div class="card-body">
              <h5 class="card-title">{{ todo.description }}</h5>
              <p class="card-text">마감 : {{ todo.date_deadline }} | {{ todo.remaining_days }}</p>
              <a href="{% url 'todo:complete' todo.id %}" class="btn btn-primary">완료</a>
              <a href="{% url 'todo:update' todo.id %}" class="btn btn-primary">수정</a>
              <a href="{% url 'todo:delete' todo.id %}" class="btn btn-primary bg-danger border-danger">삭제</a>
              <a href="{% url 'todo:detail' todo.id %}" class="btn btn-secondary">자세히</a>
            </div>
          </div>
        </div>
        {% endfor %}
        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
          <a href="{% url 'todo:list' %}" class="btn btn-primary mt-5" type="button" >목록으로 보기</a>
          <a href="{% url 'todo:create' %}" class="btn btn-dark mt-5" type="button" >할일 만들기</a>
        </div>
      </div>
    </ul>

col-sm-3을 줘서 한 화면에 가로로 4개까지 카드가 표시되게 해주고, 버튼을 4개 만들어서 각각 완료/수정/삭제/자세히로 할당해 주었다

많이 허접하지만 이런 느낌의 카드가 가로 4장씩 배열될것이다.

하지만 이 경우에, 남은 일자를 파악하기 힘드니까, 목록으로 볼수있도록 해주자.

index와 똑같이ListView를 이용해 TodoListView를 만들고,url을 설정하고, 템플릿을 만들어주면 끝이다.

#views.py
class TodoListView(ListView):
    model = TodoList
    template_name = 'todo/todo_list.html'
    
#urls.py 
path('list/', TodoListView.as_view(), name='list'),

#todo_list.html
<div class="container">
    <table class="table table-striped">
        <thead>
            <tr>

                <th>할일</th>
                <th>마감일</th>
                <th>마감</th>
            </tr>
        </thead>
        <tbody>
            {%for todo in object_list %}
            <tr>
                <td><a href="{% url 'todo:detail' todo.id %}">{{todo.name }}</td>
                <td>{{ todo.date_deadline}}</td>
                <td>{{ todo.remaining_days}}</td>
            </tr>
            {% endfor%}
        </tbody>
    </table>
    
    <hr/>
    <a class="btn btn-primary pull-right" href="{% url 'todo:index' %}">카드로 보기</a>
    <div class="text-center"></div>

이렇게 작업을 끝내면,

역시 허접하지만 요런 모양이 된다!