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

1. Install packages:

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

2. 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"
           ]
       }
   }
   

3. 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;
       }
   

4. Import module in app.modules.ts:

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

Contact

kimphysicsman@gmail.com