Nag

나그(Nag)는 사용자가 닫기 전까지 계속 남아 있는 중요한 메시지 컴포넌트예요. 쿠키 사용 동의, 보안 침해 같은 주요 공지처럼 한 번 보여주고 사용자가 인지할 때까지 지속되는 알림에 활용합니다.

출처: 문서

본문

Types

나그는 기본적으로 숨겨져 있으며, 표시하려면 javascript로 초기화해야 해요. 자세한 내용은 usage 섹션을 참고하세요.

Nag

단순 나그는 선언된 DOM 위치에 나타나요.

Look, I am a nag!

Title

나그는 제목을 가질 수 있어요.

Welcome to the nag module
        Look, I am a nag!

Fixed Nag

고정(fixed) 나그는 화면 상단에 나타나요.

Look, i am a fixed nag!
        
      
      
          /*
           persist:true is used to ignore dismiss storage when closing
           for demo purposes here, not related to 'fixed' variant
          */
          $('#fixednag')
          .nag({
            persist:true
          })
          ;

고정 나그는 화면 하단에 나타날 수도 있어요.

Look, I am a bottom fixed nag!
        
      
      
          $('#bottomfixednag')
          .nag({
            persist:true
          })
          ;

Overlay Nag

오버레이 나그는 절대 위치(absolute)로 배치되어 부모 DOM 노드의 상단에 나타나요.

Welcome to the nag module
              Look, I am a top overlay nag!

오버레이 나그는 부모 노드의 하단에 나타날 수도 있어요.

Welcome to the nag module
              Look, I am a bottom overlay nag!

Groups

Nags

나그 그룹은 함께 나타나도록 서식화할 수 있어요.

First nag
            Second nag
            Third nag

Variations

Colored

나그는 서로 다른 색상으로 서식화할 수 있어요.

Red 
        Orange 
        Yellow 
        Olive 
        Green 
        Teal 
        Blue 
        Violet 
        Purple 
        Pink 
        Brown 
        Black

Inverted

나그는 inverted로 나타나도록 서식화할 수 있어요.

Inverted
             This nag has inverted colors

Size

나그는 다양한 크기를 가질 수 있어요.

Mini nag
          
        
        
        
          Tiny nag
          
        
        
        
          Small nag
          
        
        
        
          Large nag
          
        
        
        
          Big nag
          
        
        
        
          Huge nag
          
        
        
        
          Massive nag

Examples

We use cookies to ensure you get the best experience on our website
      
      
      // Automatically shows on init if cookie isn't set
      $('.cookie.nag')
        .nag({
          key      : 'accepts-cookies',
          value    : true
        })
      ;
      
      
      // Wont re-appear unless cleared
      $('.cookie.nag')
        .nag('show')
      ;
      
      
      // Clears cookie so nag shows again
      $('.cookie.nag')
        .nag('clear')
      ;

이 예제는 쿠키 사용 동의 나그예요. 쿠키가 설정되지 않았으면 init 시 자동으로 표시되고, 지워지지 않으면 다시 나타나지 않아요. 지우면 다시 표시돼요.

Usage

나그는 사용자에게 한 번 표시되는 메시지를 제시해, 사용자가 메시지를 인지할 때까지 지속되게 하는 데 사용돼요. 사이트의 쿠키 사용 알림이나, 보안 침해 같은 사이트의 주요 변경 사항을 알리는 데 쓸 수 있어요.

Initializing a Nag

$('.ui.nag')
          .nag()
        ;
      
      
          
            Welcome to the nag module
            Some additional Info here

Behaviors

다음 모든 행동들은 다음 구문을 사용해 호출할 수 있어요:

.ui.nag').nag('behavior', argumentOne, argumentTwo...);

show — 나그가 닫혀 있지 않고 저장소에 만료 날짜가 설정되어 있지 않으면 나그를 보여줘요.
hide — 나그를 숨겨요.
dismiss — 나그를 닫고 주어진 저장소에 만료 날짜를 설정해 다음에 나그가 표시되지 않게 해요.
clear — 이미 설정된 만료 날짜를 삭제해 다음에 나그가 다시 표시되게 해요.
destroy — 인스턴스를 파괴하고 모든 이벤트를 제거해요.

Settings

Nag Settings

나그 동작을 구성하는 설정이에요.

설정	기본값	설명
`persist`	`false`	`true`는 이미 닫혀 있어도 나그를 표시하지만, 설정된 만료 날짜는 그대로 유지해요.
`displayTime`	`0`	나그가 자동으로 숨겨질 때까지의 ms 단위 시간이에요. 0이면 수동으로 닫아야 하며, 그렇지 않으면 스스로 숨겨요.
`context`	`body`	나그를 연결할 영역을 지정하는 선택자 또는 jQuery 객체예요.
`detachable`	`false`	`true`로 설정하면 주어진 context 노드에 나그를 다시 연결해요.
`expires`	`30`	쿠키/localstorage의 만료까지 일 수 또는 Date 객체예요.
`domain`	`false`	쿠키 옵션이에요.
`path`	`/`	쿠키 옵션이에요.
`secure`	`false`	쿠키 옵션이에요.
`samesite`	`false`	쿠키 옵션이에요.
`storageMethod`	`cookie`	나그가 닫힐 때 만료 날짜를 저장할 저장소예요. `cookie`, `localstorage`, `sessionstorage` 중 하나일 수 있어요.
`key`	`nag`	dismissed localstorage/cookie에 저장할 키예요.
`value`	`dismiss`	dismissed localstorage/cookie에 저장할 값이에요.
`expirationKey`	`ExpirationDate`	localstorage에서 만료를 지원하기 위한 키 접미사예요.
`animation`	`{ show : 'slide', hide : 'slide' }`	열기/닫기 애니메이션의 트랜지션 스타일이에요. `slide` 또는 `fade`일 수 있어요.
`duration`	`500`	열기/닫기 애니메이션의 시간이에요.
`easing`	`easeOutQuad`	열기/닫기 애니메이션의 이징이에요. `EaseOutQuad`는 nag에 포함되어 있고, 추가 옵션을 원하면 이징 방정식을 포함해야 해요.

Callbacks

Callbacks는 특정 행동 이후 발생할 함수를 지정해요.

콜백	매개변수	설명
`onShow`	`$module`	나그가 표시되기 전의 콜백이에요. 이 콜백에서 `false`를 반환하면 나그가 표시되지 않도록 취소해요.
`onVisible`	`$module`	나그가 표시된 후의 콜백이에요.
`onHide`	`$module`	나그가 숨겨지기 전의 콜백이에요. 이 콜백에서 `false`를 반환하면 나그가 숨겨지지 않도록 취소해요.
`onHidden`	`$module`	나그가 숨겨진 후의 콜백이에요.

DOM Settings

DOM 설정은 이 모듈이 DOM과 어떻게 인터페이스할지 지정해요.

설정	기본값	설명
`namespace`	`nag`	이벤트 네임스페이스예요.
`selector`	`{ close : '> .close.icon' }`	내부적으로 사용되는 DOM 선택자예요.
`className`	`{ bottom : 'bottom', fixed : 'fixed' }`	상태에 스타일을 연결하는 데 사용되는 클래스 이름이에요.

Debug Settings

Debug 설정은 콘솔에 대한 디버그 출력을 제어해요.

설정	기본값	설명
`name`	`Nag`	디버그 로그에 사용되는 이름이에요.
`silent`	`false`	모든 콘솔 출력을 조용히 만들어요.
`debug`	`false`	콘솔에 표준 디버그 출력을 제공해요.
`performance`	`true`	콘솔에 표준 디버그 출력을 제공해요.
`verbose`	`false`	콘솔에 보조 디버그 출력을 제공해요.
`errors`	`{ noStorage : 'Unsupported storage method', method : 'The method you called is not defined.', setItem : 'Unexpected error while setting value', expiresFormat : '"expires" must be a number of days or a Date Object' }`	오류 메시지 설정이에요.

더 알아보기 (Learn more)

나그로 쿠키 동의나 중요 공지를 사용자가 인지할 때까지 지속해서 보여줄 수 있어요. 저장 방식과 만료 설정을 잘 활용해 한 번만 표시되는 알림을 만들어 보세요. 일시적인 알림은 Toast 문서도 함께 참고하세요.