A Full Stack Develpor

https://ichi.pro/ko/django-rest-framework-mich-nuxt-autheseo-google-sosyeol-logeu-in-eul-bildeuhago-jwt-tokeun-eul-saelo-gochineun-bangbeob--128806100117235

Django와 Vue의 Social Login을 연동하는 방법이다. Wagtail은 Django 기반이기 때문에 사용방법이 동일하다. (다만 Wagtail에서는 views.py를 사용하지 않기 때문에 일부 수정이 필요하다.)

1. Nuxt App Build

튜토리얼대로 진행해보겠다. 

환경은 python 3.8로 진행했다. 필요 module은 진행하면서 설치할 계획이다.

1) 먼저 project 폴더를 생성해주자.

mkdir google-login
cd google-login

2) front라는 이름의 vue 프로젝트를 생성해주자. 

npm init nuxt-app frontend

3) 아래와 같이 설정을 진행하면 된다. 

? Project name: google-login
? Programming language: JavaScript
? Package manager: Npm
? UI framework: Buefy
? Nuxt.js modules: enter를 눌러주자
? Linting tools: enter를 눌러주자
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Static (Static/JAMStack hosting)
? Development tools: enter를 눌러주자
? What is your GitHub username? sdil
? Version control system: Git

Vue에 대해서 자세하게 다루는 글이 아니기 때문에 세부설정에 대한 설명은 하지 않겠다. 

4) nuxt auth와 axios를 설치해주자.

cd frontend
npm install --save-exact @nuxtjs/auth-next
npm install @nuxtjs/auth-next @nuxtjs/axios

5) nuxt.config.js 수정

frontend/nuxt.config.js

  modules: [
    // https://go.nuxtjs.dev/buefy
    'nuxt-buefy',
    '@nuxtjs/axios',
    '@nuxtjs/auth-next',
  ],
  auth: {
    strategies: {
      google: {
        clientId: 'to be added'
      }
    }
  },

위와 같이 설정을 바꿔주자. 

6) login.vue 작성

frontend/pages/login.vue

<template>
  <section class="section">
    <b-button @click="loginWithGoogle()" icon-left="google">
      Sign in with Google
    </b-button>
  </section>
</template>

<script>
export default {
  methods: {
    loginWithGoogle() {
      this.$auth.loginWith("google");
    },
  },
};
</script>

Social Login을 위한 Google로그인 버튼을 생성했다. 

7) protect.vue 작성

frontend/pages/protected.vue

<template>
  <section class="section">
      {{ $auth.user.email }}
  </section>
</template>

<script>
export default {
  middleware: 'auth'
};
</script>

Nuxt Auth 미들웨어를 활성화 했다. 사용자가 로그인했을 때만 Page에 Access 할 수가 있다. 로그인 하지 않으면 사용자가 로그인 페이지로 Redirection 된다. 

8) 작동 Test

nuxt dev

# 문제가 발생하는 경우에는 npm install nuxt -g

9) localhost:3000/login 이동

login 버튼을 생성해 놓은 login page로 이동해서 google login 버튼을 누르면 400 승인 오류가 발생할 것이다. 걱정할 필요 없다. 아직 Google OAuth 설정을 하지 않았기 때문이다. 

2. Wagtail API 서버 구축

1) wagtail 설치, 프로젝트 생성

cd ../
pip install wagtail
wagtail start backend
cd backend

backend라는 Wagtail project를 생성해주었다. 

2) 필요 모듈 설치

pip install django-rest-framework dj-rest-auth django-allauth django-cors-headers
pip install djangorestframework-simplejwt

3) App 생성

python manage.py startapp social_login

4) views.py 수정

Wagtail에서는 views.py을 사용하지 않으므로 이후 수정이 필요하다고 생각된다. 허나 지금은 튜토리얼대로 그대로 따라해볼 생각이다.

backend/social_login/views.py

from allauth.socialaccount.providers.google.views import GoogleOAuth2Adapter
from dj_rest_auth.registration.views import SocialLoginView
from allauth.socialaccount.providers.oauth2.client import OAuth2Client
from django.conf import settings

class GoogleLogin(SocialLoginView):
    authentication_classes = [] # disable authentication
    adapter_class = GoogleOAuth2Adapter
    callback_url = "http://localhost:3000/login"
    client_class = OAuth2Client

5) urls.py 수정

backend/backend/urls.py

from django.contrib import admin
from django.urls import path, include
from social_login.views import GoogleLogin

urlpatterns = [
    path('admin/', admin.site.urls),
    path('auth/', include('dj_rest_auth.urls')),
    path('social-login/google/', GoogleLogin.as_view(), name='google_login'),
]

6) settings/base.py 수정

backend/settings/base.py

INSTALLED_APPS = [
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
     "social_login",
     "rest_framework",
     "rest_framework.authtoken",
     "corsheaders",
     "django.contrib.sites",
     # Auth & social auth
     "dj_rest_auth",
     "allauth",
     "allauth.account",
     "dj_rest_auth.registration",
     "allauth.socialaccount",
     "allauth.socialaccount.providers.google",
 ]
 
SOCIALACCOUNT_PROVIDERS = {
    'google': {
        'SCOPE': [
            'profile',
            'email',
        ],
        'AUTH_PARAMS': {
            'access_type': 'online',
        }
    }
}

# Disable email verification since this is just a test.
# If you want to enable it, you'll need to configure django-allauth's email confirmation pages
SOCIALACCOUNT_EMAIL_VERIFICATION = "none"
SOCIALACCOUNT_EMAIL_REQUIRED = False

REST_USE_JWT = True

SITE_ID = 1

from datetime import timedelta

SIMPLE_JWT = {
    'ACCESS_TOKEN_LIFETIME': timedelta(minutes=5),
    'REFRESH_TOKEN_LIFETIME': timedelta(days=7),
    'ROTATE_REFRESH_TOKENS': True, # IMPORTANT
    'BLACKLIST_AFTER_ROTATION': True, # IMPORTANT
    'UPDATE_LAST_LOGIN': True,
}

MIDDLEWARE = [
    "corsheaders.middleware.CorsMiddleware",
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True

# Rest Settings
REST_FRAMEWORK = {
    "DEFAULT_PERMISSION_CLASSES": ("rest_framework.permissions.IsAuthenticated",),
    "DEFAULT_AUTHENTICATION_CLASSES": (
        "rest_framework.authentication.BasicAuthentication",
        "rest_framework.authentication.SessionAuthentication",
        "dj_rest_auth.utils.JWTCookieAuthentication",
    ),
}

DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

7) migrations 실행

python manage.py makemigrations
python manage.py migrate

3. Google OAuth 설정

1) Google Cloud Platform 접속

https://console.cloud.google.com/apis/dashboard

위 사이트로 이동하자. 

2) OAuth 설정

이후 외부를 클릭한 뒤, 앱 이름, 이메일을 입력하고 저장하기를 누른다. 

동의가 완료 되었으면 사용자 인증 정보를 클릭한다. 

OAuth 클라이언트 ID를 클릭하고 애플리케이션 유형을 웹 애플리케이션으로 설정한다. (이름은 알아서 설정)

URI 설정은 다음과 같이 하고 저장을 누른다. 

그러면 자신의 클라이언트 ID와 비밀번호가 나올 것이다. 메모장에다가 저장해놓자. 

4. Nuxt 앱에 Google 클라이언트 ID 추가

클라이언트 ID 추가

frontend/nuxt.config.js

  auth: {
    strategies: {
      google: {
        clientId: '클라이언트 ID',
        codeChallengeMethod: '',
        responseType: 'code',
        endpoints: {
          token: 'http://localhost:8000/social-login/google/',
          userInfo: 'http://localhost:8000/auth/user/'
        },
      },
    }
  },

클라이언트 ID는 아까 google에서 생성한 클라이언트 ID를 넣으면 된다. 

5. Django 앱에 Google 클라이언트 ID 및 비밀번호 추가

1) create superuser 

cd backend
python manage.py createsuperuser
Username (leave blank to use 'fadhil'): admin
Email address: admin@test.com
Password: 
Password (again): 
Superuser created successfully.

슈퍼 유저를 생성해주자. 

2) django-admin 페이지 접속

localhost:8000/django-admin으로 접속한다. 

로그인을 한 뒤 

다음과 같이 설정을 진행해준다. 

이제 완료되었다. 로그인을 진행한 뒤 wagtail admin으로 들어가보면 user가 등록되어 있을 것이다. 

간단하게 Wagtail 에서 제공하는 RichEditor를 수정해보려고 한다. 

Draftail로 새로운 기능을 만들어서 적용하는 방법도 있지만 일단은 기본 RichEditor에 기능을 추가하는 것만 적어보려고한다.

https://docs.wagtail.io/en/stable/advanced_topics/customisation/page_editing_interface.html#rich-text-features

1. 모든 RichTextEditor 수정

settings/base.py

WAGTAILADMIN_RICH_TEXT_EDITORS = {
    'default': {
        'WIDGET': 'wagtail.admin.rich_text.DraftailRichTextArea',
        'OPTIONS': {
            'features': [
                'h2', 'bold', 'italic', 'link', 'document-link', 
                'code', 'image', 'embed', 'ol', 'ul'
                ]
        }
    },
    'legacy': {
        'WIDGET': 'wagtail.admin.rich_text.HalloRichTextArea',
    }
}

base.py에서 RichEditor의 features를 정할 수 있다. 

• h1, h2, h3, h4, h5, h6 - heading elements
• bold, italic - bold / italic text
• ol, ul - ordered / unordered lists
• hr - horizontal rules
• link - page, external and email links
• document-link - links to documents
• image - embedded images
• embed - embedded media (see Embedded content)
• code - inline code
• superscript, subscript, strikethrough - text formatting
• blockquote - blockquote

RichEditor에서 제공하는 기능들이다. 이외 필요한 기능이 있다면 직접 만들어서 쓰면 된다. 

관련 기능에 대한 정리는 https://vicapor.tistory.com/55 에서 확인이 가능하다. 

2. 한개만 적용

banner_subtitle = RichTextField(features=["bold", "italic"], null=True)

특정한 필드만 적용하고 싶을 때는 위와 같이 해주면 된다. 

추가) 옛날 Editor 적용

그리고 legacy는 RichEditor 옛날 버전이라고 보면 된다. 

적용방법은

body = RichTextField(editor='legacy')

처럼 해주면 된다. 

https://docs.wagtail.io/en/stable/reference/settings.html#id15

Wagtail에서 한글을 지원한다. 설정 방법이 간단하니깐 한글로 설정을 진행해보자.

왼쪽 하단 아이디를 클릭하고 Account settings를 클릭한다. 그리고 Account Page에서 Preferred language를 한국어로 바꾼다. Current time zone은 옵션이지만 이것도 Asia/Seoul로 찾아서 바꿔주자.

관리자 페이지에 한글이 적용된 것을 확인 할 수 있다. 

https://www.accordbox.com/blog/how-build-form-page-wagtail/

Wagtail에서 Form을 적용하는 방법에 대해서 알아보자. 

Wagtail에서는 이미 Form 생성 툴을 제공한다. 

1. Form 페이지 생성

forms/models.py

from wagtail.contrib.forms.models import AbstractEmailForm, AbstractFormField

class FormField(AbstractFormField):
    page = ParentalKey('FormPage', related_name='custom_form_fields')


class FormPage(AbstractEmailForm):
    thank_you_text = RichTextField(blank=True)

    content_panels = AbstractEmailForm.content_panels + [
        InlinePanel('custom_form_fields', label="Form fields"),
        FieldPanel('thank_you_text', classname="full"),
        MultiFieldPanel([
            FieldRowPanel([
                FieldPanel('from_address', classname="col6"),
                FieldPanel('to_address', classname="col6"),
            ]),
            FieldPanel('subject'),
        ], "Email Notification Config"),
    ]

    def get_form_fields(self):
        return self.custom_form_fields.all()

AbstractFormField는 wagtail에서 제공하는 Form Builder이다. 사용자가 Form을 전송하고 나서 보여지는 메세지을 thank_you_text 필드에 저장한다. from_address하고 to_address는 사용자가 form을 작성하고 submit을 눌렀을 때, to_address에 있는 메일 주소로 메일을 보내게 할 수 있다. 나는 현재 만드는 Form에서는 쓰지 않지만 사용할 일이 있을 수도 있으니 일단 적어놨다. 

settings/dev.py에 다음을 추가하자 (이미 기본적으로 추가되어 있을 것이다.)

EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'

Form Type에는 여러가지 Form을 선택할 수 있고 Form들을 조합해서 새로운 Form 양식을 만들어 낼 수 있다. 

2. 템플릿 작성

템플릿에서 표현하기 위해 다음 모듈을 설치해주자.

pip install django-widget-tweaks

django-widget-tweaks는 파이썬 수준의 폼 정의가 아닌 템플릿의 폼 필드 렌더링을 조정한다. CSS 클래스 및 HTML 속성 변경을 지원한다. 즉 우리가 Form을 원하는대로 Custom 할 수 있게 해준다.

user_management/form_page.html

{% extends "base.html" %}
{% load static wagtailcore_tags widget_tweaks %}

{% block content %}

<h1>Contact</h1>
<br>

<form action="{% pageurl page %}" method="POST">
    {% csrf_token %}

    {% if form.non_field_errors %}
    <div class="alert alert-danger" role="alert">
        {% for error in form.non_field_errors %}
            {{ error }}
        {% endfor %}
    </div>
    {% endif %}

    {% for field in form.visible_fields %}
        <div class="form-group">
            {{ field.label_tag }}
            {% render_field field class+="form-control" %}
        </div>
    {% endfor %}

    <button type="submit" class="btn btn-primary" >Submit</button>
</form>

{% endblock %}

Form Page 템플릿이다. 여기서 우리가 Admin Page에서 만든 Form Page양식이 보여진다. 그리고 submit을 하면 정상적으로 제출되었다고 알려줄 수 있게 landing page를 추가하자. 

user_management.py/form_page_landing.html

{% extends "blog/base.html" %}

{% load static wagtailcore_tags  wagtailimages_tags el_pagination_tags menu_tags %}

{% block content %}

<h2>{{ page.thank_you_text | richtext }}</h2>

{% endblock %}

모델에서 작성한 tank_you_text 필드가 보여질 것이다. Form Page에서 정상적으로 제출된 Form들은 Wagtail Admin Page에 Forms에 저장되어 있을 것이다.

추가) Form Custom

기본 Form 작성법을 알았으니 추가적으로 Custom 하는 방법에 대해서 알아보자

https://docs.wagtail.io/en/stable/reference/contrib/forms/customisation.html

1. custom field 추가 

forms/models.py

from django import forms
from django.db import models
from modelcluster.fields import ParentalKey
from wagtail.contrib.forms.forms import FormBuilder
from wagtail.contrib.forms.models import (
  AbstractEmailForm, AbstractFormField, FORM_FIELD_CHOICES)


class FormField(AbstractFormField):
    # extend the built in field type choices
    # our field type key will be 'ipaddress'
    CHOICES = FORM_FIELD_CHOICES + (('ipaddress', 'IP Address'),)

    page = ParentalKey('FormPage', related_name='form_fields')
    # override the field_type field with extended choices
    field_type = models.CharField(
        verbose_name='field type',
        max_length=16,
        # use the choices tuple defined above
        choices=CHOICES
    )


class CustomFormBuilder(FormBuilder):
    # create a function that returns an instanced Django form field
    # function name must match create_<field_type_key>_field
    def create_ipaddress_field(self, field, options):
        # return `forms.GenericIPAddressField(**options)` not `forms.SlugField`
        # returns created a form field with the options passed in
        return forms.GenericIPAddressField(**options)


class FormPage(AbstractEmailForm):
    # intro, thank_you_text, edit_handlers, etc...

    # use custom form builder defined above
    form_builder = CustomFormBuilder

FormField정의하고 Form type 리스트에 추가하고 CustomFormBuilder에 추가해주면 된다. 

field type에 리스트로 저장될 새로운 field이름은 튜플형태로 작성해주면 된다. 

('ipaddress', 'IP Address') 에서 앞쪽이 리스트에 표시될 이름이다.

2. render page 수정

기본적으로 form을 제출하고 나면 form_page_landing.html로 redirect된다. 특정 page로 가고 싶을때는 다음과 같이 작성하면된다. 

forms/models.py

    def render_landing_page(self, request, form_submission=None, *args, **kwargs):
        if self.thank_you_page:
            url = self.thank_you_page.url
            # if a form_submission instance is available, append the id to URL
            # when previewing landing page, there will not be a form_submission instance
            if form_submission:
              url += '?id=%s' % form_submission.id
            return redirect(url, permanent=False)
        # if no thank_you_page is set, render default landing page
        return super().render_landing_page(request, form_submission, *args, **kwargs)

FormPage에 추가해주면 된다. 특정 url로 가고 싶다면 다음과 같이 작성하면 된다. 

    def render_landing_page(self, request, form_submission=None, *args, **kwargs):
        url = #원하는 주소

        return redirect(url, permanent=False)

Wagtail에서 Ajax를 하는 방법에 대해서 기술하려고 한다. 

form 태그와 route 기능을 통해서 서버와 간단한 통신을 할 수 있지만 데이터가 많아지면 한계가 생긴다. 

그래서 route와 Ajax를 이용하여 서버와 클라이언트 간에 데이터 송수신 방법을 소개하려고 한다. 

1. JS 작성 

card.js

const card_completion = () => {
    const data = {
        card : card_page_title,
        card_id : card_page_id,
    }

    const url = card_page_url + 'card_completion/';
    const option = {
        method: "POST",
        headers: {
            'X-CSRFToken' : card_page_token,
            "Content-Type": "application/json",
        },
        body: JSON.stringify(data),
    }
    fetch(url, option)
    .then(res => {
        if(res.status === 200){
            res.text()
            .then(text => {
                console.log(text);
            }) 
        }
        else {
            console.log('오류 발생');
        }
    });
}

학습을 완료하고 학습 완료 버튼을 누르면 card_completion 함수가 실행되도록 하려 한다. 

    const data = {
        card : card_page_title,
        card_id : card_page_id,
    }

data에는 서버로 보내고 싶은 데이터를 Json 형식으로 작성해준다. 

    const url = card_page_url + 'card_completion/';
    const option = {
        method: "POST",
        headers: {
            'X-CSRFToken' : card_page_token,
            "Content-Type": "application/json",
        },
        body: JSON.stringify(data),
    }

-url은 서버의 route 주소를 적어준다. Django에서는 꼭 마지막에 '/'을 붙여줘야한다. 

-method는 어떤 방식으로 통신할 것인지를 정해준다. 대표적으로 'GET', 'POST'등이 있다. 

-headers에는 기본 정보가 포함되어 있는데 csrf 토큰과, 전송할 data type을 명시해준다. 

-body에는 위에서 작성한 전송할 데이터를 json 형식 문자열로 바꿔서 작성해준다. 

    fetch(url, option)
    .then(res => {
        if(res.status === 200){
            res.text()
            .then(text => {
                console.log(text);
            }) 
        }
        else {
            console.log('오류 발생');
        }
    });

원래는 Jquery Ajax를 사용했는데 요즘은 fetch를 사용한다고 해서 fetch를 사용해보았다. 

res.status가 200이면 정상적으로 통신이 되었다는 의미이므로 통신이 정상적으로 이루어졌을 때에 할 작업들을 작성해주면 된다. 정산적으로 통신이 되었으면 res.text().then을 통해 서버에서 보내온 데이터를 수신한다. 

• response.text() – 응답을 읽고 텍스트를 반환합니다,
• response.json() – 응답을 JSON 형태로 파싱합니다,
• response.formData() – 응답을 FormData 객체 형태로 반환합니다. FormData에 대한 자세한 내용은 다음 챕터에서 다루겠습니다.
• response.blob() – 응답을 Blob(타입이 있는 바이너리 데이터) 형태로 반환합니다.
• response.arrayBuffer() – 응답을 ArrayBuffer(바이너리 데이터를 로우 레벨 형식으로 표현한 것) 형태로 반환합니다.
• 이 외에도 response.body가 있는데, ReadableStream 객체인 response.body를 사용하면 응답 본문을 청크 단위로 읽을 수 있습니다. 자세한 용례는 곧 살펴보겠습니다.

https://ko.javascript.info/fetch

2. models.py 작성

course/models.py

    @route(r'^card_completion/$', name='card_completion')
    def card_completion(self, request):
        jsonObject = json.loads(request.body)
        card_title = jsonObject.get('card')
        card_id = jsonObject.get('card_id')


        return HttpResponse(json.dumps({'status':'success'}), content_type="application/json")

서버에는 코드가 어떻게 작성되어 있는지를 확인해보자. 기본적인 wagtail의 route랑 같다. 다만 데이터가 json 형식으로 오기 때문에 json.loads를 통해 데이터를 파싱해준다. 데이터는 js에서 보낸 body에 담겨 있다. 

그리고 return은 json.dumps를 통해 인코딩을 하고 마찬가지로 content_type을 통해서 전달해준다. 

3. JQUERY AJAX

iamport 기능 구현

let csrftoken = '{{ csrf_token }}'
        IMP.init('imp');
        IMP.request_pay({
            pg: 'html5_inicis',
            pay_method: 'card',
            merchant_uid: 'merchant_' + new Date().getTime(),
            name: '강의 1',
            amount: 100,
            buyer_email: im_email,
            buyer_name: im_name,
            buyer_tel: im_phonenumber,
            buyer_addr: '서울특별시 강남구 삼성동',
            buyer_postcode: '123-456'
        }, function (rsp) {
            if (rsp.success) {
                jQuery.ajax({
                    url: "/api/payment/", 
                    headers:{'X-CSRFToken':csrftoken},
                    type: 'POST',
                    dataType: 'json',
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify({
                        imp_uid: rsp.imp_uid,
                        price: 100
                    }),
                }).done(function (data) {
                    alert('성공했습니다.')
                }).fail(function (data) {
                    // 여기에 결제 취소 endpoint를 입력
                    alert(data.message);
                });
            } else {
                var msg = '결제에 실패하였습니다.';
                msg += '에러내용 : ' + rsp.error_msg;
                alert(msg);
            }
        });

추가)

HttpResponse, render와 redirect의 차이점에 대해서 알아보자.

1. HttpResponse

HttpResponse(data, content_type)

 HttpResponse 는 HttpRequest와 짝을 이루며, response를 반환하는 가장 기본적인 함수

Json이나 html을 반환할 수도 있음.

2. render

render(request, template_name, context=None, content_type=None, status=None, using=None)

템플릿과 같이 쓰는 함수이다. context로 정보를 넘겨주면 된다. request 와 template_name 은 필수적으로 필요!

3. redirect

redirect(to, permanent=False, *args, **kwargs)

to 에는 어느 URL 로 이동할지를 정하게 됨. 이 때 상대 URL, 절대 URL 모두 가능하며 urls.py 에 name 을 정의하고 이를 많이 사용. 단지 URL로 이동하는 것이기 때문에 render 처럼 context 값을 넘기지는 못함.

핵심 : render 는 템플릿을 불러오고, redirect 는 URL로 이동

https://valuefactory.tistory.com/605

https://learnwagtail.com/tutorials/how-register-django-model-wagtails-modeladmin/

https://www.revsys.com/tidbits/how-add-django-models-wagtail-admin/

Admin Page 메뉴에 모델을 추가해보려고 한다. 

1. 모델 작성

user_management/models.py

# 공지사항
class Notice(models.Model):

    type = models.CharField(blank=False, null=True, verbose_name="공지사항 종류", max_length=20)
    title = models.CharField(blank=False, null=True, verbose_name="공지사항 제목", max_length=100)
    content = RichTextField(blank=False, verbose_name="공지사항 내용")

    def __str__(self):
        return self.title

    class Meta:
        verbose_name_plural = "공지사항"

공지사항 모델을 Admin Page 메뉴에 추가 시켜보자. 

2. admin.py 작성

user_management/admin.py

from wagtail.contrib.modeladmin.options import (
    ModelAdmin,
    modeladmin_register
)
from .models import Notice

# Register your models here.
class NoticeAdmin(ModelAdmin):

    model = Notice
    menu_label = "공지사항"
    menu_icon = "placeholder"
    menu_order = 290
    add_to_settings_menu = False
    exclude_from_explorer = False
    list_display = ("type", "title")
    search_fields = ("type", "title")

modeladmin_register(NoticeAdmin)

Wagtail Document

from wagtail.contrib.modeladmin.options import (
    ModelAdmin, modeladmin_register)
from .models import Book


class BookAdmin(ModelAdmin):
    model = Book
    menu_label = 'Book'  # ditch this to use verbose_name_plural from model
    menu_icon = 'pilcrow'  # change as required
    menu_order = 200  # will put in 3rd place (000 being 1st, 100 2nd)
    add_to_settings_menu = False  # or True to add your model to the Settings sub-menu
    exclude_from_explorer = False # or True to exclude pages of this type from Wagtail's explorer view
    list_display = ('title', 'author')
    list_filter = ('author',)
    search_fields = ('title', 'author')

# Now you just need to register your customised ModelAdmin class with Wagtail
modeladmin_register(BookAdmin)

위에 코드는 직접 작성한 ModelAdmin이고 아래는 Wagtail 공식문서이다. 관련 기능은 옆에 설명이 되어있다.

3. settings.py 등록

settings/base.py

INSTALLED_APPS = [
    'wagtail.contrib.modeladmin',
]

model admin을 등록시켜주면 완료이다. 

정상적으로 적용되었다.