[▶️Front-end] Bootstrap으로 화면 구성(회원 가입, 로그인, 로그아웃)

 ▶️ Bootstrap 

[▶️Back-end] Auth 기능 구현하기(회원 가입, 로그인, 로그아웃) 2차 完

Figma에 있는 화면처럼 서버의 디자인을 Bootstrap으로 꾸며볼게요.

---

⚙️ register.html

# register.html
{% extends "register-base.html" %}

{% load static %}

{% block content %}
<div class="main-container">
    <div class="login-container">
        <h2><center>Register</center></h2>
        <br>
        <form method="POST" action="{% url 'accounts:register' %}">
            {% csrf_token %}
            
            <div class="form-group">
                <label for="{{ form.username.id_for_label }}" class="form-label"><strong>ID</strong></label>
                {{ form.username }}
                {% if form.username.errors %}
                    <div class="alert alert-danger">
                        {% for error in form.username.errors %}
                            {{ error }}
                        {% endfor %}
                    </div>
                {% endif %}
            </div>

            <div class="form-group">
                <label for="{{ form.surname.id_for_label }}" class="form-label"><strong>Name</strong></label>
                {{ form.surname }}
                {% if form.surname.errors %}
                    <div class="alert alert-danger">
                        {% for error in form.surname.errors %}
                            {{ error }}
                        {% endfor %}
                    </div>
                {% endif %}
            </div>

            <div class="form-group">
                <label for="{{ form.password1.id_for_label }}" class="form-label"><strong>Password</strong></label>
                {{ form.password1 }}
                {% if form.password1.errors %}
                    <div class="alert alert-danger">
                        {% for error in form.password1.errors %}
                            {{ error }}
                        {% endfor %}
                    </div>
                {% endif %}
            </div>

            <div class="mb-3">
                <label for="{{ form.password2.id_for_label }}" class="form-label"><strong>Check Password</strong></label>
                {{ form.password2 }}
                {% if form.password2.errors %}
                    <div class="alert alert-danger">
                        {% for error in form.password2.errors %}
                            {{ error }}
                        {% endfor %}
                    </div>
                {% endif %}
            </div>

            <div class="form-group">
                <label for="{{ form.email.id_for_label }}" class="form-label"><strong>Email</strong></label>
                {{ form.email }}
                {% if form.email.errors %}
                    <div class="alert alert-danger">
                        {% for error in form.email.errors %}
                            {{ error }}
                        {% endfor %}
                    </div>
                {% endif %}
            </div>

            <div class="form-group">
                <label for="{{ form.message.id_for_label }}" class="form-label"><strong>Message</strong></label>
                {{ form.message }}
                {% if form.message.errors %}
                    <div class="alert alert-danger">
                        {% for error in form.message.errors %}
                            {{ error }}
                        {% endfor %}
                    </div>
                {% endif %}
            </div>

            <button type="submit" class="btn btn-dark w-100">Submit</button>
        </form>
    </div>
</div>

<style>
    body {
        font-family: sans-serif;
        background-color:#ffffff; /* Light gray background */
        display: flex;
        flex-direction: column;
        min-height: 20vh; /* Ensure full height */
    }
    /* Main Container */
    .main-container {
        flex: 1; /* Allow the main container to take up remaining space */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    /* Login Form Container */
    .login-container {
        width: 30%;
        padding: 20px;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        resize: vertical; /* 세로로만 크기 조절 가능하도록 */
    }
    .form-control {
        border: 1px solid #ced4da;
        border-radius: 5px;
        padding: 8px;
        width: 100%;
    }
</style>

{% endblock content %}

---

⚙️ login.html

# login.html
{% extends "base.html" %}

{% block content %}

<div class="container d-flex justify-content-center align-items-center vh-100">
    <div class="card p-4 shadow-lg" style="width: 350px;">
        <h2 class="text-center mb-4">Login</h2>
        <form action="{% url 'users:login' %}" method="POST">
            {% csrf_token %}

            <!-- ID 입력 필드 -->
            <div class="mb-3">
                <label for="{{ form.username.id_for_label }}" class="form-label">ID</label>
                <input type="text" name="{{ form.username.name }}" id="{{ form.username.id_for_label }}"
                       class="form-control" placeholder="Enter your ID"
                       value="{{ form.username.value|default:'' }}">
                {% if form.username.errors %}
                    <div class="text-danger small">
                        {{ form.username.errors.0 }}
                    </div>
                {% endif %}
            </div>

            <!-- Password 입력 필드 -->
            <div class="mb-3">
                <label for="{{ form.password.id_for_label }}" class="form-label">Password</label>
                <input type="password" name="{{ form.password.name }}" id="{{ form.password.id_for_label }}"
                       class="form-control" placeholder="Enter your password">
                {% if form.password.errors %}
                    <div class="text-danger small">
                        {{ form.password.errors.0 }}
                    </div>
                {% endif %}
            </div>

            <!-- 제출 버튼 -->
            <button type="submit" class="btn btn-dark w-100">Submit</button>
        </form>

        <!-- 회원가입 링크 -->
        <div class="text-center mt-3">
            <a href="{% url 'accounts:register' %}" class="text-primary">Register</a>
        </div>
    </div>
</div>

{% endblock content %}

---

⚙️ main.html - 추후 수정 필요

{% extends "base.html" %}

{% block content %}

<div class="wrapper">
    <nav class="navbar navbar-light bg-transparent">
        </nav>
    <div class="container-fluid">
        <div class="row">
            <!--Left button-->
            <div class="col-md-3">
                <button class="btn-custom w-100">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">
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-img-top">
                                <i class="fas fa-image fa-5x" style="color: lightgray;"></i>
                            </div>
                            <div class="card-body">
                                <p class="card-title">Text</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-img-top">
                                 <i class="fas fa-image fa-5x" style="color: lightgray;"></i>
                            </div>
                            <div class="card-body">
                                <p class="card-title">Text</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-img-top">
                                 <i class="fas fa-image fa-5x" style="color: lightgray;"></i>
                            </div>
                            <div class="card-body">
                                <p class="card-title">Text</p>
                            </div>
                        </div>
                    </div>
                </div>
    
                 <div class="row">
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-img-top">
                                <i class="fas fa-image fa-5x" style="color: lightgray;"></i>
                            </div>
                            <div class="card-body">
                                <p class="card-title">Text</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-img-top">
                                 <i class="fas fa-image fa-5x" style="color: lightgray;"></i>
                            </div>
                            <div class="card-body">
                                <p class="card-title">Text</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-img-top">
                                 <i class="fas fa-image fa-5x" style="color: lightgray;"></i>
                            </div>
                            <div class="card-body">
                                <p class="card-title">Text</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    body {
        font-family: sans-serif;
        background-color:rgb(255, 255, 255);
        min-height: 100vh; /* 최소 높이를 100vh로 설정하여 화면 전체를 채우도록 함 */

    }
    .wrapper {
        display: flex;
        flex-direction: column; /* 내용을 세로로 정렬 */
        min-height: 100vh; /* 최소 높이를 100vh로 설정하여 body와 동일하게 함 */
    }

    .container {
        margin-top: 20px;
    }
    .card {
        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;
    }
    .col-md-9 {
        margin: 0 auto; /* 좌우 마진을 auto로 설정 */
        float: none;    /* float 속성 제거 */
    }
    .btn-custom {
        background-color: white;
        color: black;
        border: 1px solid #ced4da;
        border-radius: 5px;
        margin-bottom: 5px;
        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 %}