이 포스트에서는 kaminari의 디폴트 디자인에 tailwindcss daisyUI적용하는 방법에 대해 알아보자.
kaminari custom view생성
rails g kaminari:views default -e erb
를 실행해서 custom용 디자인을 생성시켜주자.
tailwindcss사용시 -e erb는 붙여줘야한다. 안붙이면 생성안됨
생성된 파일확인
app/views/kaminari/ 디렉토리에 아래와 같은 파일이 생성된걸 확인할 수 있다.
_first_page.html.erb
_gap.html.erb
_last_page.html.erb
_next_page.html.erb
_page.html.erb
_paginator.html.erb
_prev_page.html.erb
tailwindcss를 적용해주자.
_paginator.html.erb변경
<nav class="pagination" role="navigation" aria-label="pager">
부분에 join class를 추가해주자
<nav class="pagination join" role="navigation" aria-label="pager">
공통
_first_page,_last_page,_next_page,_page,_prev_page를 보면
<span>으로 되어있는 부분을 <button>으로 바꾸고 rounded-md join-item btn btn-xs btn-outline 클래스를 추가해주자.
기존에 있는 class(first,next등)은 지우지 말고 그대로두자
_first_page의 경우 아래와 같다.
<button class="first rounded-md join-item btn btn-xs btn-outline">
_page.html.erb변경
<button class="btn page<%= ' current' if page.current? %>">
<%= link_to_unless page.current?, page, url, {remote: remote, rel: page.rel} %>
</button>
위와 같이 태그 밑에 있는 link_to_unless부분을 그대로 쓰면 버튼 클릭시 동작하는게 아닌 버튼 안에 텍스트에만 link가 반응하므로 아래와 같이 바꿔줬다.
<% if page.current? %>
<%= content_tag :span, page, class: "btn-active rounded-md join-item btn btn-xs btn-outline" %>
<% else %>
<%= link_to url, remote: remote, rel: page.rel do %>
<button class="rounded-md join-item btn btn-xs btn-outline">
<%= page %>
</button>
<% end %>
<% end %>
현재 페이지에 해당하는 부분에 btn-active를 넣어줌
공통2
<button class="rounded-md join-item btn btn-xs next btn-outline">
<%= link_to_unless current_page.last?, t('views.pagination.next').html_safe, url, rel: 'next', remote: remote %>
</button>
이 부분도 마찬가지로 link_to_unless를 버튼위에 위치시키기 위해 수정해줘야함. _next_page.html.erb를 예로들면 아래와 같이 바꿔준다.
<% if current_page.last? %>
<% else %>
<%= link_to url, remote: remote, rel: 'next' do %>
<button class="rounded-md join-item btn btn-xs btn-outline">
<%= t('views.pagination.next').html_safe %>
</button>
<% end %>
<% end %>
완성된파일
각 파일의 완성된결과는 아래와 같다.
_first_page.html.erb
<% if current_page.first? %>
<% else %>
<%= link_to url, remote: remote do %>
<button class="rounded-md join-item btn btn-xs btn-outline">
<%= t('views.pagination.first').html_safe %>
</button>
<% end %>
<% end %>
_gap.html.erb
<button
class="rounded-md join-item btn btn-xs btn-outline page gap"><%= t('views.pagination.truncate').html_safe %></button>
_last_page.html.erb
<% if current_page.last? %>
<% else %>
<%= link_to url, remote: remote do %>
<button class="rounded-md join-item btn btn-xs btn-outline">
<%= t('views.pagination.last').html_safe %>
</button>
<% end %>
<% end %>
_next_page.html.erb
<% if current_page.last? %>
<% else %>
<%= link_to url, remote: remote, rel: 'next' do %>
<button class="rounded-md join-item btn btn-xs btn-outline">
<%= t('views.pagination.next').html_safe %>
</button>
<% end %>
<% end %>
_page.html.erb
<% if page.current? %>
<%= content_tag :span, page, class: "btn-active rounded-md join-item btn btn-xs btn-outline" %>
<% else %>
<%= link_to url, remote: remote, rel: page.rel do %>
<button class="rounded-md join-item btn btn-xs btn-outline">
<%= page %>
</button>
<% end %>
<% end %>
_paginator.html.erb
<%= paginator.render do -%>
<nav class="pagination join" role="navigation" aria-label="pager">
<%= first_page_tag unless current_page.first? %>
<%= prev_page_tag unless current_page.first? %>
<% each_page do |page| -%>
<% if page.display_tag? -%>
<%= page_tag page %>
<% elsif !page.was_truncated? -%>
<%= gap_tag %>
<% end -%>
<% end -%>
<% unless current_page.out_of_range? %>
<%= next_page_tag unless current_page.last? %>
<%= last_page_tag unless current_page.last? %>
<% end %>
</nav>
<% end -%>
_prev_page.html.erb
<% if current_page.first? %>
<% else %>
<%= link_to url, remote: remote, rel: 'prev' do %>
<button class="rounded-md join-item btn btn-xs btn-outline">
<%= t('views.pagination.previous').html_safe %>
</button>
<% end %>
<% end %>
최종결과
이런식으로 바꿔주면 아래와 같이 pagination이 바뀐걸 확인할 수 있었다. daisyUI의 pastel템플릿을 사용했다.
memo
kaminari의 기본 locals설정 바꿔주는 법
config/application.rb에 config.i18n.default_locale = :ko추가
confing/locals/kaminari_ko.yml에 아래 설정 추가
ja:
views:
pagination:
first: "«"
last: "»"
previous: "‹"
next: "›"
truncate: "..."
helpers:
page_entries_info:
one_page:
display_entries:
zero: ""
one: "<strong>1-1</strong>/1건중"
other: "<strong>1-%{count}</strong>/%{count}건중"
more_pages:
display_entries: "<strong>%{first}-%{last}</strong>/%{total}건중"
activerecord:
errors:
messages:
record_invalid: "validation에 실패했습니다.: %{errors}"