[Django] 장고 유저 기능 구현하기 #12 ( Form에 디자인 입히기)

2021.12.22 - [Study/Django] - [Django] 장고 유저 기능 구현하기 #11 ( 비밀번호 관리 기능)

[Django] 장고 유저 기능 구현하기 #11 ( 비밀번호 관리 기능)

이전 게시글에 이어서 이번 게시글에서는 현재 만들어진 form에 드디어 디자인을 입혀볼 것입니다!!

---

Django allath Form에 디자인 입히기

<input type="password" name="password1" placeholder="새 비밀번호" autocomplete="new-password" class="cp-input"
               required id="id_password1">

위처럼 password를 작성하는 input 필드가 있을 때, 위 처럼 css 디자인을 입히기 위해 작성하는 것처럼, form을 사용해서 쉽게 필드를 작성하고 디자인을 입힐 수 있습니다.

하지만 이전에 이 작업은 기존 allauth에서 제공하는 템플릿을 오버 라이딩하는 것입니다.

allauth에서는 템플릿을 오버 라이딩하기 위해서는 templates 폴더 안에 account라는 폴더를 만들고 그 안에 템플릿 파일을 넣어주면 됩니다. 

allauth 오버라이딩을 위한 템플릿 설정

그리고 이때 settings.py에서도 중요하게 설정을 하나 해줘야 합니다.

# settings.py
...
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django.contrib.sites',
    'coplate',  
    'widget_tweaks',
    'allauth',
    'allauth.account',
    'allauth.socialaccount',
]
...

위 코드처럼 INSTALLED_APPS에 있는 프로젝트에서 사용하고 있는 APP이 allauth APP 보다 위에 있어야 합니다.

Django에서는 템플릿을 읽어 들일 때, INSTALLED_APP 위에서 순서대로 찾아보면서 만약 없을 경우에 그 아래에 있는 APP에서 찾는 식으로 작동합니다.

즉 이렇게 해야 coplate ( 현재 사용 중인 APP )에서 오버 라이딩 한 템플릿을 읽는 것입니다!

만약 allauth가 먼저 있다면 allauth 기본 제공 템플릿을 먼저 읽기 때문에 오버 라이딩한 템플릿이 적용되지 않습니다!

---

<input type="password" name="password1" placeholder="새 비밀번호" autocomplete="new-password" class="cp-input"
               required id="id_password1">

자 그럼 아까 봤던 코드를 다시 한번 보겠습니다.

이와 같이 코드를 작성하고 보면 css가 적용된 이쁜 비밀번호 창이 나오게 되는데요.

이때 입력을 하고 확인을 눌러도 아무런 행동이 취해지지 않습니다.

왜냐하면 이렇게 작성된 input은 view와 연결되어 있지 않기 때문입니다.

그래서 이런 부분을 장고 템플릿 언어를 사용해서 바꿔주면 됩니다.

url 태그로 링크 주소를 바꿔주고, form 변수를 사용해서 form과 view를 연결해주는 것입니다.

{{ form.login|add_class:"cp-input"|attr:"placeholder: 이메일"|add_error_class:"error" }}

즉 input 코드를 위처럼 Django 템플릿 언어로 바꿔주게 되면 view와 연결됩니다.

이때 위처럼 class나 attr 같이 속성을 추가해주기 위해서는 django-widget-tweaks를 사용하면 됩니다.

GitHub - jazzband/django-widget-tweaks: Tweak the form field rendering in templates, not in python-level form definitions. CSS c

위 코드처럼 버티컬 바 ( | )를 사용한 후 class나 속성을 추가해주면 됩니다.

이때 widget-tweaks를 사용하기 위해서는 해당 템플릿 상단에 아래와 같은 코드를 추가해줘야 합니다.

{% load widget_tweaks %}

그 후 만약 form의 필드에서 에러가 났을 경우를 대비해서 넣는 속성인 add_error_class도 추가해주었는데요.

error-message class를 가진 div안에 넣어주면 됩니다.

      <div>
        {{ form.password1|add_class:"cp-input"|attr:"placeholder: 새 비밀번호"|add_error_class:"error" }}
        {% for error in form.password1.errors %}
          <div class="error-message">{{ error }}</div>
        {% endfor %}
      </div>

즉 위처럼 코드를 작성해주면 새 비밀번호를 작성하는 비밀번호 입력 form에 에러 처리까지 할 수 있게 되는 것입니다!