스티커 레이어 초안 작성.

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html

@@ -160,6 +160,15 @@
         class="file-drop-zone"
       ></ucap-file-upload-queue>
     </div>
+
+    <div class="sticker-selector-container">
+      <ucap-sticker-selector
+        *ngIf="isShowStickerSelector"
+        class="sticer-selector-zone"
+      ></ucap-sticker-selector>
+      <div>
+      </div>
+    </div>
   </div>
   <!-- / CHAT CONTENT -->
 
@@ -171,6 +180,7 @@
       [fileUploadQueue]="fileUploadQueue"
       (send)="onSendMessage($event)"
       (sendFiles)="onFileSelected($event)"
+      (toggleStickerSelector)="onShowToggleStickerSelector($event)"
     ></ucap-chat-form>
     <!-- / REPLY FORM -->
   </div>

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss

@@ -29,7 +29,7 @@
   align-items: center;
   background-color: #ffffff !important;
   border-bottom: 1px solid #dddddd;
-  box-shadow: 0 3px 6px rgba(0,0,0,.16);
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
   .chat-header {
     width: 100%;
     align-items: center;
@@ -95,9 +95,25 @@
 
     .file-drop-zone {
       position: absolute;
-      padding:10px 10px 0 10px;
+      padding: 10px 10px 0 10px;
       background-color: rgb(54, 54, 54, 0.8);
-      bottom:0
+      bottom: 0;
+    }
+  }
+
+  .sticker-selector-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: transparent;
+
+    .sticer-selector-zone {
+      position: absolute;
+      padding: 10px 10px 0 10px;
+      background-color: rgb(54, 54, 54, 0.8);
+      bottom: 0;
     }
   }
 }

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts

@@ -147,6 +147,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
   /** Timer 대화방의 대화 삭제를 위한 interval */
   interval: any;
 
+  isShowStickerSelector = false;
+
   snackBarPreviewEvent: MatSnackBarRef<SimpleSnackBar>;
 
   constructor(
@@ -484,6 +486,10 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
     );
   }
 
+  onShowToggleStickerSelector() {
+    this.isShowStickerSelector = !this.isShowStickerSelector;
+  }
+
   async onFileViewer(fileInfo: FileEventJson) {
     const result = await this.dialogService.open<
       FileViewerDialogComponent,

projects/ucap-webmessenger-core/src/lib/utils/sticker.util.ts

@@ -0,0 +1,171 @@
+export interface StickerInfo {
+  index: string;
+  title: string;
+  iconPath: string;
+  iconPathOn: string;
+  useYn: boolean;
+  fileInfos: StickerFilesInfo[];
+}
+export interface StickerFilesInfo {
+  index: string;
+  path: string;
+}
+const StickerMap: StickerInfo[] = [
+  {
+    index: '00',
+    title: 'History',
+    iconPath: 'sticker_cate00.png',
+    iconPathOn: 'sticker_cate00_f.png',
+    useYn: true,
+    fileInfos: []
+  },
+  {
+    index: '01',
+    title: '꼼므',
+    iconPath: 'sticker_cate01.png',
+    iconPathOn: 'sticker_cate01_f.png',
+    useYn: true,
+    fileInfos: [
+      { index: '01_01', path: 'sticker_s_01_01.png' },
+      { index: '01_02', path: 'sticker_s_01_02.png' },
+      { index: '01_03', path: 'sticker_s_01_03.png' },
+      { index: '01_04', path: 'sticker_s_01_04.png' },
+      { index: '01_05', path: 'sticker_s_01_05.png' },
+      { index: '01_06', path: 'sticker_s_01_06.png' },
+      { index: '01_07', path: 'sticker_s_01_07.png' },
+      { index: '01_08', path: 'sticker_s_01_08.png' }
+    ]
+  },
+  {
+    index: '02',
+    title: '까미',
+    iconPath: 'sticker_cate02.png',
+    iconPathOn: 'sticker_cate02_f.png',
+    useYn: true,
+    fileInfos: [
+      { index: '02_02', path: 'sticker_s_02_02.png' },
+      { index: '02_03', path: 'sticker_s_02_03.png' },
+      { index: '02_04', path: 'sticker_s_02_04.png' },
+      { index: '02_05', path: 'sticker_s_02_05.png' },
+      { index: '02_06', path: 'sticker_s_02_06.png' },
+      { index: '02_07', path: 'sticker_s_02_07.png' },
+      { index: '02_08', path: 'sticker_s_02_08.png' }
+    ]
+  },
+  {
+    index: '03',
+    title: '왈도',
+    iconPath: 'sticker_cate03.png',
+    iconPathOn: 'sticker_cate03_f.png',
+    useYn: true,
+    fileInfos: [
+      { index: '03_01', path: 'sticker_s_03_01.png' },
+      { index: '03_02', path: 'sticker_s_03_02.png' },
+      { index: '03_03', path: 'sticker_s_03_03.png' },
+      { index: '03_04', path: 'sticker_s_03_04.png' },
+      { index: '03_05', path: 'sticker_s_03_05.png' },
+      { index: '03_06', path: 'sticker_s_03_06.png' },
+      { index: '03_07', path: 'sticker_s_03_07.png' },
+      { index: '03_08', path: 'sticker_s_03_08.png' }
+    ]
+  },
+  {
+    index: '04',
+    title: '웅쓰',
+    iconPath: 'sticker_cate04.png',
+    iconPathOn: 'sticker_cate04_f.png',
+    useYn: true,
+    fileInfos: [
+      { index: '04_01', path: 'sticker_s_04_01.png' },
+      { index: '04_02', path: 'sticker_s_04_02.png' },
+      { index: '04_03', path: 'sticker_s_04_03.png' },
+      { index: '04_04', path: 'sticker_s_04_04.png' },
+      { index: '04_05', path: 'sticker_s_04_05.png' },
+      { index: '04_06', path: 'sticker_s_04_06.png' },
+      { index: '04_07', path: 'sticker_s_04_07.png' },
+      { index: '04_08', path: 'sticker_s_04_08.png' }
+    ]
+  },
+  {
+    index: '05',
+    title: '말풍선',
+    iconPath: 'sticker_cate05.png',
+    iconPathOn: 'sticker_cate05_f.png',
+    useYn: true,
+    fileInfos: [
+      { index: '05_01', path: 'sticker_s_05_01.png' },
+      { index: '05_02', path: 'sticker_s_05_02.png' },
+      { index: '05_03', path: 'sticker_s_05_03.png' },
+      { index: '05_04', path: 'sticker_s_05_04.png' },
+      { index: '05_05', path: 'sticker_s_05_05.png' },
+      { index: '05_06', path: 'sticker_s_05_06.png' },
+      { index: '05_07', path: 'sticker_s_05_07.png' },
+      { index: '05_08', path: 'sticker_s_05_08.png' },
+      { index: '05_09', path: 'sticker_s_05_09.png' },
+      { index: '05_10', path: 'sticker_s_05_10.png' },
+      { index: '05_11', path: 'sticker_s_05_11.png' },
+      { index: '05_12', path: 'sticker_s_05_12.png' },
+      { index: '05_13', path: 'sticker_s_05_13.png' },
+      { index: '05_14', path: 'sticker_s_05_14.png' },
+      { index: '05_15', path: 'sticker_s_05_15.png' },
+      { index: '05_16', path: 'sticker_s_05_16.png' }
+    ]
+  },
+  {
+    index: '12',
+    title: '황소',
+    iconPath: 'sticker_cate12.png',
+    iconPathOn: 'sticker_cate12_f.png',
+    useYn: true,
+    fileInfos: [
+      { index: '12_01', path: 'sticker_s_12_01.gif' },
+      { index: '12_02', path: 'sticker_s_12_02.gif' },
+      { index: '12_03', path: 'sticker_s_12_03.gif' },
+      { index: '12_04', path: 'sticker_s_12_04.gif' },
+      { index: '12_05', path: 'sticker_s_12_05.gif' },
+      { index: '12_06', path: 'sticker_s_12_06.gif' },
+      { index: '12_07', path: 'sticker_s_12_07.gif' },
+      { index: '12_08', path: 'sticker_s_12_08.gif' },
+      { index: '12_09', path: 'sticker_s_12_09.gif' },
+      { index: '12_10', path: 'sticker_s_12_10.gif' },
+      { index: '12_11', path: 'sticker_s_12_11.gif' },
+      { index: '12_12', path: 'sticker_s_12_12.gif' },
+      { index: '12_13', path: 'sticker_s_12_13.gif' },
+      { index: '12_14', path: 'sticker_s_12_14.gif' },
+      { index: '12_15', path: 'sticker_s_12_15.gif' },
+      { index: '12_16', path: 'sticker_s_12_16.gif' }
+    ]
+  }
+];
+
+const ActiveAndOrdering: string[] = ['00', '01', '02', '03', '04', '05'];
+
+export class StickerUtil {
+  static getStickerInfoList(): StickerInfo[] {
+    const rtnStickerList: StickerInfo[] = [];
+
+    ActiveAndOrdering.forEach(idx => {
+      const stickerInfos: StickerInfo[] = StickerMap.filter(
+        sticker => sticker.index === idx && sticker.useYn
+      );
+      if (!!stickerInfos && stickerInfos.length > 0) {
+        rtnStickerList.push(stickerInfos[0]);
+      }
+    });
+
+    return rtnStickerList;
+  }
+
+  static getStickerInfoSub(index: string): StickerFilesInfo[] {
+    const stickerFilesList: StickerFilesInfo[] = [];
+    const stickerInfos: StickerInfo[] = StickerMap.filter(
+      sticker => sticker.index === index && sticker.useYn
+    );
+
+    if (!!stickerInfos && stickerInfos.length > 0) {
+      stickerFilesList.concat(stickerInfos[0].fileInfos);
+    }
+
+    return stickerFilesList;
+  }
+}

projects/ucap-webmessenger-core/src/public-api.ts

@@ -22,6 +22,7 @@ export * from './lib/types/video-conference-type.type';
 
 export * from './lib/utils/file.util';
 export * from './lib/utils/mime.util';
+export * from './lib/utils/sticker.util';
 export * from './lib/utils/string.util';
 
 export * from './lib/config/host.config';

projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html

@@ -16,13 +16,17 @@
       (change)="onChangeFileInput()"
     />
 
-    <button mat-icon-button class="material-icons">
+    <button
+      mat-icon-button
+      class="material-icons"
+      (click)="onClickStickerSelector()"
+    >
       <mat-icon>sentiment_satisfied_alt</mat-icon>
     </button>
 
-    <button mat-icon-button class="material-icons">
+    <!-- <button mat-icon-button class="material-icons">
       <mat-icon>g_translate</mat-icon>
-    </button>
+    </button> -->
   </div>
 
   <form

projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.ts

@@ -26,6 +26,9 @@ export class FormComponent implements OnInit {
   @Output()
   sendFiles = new EventEmitter<FileUploadItem[]>();
 
+  @Output()
+  toggleStickerSelector = new EventEmitter<void>();
+
   @ViewChild('replyForm', { static: false })
   replyForm: NgForm;
 
@@ -67,4 +70,8 @@ export class FormComponent implements OnInit {
 
     this.fileInput.nativeElement.value = '';
   }
+
+  onClickStickerSelector() {
+    this.toggleStickerSelector.emit();
+  }
 }

projects/ucap-webmessenger-ui/src/lib/components/sticker-selector.component.html

@@ -0,0 +1,4 @@
+<p>sticker-selector works!</p>
+<p *ngFor="let stickerInfo of stickerInfoList">
+  {{ stickerInfo.title }}
+</p>

projects/ucap-webmessenger-ui/src/lib/components/sticker-selector.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StickerSelectorComponent } from './sticker-selector.component';
+
+describe('StickerSelectorComponent', () => {
+  let component: StickerSelectorComponent;
+  let fixture: ComponentFixture<StickerSelectorComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ StickerSelectorComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StickerSelectorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/ucap-webmessenger-ui/src/lib/components/sticker-selector.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import {
+  StickerInfo,
+  StickerFilesInfo,
+  StickerUtil
+} from '@ucap-webmessenger/core';
+
+@Component({
+  selector: 'ucap-sticker-selector',
+  templateUrl: './sticker-selector.component.html',
+  styleUrls: ['./sticker-selector.component.scss']
+})
+export class StickerSelectorComponent implements OnInit {
+  stickerInfoList: StickerInfo[] = [];
+  stickerFileInfoList: StickerFilesInfo[] = [];
+
+  constructor() {}
+
+  ngOnInit() {
+    this.stickerInfoList = StickerUtil.getStickerInfoList();
+  }
+}

projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts

@@ -47,12 +47,14 @@ import {
 } from './pipes/dates.pipe';
 import { SecondsToMinutesPipe } from './pipes/seconds-to-minutes.pipe';
 import { LinkyPipe } from './pipes/linky.pipe';
+import { StickerSelectorComponent } from './components/sticker-selector.component';
 
 const COMPONENTS = [
   FileUploadQueueComponent,
   FloatActionButtonComponent,
   FileViewerComponent,
   ExpansionPanelComponent,
+  StickerSelectorComponent,
 
   BinaryViewerComponent,
   DocumentViewerComponent,