1,하고 싶은 것

로그인 성공 시나 메시지를 게시할 때 페이지 상단에 플래시 메시지를 표시할 수 있도록 하고 싶습니다.

2,flash란?

어느 동작이 실행되었을 때, 화면에 그 동작이 성공했는지 실패했는지를 알려 주는 기능입니다.

Rails의 flash는 해시 객체로 설정됩니다.

3, 우선 view 만들기

flash 메시지를 표시하려면 먼저 view를 만듭니다.

flash 메시지의 코드를 작성할 때 부분 템플릿을 사용하는 것이 바람직합니다.

.notification
  - flash.each do |key, value|
    = content_tag :div, value, class: key

이번에는 html이 아닌 haml로 작성해 보았습니다.

flash는 해시형의 오브젝트이므로, key와 value를 각각 출력시킬 필요가 있습니다.

key는 2종류 존재하고, 실행이 성공했을 때는 notice로 실패했을 때는 alert가 들어갑니다.

class명에 key를 대입하는 것으로, 성공시와 실패시의 플래시 메세지를 작성할 수가 있습니다.

코드를 작성한 후 application.html.haml에 render로 도입합시다.

%body
    = render 'layouts/notifications'
    = yield

4, 컨트롤러 구현

뷰가 완성되면 다음은 컨트롤러를 구현합니다.

그룹을 만들 때 "그룹을 만들었습니다"라는 메시지가 표시되도록 설정합니다.

@group = Group.new(group_params)

    if @group.save
      redirect_to group_messages_path(@group), notice: "グループを作成しました"

notice에 "그룹을 만들었습니다"라는 문자열이 할당되어 있으므로 @group이 save되어 리디렉션 할 때 메시지가 표시됩니다.



이런 식으로.

5, 플래시 메시지를 일본어 표기로 설정

플래시 메시지는 기본적으로 영어 표기법입니다.

일본어로 메시지가 표시되도록 설정합시다.

config/application.rb

class Application < Rails::Application
    config.i18n.default_locale = :ja 
end

이상의 기술로 메시지가 일본어 표기가 됩니다.

6,notice와 alert로 별도의 스타일을 적용하자

동작이 성공했을 때와, 실패했을 때에 메세지의 스타일이 다른 쪽을 알기 쉬울 것입니다.

그래서 플래시 스타일도 편집합니다.

stylesheets/_flash.scss

.notification {
  .notice {
    background-color: $light_blue;
    color: $white;
    text-align: center;
  }

  .alert {
    background-color: $alert_orange;
    color: $white;
    text-align: center;
  }
}

성공했을 때의 클래스명은 notice, 실패했을 때의 클래스명은 alert 이므로, 이 기술로 스타일이 적용됩니다.

* 보충: devise를 사용하면 더 쉽게 플래시 메시지를 구현할 수 있다.

사용자의 신규 등록, 로그인 로그아웃 시에만 devise gem
를 사용하면 간단한 플래시 메시지를 구현할 수 있습니다.

아래의 기사를 참고로

devise를 이용한 플래시 메시지 표시 방법