Initial commit

2026-05-29 17:49:25 +09:00
commit 330105cb27
1081 changed files with 148694 additions and 0 deletions
@@ -0,0 +1,272 @@
+= 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
+|한 공간에 여러 개의 콘텐츠를 슬라이드 형태로 제공
+|===