정렬기능 자체는 잘 동작합니다만
셀렉트박스가 선택항목으로 고정되지 않는 현상이 있습니다.

추천순 또는 인기순으로 선택시 각 정렬기준으로 정렬은 되지만 셀렉트 박스는 다시 최신순으로 원복 되기때문에
정렬기준을 최신순으로 변경할 수 없는 문제가 있습니다.
(이대로라면 so가 언제든 recent인 상태이기 때문에 javascript의 on.change 가 수행되지 않을것 같습니다. )

            <select class="form-select so">
                <option value="recent" {% if so == 'recent' %}selected{% endif %}>최신순</option>
                <option value="recommend" {% if so == 'recommend' %}selected{% endif %}>추천순</option>
                <option value="popular" {% if so == 'popular' %}selected{% endif %}>인기순</option>
            </select>

소스상으로 보면 선택한 so에 의해 selected 속성이 적용되어야 할 것 같은데, 개발자 도구로 확인해보니 so가 저장이 안되는건지 selected 속성 적용이 되지 않네요.

-------------- 기본상태

-------------- 추천순 클릭상태

{% block script %}
<script type='text/javascript'>
$(document).ready(function() {
    $(".page-link").on('click', function() {
        $("#page").val($(this).data("page"));
        $("#searchForm").submit();
    });

    $("#btn_search").on('click', function() {
        $("#kw").val($(".kw").val());
        $("#page").val(1);
        $("#searchForm").submit();
    });
    $(".so").on('change', function() {
        $("#so").val($(this).val());
        $("#page").val(1);
        $("#searchForm").submit();
    });    
});
</script>
{% endblock %}

자바스크립트 영역도 혹시 몰라서 첨부드립니다. 선생님 소스를 복붙해보기도 해서 오타는 아닐겁니다 ㅠㅠㅠ