HTML5/반응형 웹

시 목록 페이지 분리: "자세히 보기" 구현

forSilver 2025. 7. 15. 15:11
반응형

지금처럼 목록에서 시의 전문까지 모두 출력하면 가독성이 떨어지기 때문에 다음과 같은 구조로 개선하겠습니다: 여러 편을 선택해서 전자책 출간을 하기 때문에 이런 출력은 관리가 곤란합니다. 


✅ 개선 방향

항목 설명
시 목록 페이지 제목, 작가, 작성일만 보여줍니다.
자세히 보기 페이지 클릭 시 해당 시의 전문(본문)을 보여줍니다.
구현 방법 ListView 또는 함수 기반 뷰로 시 목록 출력 + DetailView로 전문 보기

📘 『시마당 프로젝트 따라하기』

8장. 시 목록 페이지 분리: "자세히 보기" 구현

작성자: easyfly
작성일: 2025년 7월 15일


🟦 1. 뷰 함수 추가 – 상세 보기

📁 poem/views.py에 아래 함수 추가:

from django.shortcuts import get_object_or_404

def poem_detail(request, pk):
    poem = get_object_or_404(Poem, pk=pk)
    return render(request, 'poem/poem_detail.html', {'poem': poem})

함수 poem_detail 추가


🟦 2. URL 패턴 추가

📁 poem/urls.py에 아래 경로 추가:

path('detail/<int:pk>/', views.poem_detail, name='poem_detail'),

전체 urlpatterns는 예를 들어 다음과 같아야 합니다:

urlpatterns = [
    path('upload/', views.upload_poem, name='upload_poem'),
    path('success/', views.upload_success, name='upload_success'),
    path('list/', views.poem_list, name='poem_list'),
    path('detail/<int:pk>/', views.poem_detail, name='poem_detail'),
]

🟦 3. 목록 템플릿 수정 – 제목만 출력하고 링크로 연결

📁 poem/templates/poem/poem_list.html 수정:

<h1>시 목록 (전자책 출간용)</h1>

{% if poems %}
    <ul>
        {% for poem in poems %}
            <li>
                <strong><a href="{% url 'poem_detail' poem.pk %}">{{ poem.title }}</a></strong><br>
                <em>{{ poem.author.name }}</em><br>
                <small>{{ poem.created_at|date:"Y년 m월 d일 H:i" }}</small>
            </li>
        {% endfor %}
    </ul>
{% else %}
    <p>아직 등록된 시가 없습니다.</p>
{% endif %}

🟦 4. 상세 템플릿 작성

📁 새 파일: poem/templates/poem/poem_detail.html

<h1>{{ poem.title }}</h1>
<p><em>{{ poem.author.name }} / {{ poem.created_at|date:"Y년 m월 d일 H:i" }}</em></p>
<hr>
<pre>{{ poem.content }}</pre>
<hr>
<a href="{% url 'poem_list' %}">← 목록으로 돌아가기</a>

🧪 5. 확인

목록 페이지:

http://<EC2 IP>:8000/poem/list/
  • 제목을 클릭하면 해당 시의 전문 페이지로 이동합니다.

상세 페이지 예:

http://<EC2 IP>:8000/poem/detail/1/


✅ 정리

항목 완료 여부
시 목록 가독성 개선 ✅ 제목만 보여줌
"자세히 보기" 페이지 구현 ✅ 완료
템플릿 분리 및 링크 설정 ✅ 완료

다음 예고 – 『9장. EPUB 파일 자동 생성: 시집 출간 기능 만들기』

  • 여러 편의 시를 모아 하나의 .epub 전자책으로 출력하는 기능을 만들겠습니다.
  • 작가별, 날짜별, 또는 전체 시집 생성 옵션도 고려할 수 있습니다.