개발 일지 23 - 카테고리 바 수정 + 페이지 바 수정

header부분에 있는 카테고리 바를 수정했다. 

 

<nav class="category-bar">
            <div class="vertical-line"></div> <!-- 첫 번째 세로선 추가 -->
            <div class="dropdown">
                <a href="#" class="dropbtn">장르 선택</a>
                <div class="dropdown-content">
                    
                    <a href="?category=category1&sort={{ request.GET.sort }}">카테고리1</a>
                    <a href="?category=category2&sort={{ request.GET.sort }}">카테고리2</a>
                    <!-- 추가 장르를 여기에 추가할 수 있습니다 -->
                </div>
            </div>
            <div class="vertical-line"></div>
            <a href="#">커뮤니티</a>
            <div class="vertical-line"></div>
            
        </nav>

 

위와 같이 바꿔주었다. 원래는 a href가 아니라 select를 사용했다. 

 

<form method="get" action=".">
              <select id="category" name="category" onchange="this.form.submit()">
              <option value="category1" {% if category == 'category1' %}selected{% endif %}>카테고리 1</option>
              <option value="category2" {% if category == 'category2' %}selected{% endif %}>카테고리 2</option>
               <!-- 다른 카테고리 추가 가능 -->
          </select>
          <input type="hidden" name="sort" value="{{ request.GET.sort }}">
</form>

 

위에 코드를 사용하려 했는데 문제는 nav 카테고리 바가 안에 들어가서 아래와 같은 그림을 출력한다는 것이 문제였다.

 

 

그래서 생각한 해결책 a href를 사용하는 것이다. category의 값을 직접 적어주고 input hidden으로 보내주던 값도 직접 하드 코딩하여 값을 전송하는 형식으로 바꿔주었다.

 

---

 

어제 구현했던 페이지 부분에서 페이지 수를 직접 입력하고 넘어갈때 sort 값이 전송이 되지 않는다는 것을 깨닫고 수정을 했다.

var sortParam = "{{ request.GET.sort|default:'' }}";

var newUrl = "?page=" + pageNumber;
if (sortParam) {
      newUrl += "&sort=" + sortParam;  // sort 값이 있으면 URL에 추가
} 
 window.location.href = newUrl;

 

sortParam으로 sort값을 받아오고  sortParam이 있을 경우 newUrl에 더해주는 코드로 구현을 했다.