= UI 라이브러리(uiSDL)

== UI 라이브러리(uiSDL)란?
UI라이브러리(uiSDL)은 웹 UI 개발 리드타임 단축을 위하여 실무에 유용한 컴포넌트들을 담은 UI라이브러리입니다. +
Vue2 및 Vue3 용 라이브러리가 나뉘어져 있습니다.

NOTE: UI라이브러리 시스템 접속 +
vue2 : http://uisdl.scp.samsung.net/v2/[window=_blnak] +
vue3 : http://uisdl.scp.samsung.net/v3/[window=_blnak]

IMPORTANT: 접속이 안되는 경우 window host 파일에 아래와 같이 추가해 주시기 바랍니다 +
10.195.53.147 uisdl.scp.samsung.net


== 컴포넌트 주요 특징

- 삼성전자 웹 시스템 개발 시 빠르게 웹 화면을 개발할 수 있도록 사용빈도가 높은 UI 환경 구성 요소들을 오픈 소스 Framework인 Vue.js와 Bootstrap 기반으로 제작하여 제공합니다.

- 시스템의 특성에 맞게 제작이 가능하도록 화면의 구조인 레이아웃 6종과 단일 UI구성요소인 컴포넌트 37종으로 구성되어 있습니다
+
image::uisdl_1.png[]

- 각 페이지 화면의 우측 상단에 개발과 디자인 탭으로 구분되어 있습니다.
+
개발 탭에서는 개발 가이드와 간단한 기능 테스트를 해볼 수 있는 Code Demo 가 있고, 디자인 탭에서는 전사 UX 표준을 바탕으로 디자인 원칙과 구성요소들을 확인할 수 있습니다.
+
image::uisdl_2.png[]

== 컴포넌트 개발 환경
* VueJS 버전 3
* Used Open-source
** bootstrap: 5.3.0 or Higher
** vue-datepicker-next: 1.0.3 or Higher

== 컴포넌트 적용 방법

. Install from Local file
+
로컬 파일로부터 컴포넌트를 설치할 수 있습니다. 아래의 경로에서 파일을 다운로드 받습니다.
+
http://uisdl.scp.samsung.net/v3/download/sdl-component-3.0.0.tgz[sdl-component-3.0.0.tgz 다운로드]
+
해당 파일을 로컬의 임의의 위치로 복사한 다음, NPM 명령어로 컴포넌트를 설치합니다. 설치하실 프로젝트 루트 폴더로 이동한 다음, 아래 명령어를 커맨드 창에서 입력합니다.
+
[source, shell]
----
npm install --save ./{your-path}/sdl-component-{version}.tgz
----

. Import bootstrap
+
'bootstrap' 관련 스타일과 스크립트를 Entry Point 파일에 Import 합니다.
+
[source, javascript]
----
// bootstrap css등록 및 popper가 포함된 bootstrap bundle js 임포트
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
----

. Import sdl-component
+
'sdl-component' 관련 스타일과 스크립트를 Entry Point 파일에 Import 하고
+
[source, javascript]
----
import 'sdl-component/src/assets/css/custom.css';
import SdlComponent from 'sdl-component';
----
+
전역 Vue(app)에서 사용할 수 있도록 Plugin을 등록합니다.
+
[source, javascript]
----
app.use(SdlComponent);
----

. Complete
+
이제 시스템 전역에서 'sdl-component'를 사용하실 수 있습니다

== UI 라이브러리 목록
활용빈도, 사용성을 고려하여 사내시스템 개발에 필요한 Library를 제공합니다.

* 레이아웃
+
화면의 구조를 정의하는 레이아웃 유형
+
[cols="7,33,60",options="header"]
|===
|No |Library |설명

|1
|GNB + Contents
|GNB와 콘텐츠로 구성된 화면 형태

|2
|GNB + LNB + Contents
|GNB, LNB, 콘텐츠로 구성된 화면 형태

|3
|GNB + LNB + Contents + Footer
|GNB, LNB, Footer, 콘텐츠로 구성된 화면 형태

|4
|GNB + LNB + Aside + Contents + Footer
|GNB, LNB, Footer, Aside, 콘텐츠로 구성된 화면 형태

|5
|Popup
|현재 화면에서 추가적으로 띄우는 레이어 형태의 창으로, 사용 유형에 따라 구별하여 사용

|6
|Center Frame
|본 화면의 상하좌우 중앙에 콘텐츠 박스가 위치
|===

* 컴포넌트
+
화면을 구성하는 요소 단위
+
[cols="7,33,60",options="header"]
|===
|No |Library |설명
|1
|GNB
|(Global Navigation Bar) 시스템 명과 메뉴를 포함한 네비게이션으로 화면의 최 상단에 구성

|2
|LNB
|(Left Navigation Bar) 서브메뉴라고 불리며 화면의 좌측에 구성

|3
|Aside
|자주 사용하는 기능을 빠르게 접근(Quick Access)할 수 있도록 제공하는 영역

|4
|Footer
|Copyright, 사이트 맵, 이용약관 등의 정보를 포함하며, 화면의 하단에 구성

|5
|Card List
|한 레이아웃에서 여러 개의 카드를 함께 사용할 때 사용

|6
|Search Grid
|검색조건을 입력/선택하는 조회 영역과 데이터결과를 호출하는 리스트영역으로 구성할 때 사용

|7
|Form
|여러 개의 컨트롤(Input Box, Radio Button, Dropdown Box 등)를 활용하여 하나의 입력 폼으로 구성할 때 사용

|8
|Form Detail
|폼 화면에서 입력한 정보를 화면에 표시할 때 사용

|9
|Board Detail
|게시판 게시물의 기본적인 상세 화면 

|10
|Tree Detail
|계층 구조를 나타내는 트리 요소와 트리에서 선택한 정보를 페이지 전환 없이 즉각적으로 보여줄 때 사용

|11
|Create Board
|게시판 게시물의 기본적인 입력 화면

|12
|Approval
|시스템에서 Knox 결재나 시스템 내부 결재시 사용

|13
|Reply
|간단하게 사용자 간의 의사소통을 할 수 있는 폼 형태로 구성

|14
|Notice
|사용자에게 시스템 내 서비스 관련 정보들을 공지 시 사용

|15
|Alert
|공지나 안내 사항 같은 부가적인 정보, 경고 상태 혹은 사용자의 행동에 대한 즉각적인 피드백이 필요할 때 사용

|16
|Badge
|알림 목적으로 사용하거나, 데이터를 시각적으로 강조하고 싶을 때 사용

|17
|Button
|사용자가 클릭하여 기능을 수행할 수 있는 그래픽 요소

|18
|Card
|다양한 정보들을 그룹화하여 하나의 카드 모양 안에 구성할 때 사용

|19
|Collapse(Toggle)
|사용자가 두개의 반대되는 상태 중에서 선택할 수 있는 온오프 스위치

|20
|Tooltip
|페이지 요소 또는 기능에 대한 추가 정보를 제공하는 간단하고 유용한 메시지

|21
|Text Input
|입력 폼 요소 중 한 줄의 비교적 짧은 데이터를 입력할 경우 사용

|22
|Textarea
|입력 폼 요소 중 데이터의 내용이 일정하지 않거나, 여러 줄의 데이터를 입력할 경우 사용

|23
|Radio
|두개 이상의 항목 중 하나를 선택할 때 사용

|24
|Select
|사용자가 옵션 중 하나 또는 다중으로 선택할 수 있을 때 사용

|25
|Checkbox
|여러 개의 항목 중 하나 이상을 다중 선택할 때 사용하거나 On/Off의 Toggle 경우에 사용

|26
|Table
|데이터/정보를 열과 행으로 구분하여 사용자가 쉽게 읽고 이해할 수 있도록 제공

|27
|Progress
|사용자 액션에 대한 즉각 데이터가 표시가 어려운 경우(데이터의 로딩 처리 시간이 긴 경우) 작업의 진행 상태에 대한 정확한 피드백을 제공하기 위해 사용

|28
|Spinner
|사용자 액션에 대한 즉각 데이터가 표시가 어려운 경우(데이터의 로딩 처리 시간이 긴 경우) 작업의 진행 상태에 대한 정확한 피드백을 제공하지 못할 경우 사용

|29
|Navbar
|시스템 명과 메뉴를 포함한 네비게이션 영역으로 주로 상단(GNB)에 제공

|30
|File Attachment
|사용자가 첨부파일을 다운받거나 업로드할 경우에 사용

|31
|Tree
|목록의 계층 구조를 표현하기 위해 사용하는 요소

|32
|Datepicker
|날짜를 선택하고 그에 해당하는 데이터를 얻을 수 있도록 위젯 형태로 제공

|33
|Breadcrumb
|시스템 내 사용자의 메뉴의 이동경로를 의미하며 현재 사용자의 위치를 보여줄 때 사용

|34
|Pagination
|많은 양의 데이터를 여러 페이지로 나누고, 이전, 다음 페이지 혹은 특정 페이지로 이동할 수 있는 일련의 링크를 목록 하단에 배치하여 제공

|35
|Tab(Basic, Progress)
|페이지 이동 및 시점 전환 없이 그룹화된 콘텐츠를 제공할 때 사용

|36
|Jumbotron
|어떤 특별한 내용이나 정보를 눈에 띄게 보여주기 위한 박스 형태의 공간

|37
|Carousel
|한 공간에 여러 개의 콘텐츠를 슬라이드 형태로 제공
|===