Lithium Design system

1. 노티피케이션(Notification)의 정의

알림을 사용하여 사용자에게 시스템 상태의 업데이트 또는 변경 사항을 알려주는 구성 요소입니다.

2. 유형

인라인 노티피케이션

내용이 들어가는 영역에 알림 사항이 있는 경우 내용 안에 인라인 되어 나타나는 형태를 의미합니다.

토스트 노티피케이션

업데이트 완료 메시지 등 알림 사항이 있는 경우 화면 위에 레이어 형태로 나타나는 것을 의미합니다.

3. 구성 옵션

컨테이너

노티피케이션의 전체 영역을 의미합니다.
정보, 에러, 경고, 성공의 의미에 따라 컨테이너를 제공합니다.
아이콘

알림 유형을 사용자가 인지하도록 제공합니다.
알림 유형과 연관된 직관적인 아이콘을 사용합니다.
제목

사용자에게 알림에 대한 간략한 개요를 제공합니다.
메시지 (선택 사항)

사용자에게 알림 내용을 제공합니다.
사용자가 수행할 수 있는 내용을 제공합니다.
닫기 버튼 (선택 사항)

닫기 버튼 선택 시 알림을 닫습니다.
닫기 버튼 선택하지 않는 경우 5초 후에 자동으로 닫힙니다.
타임 스탬프 (선택 사항)

제한된 시간 내에 알림을 확인해야 되는 경우 알림이 전송된 시간을 표기하여 제공합니다.
(예:00:00후에 자동 로그아웃 됩니다)

4. 사용 규칙

메시지는 간결하고 중요한 정보를 설명해야 합니다.

사용자가 알림을 통해 신속하게 파악하고, 다음에 수행해야 할 작업을 알 수 있도록 제공해야 하기 때문에 메시지는 짧고 간결해야 합니다.
텍스트 영역을 초과하는 경우 ‘더 보기’를 제공합니다.

텍스트 영역을 초과하는 긴 메시지가 필요한 경우 사용자에게 전체 알림 메시지를 표시하는 ‘더 보기’링크를 제공하여, 자세한 내용이 포함된 전체 페이지에 도달하도록 합니다.
(‘더 보기’를 제공하는 경우 마지막 텍스트 뒤에 말줄임표를 표시합니다.)
특정 영역에서 사용할 경우 너비를 확장할 수 있습니다.

인라인 알림의 너비는 내용과 레이아웃에 따라 확장할 수 있습니다.
단, 높이는 내용 길이를 기준으로 두 줄의 텍스트를 노출하며, 두 줄을 초과하는 경우 ‘더 보기’ 링크를 제공합니다.

5. 상황에 따른 상태

인라인 알림: 정보
인라인 알림: 에러
인라인 알림: 경고
인라인 알림: 성공
토스트 알림: 정보
토스트 알림: 에러
토스트 알림: 경고
토스트 알림: 성공

6. 배치

인라인 알림은 관련 항목 근처에 배치하며, 콘텐츠 영역에서 그리드의 열에 맞춰 배치할 수 있습니다.
토스트 알림은 화면 오른쪽 상단에 배치하며, 새 토스트 알림이 발생하는 경우 목록 상단에 나타나고 이전 알림은 해제될 때까지 푸시 다운됩니다.

스타일

크기

알림 크기는 상황에 따라 아래 형태에서 선택하여 활용하고 상세 간격과 크기는 아래 규칙을 참고합니다.

인라인 알림

일반 메시지
일반 메시지 타이틀 있는 경우
아이콘 있는 경우(에러/경고/성공)
타이틀+아이콘 있는 경우(에러/경고/성공)

토스트 알림

일반 메시지
아이콘 있는 경우(에러/경고/성공)

컬러

화이트 테마

Container: Primary Gray08
Text: Black01
Icon: Black01
Container: Primary Gray08
Text: Black01
Icon: Black01
Container: Primary Gray08
Status Icon+Text: Status Red
Icon: Black01
Container: Primary Gray08
Status Icon+Text: Status Yellow
Icon: Black01
Container: Primary Gray08
Status Icon+Text: Status Blue
Icon: Black01

다크 테마

Container: Primary Gray01
Text: Black10
Icon: Black10
Container: Primary Gray01
Text: Black10
Icon: Black10
Container: Primary Gray01
Status Icon+Text: Status Red Hover
Icon: Black10
Container: Primary Gray01
Status Icon+Text: Status Yellow Hover
Icon: Black10
Container: Primary Gray01
Status Icon+Text: Status Blue Hover
Icon: Black10

사용 예시

인라인 알림은 콘텐츠 사이에 사용할 수 있습니다.

토스트 알림은 콘텐츠 영역과 별개로 우측 상단에 나타나도록 합니다.

노티피케이션 (NOTIFICATION)

테마선택
유형

<div class="col-container mg-b-10u">
	<div class="col-xs-12 col-md-3 mg-b-2u">
		<button class="btn btn-container btn-primary btn-full"
										onclick="$.Lithium.notification.call({
          type: 'inline',
          status: '',
          description: {
            title: '',
            main: '정보 알림 텍스트',
            sub: '는 이곳에 표시됩니다.'
          }
        })">
			<span class="label">Call</span>
		</button>
	</div>
	<div class="col-xs-12 col-md-3 mg-b-2u">
		<button class="btn btn-container btn-primary btn-full"
										onclick="$.Lithium.notification.call({
          type: 'inline',
          status: 'error',
          description: {
            title: '',
            main: '정보 알림 텍스트',
            sub: '는 이곳에 표시됩니다.'
          }
        })">
			<span class="label">Error Call</span>
		</button>
	</div>
	<div class="col-xs-12 col-md-3 mg-b-2u">
		<button class="btn btn-container btn-primary btn-full"
										onclick="$.Lithium.notification.call({
          type: 'inline',
          status: 'warning',
          description: {
            title: '',
            main: '정보 알림 텍스트',
            sub: '는 이곳에 표시됩니다.'
          }
        })">
			<span class="label">Warning Call</span>
		</button>
	</div>
	<div class="col-xs-12 col-md-3 mg-b-2u">
		<button class="btn btn-container btn-primary btn-full"
										onclick="$.Lithium.notification.call({
          type: 'inline',
          status: 'success',
          description: {
            title: '',
            main: '정보 알림 텍스트',
            sub: '는 이곳에 표시됩니다.'
          }
        })">
			<span class="label">Success Call</span>
		</button>
	</div>
</div>
<div class="col-container mg-b-10u">
	<div class="col-xs-12 col-md-3 mg-b-2u">
		<button class="btn btn-container btn-primary btn-full"
										onclick="$.Lithium.notification.call({
          type: 'inline',
          status: '',
          description: {
            title: '정보 알림',
            main: '',
            sub: '정보 알림 텍스트는 이곳에 표시됩니다.'
          }
        })">
			<span class="label">Call</span>
		</button>
	</div>
	<div class="col-xs-12 col-md-3 mg-b-2u">
		<button class="btn btn-container btn-primary btn-full"
										onclick="$.Lithium.notification.call({
          type: 'inline',
          status: 'error',
          description: {
            title: '정보 알림',
            main: '',
            sub: '정보 알림 텍스트는 이곳에 표시됩니다.'
          }
        })">
			<span class="label">Error Call</span>
		</button>
	</div>
	<div class="col-xs-12 col-md-3 mg-b-2u">
		<button class="btn btn-container btn-primary btn-full"
										onclick="$.Lithium.notification.call({
          type: 'inline',
          status: 'warning',
          description: {
            title: '정보 알림',
            main: '',
            sub: '정보 알림 텍스트는 이곳에 표시됩니다.'
          }
        })">
			<span class="label">Warning Call</span>
		</button>
	</div>
	<div class="col-xs-12 col-md-3 mg-b-2u">
		<button class="btn btn-container btn-primary btn-full"
										onclick="$.Lithium.notification.call({
          type: 'inline',
          status: 'success',
          description: {
            title: '정보 알림',
            main: '',
            sub: '정보 알림 텍스트는 이곳에 표시됩니다.'
          }
        })">
			<span class="label">Success Call</span>
		</button>
	</div>
</div>

노티피케이션 (NOTIFICATION)

1. 노티피케이션(Notification)의 정의

2. 유형

인라인 노티피케이션

토스트 노티피케이션

3. 구성 옵션

컨테이너

아이콘

제목

메시지 (선택 사항)

닫기 버튼 (선택 사항)

타임 스탬프 (선택 사항)

4. 사용 규칙

메시지는 간결하고 중요한 정보를 설명해야 합니다.

텍스트 영역을 초과하는 경우 ‘더 보기’를 제공합니다.

특정 영역에서 사용할 경우 너비를 확장할 수 있습니다.

5. 상황에 따른 상태

인라인 알림: 정보

인라인 알림: 에러

인라인 알림: 경고

인라인 알림: 성공

토스트 알림: 정보

토스트 알림: 에러

토스트 알림: 경고

토스트 알림: 성공

6. 배치

스타일

크기

인라인 알림

일반 메시지

일반 메시지 타이틀 있는 경우

아이콘 있는 경우(에러/경고/성공)

타이틀+아이콘 있는 경우(에러/경고/성공)

토스트 알림

일반 메시지

아이콘 있는 경우(에러/경고/성공)

컬러

화이트 테마

다크 테마

사용 예시

노티피케이션 (NOTIFICATION)