11-23 컴포넌트가 제대로 동작하지 않는것 같습니다.

https://github.com/pyhub-kr/course-django-complete-guide-v3/commit/ea385575c83d8a2ff6b0407352ec419034a1be30


관련커밋 내용을 그대로 복사하여 적용하였습니다. (image_overlay, index.html)
컴포넌트에서 첫 번째 레코드 요소만 반복되어 적용 됩니다. (이미지를 포함하여 제목까지 똑같습니다.)
myproj/photolog/templates/photolog/index.html 가 문제 인거 같습니다.


myproj/photolog/templates/photolog/index.html 임의 수정

{% extends "photolog/base.html" %}
{% load component_tags %}

{% block photolog-content %}
    <div class="container">
        <div class="row">
            {% for note in note_list %}
                {% with img_url=note.photo_set.all.0.image.url %}
                    {% component "image-overlay" href="/" target="_blank" class="col-xl-3 col-lg-4 col-md-6 mt-4" %}
                        {% fill "img-src" %}{{ img_url }}{% endfill %}
                        {% fill "text" %}
                            {{ note.title }}<br/>
                            <small>by {{ note.author.username }}</small>
                        {% endfill %}
                    {% endcomponent %}
                {% endwith %}
            {% endfor %}
        </div>
    </div>
{% endblock %}

기존 코드에서 with, {{ img_url }}을 추가하여 수정 하였습니다.




위와 같이 수정하니 컴포넌트가 정상적으로 불러와졌습니다.

myproj 버전

[[source]]
url = "https://pypi.org/simple"
verify_ssl = true
name = "pypi"

[packages]
django = "*"
black = "*"
django-extensions = "*"
django-environ = "*"
django-template-partials = "*"
django-htmx = "*"
django-crispy-forms = "*"
crispy-bootstrap5 = "*"
django-components = "*"
pillow = "*"
django-lifecycle = "*"

[dev-packages]
django-debug-toolbar = "*"
ipython = "*"

[requires]
python_version = "3.12"

COMPONENTS = {
    "slot_context_behavior": "allow_override",  # 디폴트: "prefer_root"
}

{% extends "photolog/base.html" %}
{% load component_tags %}

{% block photolog-content %}
    <div class="container">
        <div class="row">
            {% for note in note_list %}
                {{ note.title }}<br/>
            {% endfor %}
        </div>
    </div>
{% endblock %}