Salad-design-library NPM

SaladDesignLibrary

샐러드랩 디자인 시스템 라이브러리

Version

version	date	content
0.0.22	230525	common-textarea 컴포넌트 추가
0.0.23	230525	common-calender 컴포넌트 추가
0.0.24	230525	필요 모듈 추가
0.0.25	230530	color-picker 컴포넌트 추가
0.0.26	230530	admin-templates, admin-header 컴포넌트 추가
0.0.27	230531	option-templates, option-row 컴포넌트 추가
0.0.39	230601	confirm-guard 컴포넌트 추가
0.0.40	230601	image-selector 컴포넌트 추가
0.0.41	230601	icon 추가, color 추가
0.0.42	230602	color-picker, checkbox-btn, radio-btn 개선
0.0.43	230607	각종 버그 수정
0.0.44	230607	common-text 기능 개선
0.0.45	230612	로고 브랜드컬러 추가
0.0.46	230612	icon 추가, 디자인 개선
0.0.47	230613	common-text password 기능 추가
0.0.48	230613	common-select 기능 개선
0.0.49	230618	common-badge 컴포넌트 추가
0.0.54	230619	common-badge 버그 수정
0.0.55	230619	notice-btn 개선
0.0.56	230707	common-btn 디자인 개선
0.0.58	230711	common-card 개선
0.1.4	230714	common-option, common-select, confirm-dialog 개선
0.1.7	230714	common-btn 버그 수정, option-row, common-card 개선
0.1.8	230717	common-table 추가
0.1.13	230719	option-row, admin-templates, common-text 개선
0.1.19	230731	notice-btn, common-icon, common-textarea, common-text 개선
0.1.22	230801	notice-btn, color-picker 개선
0.1.24	230807	common-option, common-select 개선
0.1.29	230807	notice-btn, checkbox-btn 개선
0.1.30	230807	control-btn 추가
0.1.31	230808	common-option, common-select 개선
0.1.33	230829	notice-btn, common-select 개선
0.1.35	230905	icon 추가
0.1.36	230907	feedback-msg 개선
0.1.38	230926	time-picker 컴포넌트 추가
0.1.39	231004	icon 추가, common-text 개선
0.1.42	231010	common-table 개선
0.1.44	231102	admin-header 개선
0.1.45	231102	admin-header-title 개선
0.1.46	231102	image-selector resize기능 토글 추가
0.1.47	231124	notice-msg 추가
0.1.48	231127	option-template 우측상단 버튼 추가
0.2.0	231214	angular 버전업
0.2.1	240122	common-table 개선
0.2.2	240124	image-selector 개선
0.2.3	240131	notice-msg 개선
0.2.4	240131	feedback-msg 개선

Dependencies

Angular CLI : 16.2.10
@ctrl/ngx-emoji-mart : 9.2.0
@angular/material : 16.2.12

Pre-Work

Install packages:

npm install @ctrl/ngx-emoji-mart@9.2.0
npm install @angular/material@16.2.12

Bundle those styles through angular.json configuration:

"build": {
    "options": {
        "styles": [
            "src/styles.less",
            "node_modules/@ctrl/ngx-emoji-mart/picker.css",
            "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"
        ]
    }
}

Add styles in styles.less:

    // 모달 기본배경 제거를 위한 클래스
    .common-dialog .mat-dialog-container {
        padding: 0px;

        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.16), 4px 8px 28px rgba(0, 0, 0, 0.08);
        border-radius: 16px;
    }

Import module in app.modules.ts:

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ...
    ],