[▶️Front-end] 메인 페이지에 좋아요, 싫어요 버튼 기능 구현

 ▶️ Bootstrap 

[▶️Back-end] 메인 페이지에 좋아요, 싫어요 버튼 기능 구현 3차

 

main.html에 좋아요 버튼을 추가하고 디자인을 변경했어요.

---

main.html

<전체 코드>

{% extends "base.html" %}

{% block content %}

<div class="wrapper">
    <div class="container-fluid">
        <div class="row">
            <!--Left button-->
            <div class="col-md-3">
                    <button class="btn-custom w-100" onclick="location.href='create/'">
                        Create to text ✏️ <i class="fas fa-file"></i>
                    </button>
                
                <button class="btn-custom w-100">Create to image 📷<i class="fas fa-image"></i></button>
            </div>
    
            <!-- Image Gallery (Right) -->
            <div class="col-md-9">
                <div class="row">
                    {% for article in article_list %}
                    <div class="col-md-4">
                        <div class="card">
                            <a style="color: black;" href="{% url 'articles:articledetail' article.pk %}">
                            <div class="card-img-top">
                                {% if article.image %}
                                <img src="{{ article.image.url }}" class="fas fa-image fa-5x" style="max-width: 100%; max-height: 100%; object-fit: contain;"></img>
                                {% endif %}
                            </div>
                            <div>
                                <form method="post" action="{% url "articles:articlelike" article.pk "❤️" %}" style="display: inline-block; margin-right: 15px;">
                                    {% csrf_token %}
                                    <button type="submit" class="btn btn-outline-light">❤️</button>
                                    <p class="card-text" style="display: inline-block;"><strong>{{ article.like_count }}</strong></p>
                                </form>
                                <form method="post" action="{% url "articles:articlelike" article.pk "🤨" %}" style="display: inline-block; margin-right: 10px;">
                                    {% csrf_token %}
                                    <button type="submit" class="btn btn-outline-light">🤨</button>
                                    <p class="card-text" style="display: inline-block;"><strong>{{ article.dislike_count }}</strong></p>
                                </form>
                            </div>
                            <div class="card-body">
                                <p class="card-content">
                                    User ID : {{ article.user_id }}<br>
                                    Job ID : {{ article.job_id}}
                                </p>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .container {
        margin-top: 20px; 
    }
    .card {
        margin-top: 15px;
        margin-bottom: 20px;
        padding: 10px;
    }
    .card-img-top {
        background-color: #f0f0f0; /* Placeholder gray color */
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
    }
    .card-title {
        font-size: 16px;
        text-align: left;
    }
    /* 왼쪽 버튼 설정*/
    .btn-custom {
        background-color: white;
        color: black;
        border: 1px solid #ced4da;
        border-radius: 5px;
        margin-top: 15px;
        margin-bottom: 0px;
        padding: 8px 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .btn-custom:hover {
        background-color: #e9ecef; /* Light gray on hover */
    }

    .btn-custom i {
        margin-left: 5px; /* Space between text and icon */
    }
    .placeholder-image {
        width: 100%;
        height: 200px; /* Adjust as needed */
        background-color: #f0f0f0;
        border: 1px solid #ddd;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #aaa;
        margin-bottom: 10px; /* Added spacing between images */
    }

    .placeholder-image svg {
        width: 50%; /* Adjust size as needed */
        height: 50%;
    }

</style>
{% endblock %}

---