개발 일지 21 - 추천 랭킹 + 랭킹 css + 위치 변경

 

아래 코드를 view.py에 추가했다.

추천수에 대한 랭킹을 나열했다.

like_ranking = Post_information.objects.all().annotate(like_count=Count('like_users')).order_by('-like_count')[:5]

 

받은 like_ranking 값을 어제 만들어둔 ranking_list.html로 보냈다.

 

 

<div class="ranking-sections">
    <!-- 실시간 조회수 섹션 -->
    <div class="ranking-section views-section">
        <h4>실시간 조회수</h4>
        <div class="rankings">
            {% for post in rank %}
            <div class="ranking-item rank-{{ forloop.counter }}">
                <div class="rank-number">{{ forloop.counter }}</div>
                <div class="rank-title"><a href="{% url 'post_detail' post.id %}">{{ post.title }}</a></div>
                <div class="rank-views"> &nbsp; => 조회수: {{ post.views }}</div>
            </div>
            {% endfor %}
        </div>
    </div>

    <!-- 실시간 추천수 섹션 -->
    <div class="ranking-section likes-section">
        <h4>실시간 추천수</h4>
        <div class="rankings">
            {% for post in like_rank %}
            <div class="ranking-item rank-{{ forloop.counter }}">
                <div class="rank-number">{{ forloop.counter }}</div>
                <div class="rank-title"><a href="{% url 'post_detail' post.id %}">{{ post.title }}</a></div>
                <div class="rank-likes"> &nbsp; => 추천수: {{ post.like_count }}</div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>

 

위와 같이 구현을 했다. 

 

원래는 리스트로 정렬되게 했었는데 순위를 나타내는데 직관적으로 느껴지는 것이 없는 것 같아서 forloop.counter을 사용했다. for문이 반복되면서 첫 번째 반복시 1 2번째 반복시 2를 주는 코드이다. 

 

<div class> rank-{{forloop.counter}}을 넣었다. 1등부터 3위까지 글씨 색깔이나 배경 이미지를 다르게 바꿔주고 싶어서 구현했다.

 

첫 번째 반복문이 진행이 되면 rank-1이라는 div가 만들어지고 css를 통해 아래처럼 구현을 할 수 있다. 

 

/* 1등 스타일 */
        .rank-1 {
            background-color: #ffd700; /* 금색 */
            font-weight: bold;
            border-left: 4px solid #d4af37;
        }

 

rank-2,rank-3도 마찬가지다.

rank-4 부터는 1,2,3등에 비해 노멀하게 만들었다.

 

/* 2등 스타일 */
        .rank-2 {
            background-color: #c0c0c0; /* 은색 */
            font-weight: bold;
            border-left: 4px solid #a9a9a9;
        }
        
        /* 3등 스타일 */
        .rank-3 {
            background-color: #cd7f32; /* 동색 */
            font-weight: bold;
            border-left: 4px solid #8b4513;
        }
        
        /* 4등 이후 스타일 */
        .ranking-item:not(.rank-1):not(.rank-2):not(.rank-3) {
            background-color: #f1f1f1;
            border-left: 4px solid #ccc;
        }

 

 

---

 

 

실시간 인기글 내용을 원래 사이드 바에 넣었었다가 실시간 추천 순위도 추가하면서 공간이 부족하다는 것을 느꼈다.

그래서 content영역으로 옮기고 실시간 조회수와 실시간 추천수가 수직적인 정렬이 아닌 수평적인 정렬을 이룰 수 있게 구현했다. 

 

 /* 랭킹 섹션을 가로로 배치 */
        .ranking-sections {
            display: flex;
            justify-content: space-between; /* 섹션 간의 간격을 고르게 분배 */
            margin-right:32px;
        }

 

display:flex를 사용을 하면 Flexbox레이아웃을 사용하도록 지정한다.

 

Flexbox는 아이템들을 수평 또는 수직으로 쉽게 배치할 수 있게 해주는 CSS의 레이아웃 모델이다. 

 

사이드 바에서 content 영역으로 옮긴 결과 훨씬 직관적이고 보기가 편해졌다. 

 

 

 

이제 보니 좀 촌스러운 것 같다. 디자인을 좀 더 생각해야겠다.