14.목록 페이지에 상세 보기 링크 연결하기

study_detail

{% extends 'base.html' %}
 
{% block title %}{{ study.title }} | 공부시간 기록기{% endblock %}
 
{<% block content %}
div class="container">
  <section class="hero-card">
    <span class="hero-eyebrow">Study Detail</span>
    <h1 class="hero-title">{{ study.title }}</h1>
    <p class="hero-desc">
      기록한 공부 내용을 조금 더 자세히 확인하는 페이지입니다.
      언제, 어떤 주제로, 얼마나 공부했는지와 함께 남겨둔 메모를 확인할 수 있습니다.
    </p>
  </section>
 
  <section class="detail-card">
    <div class="record-meta">
      <span class="badge">{{ study.get_category_display }}</span>
      <span class="badge gray">{{ study.study_date }}</span>
      <span class="badge gray">{{ study.hours }}시간 {{ study.minutes }}분</span>
      <span class="badge gray">총 {{ study.total_minutes }}분</span>
    </div>
 
    <div style="margin-top: 24px;">
      <h2 class="section-title">학습 메모</h2>
      <p class="record-memo">
        {% if study.memo %}
          {{ study.memo|linebreaksbr }}
        {% else %}
          작성된 메모가 없습니다.
        {% endif %}
      </p>
    </div>
 
    <div style="margin-top: 24px;">
      <h2 class="section-title">기록 정보</h2>
      <p class="record-memo">생성일: {{ study.created_at }}</p>
      <p class="record-memo">수정일: {{ study.updated_at }}</p>
    </div>
 
    <div class="detail-actions">
      <a href="{% url 'study:list' %}" class="btn btn-secondary">목록으로</a>
    </div>
  </section>
</div>
{% endblock %}

study_list

% extends 'base.html' %}
 
{% block title %}공부 기록 목록 | 공부시간 기록기{% endblock %}
 
{% block content %}
<div class="container">
  <section class="hero-card">
    <span class="hero-eyebrow">Django 반복훈련 1</span>
    <h1 class="hero-title">공부 기록을 쌓아가며<br>꾸준함을 눈으로 확인해보세요.</h1>
    <p class="hero-desc">
      단순히 오늘 무엇을 공부했는지 적는 것을 넘어,
      얼마나 꾸준히 학습하고 있는지 한눈에 확인할 수 있는 공부시간 기록기입니다.
    </p>
 
    <div class="summary-grid">
      <div class="summary-card">
        <div class="summary-label">전체 기록 수</div>
        <div class="summary-value">{{ total_count }}개</div>
      </div>
      <div class="summary-card">
        <div class="summary-label">누적 공부 시간</div>
        <div class="summary-value">{{ total_hours }}시간 {{ remain_minutes }}분</div>
      </div>
      <div class="summary-card">
        <div class="summary-label">이번 편 목표</div>
        <div class="summary-value">목록 페이지 완성</div>
      </div>
    </div>
  </section>
 
  <div class="page-grid">
    <section class="content-card">
      <h2 class="section-title">최근 공부 기록</h2>
 
      {% if studies %}
        <div class="record-list">
          {% for study in studies %}
            <article class="record-card">
              <h3 class="record-title">{{ study.title }}</h3>
 
              <div class="record-meta">
                <span class="badge">{{ study.get_category_display }}</span>
                <span class="badge gray">{{ study.study_date }}</span>
                <span class="badge gray">{{ study.hours }}시간 {{ study.minutes }}분</span>
              </div>
 
              <p class="record-memo">
                {% if study.memo %}
                  {{ study.memo|truncatechars:120 }}
                {% else %}
                  작성된 메모가 없습니다.
                {% endif %}
              </p>
            </article>
          {% endfor %}
        </div>
      {% else %}
        <div class="empty-card">
          <h3 class="section-title">아직 등록된 공부 기록이 없습니다.</h3>
          <p class="record-memo">
            먼저 관리자 페이지에서 데이터를 추가해보세요.
            다음 교안에서는 브라우저 화면에서 직접 생성하는 기능까지 만들게 됩니다.
          </p>
        </div>
      {% endif %}
    </section>
 
    <aside class="content-card">
      <h2 class="section-title">이번 편에서 익히는 것</h2>
      <p class="record-memo">이번 교안에서는 Django의 가장 기본적인 구조와 데이터가 화면에 보이는 흐름을 익히는 데 집중합니다.</p>
      <div class="record-meta">
        <span class="badge">Model</span>
        <span class="badge gray">Admin</span>
        <span class="badge gray">Template</span>
      </div>
    </aside>
  </div>
</div>
{% endblock %}

study_list.html 큰 틀 분석

---

1. 전체 구조 한눈에

base.html 상속
│
├── block title     ← 탭 제목
│
└── block content   ← 실제 화면
        │
        ├── section.hero-card     ← 상단 소개 + 통계
        │
        └── div.page-grid         ← 2단 레이아웃
                │
                ├── section.content-card  ← 공부 기록 목록 (왼쪽)
                │
                └── aside.content-card    ← 사이드 정보 (오른쪽)

---

2. hero-card (상단 소개 + 통계 영역)

<section class="hero-card">

    <!-- 소개 글 -->
    <span>Django 반복훈련 1</span>
    <h1>공부 기록을 쌓아가며...</h1>
    <p>단순히 오늘 무엇을 공부했는지...</p>

    <!-- 통계 3개 -->
    <div class="summary-grid">
        전체 기록 수     → {{ total_count }}
        누적 공부 시간   → {{ total_hours }}시간 {{ remain_minutes }}분
        이번 편 목표     → 목록 페이지 완성
    </div>

</section>

• total_count, total_hours, remain_minutes 는 views.py에서 계산해서 넘겨준 값

---

3. page-grid (2단 레이아웃)

┌─────────────────────┬──────────────┐
│  section            │    aside     │
│  최근 공부 기록      │  이번 편에서  │
│  (메인 콘텐츠)       │  익히는 것   │
│                     │  (사이드)    │
└─────────────────────┴──────────────┘

---

4. content-card (공부 기록 목록)

{% if studies %}          <!-- 기록이 있으면 -->

    {% for study in studies %}   <!-- 기록 수만큼 반복 -->
        <article class="record-card">
            <h3>제목</h3>
            배지들 (카테고리, 날짜, 시간)
            메모 미리보기
        </article>
    {% endfor %}

{% else %}                <!-- 기록이 없으면 -->
    "아직 등록된 공부 기록이 없습니다."
{% endif %}

상황	화면
기록 있음	카드 목록 출력
기록 없음	빈 안내 메시지 출력

• truncatechars:120 = 메모가 길면 120자만 잘라서 표시

---

5. aside (사이드바)

<aside class="content-card">
    <h2>이번 편에서 익히는 것</h2>
    <p>설명글...</p>
    <span class="badge">Model</span>
    <span class="badge">Admin</span>
    <span class="badge">Template</span>
</aside>

• aside = 보조 정보 를 담는 태그
• 메인 콘텐츠와 관련된 부가 설명

---

전체 흐름 한줄 요약

hero-card  → 소개글 + 통계 요약 (전체 기록수, 누적시간)
page-grid  → 2단 레이아웃
    ├── 왼쪽 : 공부 기록 카드 목록 (있으면 출력, 없으면 안내)
    └── 오른쪽 : 이번 편 학습 내용 안내 (사이드바)

---