ing

src/app/material.module.ts

@@ -66,7 +66,8 @@ const MODULE = [
   MatToolbarModule,
   MatTableModule,
   MatFormFieldModule,
-  MatTreeModule
+  MatTreeModule,
+  MatStepperModule
 ];
 
 @NgModule({

src/app/pages/account/login.component.scss

@@ -294,7 +294,7 @@ $login-bg-h: 100/1080;
           }
           &.fir-pass {
             &::before {
-              content: 'sync';
+              content: 'cached';
             }
           }
         }

src/app/pages/common/common.component.html

@@ -1,12 +1,32 @@
 <div>
   <h3>popup components</h3>
   <button mat-stroked-button color="primary" (click)="openDialog('CHAT')">
+    Select-User
+  </button>
+  <button mat-stroked-button color="primary" (click)="openDialog('CHAT_INFO')">
     New-Chat
   </button>
-  <button mat-stroked-button color="primary" (click)="openDialog('GROUP')">
+  <button mat-stroked-button color="primary" (click)="openDialog('GROUP_INFO')">
     New-Group
   </button>
+  <button
+    mat-stroked-button
+    color="primary"
+    (click)="openDialog('STEP_LAYOUT')"
+  >
+    Step-Layout
+  </button>
   <button mat-stroked-button color="primary" (click)="openDialog('SETTING')">
     Setting
   </button>
 </div>
+
+<div>
+  <h3>Alert & confirm popup</h3>
+  <button mat-stroked-button color="primary" (click)="openAlert()">
+    Alert
+  </button>
+  <button mat-stroked-button color="primary" (click)="openConfirm()">
+    Confirm
+  </button>
+</div>

src/app/pages/common/common.component.stories.ts

@@ -1,6 +1,7 @@
 import { action } from '@storybook/addon-actions';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ScrollingModule } from '@angular/cdk/scrolling';
 
 import { MaterialModule } from 'src/app/material.module';
 import { moduleMetadata } from '@storybook/angular';
@@ -10,15 +11,22 @@ import { NewChatComponent } from './popup/new-chat.component';
 import { SettingComponent } from './popup/setting.component';
 import { DIALOGS } from './popup';
 import { UserItemComponent } from '../group/component/user-item.component';
-
+import { TreeComponent } from '../organization/component/tree.component';
+import { ReactiveFormsModule } from '@angular/forms';
 export default {
   title: '99_Common/CommonComponent',
   component: CommonComponent,
   decorators: [
     moduleMetadata({
-      imports: [BrowserModule, BrowserAnimationsModule, MaterialModule],
+      imports: [
+        BrowserModule,
+        BrowserAnimationsModule,
+        MaterialModule,
+        ScrollingModule,
+        ReactiveFormsModule
+      ],
       providers: [],
-      declarations: [DIALOGS, UserItemComponent],
+      declarations: [DIALOGS, UserItemComponent, TreeComponent],
       entryComponents: [DIALOGS]
     })
   ]

src/app/pages/common/common.component.ts

@@ -3,6 +3,10 @@ import { MatDialog } from '@angular/material/dialog';
 import { NewChatComponent } from './popup/new-chat.component';
 import { NewGroupComponent } from './popup/new-group.component';
 import { SettingComponent } from './popup/setting.component';
+import { NewChatInfoComponent } from './popup/new-chat-info.component';
+import { StepLayoutComponent } from './popup/step-layout.component';
+import { AlertComponent } from './popup/alert.component';
+import { ConfirmComponent } from './popup/confirm.component';
 
 @Component({
   selector: 'app-common',
@@ -18,22 +22,47 @@ export class CommonComponent implements OnInit {
     switch (type) {
       case 'CHAT':
         this.dialog.open(NewChatComponent, {
-          width: '850px',
+          // width: '850px',
           data: {}
         });
         break;
-      case 'GROUP':
+      case 'CHAT_INFO':
+        this.dialog.open(NewChatInfoComponent, {
+          // width: '600px',
+          data: {}
+        });
+        break;
+      case 'GROUP_INFO':
         this.dialog.open(NewGroupComponent, {
-          width: '250px',
+          // width: '850px',
+          data: {}
+        });
+        break;
+      case 'STEP_LAYOUT':
+        this.dialog.open(StepLayoutComponent, {
+          // width: '850px',
           data: {}
         });
         break;
       case 'SETTING':
         this.dialog.open(SettingComponent, {
-          width: '250px',
+          // width: '250px',
           data: {}
         });
         break;
     }
   }
+
+  openAlert() {
+    this.dialog.open(AlertComponent, {
+      // width: '350px',
+      data: {}
+    });
+  }
+  openConfirm() {
+    this.dialog.open(ConfirmComponent, {
+      // width: '350px',
+      data: {}
+    });
+  }
 }

src/app/pages/common/common.module.ts

@@ -1,7 +1,4 @@
 import { NgModule } from '@angular/core';
-import { NewGroupComponent } from './popup/new-group.component';
-import { NewChatComponent } from './popup/new-chat.component';
-import { SettingComponent } from './popup/setting.component';
 import { DIALOGS } from './popup';
 
 const COMPONENT = [];

src/app/pages/common/popup/alert.component.html

@@ -0,0 +1,18 @@
+<mat-card class="confirm-card mat-elevation-z">
+  <mat-card-header>
+    <mat-card-title>Alert Title</mat-card-title>
+    <button class="icon-button btn-dialog-close" (click)="onClickConfirm()">
+      <i class="mdi mdi-window-close"></i>
+    </button>
+  </mat-card-header>
+  <mat-card-content>
+    <div #messageContainer class="notice">
+      여기 경고메시지가 들어갑니다.
+    </div>
+  </mat-card-content>
+  <mat-card-actions class="button-form flex-row">
+    <button mat-stroked-button class="mat-primary">
+      확인
+    </button>
+  </mat-card-actions>
+</mat-card>

src/app/pages/common/popup/alert.component.spec.ts

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

src/app/pages/common/popup/alert.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-alert',
+  templateUrl: './alert.component.html',
+  styleUrls: ['./alert.component.scss']
+})
+export class AlertComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/common/popup/confirm.component.html

@@ -0,0 +1,26 @@
+<mat-card class="confirm-card mat-elevation-z">
+  <mat-card-header
+    cdkDrag
+    cdkDragRootElement=".cdk-overlay-pane"
+    cdkDragHandle
+    class="card-header"
+  >
+    <mat-card-title>Confirm Title</mat-card-title>
+    <button class="icon-button btn-dialog-close" (click)="onClickChoice(false)">
+      <i class="mdi mdi-window-close"></i>
+    </button>
+  </mat-card-header>
+  <mat-card-content>
+    <div #messageContainer class="notice">
+      취소 ? 확인 ?
+    </div>
+  </mat-card-content>
+  <mat-card-actions class="button-form flex-row">
+    <button mat-stroked-button class="mat-primary">
+      아니요
+    </button>
+    <button mat-flat-button class="mat-primary">
+      예
+    </button>
+  </mat-card-actions>
+</mat-card>

src/app/pages/common/popup/confirm.component.spec.ts

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

src/app/pages/common/popup/confirm.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-confirm',
+  templateUrl: './confirm.component.html',
+  styleUrls: ['./confirm.component.scss']
+})
+export class ConfirmComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/common/popup/index.ts

@@ -1,5 +1,21 @@
 import { NewGroupComponent } from './new-group.component';
 import { NewChatComponent } from './new-chat.component';
 import { SettingComponent } from './setting.component';
+import { NewChatInfoComponent } from './new-chat-info.component';
 
-export const DIALOGS = [NewGroupComponent, NewChatComponent, SettingComponent];
+import { StepLayoutComponent } from './step-layout.component';
+
+import { AlertComponent } from './alert.component';
+import { ConfirmComponent } from './confirm.component';
+
+export const DIALOGS = [
+  NewGroupComponent,
+  NewChatComponent,
+  SettingComponent,
+  NewChatInfoComponent,
+
+  StepLayoutComponent,
+
+  AlertComponent,
+  ConfirmComponent
+];

src/app/pages/common/popup/new-chat-info.component.html

@@ -0,0 +1,79 @@
+<mat-card class="confirm-card mat-elevation-z dialog-creat-chat">
+  <mat-card-header>
+    <mat-card-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle
+      >새로운 대화방 추가</mat-card-title
+    >
+    <button class="icon-button btn-dialog-close">
+      <i class="mdi mdi-window-close"></i>
+    </button>
+  </mat-card-header>
+
+  <mat-card-content>
+    <div
+      fxLayout="column"
+      fxLayout.xs="column"
+      fxLayoutAlign="center"
+      fxLayoutGap="10px"
+      fxLayoutGap.xs="0"
+      class="mat-card-content-frame"
+    >
+      <div fxFlex class="container">
+        <!-- search start-->
+        <div fxLayout="column" fxFlex="1 1 auto" class="ingegrated-search">
+          <div class="org-search-container">
+            <h4>대화방 유형</h4>
+            <ul>
+              <li>
+                <mat-checkbox>
+                  <h3>일반 대화방</h3>
+                  <span><strong>300명까지</strong> 참여가 가능합니다.</span>
+                </mat-checkbox>
+              </li>
+              <li>
+                <mat-checkbox>
+                  <h3>대규모 대화방</h3>
+                  <span><strong>1000명까지</strong> 참여가 가능합니다.</span>
+                </mat-checkbox>
+              </li>
+              <li>
+                <mat-checkbox>
+                  <h3>비밀 대화방</h3>
+                  <span
+                    ><strong>타이머 설정 시</strong> 대화 내용이 자동 삭제
+                    됩니다.</span
+                  >
+                </mat-checkbox>
+              </li>
+            </ul>
+          </div>
+          <div class="org-search-container">
+            <h4>대화방 이름</h4>
+            <mat-form-field hintLabel="※ 특수문자는 -,_만 사용할 수 있습니다">
+              <input
+                matInput
+                #input
+                maxlength="20"
+                placeholder="대화방명을 입력하세요"
+                formControlName="groupName"
+              />
+              <mat-hint align="end">{{ input.value?.length || 0 }}/20</mat-hint>
+              <mat-error *ngIf="true">
+                금지단어[-,_]
+              </mat-error>
+            </mat-form-field>
+          </div>
+        </div>
+        <!-- search end-->
+      </div>
+    </div>
+  </mat-card-content>
+</mat-card>
+
+<div>
+  <button mat-stroked-button (click)="onClickChoice(false)" class="mat-primary">
+    취소
+  </button>
+  <button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
+    다음
+  </button>
+</div>

src/app/pages/common/popup/new-chat-info.component.scss

@@ -0,0 +1,178 @@
+.dialog-creat-chat {
+  height: 100%;
+  & > .mat-card-header {
+    .btn-dialog-close {
+      font-size: 20px;
+      display: flex;
+      margin-left: auto;
+      align-self: flex-start;
+      color: #444444;
+    }
+  }
+  & > .mat-card-content {
+    position: relative;
+    .mat-card-content-frame {
+      height: calc(100% - 50px);
+      .container {
+        height: 100%;
+        .container-frame {
+          height: 300px;
+        }
+      }
+    }
+    //그룹이름 폼 있는 경우
+    .newgroup-form {
+      height: 70px;
+      & + .mat-card-content-frame {
+        height: calc(100% - 120px);
+        .container {
+          .mat-tab-frame {
+            .mat-tab-group {
+              & > .mat-tab-body {
+                height: 380px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  & > .mat-tab-body-wrapper {
+    height: calc(100% - 50px);
+    .mat-tag-body {
+      & > .dialog-tab-orglist {
+      }
+    }
+  }
+}
+
+.dialog-tab-grouplist {
+  height: calc(100% - 130px);
+  width: 100%;
+  .group,
+  .search-result {
+    width: 100%;
+    height: calc(100% - 50px);
+    &-expansion {
+      .list-item {
+        height: 60px;
+      }
+    }
+    &-list-item {
+      width: 100%;
+    }
+  }
+}
+
+/*::ng-deep .dialog-tab-chatlist {
+  height: 508px;
+  width: 100%;
+  .chat {
+    width: 100%;
+  }
+  .chat.checkbox {
+    & > .list-item {
+      padding: 0 10px;
+      .item-default {
+        width: calc(100% - 30px);
+      }
+      .mat-badge {
+        display: none;
+      }
+    }
+  }
+}
+*/
+::ng-deep .dialog-tab-orglist {
+  width: 100%;
+  height: calc(100% - 130px);
+  border-bottom: 1px solid #dddddd;
+  position: relative;
+  .oraganization {
+    .ps__rail-y {
+      left: auto !important;
+    }
+    &-tab {
+      width: 100%;
+      height: calc(100% - 50px);
+      position: relative;
+      &-tree {
+        display: inline-flex;
+        width: 50%;
+        height: 100% !important;
+        border-right: 1px solid #dddddd;
+        overflow: auto;
+        .tab-tree-frame {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      .select-list {
+        display: inline-flex;
+        flex-direction: column;
+        width: 50%;
+        height: 100% !important;
+        overflow: auto;
+        .search-list {
+          overflow: auto;
+          height: calc(100% - 40px);
+        }
+      }
+    }
+  }
+}
+
+.list-chip {
+  height: 100px;
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #dddddd;
+  overflow: auto;
+  background-color: #f9f9f9;
+  margin-top: 10px;
+}
+.mat-chip.mat-standard-chip .mat-chip-remove {
+}
+
+.confirm-card {
+  .mat-card-content {
+    .content-box {
+      flex-direction: column;
+      flex-flow: column;
+    }
+  }
+  .button-form {
+    text-align: right;
+    .mat-primary {
+      margin-left: 4px;
+    }
+  }
+}
+
+/*::ng-deep .dialog-creat-chat {
+  & > .mat-tab-body-wrapper {
+    .mat-tab-body {
+      height: 380px;
+      &:nth-child(3) {
+        height: 480px;
+      }
+      .mat-tab-body-content {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}
+*/
+
+.mat-card-content {
+  .mat-card-content-frame {
+    height: 100%;
+    .container {
+      height: 100%;
+      .mat-tab-group {
+        height: 100%;
+      }
+    }
+  }
+}

src/app/pages/common/popup/new-chat-info.component.spec.ts

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

src/app/pages/common/popup/new-chat-info.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-new-chat-info',
+  templateUrl: './new-chat-info.component.html',
+  styleUrls: ['./new-chat-info.component.scss']
+})
+export class NewChatInfoComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/common/popup/new-chat.component.html

@@ -18,10 +18,49 @@
       class="mat-card-content-frame"
     >
       <div fxFlex class="container">
-        <!-- search-->
+        <!-- search start-->
-        <div>
+        <div fxLayout="column" fxFlex="1 1 auto" class="ingegrated-search">
-          검색창
+          <div class="org-search-container">
+            <mat-form-field class="example-full-width" appearance="none">
+              <mat-select placeholder="전체">
+                <mat-option
+                  *ngFor="let searchItem of searchItemList"
+                  [value]="searchItem"
+                >
+                  {{ searchItem.itemName }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+            <mat-form-field>
+              <input matInput placeholder="이름, 부서명, 전화번호, 이메일" />
+              <button
+                mat-icon-button
+                *ngIf="true"
+                class="icon-button font-accent-color"
+                aria-label="Clear"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="20"
+                  height="20"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="butt"
+                  stroke-linejoin="round"
+                >
+                  <line x1="18" y1="6" x2="6" y2="18"></line>
+                  <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+                <!-- <mat-icon>close</mat-icon> -->
+                <!-- <i class="mdi mdi-close">X</i> -->
+              </button>
+            </mat-form-field>
           </div>
+        </div>
+        <!-- search end-->
+
         <mat-tab-group mat-stretch-tabs>
           <!--그룹-->
           <mat-tab>
@@ -90,7 +129,16 @@
             </ng-template>
             <div fxFlexFill>
               <div class="mat-tab-frame dialog-tab-grouplist">
-                <div><!-- group -->ffffffffff</div>
+                <div>
+                  <mat-chip-list aria-label="Fish selection">
+                    <mat-chip color="primary" selected>LG CNS</mat-chip>
+                    <p>></p>
+                    <mat-chip color="accent" selected>DT 사업부</mat-chip>
+                  </mat-chip-list>
+                </div>
+                <div>
+                  <app-tree> </app-tree>
+                </div>
               </div>
             </div>
           </mat-tab>
@@ -98,40 +146,31 @@
       </div>
     </div>
   </mat-card-content>
-  <ng-template #selectedUserListTemplate>
+</mat-card>
-    <div class="list-chip">
+
+<div>
+  <span class="text-warn-color">
+    선택한 대화상대 4
+  </span>
+</div>
+<div class="list-chip">
   <mat-chip-list aria-label="User selection">
     <mat-chip *ngFor="let userInfo of selectedUserList" [selected]="true">
       김선규
       <mat-icon matChipRemove *ngIf="true">clear</mat-icon>
     </mat-chip>
   </mat-chip-list>
-    </div>
+</div>
-    <ng-container
+
-      *ngIf="
+<div>
-        data.type === UserSelectDialogType.NewChat;
+  <button mat-stroked-button (click)="onClickChoice(false)" class="mat-primary">
-        then newchatcount;
+    취소
-        else defaultcount
+  </button>
-      "
+  <button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
-    ></ng-container>
+    완료
-    <ng-template #newchatcount>
+  </button>
-      <span
+
-        [ngClass]="
+  <button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
-          selectedUserList.length >=
+    그룹지정 후 완료
-          environment.productConfig.CommonSetting.maxChatRoomUser
+  </button>
-            ? 'text-warn-color'
+</div>
-            : ''
-        "
-      >
-        13 / 21 명
-      </span>
-      <span
-        class="text-warn-color"
-        style="float: right;"
-        *ngIf="selectedUserList.length >= 50"
-      >
-        에러
-      </span>
-    </ng-template>
-  </ng-template>
-</mat-card>

src/app/pages/common/popup/new-chat.component.scss

@@ -16,7 +16,7 @@
       .container {
         height: 100%;
         .container-frame {
-          height: 530px;
+          height: 300px;
         }
       }
     }

src/app/pages/common/popup/new-chat.component.ts

@@ -13,6 +13,8 @@ export class NewChatComponent implements OnInit {
     { name: '김선구2' },
     { name: '김선구3' }
   ];
+  searchItemList: any[] = [{ itemName: 'LGCNS' }, { itemName: 'LG' }];
+
   constructor(@Inject(MAT_DIALOG_DATA) public data: any) {}
 
   ngOnInit(): void {}

src/app/pages/common/popup/new-group.component.html

@@ -1 +1,55 @@
-<p>new-group works!</p>
+<mat-card class="confirm-card mat-elevation-z dialog-creat-chat">
+  <mat-card-header>
+    <mat-card-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle
+      >새 그룹 추가</mat-card-title
+    >
+    <button class="icon-button btn-dialog-close">
+      <i class="mdi mdi-window-close"></i>
+    </button>
+  </mat-card-header>
+
+  <mat-card-content>
+    <div
+      fxLayout="column"
+      fxLayout.xs="column"
+      fxLayoutAlign="center"
+      fxLayoutGap="10px"
+      fxLayoutGap.xs="0"
+      class="mat-card-content-frame"
+    >
+      <div fxFlex class="container">
+        <!-- search start-->
+        <div fxLayout="column" fxFlex="1 1 auto" class="ingegrated-search">
+          <div class="org-search-container">
+            <mat-form-field hintLabel="※ 특수문자는 -,_만 사용할 수 있습니다">
+              <input
+                matInput
+                #input
+                maxlength="20"
+                placeholder="그룹 이름을 입력하세요"
+                formControlName="groupName"
+              />
+              <mat-hint align="end">{{ input.value?.length || 0 }}/20</mat-hint>
+              <mat-error *ngIf="true">
+                금지단어[-,_]
+              </mat-error>
+              <mat-error *ngIf="true">
+                이미 존재하는 그룹명입니다.
+              </mat-error>
+            </mat-form-field>
+          </div>
+        </div>
+        <!-- search end-->
+      </div>
+    </div>
+  </mat-card-content>
+</mat-card>
+
+<div>
+  <button mat-stroked-button (click)="onClickChoice(false)" class="mat-primary">
+    취소
+  </button>
+  <button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
+    다음
+  </button>
+</div>

src/app/pages/common/popup/new-group.component.scss

@@ -0,0 +1,178 @@
+.dialog-creat-chat {
+  height: 100%;
+  & > .mat-card-header {
+    .btn-dialog-close {
+      font-size: 20px;
+      display: flex;
+      margin-left: auto;
+      align-self: flex-start;
+      color: #444444;
+    }
+  }
+  & > .mat-card-content {
+    position: relative;
+    .mat-card-content-frame {
+      height: calc(100% - 50px);
+      .container {
+        height: 100%;
+        .container-frame {
+          height: 300px;
+        }
+      }
+    }
+    //그룹이름 폼 있는 경우
+    .newgroup-form {
+      height: 70px;
+      & + .mat-card-content-frame {
+        height: calc(100% - 120px);
+        .container {
+          .mat-tab-frame {
+            .mat-tab-group {
+              & > .mat-tab-body {
+                height: 380px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  & > .mat-tab-body-wrapper {
+    height: calc(100% - 50px);
+    .mat-tag-body {
+      & > .dialog-tab-orglist {
+      }
+    }
+  }
+}
+
+.dialog-tab-grouplist {
+  height: calc(100% - 130px);
+  width: 100%;
+  .group,
+  .search-result {
+    width: 100%;
+    height: calc(100% - 50px);
+    &-expansion {
+      .list-item {
+        height: 60px;
+      }
+    }
+    &-list-item {
+      width: 100%;
+    }
+  }
+}
+
+/*::ng-deep .dialog-tab-chatlist {
+  height: 508px;
+  width: 100%;
+  .chat {
+    width: 100%;
+  }
+  .chat.checkbox {
+    & > .list-item {
+      padding: 0 10px;
+      .item-default {
+        width: calc(100% - 30px);
+      }
+      .mat-badge {
+        display: none;
+      }
+    }
+  }
+}
+*/
+::ng-deep .dialog-tab-orglist {
+  width: 100%;
+  height: calc(100% - 130px);
+  border-bottom: 1px solid #dddddd;
+  position: relative;
+  .oraganization {
+    .ps__rail-y {
+      left: auto !important;
+    }
+    &-tab {
+      width: 100%;
+      height: calc(100% - 50px);
+      position: relative;
+      &-tree {
+        display: inline-flex;
+        width: 50%;
+        height: 100% !important;
+        border-right: 1px solid #dddddd;
+        overflow: auto;
+        .tab-tree-frame {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      .select-list {
+        display: inline-flex;
+        flex-direction: column;
+        width: 50%;
+        height: 100% !important;
+        overflow: auto;
+        .search-list {
+          overflow: auto;
+          height: calc(100% - 40px);
+        }
+      }
+    }
+  }
+}
+
+.list-chip {
+  height: 100px;
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #dddddd;
+  overflow: auto;
+  background-color: #f9f9f9;
+  margin-top: 10px;
+}
+.mat-chip.mat-standard-chip .mat-chip-remove {
+}
+
+.confirm-card {
+  .mat-card-content {
+    .content-box {
+      flex-direction: column;
+      flex-flow: column;
+    }
+  }
+  .button-form {
+    text-align: right;
+    .mat-primary {
+      margin-left: 4px;
+    }
+  }
+}
+
+/*::ng-deep .dialog-creat-chat {
+  & > .mat-tab-body-wrapper {
+    .mat-tab-body {
+      height: 380px;
+      &:nth-child(3) {
+        height: 480px;
+      }
+      .mat-tab-body-content {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}
+*/
+
+.mat-card-content {
+  .mat-card-content-frame {
+    height: 100%;
+    .container {
+      height: 100%;
+      .mat-tab-group {
+        height: 100%;
+      }
+    }
+  }
+}

src/app/pages/common/popup/step-layout.component.html

@@ -0,0 +1,18 @@
+<mat-horizontal-stepper [linear]="isLinear" #stepper>
+  <mat-step>
+    <ng-template matStepLabel>Group Info</ng-template>
+    <app-new-group></app-new-group>
+  </mat-step>
+  <mat-step>
+    <ng-template matStepLabel>Add Group Users</ng-template>
+    <app-new-chat></app-new-chat>
+  </mat-step>
+  <mat-step>
+    <ng-template matStepLabel>Done</ng-template>
+    <p>You are now done.</p>
+    <div>
+      <button mat-button matStepperPrevious>Back</button>
+      <button mat-button (click)="stepper.reset()">Reset</button>
+    </div>
+  </mat-step>
+</mat-horizontal-stepper>

src/app/pages/common/popup/step-layout.component.spec.ts

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

src/app/pages/common/popup/step-layout.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-step-layout',
+  templateUrl: './step-layout.component.html',
+  styleUrls: ['./step-layout.component.scss']
+})
+export class StepLayoutComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/group/component/user-item.component.html

@@ -1,10 +1,18 @@
-<div class="user-list">
+<div class="user-list line-top">
-  <span class="presence">bullet</span>
+  <div class="user-profile-info">
+    <div class="user-profile-thumb mobile-ing">
+      <!-- 모바일이 온라인일 경우 + mobile-ing -->
+      <span class="presence other-business">다른용무</span>
+      <!-- 기본값:온라인, +offline:오프라인, +absence:부재중, +other-business:다른용무 -->
       <div class="profileImage">
-    ProfileImage
+        <img
+          src="https://material.angular.io/assets/img/examples/shiba2.jpg"
+          style="width: 36px; height: 36px;"
+        />
+      </div>
     </div>
     <div class="userInfo">
-    <div>
+      <div class="user-n-g">
         <div class="name">홍길동</div>
         <div class="grade">대리</div>
       </div>
@@ -12,8 +20,12 @@
         영업팀
       </div>
     </div>
+  </div>
   <div class="intro">
-    맑은 산속 옹달샘 누가와서 먹나요??
+    <p>
+      맑은 산속 옹달샘 누가와서 먹나요?? 토끼가 새벽에 와서 빨빨랑 먹지요 토끼가
+      새벽에 와서 빨빨랑 먹지요.
+    </p>
   </div>
   <div *ngIf="check">
     <mat-checkbox></mat-checkbox>

src/app/pages/group/component/user-item.component.scss

@@ -0,0 +1,101 @@
+@charset 'UTF-8';
+
+@import '../../../../assets/scss/components.scss';
+
+.user-list {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  padding: 0 16px;
+  height: 70px;
+  align-items: center;
+  &.line-top {
+    border-top: 1px solid $gray-rec;
+  }
+  .user-profile-info {
+    display: inline-flex;
+    flex-direction: row;
+    flex-grow: 2.3;
+    .user-profile-thumb {
+      @include profile-avatar-default(
+        0 5px 5px 0,
+        8,
+        $green,
+        18px
+      ); //오른 아래 공간, 모바일 온라인 아이콘 크기, 모바일 아이콘 색, 모바일 아이콘 bg크기
+      .presence {
+        //PC 상태
+        @include presence-state(8px); //원크기
+      }
+      .profileImage {
+        @include avatar-img(36px, 2px); //아바타 크기, 왼쪽공간
+      }
+    }
+    .userInfo {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: flex-start;
+      padding-left: 16px;
+      .user-n-g {
+        display: flex;
+        flex-flow: row-reverse nowrap;
+        align-items: flex-end;
+        height: 22px;
+        .name {
+          font: {
+            size: 16px;
+            weight: 600;
+          }
+          color: $gray-re21;
+          order: 1;
+          -ms-flex-order: 1;
+        }
+        .grade {
+          font: {
+            size: 13px;
+          }
+          color: $gray-re70;
+          margin-left: 4px;
+          order: 0;
+          -ms-flex-order: 0;
+        }
+      }
+      .deptName {
+        font-size: 12px;
+        color: $gray-re6;
+        line-height: 16px;
+      }
+    }
+  }
+  .intro {
+    display: inline-flex;
+    flex-flow: row nowrap;
+    flex-basis: 35%;
+    flex-grow: 0;
+    align-items: baseline;
+    p {
+      font-size: 11px;
+      line-height: 1.4;
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      height: 30px;
+    }
+    &:before {
+      content: 'chat';
+      @include font-family-ico(12, center, $lipstick);
+      flex-direction: row;
+      align-items: flex-start;
+      width: 12px;
+      height: 12px;
+      line-height: 12px;
+      margin-right: 4.8px;
+      position: relative;
+      top: 2px;
+    }
+  }
+}

src/app/pages/group/group.component.html

@@ -1,6 +1,12 @@
 <div class="container">
   <div class="gnb">
-    <mat-toolbar><span class="lgucap-logo blind">Logo</span></mat-toolbar>
+    <mat-toolbar
+      ><img
+        src="../../../assets/images/logo_140.png"
+        alt=""
+        class="img-logo"
+        width="32"
+    /></mat-toolbar>
     <mat-tab-group
       mat-stretch-tabs
       animationDuration="0ms"
@@ -12,17 +18,41 @@
           <div class="icon-item" matTooltip="그룹" matTooltipPosition="after">
             <svg
               xmlns="http://www.w3.org/2000/svg"
-              width="24"
+              width="16.871"
-              height="24"
+              height="16.8"
-              viewBox="0 0 24 24"
+              viewBox="0 0 16.871 16.8"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="1.5"
               stroke-linecap="butt"
-              stroke-linejoin="round"
             >
-              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+              <g
-              <circle cx="12" cy="7" r="4"></circle>
+                id="icon_gnb_group_g32"
+                transform="translate(-17.815 -103.827)"
+              >
+                <path
+                  id="prefix_22"
+                  d="M18.871 21a7.733 7.733 0 0 0-7.435-8A7.733 7.733 0 0 0 4 21"
+                  data-name="prefix_22"
+                  transform="translate(14.815 98.627)"
+                  style="
+                    fill: transparent;
+                    /*stroke: #999;*/
+                    stroke-linecap: round;
+                    stroke-miterlimit: 10;
+                    stroke-width: 2px;
+                  "
+                />
+                <g id="prefix_23" data-name="prefix_23" style="fill: none;">
+                  <path
+                    d="M4.093 0a4.047 4.047 0 0 1 4.092 4 4.1 4.1 0 0 1-1.591 3.167A3.931 3.931 0 0 1 4.093 8 4.047 4.047 0 0 1 0 4a4.047 4.047 0 0 1 4.093-4z"
+                    style="stroke: none;"
+                    transform="translate(22.157 103.827)"
+                  />
+                  <path
+                    d="M4.093 2C2.939 2 2 2.897 2 4s.939 2 2.093 2c.604 0 1.062-.233 1.16-.317l.017-.016.018-.015c.804-.694.897-1.275.897-1.652 0-1.103-.938-2-2.092-2m0-2c2.26 0 4.092 1.79 4.092 4 0 1.184-.526 2.248-1.591 3.167C6.098 7.614 5.14 8 4.093 8 1.833 8 0 6.21 0 4s1.832-4 4.093-4z"
+                    style="fill: #999; stroke: none;"
+                    transform="translate(22.157 103.827)"
+                  />
+                </g>
+              </g>
             </svg>
           </div>
         </ng-template>
@@ -38,18 +68,25 @@
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
-              width="24"
+              width="16.8"
-              height="24"
+              height="16"
-              viewBox="0 0 24 24"
+              viewBox="0 0 16.8 16"
-              fill="none"
+            >
-              stroke="#000000"
+              <g
-              stroke-width="1.5"
+                id="icon_gnb_chat_g32"
-              stroke-linecap="butt"
+                style="fill: none; stroke-linejoin: round;"
-              stroke-linejoin="bevel"
               >
                 <path
-                d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"
+                  d="M39.972 26.892a7.688 7.688 0 0 0-8.983 0 4.344 4.344 0 0 0 0 7.194 7.334 7.334 0 0 0 4.492 1.449c.172 0 .346-.006.519-.017l1.09 1.725a.437.437 0 0 0 .36.2h.01a.438.438 0 0 0 .359-.184l2.308-3.3a4.33 4.33 0 0 0-.154-7.07z"
-              ></path>
+                  style="stroke: none;"
+                  transform="translate(-27.08 -23.443)"
+                />
+                <path
+                  d="M35.48 25.443c-1.693 0-3.288.514-4.492 1.449-1.23.955-1.908 2.232-1.908 3.597 0 1.364.678 2.642 1.908 3.597 1.204.934 2.8 1.449 4.492 1.449.172 0 .346-.006.519-.017l1.09 1.725c.076.121.212.196.36.2h.01c.143 0 .278-.069.358-.184l2.308-3.297c1.133-.94 1.755-2.17 1.755-3.473 0-1.365-.678-2.643-1.908-3.597-1.204-.935-2.8-1.45-4.492-1.45m0-2c2.134 0 4.165.664 5.718 1.87 1.73 1.342 2.682 3.18 2.682 5.177 0 1.817-.8 3.52-2.259 4.824l-2.165 3.093c-.454.65-1.201 1.037-1.997 1.037h-.063c-.817-.022-1.563-.444-1.998-1.131l-.501-.794c-1.92-.11-3.724-.757-5.135-1.852-1.73-1.342-2.682-3.18-2.682-5.177 0-1.997.952-3.835 2.682-5.177 1.553-1.205 3.584-1.87 5.718-1.87z"
+                  style="fill: #999; stroke: none;"
+                  transform="translate(-27.08 -23.443)"
+                />
+              </g>
             </svg>
           </div>
         </ng-template>
@@ -59,21 +96,47 @@
           <div class="icon-item">
             <svg
               xmlns="http://www.w3.org/2000/svg"
-              width="24"
+              width="21"
-              height="24"
+              height="19"
-              viewBox="0 0 24 24"
+              viewBox="0 0 21 19"
-              fill="none"
-              stroke="#000000"
-              stroke-width="1.5"
-              stroke-linecap="butt"
-              stroke-linejoin="bevel"
             >
-              <circle class="st0" cx="18.4" cy="18.5" r="3" />
+              <g
-              <circle class="st0" cx="12" cy="5" r="3" />
+                id="icon_gnb_organiztion_g32"
-              <path class="st0" d="M12.4,10.5h4c1.1,0,2,0.9,2,2v3" />
+                transform="translate(-12.917 -220.25)"
-              <circle class="st0" cx="6.1" cy="18.5" r="3" />
+              >
-              <path class="st0" d="M6.1,15.5v-3c0-1.1,0.9-2,2-2h4" />
+                <g class="prefix__cls-1" transform="translate(19.917 220.25)">
-              <line class="st0" x1="12" y1="8" x2="12" y2="9" />
+                  <circle cx="3.5" cy="3.5" r="3.5" class="prefix__cls-3" />
+                  <circle cx="3.5" cy="3.5" r="2.5" class="prefix__cls-4" />
+                </g>
+                <g class="prefix__cls-1" transform="translate(12.917 232.25)">
+                  <circle cx="3.5" cy="3.5" r="3.5" class="prefix__cls-3" />
+                  <circle cx="3.5" cy="3.5" r="2.5" class="prefix__cls-4" />
+                </g>
+                <g class="prefix__cls-1" transform="translate(19.917 232.25)">
+                  <circle cx="3.5" cy="3.5" r="3.5" class="prefix__cls-3" />
+                  <circle cx="3.5" cy="3.5" r="2.5" class="prefix__cls-4" />
+                </g>
+                <g class="prefix__cls-1" transform="translate(26.917 232.25)">
+                  <circle cx="3.5" cy="3.5" r="3.5" class="prefix__cls-3" />
+                  <circle cx="3.5" cy="3.5" r="2.5" class="prefix__cls-4" />
+                </g>
+                <path
+                  d="M16.5 233.312v-3.437h13.833v3.438"
+                  transform="translate(0 -1.087)"
+                  style="
+                    stroke-linecap: round;
+                    stroke-linejoin: round;
+                    stroke: #999;
+                    stroke-width: 2px;
+                    fill: none;
+                  "
+                />
+                <path
+                  d="M0 0L0 6"
+                  class="prefix__cls-1"
+                  transform="translate(23.417 226.75)"
+                />
+              </g>
             </svg>
           </div>
         </ng-template>
@@ -84,18 +147,58 @@
           <div class="icon-item">
             <svg
               xmlns="http://www.w3.org/2000/svg"
-              width="24"
+              width="21.096"
-              height="24"
+              height="19.182"
-              viewBox="0 0 24 24"
+              viewBox="0 0 21.096 19.182"
-              fill="none"
-              stroke="#000000"
-              stroke-width="1.5"
-              stroke-linecap="butt"
-              stroke-linejoin="bevel"
             >
-              <polygon
+              <g
-                points="21.368 12.001 3 21.609 3 14 11 12 3 9.794 3 2.394"
+                id="icon_gnb_message_g32"
+                transform="translate(-12.615 -280.248)"
+              >
+                <path
+                  d="M16.063 292.447l7.965 2.4 7.465 5.3 3.666-16.615z"
+                  class="prefix__cls-1"
+                  transform="translate(-2.448 -2.284)"
                 />
+                <path
+                  d="M23.25 277.406l.18 5.668 4-2.692z"
+                  class="prefix__cls-1"
+                  transform="translate(-2.096 15.355)"
+                />
+                <path
+                  d="M0 10.416L11.025 0"
+                  transform="translate(21.154 282.346)"
+                  style="fill: none; stroke: #999; stroke-width: 2px;"
+                />
+              </g>
+            </svg>
+          </div>
+        </ng-template>
+      </mat-tab>
+
+      <mat-tab aria-label="Call">
+        <ng-template mat-tab-label>
+          <div class="icon-item">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="18"
+              height="18"
+              viewBox="0 0 18 18"
+            >
+              <g id="icon_gnb_call_g32" transform="translate(-1.337 -1.337)">
+                <g style="fill: none;">
+                  <path
+                    d="M15.832 20A13.864 13.864 0 0 1 2 6.14 4.136 4.136 0 0 1 6.132 2a3.532 3.532 0 0 1 .692.063 3.4 3.4 0 0 1 .647.162.9.9 0 0 1 .584.675l1.229 5.4a.9.9 0 0 1-.234.828c-.117.126-.126.135-1.231.711a8.91 8.91 0 0 0 4.374 4.4c.584-1.116.593-1.125.719-1.242a.9.9 0 0 1 .826-.234L19.129 14a.9.9 0 0 1 .647.585 3.912 3.912 0 0 1 .171.657 4.3 4.3 0 0 1 .054.684A4.136 4.136 0 0 1 15.832 20z"
+                    style="stroke: none;"
+                    transform="translate(-.663 -.663)"
+                  />
+                  <path
+                    d="M15.87 18c1.152 0 2.105-.938 2.13-2.094 0-.039-.001-.078-.004-.117l-3.89-.89-.14.268-.882 1.687-1.728-.798C8.985 14.96 7.083 13.047 6 10.667l-.785-1.725 1.68-.877.255-.132-.896-3.93L6.159 4h-.027C4.956 4 4 4.96 4 6.137c.004 3.168 1.237 6.146 3.472 8.385 2.234 2.239 5.204 3.474 8.363 3.478h.035m0 2h-.038C8.197 19.99 2.01 13.79 2 6.14 2 3.854 3.85 2 6.132 2h.027c.223 0 .445.021.664.063.22.033.437.087.647.162.3.106.522.362.584.675l1.23 5.4c.068.298-.02.61-.233.828-.117.126-.126.135-1.23.71.884 1.946 2.436 3.507 4.374 4.402.583-1.116.592-1.125.718-1.242.17-.166.396-.256.628-.256.066 0 .133.007.199.022l5.389 1.233c.302.07.546.291.646.585.076.213.133.433.171.657.036.226.054.455.054.684C19.966 18.186 18.124 20 15.87 20z"
+                    style="fill: #999; stroke: none;"
+                    transform="translate(-.663 -.663)"
+                  />
+                </g>
+              </g>
             </svg>
           </div>
         </ng-template>
@@ -107,15 +210,17 @@
     <div class="contents">
       <mat-drawer-container class="example-container">
         <mat-drawer #drawer mode="side" opened class="m-messenger-area">
-          <mat-toolbar class="m-messenger-tit">
+          <mat-toolbar class="m-messenger-toolbar">
-            <div>M Messenger</div>
+            <div class="txt-m-messenger">M-Messenger</div>
-            <div></div>
           </mat-toolbar>
           <div class="list-section">
             <div class="title-section">
               <div class="title">
                 <h3>그룹</h3>
                 <div class="btn-box">
+                  <button mat-icon-button aria-label="">
+                    <mat-icon>swap_vert</mat-icon>
+                  </button>
                   <button
                     mat-icon-button
                     [matMenuTriggerFor]="menu"
@@ -125,34 +230,48 @@
                   </button>
                 </div>
               </div>
-              <div class="search-area">
+              <div class="search-area inputtype">
-                <mat-select placeholder="선택">
+                <mat-select placeholder="선택" class="search-selec-box">
                   <mat-option value="1">1</mat-option>
                   <mat-option value="1">1A</mat-option>
                   <mat-option value="1">1AB</mat-option>
                   <mat-option value="1">1ABCDEFGHIJKLMNOPQRSTUVWXYZ</mat-option>
                 </mat-select>
-                <mat-form-field class="example-full-width">
+                <mat-form-field
+                  class="example-full-width search-in-box"
+                  appearance="none"
+                >
                   <mat-label>이름 부서명, 전화번호, 이메일</mat-label>
                   <input
                     matInput
                     placeholder="이름 부서명, 전화번호, 이메일"
                     value=""
                   />
-                  <mat-icon matSuffix>search</mat-icon>
                 </mat-form-field>
+                <button mat-flat-button color="primary" class="btn-ico-search">
+                  <mat-icon>search</mat-icon>
+                </button>
               </div>
-              <app-user-item class="myProfile"></app-user-item>
             </div>
             <div class="list">
+              <div class="myProfile">
+                <app-user-item></app-user-item>
+              </div>
               <mat-accordion>
-                <mat-expansion-panel>
+                <mat-expansion-panel class="panelType">
                   <mat-expansion-panel-header>
                     <mat-panel-title>
                       즐겨찾기
-                      <span>(<strong>6</strong>/7)</span>
+                      <span>( <strong>6</strong>/7 )</span>
                     </mat-panel-title>
                     <mat-panel-description></mat-panel-description>
+                    <button
+                      mat-icon-button
+                      [matMenuTriggerFor]="menu"
+                      aria-label="menu"
+                    >
+                      <mat-icon>more_vert</mat-icon>
+                    </button>
                   </mat-expansion-panel-header>
                   <app-user-item></app-user-item>
                   <app-user-item></app-user-item>
@@ -166,13 +285,20 @@
                   <app-user-item></app-user-item>
                   <app-user-item></app-user-item>
                 </mat-expansion-panel>
-                <mat-expansion-panel>
+                <mat-expansion-panel class="panelType">
                   <mat-expansion-panel-header>
                     <mat-panel-title>
                       그룹명을 넣습니다
-                      <span>(<strong>6</strong>/7)</span>
+                      <span>( <strong>6</strong>/7 )</span>
                     </mat-panel-title>
                     <mat-panel-description> </mat-panel-description>
+                    <button
+                      mat-icon-button
+                      [matMenuTriggerFor]="menu"
+                      aria-label="menu"
+                    >
+                      <mat-icon>more_vert</mat-icon>
+                    </button>
                   </mat-expansion-panel-header>
                   <app-user-item></app-user-item>
                   <app-user-item></app-user-item>
@@ -190,17 +316,42 @@
             </div>
           </div>
         </mat-drawer>
-        <mat-drawer-content class="drawer-content">
+        <mat-drawer-content class="contents-main-area">
           <button
             mat-icon-button
             class="left-drawer-toggle"
             (click)="drawer.toggle()"
           >
-            &lt;
+            keyboard_arrow_left
           </button>
-          <mat-toolbar>
+          <div class="contents-main-box">
-            <div><span>Today</span>2020.05.05</div>
+            <!-- Toolbar Main -->
-            <div>
+            <mat-toolbar class="contents-main-toolbar">
+              <div class="toolbar-info-area date-info">
+                <span>Today</span>2020.05.05
+              </div>
+              <div class="toolbar-info-area toolbar-ctrl">
+                <!--Search-->
+                <div class="topbar-search">
+                  <button mat-icon-button aria-label="search icon">
+                    <mat-icon>search</mat-icon>
+                  </button>
+                </div>
+
+                <!--My Profile -->
+                <div class="my-profile">
+                  <div class="user-profile-thumb">
+                    <span class="presence">bullet</span>
+                    <div class="profileImage">
+                      <img
+                        src="https://material.angular.io/assets/img/examples/shiba2.jpg"
+                        style="width: 36px; height: 36px;"
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                <!---->
                 <div class="app-layout-native-title-bar-actions">
                   <button
                     mat-icon-button
@@ -296,8 +447,91 @@
             </mat-toolbar>
             <div class="contents-main">
               <div class="subtitle">Welcome to M-Messenger</div>
+              <div class="contents-group">
                 <div class="mainProfile">
-              <mat-card class="example-card">
+                  <!--Profile -->
+                  <div class="profile-card-box">
+                    <div class="user-profile-info">
+                      <div class="user-profile-thumb mobile-ing">
+                        <!-- 모바일이 온라인일 경우 + mobile-ing -->
+                        <span class="presence">bullet</span>
+                        <div class="profileImage">
+                          <img
+                            src="https://material.angular.io/assets/img/examples/shiba2.jpg"
+                            style="width: 122px; height: 122px;"
+                          />
+                        </div>
+                      </div>
+                      <div class="userInfo">
+                        <div class="user-n-g">
+                          <div class="name">홍길동</div>
+                          <div class="grade">대리</div>
+                        </div>
+                        <div class="deptName">
+                          (Hong Gi Dong)
+                        </div>
+                        <!-- + 대화상대 프로필 추가 -->
+                        <div class="nickName">
+                          <div class="nickName-info">닉네임 미설정</div>
+                          <button
+                            mat-icon-button
+                            aria-label="icon create"
+                            class="color-white"
+                          >
+                            <mat-icon>create</mat-icon>
+                          </button>
+                        </div>
+                        <div class="address-txt">
+                          마곡 사이언스 파크 E14동 9층
+                        </div>
+                      </div>
+                    </div>
+                    <!--대회상대 프로필-->
+                    <div class="btn-partner-set">
+                      <button mat-icon-button aria-label="chat">
+                        <img
+                          src="../../../assets/images/ico/btn_lise_chat_a24.svg"
+                          alt=""
+                        />
+                      </button>
+                      <button mat-icon-button aria-label="message">
+                        <img
+                          src="../../../assets/images/ico/btn_list_message_a24.svg"
+                          alt=""
+                        />
+                      </button>
+                      <button mat-icon-button aria-label="mobile">
+                        <img
+                          src="../../../assets/images/ico/btn_list_mobile_a24.svg"
+                          alt=""
+                        />
+                      </button>
+                      <button mat-icon-button aria-label="call">
+                        <img
+                          src="../../../assets/images/ico/btn_list_call_a24.svg"
+                          alt=""
+                        />
+                      </button>
+                      <button mat-icon-button aria-label="vc">
+                        <img
+                          src="../../../assets/images/ico/btn_list_vc-a24.svg"
+                          alt=""
+                        />
+                      </button>
+                    </div>
+                    <div class="user-profile-info-list">
+                      <ul>
+                        <li><span>회사</span> LGCNS</li>
+                        <li><span>부서</span> 아키텍쳐 솔루션</li>
+                        <li><span>이메일</span> gildonghong@cns.com</li>
+                        <li><span>사무실</span> 02-9876-5432</li>
+                        <li><span>모바일</span> 010-1234-5678</li>
+                      </ul>
+                    </div>
+                  </div>
+                  <!-- //Profile-->
+                  <!--
+                  <mat-card class="example-card profile-card">
                     <mat-card-header>
                       <div
                         mat-card-avatar
@@ -306,12 +540,14 @@
                       >
                         <img
                           src="https://material.angular.io/assets/img/examples/shiba2.jpg"
-                      style="width: 50px; height: auto;"
+                          style="width: 126px; height: auto;"
                         />
                       </div>
                       <mat-card-title>홍길동 <span>선임</span></mat-card-title>
                       <mat-card-subtitle>(Hong Gil Dong)</mat-card-subtitle>
-                  <mat-card-subtitle><span>O</span>온라인</mat-card-subtitle>
+                      <mat-card-subtitle
+                        ><span>O</span>온라인</mat-card-subtitle
+                      >
                     </mat-card-header>
                     <mat-card-content>
                       <div class="intro">
@@ -328,11 +564,15 @@
                       <ul>
                         <li class="company"><label>회사</label>LGCNS</li>
                         <li class="dept"><label>부서</label>아키텍쳐 솔루션</li>
-                    <li class="email"><label>이메일</label>lgcns@gmail.com</li>
+                        <li class="email">
+                          <label>이메일</label>lgcns@gmail.com
+                        </li>
                         <li class="office">
                           <label>사무실</label>+82) 041-111-2222
                         </li>
-                    <li class="mobile"><label>모바일</label>031-2222-4444</li>
+                        <li class="mobile">
+                          <label>모바일</label>031-2222-4444
+                        </li>
                       </ul>
                     </mat-card-content>
                     <mat-card-actions>
@@ -342,23 +582,32 @@
                       <button mat-button class="theme checked">theme3</button>
                     </mat-card-actions>
                   </mat-card>
+-->
                 </div>
                 <div class="info">
                   <div class="bookmark">
-                <div class="subtitle">Bookmark</div>
+                    <div class="subtitle2">Bookmark</div>
                     <div class="chatlist">
                       <!-- loop > component > 대화 리스트 공용 -->
-                  <div>
+                      <div class="chatlist-con">
+                        <div class="user-profile-thumb">
                           <div class="profileImage">
                             <img
                               src="https://material.angular.io/assets/img/examples/shiba2.jpg"
-                        style="width: 50px; height: 50px;"
+                              style="width: 46px; height: 46px;"
                             />
                           </div>
-                    <div class="info">
+                        </div>
-                      <div class="roomName">UCAP 프로젝트방</div>
+                        <div class="chat-info">
+                          <div class="roomName">
+                            UCAP 프로젝트방 프로젝트방 프로젝트방 프로젝트방
+                            프로젝트방 프로젝트방 프로젝트방 프로젝트방
+                          </div>
                           <div class="lastMessage">
-                        대화방의 마지막대화내용이 들어갈껍니다.
+                            대화방의 마지막대화내용이 들어갈껍니다대화방의
+                            마지막대화내용이 들어갈껍니다대화방의
+                            마지막대화내용이 들어갈껍니다대화방의
+                            마지막대화내용이 들어갈껍니다.
                           </div>
                         </div>
                         <div class="subInfo">
@@ -366,14 +615,16 @@
                         </div>
                       </div>
                       <!--// loop > component > 대화 리스트 공용 -->
-                  <div>
+                      <div class="chatlist-con">
+                        <div class="user-profile-thumb">
                           <div class="profileImage">
                             <img
                               src="https://material.angular.io/assets/img/examples/shiba2.jpg"
-                        style="width: 50px; height: 50px;"
+                              style="width: 46px; height: 46px;"
                             />
                           </div>
-                    <div class="info">
+                        </div>
+                        <div class="chat-info">
                           <div class="roomName">UCAP 프로젝트방</div>
                           <div class="lastMessage">
                             대화방의 마지막대화내용이 들어갈껍니다.
@@ -383,60 +634,141 @@
                           <div class="lastDate">2020.04.05</div>
                         </div>
                       </div>
+
+                      <div class="chatlist-con">
+                        <div class="user-profile-thumb">
+                          <div class="profileImage">
+                            <img
+                              src="https://material.angular.io/assets/img/examples/shiba2.jpg"
+                              style="width: 46px; height: 46px;"
+                            />
                           </div>
                         </div>
+                        <div class="chat-info">
+                          <div class="roomName">UCAP 프로젝트방</div>
+                          <div class="lastMessage">
+                            대화방의 마지막대화내용이 들어갈껍니다.
+                          </div>
+                        </div>
+                        <div class="subInfo">
+                          <div class="lastDate" matBadge="4">2020.04.05</div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="subtitle2 not-first-subtit">알림봇</div>
                   <div class="allim">
-                <div class="subtitle">알림봇</div>
                     <div class="allimList">
+                      <!---->
                       <mat-card class="allim-card">
                         <mat-card-header>
                           <div
                             mat-card-avatar
-                        class="profileImage"
+                            class="allim-header-image"
-                        style="background-size: cover;"
+                            style="
-                      >
+                              background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
-                        <img
+                            "
-                          src="https://material.angular.io/assets/img/examples/shiba2.jpg"
+                          ></div>
-                          style="width: 50px; height: auto;"
-                        />
-                      </div>
                           <mat-card-title>화상회의</mat-card-title>
                           <mat-card-subtitle>2020.04.05</mat-card-subtitle>
                         </mat-card-header>
+                        <!--
+                        <img
+                          mat-card-image
+                          src="https://material.angular.io/assets/img/examples/shiba2.jpg"
+                          alt="Photo of a Shiba Inu"
+                        />
+                        -->
                         <mat-card-content>
-                      <div class="title">화상회의 개설</div>
+                          <span class="allim-con-title">화상회의 개설</span>
-                      <div class="contents">화상회의가 개설되었습니다.</div>
+                          <span class="allim-contents"
+                            >화상회의가 개설되었습니다.</span
+                          >
                         </mat-card-content>
                         <mat-card-actions>
-                      <button mat-button class="more">더보기</button>
+                          <button mat-button class="btn-more">더보기</button>
                         </mat-card-actions>
                       </mat-card>
+                      <!---->
+
                       <mat-card class="allim-card">
                         <mat-card-header>
                           <div
                             mat-card-avatar
-                        class="profileImage"
+                            class="allim-header-image"
-                        style="background-size: cover;"
+                            style="
-                      >
+                              background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
-                        <img
+                            "
-                          src="https://material.angular.io/assets/img/examples/shiba2.jpg"
+                          ></div>
-                          style="width: 50px; height: auto;"
+                          <mat-card-title>SMS</mat-card-title>
-                        />
-                      </div>
-                      <mat-card-title>화상회의</mat-card-title>
                           <mat-card-subtitle>2020.04.05</mat-card-subtitle>
                         </mat-card-header>
                         <mat-card-content>
-                      <div class="title">화상회의 개설</div>
+                          <span class="allim-con-title"
-                      <div class="contents">화상회의가 개설되었습니다.</div>
+                            >우편물 수령 부탁드립니다.</span
+                          >
+                          <span class="allim-contents"
+                            >3층 우편물 보관실에 OOO님 앞으로우편물이 30일 전
+                            도착했습니다. 어여 어여 찾아 가세요.</span
+                          >
                         </mat-card-content>
                         <mat-card-actions>
-                      <button mat-button class="more">더보기</button>
+                          <button mat-button class="btn-more">더보기</button>
+                        </mat-card-actions>
+                      </mat-card>
+
+                      <mat-card class="allim-card">
+                        <mat-card-header>
+                          <div
+                            mat-card-avatar
+                            class="allim-header-image"
+                            style="
+                              background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
+                            "
+                          ></div>
+                          <mat-card-title>EVENT</mat-card-title>
+                          <mat-card-subtitle>2020.04.05</mat-card-subtitle>
+                        </mat-card-header>
+                        <mat-card-content>
+                          <img
+                            src="../../../assets/images/ico/icon_bot_empty.svg"
+                            alt=""
+                          />
+                          도착한 메시지가 없습니다.
+                        </mat-card-content>
+                        <mat-card-actions>
+                          <button mat-button class="btn-more">더보기</button>
+                        </mat-card-actions>
+                      </mat-card>
+
+                      <mat-card class="allim-card">
+                        <mat-card-header>
+                          <div
+                            mat-card-avatar
+                            class="allim-header-image"
+                            style="
+                              background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
+                            "
+                          ></div>
+                          <mat-card-title>팩스알리미</mat-card-title>
+                          <mat-card-subtitle>2020.04.05</mat-card-subtitle>
+                        </mat-card-header>
+                        <mat-card-content>
+                          <span class="allim-con-title">화상회의 개설</span>
+                          <span class="allim-contents"
+                            >화상회의가 개설되었습니다.</span
+                          >
+                        </mat-card-content>
+                        <mat-card-actions>
+                          <button mat-button class="btn-more">더보기</button>
                         </mat-card-actions>
                       </mat-card>
                     </div>
                   </div>
-              <div class="banner">배너</div>
+                  <div class="banner-box">배너</div>
+                </div>
+              </div>
             </div>
           </div>
         </mat-drawer-content>
@@ -444,12 +776,15 @@
     </div>
 
     <div class="footer">
-      <div>
+      <div class="foot-info version-info">
-        <span>현재버전 0.0.11</span>
+        <span class="var-txt current-ver">현재버전 0.0.11</span>
-        <span>최신버전 0.0.11</span>
+        <span class="var-txt new-var">최신버전 0.0.11 </span>
+        <button mat-icon-button aria-label="icon">
+          <mat-icon>get_app</mat-icon>
+        </button>
       </div>
-      <div style="right: 0;">
+      <div class="foot-info help-info">
-        HelpDesk 1661-9066
+        <p><span>Help</span>Desk <em>1661-9066</em></p>
       </div>
     </div>
   </div>

src/app/pages/group/group.component.scss

@@ -4,61 +4,104 @@
 
 .container {
   @extend %clearfix;
-  @extend %guideline; //Guide Line
+  background-color: $grayf7-a;
-  background-color: $gray-ref0;
+  min-width: calc(100% - 60px);
-  width: 100%;
+  height: calc(100vh - 40px);
-  min-height: 100%;
+  margin-bottom: 40px;
-  .gnb,
+  padding-left: 60px;
+  .gnb {
+    position: fixed;
+    z-index: 5;
+    top: 0;
+    left: 0;
+    width: 60px;
+  }
   .menu-container {
-    float: left;
+    display: flex;
-
+    flex-direction: column;
+    height: 100%;
+    //width: calc(100% - 370px); //Default Size
+    .contents {
+      min-height: 100%;
+    }
     .list-section {
-      margin-top: 50px;
+      //min-height: calc(100% - 50px);
+      display: flex;
+      flex-flow: column;
+      align-content: flex-start;
+      background-color: #f1f2f6;
+      .title-section {
+        display: flex;
+        flex-flow: column;
+        background-color: $white;
+        margin-bottom: 10px;
+        position: fixed;
+        z-index: 10;
+        top: 50px;
+        width: 370px;
+        .title {
+          display: flex;
+          flex-flow: row nowrap;
+          justify-content: space-between;
+          padding: 0 9px 0 17px;
+          background-color: $white;
+          align-items: center;
+          flex-basis: 50px;
+          h3 {
+            @include font-family-txt(18, left, $lipstick);
+            align-items: center;
+          }
+          .btn-box {
+            align-items: center;
           }
         }
-
+        .search-area {
-  .contents-main {
+          display: flex;
-    @extend %clearfix;
+          flex-flow: row nowrap;
-    height: calc(100vh - 122px);
+          margin: 0 15px 0 17px;
-    .mainProfile {
+          width: calc(100% - 32px);
-      float: left;
+          border: 1px solid $lipstick;
-      height: 600px;
+          background-color: $white;
+          .search-selec-box {
+            @include selecCtrl(40px, 12px);
+            flex-basis: 150px;
           }
-
+          .search-in-box {
-    .info {
+            @include matinputCtrl(
-      .allim {
+              0,
-        .allimList {
+              0,
-          .allim-card {
+              auto,
-            display: inline-block;
+              auto,
+              40px
+            ); //$bdw: 1px, $bdr: 0, $maxw, $minw, $inputH
+          }
+          .btn-ico-search {
+            @include matbtnCtrl(40px, 40px, 0, 20px);
           }
         }
       }
+      .myProfile {
+        border-bottom: 1px solid $gray-rec;
+        background-color: #f7f8fa;
+        margin-bottom: 10px;
+      }
+      .list {
       }
     }
-
-  .footer {
-    @extend %clearfix;
-    height: 40px;
-    width: 100%;
-    @extend %guideline; //Guide Line
   }
 }
 
 .gnb {
-  @extend %guideline; //Guide Line
   background-color: $gray-ref0;
   width: 60px;
   height: 100%;
   display: flex;
   flex-direction: column;
-  .lgucap-logo {
+  justify-content: flex-start;
-    display: block;
+  border-right: 1px solid rgba(204, 204, 204, 0.8);
-    width: 32px;
+  .img-logo {
-    height: 32px;
+    margin: 9px 0 5px;
-    background: url(../../../assets/images/logo_140.png) no-repeat 50% 0;
-    background-size: 32px;
   }
-
   .left-container {
     display: flex;
     width: calc(100% - 28px);
@@ -68,10 +111,9 @@
     width: 100%;
     background-color: $gray-ref0;
   }
-
   ::ng-deep .global-menu {
-    display: flex;
+    //display: flex;
-    flex-direction: row;
+    //flex-direction: row;
     .mat-tab-header {
       border-bottom: none !important;
       width: 100%;
@@ -79,10 +121,10 @@
     .mat-tab-label-container {
       .mat-tab-list {
         .mat-tab-labels {
-          @extend %clearfix;
+          display: flex;
           flex-flow: column;
-          height: 100vh;
+          justify-content: space-around;
-          padding-top: 10px;
+          height: 272px;
           border-bottom: none;
 
           .mat-tab-label {
@@ -98,25 +140,87 @@
                 border-radius: 50%;
                 justify-content: center;
                 align-items: center;
-                transform: scale(0.9);
+                //transform: scale(0.9);
                 transition: transform 0.3s cubic-bezier(0.4, 0, 0, 1);
 
                 svg {
-                  width: 24px;
+                  //width: 24px;
-                  height: 24px;
+                  //height: 24px;
-                  stroke: #ffffff;
+                  stroke: $gray-re9;
-                  stroke-width: 1.5;
+                  stroke-width: 2;
                   stroke-linecap: square;
                   stroke-linejoin: miter;
                   fill: none;
+                  g {
+                    &#icon_gnb_organiztion_g32 {
+                      .prefix__cls-1,
+                      .prefix__cls-4 {
+                        fill: none;
+                      }
+                      .prefix__cls-1 {
+                        stroke: #999;
+                        stroke-width: 2px;
+                      }
+                      .prefix__cls-3 {
+                        stroke: none;
+                      }
+                    }
+                    &#icon_gnb_message_g32 {
+                      .prefix__cls-1 {
+                        fill: none;
+                        stroke: #999;
+                        stroke-width: 2px;
+                        stroke-linejoin: round;
+                      }
+                    }
+                  }
                 }
                 .mat-badge-content {
-                  right: -4px !important;
+                  right: -9px !important;
+                  border: 1px solid #ffbf2a;
+                  //width: 24px;
+                  //height: 24px;
+                  box-sizing: content-box;
+                  top: -10px !important;
                 }
               }
             }
             &.mat-tab-label-active {
               opacity: 0;
+              svg {
+                stroke: #fff !important;
+                g {
+                  &#prefix_23,
+                  &#icon_gnb_chat_g32,
+                  &#icon_gnb_call_g32 {
+                    path {
+                      &:nth-child(2) {
+                        fill: #fff !important;
+                      }
+                    }
+                  }
+                  &#icon_gnb_organiztion_g32 {
+                    .prefix__cls-1 {
+                      stroke: #fff !important;
+                    }
+                    path {
+                      &:nth-last-of-type(2) {
+                        stroke: #fff !important;
+                      }
+                    }
+                  }
+                  &#icon_gnb_message_g32 {
+                    .prefix__cls-1 {
+                      stroke: #fff !important;
+                    }
+                    path {
+                      &:nth-child(3) {
+                        stroke: #fff !important;
+                      }
+                    }
+                  }
+                }
+              }
             }
             &[aria-selected='true'] {
               opacity: 1;
@@ -143,43 +247,624 @@
 }
 
 .menu-container {
-  @extend %clearfix;
+  width: 100%;
-  @extend %guideline2; //Guide Line2
+  display: flex;
-  width: calc(100% - 71px);
+  align-content: stretch;
-  @extend %height100vh;
+  align-items: stretch;
   box-sizing: border-box;
+  .contents {
+    display: flex;
+    flex-grow: 1;
+    .example-container {
+      width: 100%;
+      background-color: $grayf7-a;
       .m-messenger-area {
-    width: 400px;
+        width: 371px;
+        display: inline-flex;
         padding-top: 50px;
-    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.6);
+        box-shadow: 1px 0 2px rgba(0, 0, 0, 0.3);
-    .m-messenger-tit {
+        overflow-x: hidden;
-      width: 400px;
+        .mat-drawer-inner-container {
-      height: 50px;
+          display: flex;
+          flex-direction: column;
+        }
+        .m-messenger-toolbar {
           position: fixed;
           top: 0;
+          z-index: 5;
+          width: 370px;
+          height: 50px;
+          background-color: $white;
+          .txt-m-messenger {
+            font: {
+              size: 13px;
+              color: $gray-re70;
+            }
+            line-height: 15px;
+            padding: 25px 0 0 0;
+          }
+        }
+      }
+      .contents-main-area {
+        width: auto;
+        display: flex;
+        margin-top: 50px;
+        height: calc(100% - 50px);
+        @include custom-scrollbar();
+        .contents-main-box {
+          display: flex;
+          flex-direction: column;
+          width: calc(100% - 18px);
+          min-width: 450px;
+          height: 100%;
+          .contents-main-toolbar {
+            //Main Toolbar ///////////////////
+            position: fixed;
+            top: 0;
+            margin-left: -18px;
+            z-index: 5;
+            height: 50px;
+            width: calc(100% - 45px);
+            background-color: transparent;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            flex-grow: 1;
+            font-size: 12px;
+            justify-content: space-between;
+            padding-left: 30px;
+            min-width: 450px;
+            .toolbar-info-area {
+              display: flex;
+              flex-grow: 1;
+              align-items: center;
+              &.date-info {
+                @include font-family($font-light);
+                font-weight: 600;
+                font-size: 12px;
+                color: $gray-re70;
+                span {
+                  width: 54px;
+                  height: 16px;
+                  border-radius: 30px;
+                  border: solid 1px $lipstick;
+                  background-color: #ffffff;
+                  font-size: 11px;
+
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                  color: $lipstick;
+                  margin-right: 8px;
+                }
+              }
+              &.toolbar-ctrl {
+                flex-flow: row-reverse;
+                .topbar-search {
+                  order: 2;
+                  margin-right: 10px;
+                }
+                .my-profile {
+                  height: 30px;
+                  margin-right: 20px;
+                  order: 1;
+                  //profile /////////////
+                  .user-profile-thumb {
+                    @include profile-avatar-default(
+                      0 0 0 0,
+                      8,
+                      $green,
+                      18px
+                    ); //오른 아래 공간, 모바일 온라인 아이콘 크기, 모바일 아이콘 색, 모바일 아이콘 bg크기
+                    .presence {
+                      //PC 상태
+                      @include presence-state(10px); //원크기
+                      position: absolute;
+                      bottom: 0;
+                      right: 0;
+                    }
+                    .profileImage {
+                      @include avatar-img(30px, 0); //아바타 크기, 왼쪽공간
+                    }
+                  }
+                  ///// profile//
+                }
+                .app-layout-native-title-bar-actions {
+                  order: 0;
+                }
+              }
+            }
+            ///////////////////Main Toolbar//
+          }
+          .contents-main {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            .subtitle {
+              display: flex;
+              align-items: center;
+              height: 50px;
+              padding-left: 12px;
+              text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.16);
+              @include font-family($font-light);
+              font-size: 22px;
+              font-weight: 600;
+              line-height: 2.73;
+              color: $gray-re4;
+            }
+          }
+        }
+      }
     }
   }
 }
 
+// Footer/////////////////////////////////
 .footer {
-  @extend %clearfix;
+  position: fixed;
-  div {
+  bottom: 0;
+  display: flex;
+  justify-content: space-between;
+  flex: 0 40px;
+  width: calc(100% - 60px);
+  height: 40px;
+  border-top: 1px solid $line-color-gray01;
+  background-color: $white;
+  .foot-info {
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    font-size: 12px;
+    color: $gray-re70;
+    @include font-family($font-light);
+    font-weight: 600;
+    &.version-info {
+      .var-txt {
+        padding-left: 8px;
+        color: $gray-re70;
+        &::before {
+          content: '';
+          width: 1px;
+          height: 10px;
           display: inline-block;
+          background-color: #d4d4d4;
+          margin-right: 8px;
+        }
+        &:first-of-type {
+          &::before {
+            width: 0;
+          }
+        }
+        &.new-var {
+          color: $brown;
+        }
+      }
+    }
+    &.help-info {
+      flex-flow: row-reverse;
+      padding-right: 33px;
+      span {
+        color: $lipstick;
+      }
+      em {
+        margin-left: 10px;
+      }
+    }
   }
 }
+///////////////////////////////////// Footer//
 
 .left-drawer-toggle {
-  position: absolute;
+  position: sticky;
-  top: calc(50% - 30px);
+  top: calc(50% - 35px);
-  left: -4px;
+  left: 0;
-  border: 1px solid #dddddd;
+  border: 1px solid #d4d4d4;
+  border-top-width: 2px;
+  border-left: 0;
   background-color: #ffffff !important;
-  width: 24px;
+  @include font-family-ico(6, center, $gray-re6);
-  height: 60px;
+  width: 18px;
+  height: 70px;
   border-radius: 0 8px 8px 0;
   display: flex;
   justify-content: center;
-  justify-items: center;
+  align-items: center;
   font-size: 1.8em;
   z-index: inherit;
 }
+
+// Contents Group//////////////////////////
+.contents-group {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  padding: 0 30px 38px;
+  margin-left: -18px;
+  @include screen(mid) {
+    flex-direction: column;
+  }
+  .mainProfile {
+    display: flex;
+    flex: 0 0 650px;
+    min-height: 100%;
+    min-width: 450px;
+    @include screen(mid) {
+      min-height: auto;
+    }
+    //margin: 30px;
+    background-image: url(../../../assets/images/bg/bg_profile1.svg),
+      url(../../../assets/images/bg/bg_profile2.svg),
+      url(../../../assets/images/bg/bg_profile3.svg),
+      url(../../../assets/images/bg/bg_profile4.svg),
+      url(../../../assets/images/bg/bg_profile5.svg), $bg-linear-gradient;
+    background-repeat: no-repeat;
+    background-position: -213px -223px, 433px 95px, 489px 72px, 433px 517px,
+      335px 634px, 0 0;
+    .profile-card-box {
+      display: flex;
+      flex-direction: column;
+      padding: 60px 8.7%;
+      width: 100%;
+      .user-profile-info {
+        display: inline-flex;
+        flex-direction: row;
+        align-items: center;
+        // Profile thumb//////////////////
+        .user-profile-thumb {
+          @include profile-avatar-default(
+            10px 0 0,
+            18.6,
+            $green,
+            30px
+          ); //오른 아래 공간, 모바일 온라인 아이콘 크기, 모바일 아이콘 색, 모바일 아이콘 bg크기
+          padding: 10px 0 0;
+          margin-left: -14px;
+          align-self: start;
+          .presence {
+            //PC 상태
+            @include presence-state(14px); //원크기
+            margin-top: -10px;
+          }
+          .profileImage {
+            @include avatar-img(128px, 0); //아바타 크기, 왼쪽공간
+            border: 3px solid $white;
+          }
+        }
+        //////////////////Profile thumb //
+      }
+      .userInfo {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: center;
+        padding-left: 38px;
+        .user-n-g {
+          display: flex;
+          flex-flow: row-reverse nowrap;
+          align-items: flex-end;
+          height: 44px;
+          .name {
+            font: {
+              size: 26px;
+              weight: 600;
+            }
+            color: $gray-re20;
+            order: 1;
+            -ms-flex-order: 1;
+          }
+          .grade {
+            font: {
+              size: 18px;
+            }
+            color: #f1f1f1;
+            margin-left: 6px;
+            order: 0;
+            -ms-flex-order: 0;
+          }
+        }
+        .deptName {
+          font-size: 22px;
+          color: $white;
+          line-height: 25px;
+          font-weight: 600;
+        }
+        .nickName {
+          display: flex;
+          flex-direction: row;
+          margin-top: 18px;
+          align-items: center;
+          .nickName-info {
+            padding: 0 16px;
+            height: 30px;
+            line-height: 30px;
+            border-radius: 15px;
+            border: solid 1px #fc5182;
+            background-color: rgba(255, 255, 255, 0.95);
+            color: $gray-re9;
+            font-size: 14px;
+          }
+          button {
+          }
+        }
+        .address-txt {
+          font-size: 16px;
+          line-height: 21px;
+          color: $gray-re3;
+          margin-top: 20px;
+        }
+      }
+      .btn-partner-set {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 25px;
+        border-top: 1px solid rgba(255, 255, 255, 0.8);
+        border-bottom: 1px solid rgba(255, 255, 255, 0.8);
+        height: 70px;
+        margin-top: 30px;
+        img {
+          vertical-align: top;
+        }
+      }
+      .user-profile-info-list {
+        margin-top: 60px;
+        ul {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          height: 250px;
+          li {
+            font-size: 16px;
+            font-weight: 600;
+            color: $brown;
+            span {
+              width: 100px;
+              height: 34px;
+              border-radius: 18px;
+              border: solid 1px #f8f9fd;
+              background-color: #aaa0a5;
+              font-size: 14px;
+              font-weight: 600;
+              display: inline-flex;
+              align-items: center;
+              justify-content: center;
+              color: $white;
+              margin-right: 40px;
+            }
+          }
+        }
+      }
+    }
+
+    ///////////////////////////////////////////////////////////////////////////////// 제거
+    .profile-card {
+      //mat-card
+      width: 100%;
+      background-color: transparent;
+      box-shadow: none;
+      .profileImage {
+        width: 126px;
+        height: 126px;
+        border-radius: 50%;
+        border: 3px solid $white;
+        box-sizing: border-box;
+        overflow: hidden;
+        display: flex;
+        img {
+          display: flex;
+          align-items: center;
+        }
+      }
+    }
+    /////////////////////////////////////////////////////////////////////////////////////
+  }
+  .info {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1.354;
+    margin-left: 30px;
+    overflow: hidden;
+    justify-content: space-between;
+    min-width: 450px;
+    @include screen(mid) {
+      overflow: visible;
+      margin-left: 0;
+      padding: 30px 0;
+    }
+    .bookmark {
+      display: flex;
+      flex-direction: column;
+      .chatlist {
+        display: flex;
+        flex-direction: column;
+        margin-top: 15px;
+        .chatlist-con {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          align-items: center;
+          margin-top: 10px;
+          position: relative;
+          min-height: 70px;
+          &:after {
+            content: '';
+            width: calc(100% - 66px);
+            height: 1px;
+            background-color: $gray-rec;
+            position: absolute;
+            bottom: 0;
+            right: 0;
+          }
+          // Profile thumb//////////////////
+          .user-profile-thumb {
+            @include profile-avatar-default(
+              0,
+              18.6,
+              $green,
+              30px
+            ); //오른 아래 공간, 모바일 온라인 아이콘 크기, 모바일 아이콘 색, 모바일 아이콘 bg크기
+            flex-basis: 46px;
+            .profileImage {
+              @include avatar-img(46px, 0); //아바타 크기, 왼쪽공간
+            }
+          }
+          //////////////////Profile thumb //
+          .chat-info {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            min-height: 70px;
+            flex-grow: 1;
+            padding-left: 20px;
+            .roomName {
+              font: {
+                size: 16px;
+                weight: 600;
+              }
+              color: #333;
+              line-height: 21px;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              display: -webkit-box;
+              -webkit-line-clamp: 1;
+              -webkit-box-orient: vertical;
+              height: 21px;
+            }
+            .lastMessage {
+              font: {
+                size: 12px;
+              }
+              color: $gray-re70;
+              line-height: 16px;
+              margin-top: 8px;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              display: -webkit-box;
+              -webkit-line-clamp: 1;
+              -webkit-box-orient: vertical;
+              height: 16px;
+            }
+          }
+          .subInfo {
+            color: $gray-re9;
+            line-height: 15px;
+            align-self: flex-start;
+            padding: 12px 0 0 12px;
+            .mat-badge-content {
+              right: 0 !important;
+              border: 1px solid #ffbf2a;
+              width: 20px;
+              height: 20px;
+              line-height: 20px;
+              box-sizing: content-box;
+              top: 23px !important;
+              background-color: #ffbf2a;
+            }
+          }
+        }
+      }
+    }
+    .allim {
+      overflow-x: auto;
+      @include custom-scrollbar();
+      padding-bottom: 10px;
+      margin-bottom: 20px;
+      .allimList {
+        margin-top: 24px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        .allim-card {
+          flex: 1 0 200px;
+          padding: 27px 17px 0;
+          min-width: 200px;
+          height: 240px;
+          border: solid 1px #d4d4d4;
+          border-bottom-width: 2px;
+          background-color: #ffffff;
+          box-shadow: none;
+          border-radius: 0;
+          margin-left: 16px;
+          &:first-of-type {
+            margin-left: 0;
+          }
+          .mat-card-header {
+            .allim-header-image {
+              background-size: cover;
+            }
+          }
+          .allim-con-title {
+            display: block;
+            height: 36px;
+            line-height: 36px;
+            font-size: 14px;
+            font-weight: 600;
+            color: $gray-re3;
+            border-bottom: 1px solid #d4d4d4;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            align-self: stretch;
+          }
+          .allim-contents {
+            display: block;
+            font-size: 12px;
+            color: $gray-re70;
+            line-height: 1.67;
+            margin: 12px 0 22px;
+            max-height: 43px;
+            height: 43px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            align-self: stretch;
+          }
+          .btn-more {
+            width: 100%;
+            height: 40px;
+            border-top: 1px solid #d4d4d4;
+            font-size: 12px;
+            font-weight: 600;
+            color: $gray-re9;
+            border-radius: 0;
+          }
+        }
+      }
+    }
+    .banner-box {
+      width: 100%;
+      height: 74px;
+      @extend %guideline;
+      align-self: flex-end;
+    }
+  }
+}
+
+// Common
+// Sub title
+.subtitle2 {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  height: 35px;
+  @include font-family(LG Smart Light, normal);
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 24px;
+  color: $lipstick;
+  &.not-first-subtit {
+    margin-top: 48px;
+  }
+  &::before {
+    content: '';
+    width: 25px;
+    height: 4px;
+    display: flex;
+    background-color: $lipstick;
+  }
+}
+
+////////////////////////// Contents Group//

src/app/pages/organization/component/tree.component.html

@@ -3,7 +3,7 @@
   itemSize="36"
   perfectScrollbar
   fxFlexFill
-  style="height: 400px;"
+  style="height: 200px;"
 >
   <ng-container
     *cdkVirtualFor="let node of dataSource.expandedData$"

src/app/pages/organization/organization.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { TreeComponent } from './component/tree.component';
+import { DetailTableComponent } from './component/detail-table.component';
+
+const COMPONENT = [TreeComponent, DetailTableComponent];
+
+@NgModule({
+  exports: [...COMPONENT],
+  declarations: [...COMPONENT]
+})
+export class OrganizationModule {}

src/app/services/dialog.service.ts

@@ -1,52 +0,0 @@
-import { TemplateRef, Injectable } from '@angular/core';
-import { ComponentType } from '@angular/cdk/portal';
-import {
-  MatDialog,
-  MatDialogConfig,
-  MatDialogRef
-} from '@angular/material/dialog';
-
-import { of } from 'rxjs';
-import { take, map, catchError } from 'rxjs/operators';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class DialogService {
-  constructor(private matDialog: MatDialog) {}
-
-  public open<T, D = any, R = any>(
-    componentOrTemplateRef: ComponentType<T> | TemplateRef<T>,
-    config?: MatDialogConfig<D>
-  ): Promise<R> {
-    return new Promise<R>((resolve, reject) => {
-      config = { ...config, autoFocus: false };
-
-      const dialogRef = this.matDialog.open<T, D, R>(
-        componentOrTemplateRef,
-        config
-      );
-
-      dialogRef
-        .afterClosed()
-        .pipe(
-          take(1),
-          map(result => {
-            return resolve(result);
-          }),
-          catchError(err => {
-            return of(reject(err));
-          })
-        )
-        .subscribe();
-    });
-  }
-
-  getDialogById(id: string): MatDialogRef<any, any> {
-    return this.matDialog.getDialogById(id);
-  }
-
-  closeAll() {
-    this.matDialog.closeAll();
-  }
-}

src/assets/images/bg/bg_profile1.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="440" height="440" viewBox="0 0 440 440">
+    <circle id="cirdle-tr1" cx="220" cy="220" r="220" data-name="cirdle-tr1" style="fill:rgba(241,241,241,.12)"/>
+</svg>

src/assets/images/bg/bg_profile2.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="91.014" height="89.944" viewBox="0 0 91.014 89.944">
+    <ellipse id="cirdle-tr2" cx="45.507" cy="44.972" data-name="cirdle-tr2" rx="45.507" ry="44.972" style="fill:rgba(255,255,255,.08)"/>
+</svg>

src/assets/images/bg/bg_profile3.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="34.814" height="34.404" viewBox="0 0 34.814 34.404">
+    <ellipse id="cirdle-tr3" cx="17.407" cy="17.202" data-name="cirdle-tr13" rx="17.407" ry="17.202" style="fill:rgba(255,255,255,.16)"/>
+</svg>

src/assets/images/bg/bg_profile4.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="304.288" height="300.681" viewBox="0 0 304.288 300.681">
+    <ellipse id="cirdle-tr4" cx="152.144" cy="150.341" data-name="cirdle-tr4" rx="152.144" ry="150.341" style="fill:rgba(255,255,255,.06)"/>
+</svg>

src/assets/images/bg/bg_profile5.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="413.12" height="408.261" viewBox="0 0 413.12 408.261">
+    <ellipse id="cirdle-tr5" cx="206.56" cy="204.131" data-name="cirdle-tr5" rx="206.56" ry="204.131" style="fill:rgba(255,255,255,.08)"/>
+</svg>

src/assets/images/ico/btn_lise_chat_a24.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="prefix__btn_lise_chat_a24" width="40" height="40" viewBox="0 0 40 40">
+    <g id="prefix__타원_656" data-name="타원 656" style="fill:#fef2f2">
+        <path d="M20 39.5c-2.633 0-5.186-.516-7.59-1.532-2.322-.982-4.408-2.388-6.199-4.18-1.79-1.79-3.197-3.876-4.179-6.198C1.016 25.186.5 22.633.5 20s.516-5.186 1.532-7.59c.982-2.322 2.388-4.408 4.18-6.199 1.79-1.79 3.876-3.197 6.198-4.179C14.814 1.016 17.367.5 20 .5s5.186.516 7.59 1.532c2.322.982 4.408 2.388 6.199 4.18 1.79 1.79 3.197 3.876 4.179 6.198C38.984 14.814 39.5 17.367 39.5 20s-.516 5.186-1.532 7.59c-.982 2.322-2.388 4.408-4.18 6.199-1.79 1.79-3.876 3.197-6.198 4.179C25.186 38.984 22.633 39.5 20 39.5z" style="stroke:none"/>
+        <path d="M20 1c-2.565 0-5.054.502-7.395 1.493-2.263.957-4.295 2.327-6.04 4.072s-3.115 3.777-4.072 6.04C1.503 14.946 1 17.435 1 20c0 2.565.502 5.054 1.493 7.395.957 2.263 2.327 4.295 4.072 6.04s3.777 3.115 6.04 4.072C14.946 38.497 17.435 39 20 39c2.565 0 5.054-.502 7.395-1.493 2.263-.957 4.295-2.327 6.04-4.072s3.115-3.777 4.072-6.04C38.497 25.054 39 22.565 39 20c0-2.565-.502-5.054-1.493-7.395-.957-2.263-2.327-4.295-4.072-6.04s-3.777-3.115-6.04-4.072C25.054 1.503 22.565 1 20 1m0-1c11.046 0 20 8.954 20 20s-8.954 20-20 20S0 31.046 0 20 8.954 0 20 0z" style="fill:#fc4b7f;stroke:none"/>
+    </g>
+    <path id="prefix__다각형_2" d="M101.994 678.08a1.2 1.2 0 0 1-1.138-1.579l2.127-6.381a11.4 11.4 0 0 1 10.386-16.04h.626a11.378 11.378 0 0 1 10.8 10.734v.666a11.4 11.4 0 0 1-16.039 10.411l-6.381 2.127a1.19 1.19 0 0 1-.381.062z" data-name="다각형 2" transform="translate(-93.193 -646.48)" style="fill:rgba(248,127,163,.6)"/>
+    <path id="prefix__다각형_2_복사_6" d="M101.994 678.08a1.2 1.2 0 0 1-1.138-1.579l2.127-6.381a11.4 11.4 0 0 1 10.386-16.04h.626a11.377 11.377 0 0 1 10.8 10.734v.666a11.4 11.4 0 0 1-16.039 10.411l-6.381 2.127a1.184 1.184 0 0 1-.381.062zm11.377-21.6a8.994 8.994 0 0 0-8.026 13.018 1.2 1.2 0 0 1 .068.921l-1.521 4.563 4.563-1.521a1.193 1.193 0 0 1 .921.067 8.4 8.4 0 0 0 4.015.951 9.013 9.013 0 0 0 9-9v-.6a8.953 8.953 0 0 0-8.466-8.4h-.534z" data-name="다각형 2 복사 6" transform="translate(-93.193 -646.48)" style="fill:rgba(228,47,102,.5)"/>
+</svg>

src/assets/images/ico/btn_list_call_a24.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="prefix__btn_list_call_a24" width="40" height="40" viewBox="0 0 40 40">
+    <g id="prefix__타원_656_복사_4" data-name="타원 656 복사 4" style="fill:#fff3f3;stroke:#fc4b7f;stroke-linejoin:round">
+        <circle cx="20" cy="20" r="20" style="stroke:none"/>
+        <circle cx="20" cy="20" r="19.5" style="fill:none"/>
+    </g>
+    <path id="prefix__다각형_2_복사" d="M388.359 852.08c-.086 0-.181 0-.276-.013a22.941 22.941 0 0 1-9.957-3.533 22.575 22.575 0 0 1-6.908-6.9 22.838 22.838 0 0 1-3.531-9.961 3.284 3.284 0 0 1 2.978-3.583c.1-.009.2-.013.294-.013h3.321a3.294 3.294 0 0 1 3.247 2.825 13.021 13.021 0 0 0 .709 2.845 3.287 3.287 0 0 1-.742 3.462l-.79.79a16.454 16.454 0 0 0 5.028 5.019l.787-.786a3.3 3.3 0 0 1 3.475-.742 13.085 13.085 0 0 0 2.838.7 3.288 3.288 0 0 1 2.84 3.32v3.27a3.286 3.286 0 0 1-3.277 3.292z" data-name="다각형 2 복사" transform="translate(-358.954 -819.598)" style="fill:rgba(255,156,186,.6)"/>
+    <path id="prefix__다각형_2_복사_10" d="M388.359 852.08c-.086 0-.181 0-.276-.013a22.941 22.941 0 0 1-9.957-3.533 22.575 22.575 0 0 1-6.908-6.9 22.838 22.838 0 0 1-3.531-9.961 3.284 3.284 0 0 1 2.978-3.583c.1-.009.2-.013.294-.013h3.321a3.294 3.294 0 0 1 3.247 2.825 13.021 13.021 0 0 0 .709 2.845 3.287 3.287 0 0 1-.742 3.462l-.79.79a16.454 16.454 0 0 0 5.028 5.019l.787-.786a3.3 3.3 0 0 1 3.475-.742 13.085 13.085 0 0 0 2.838.7 3.288 3.288 0 0 1 2.84 3.32v3.27a3.286 3.286 0 0 1-3.277 3.292zm-14.089-21.811h-3.311a1.141 1.141 0 0 0-.839.394 1.084 1.084 0 0 0-.25.8 20.623 20.623 0 0 0 3.194 8.993 20.407 20.407 0 0 0 6.246 6.238 20.734 20.734 0 0 0 8.993 3.2.993.993 0 0 0 .858-.322 1.082 1.082 0 0 0 .318-.774v-3.317a1.094 1.094 0 0 0-.943-1.11 15.2 15.2 0 0 1-3.31-.823 1.1 1.1 0 0 0-1.16.244l-1.389 1.386a1.1 1.1 0 0 1-1.317.177 18.629 18.629 0 0 1-6.99-6.977 1.093 1.093 0 0 1 .178-1.315l1.393-1.39a1.093 1.093 0 0 0 .242-1.151 15.168 15.168 0 0 1-.828-3.317 1.1 1.1 0 0 0-1.085-.936z" data-name="다각형 2 복사 10" transform="translate(-358.954 -819.598)" style="fill:rgba(228,47,102,.5)"/>
+</svg>

src/assets/images/ico/btn_list_message_a24.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="prefix__btn_list_message_a24" width="40" height="40" viewBox="0 0 40 40">
+    <g id="prefix__타원_656_복사" data-name="타원 656 복사" style="fill:#fff3f3">
+        <path d="M20 39.5c-2.633 0-5.186-.516-7.59-1.532-2.322-.982-4.408-2.388-6.199-4.18-1.79-1.79-3.197-3.876-4.179-6.198C1.016 25.186.5 22.633.5 20s.516-5.186 1.532-7.59c.982-2.322 2.388-4.408 4.18-6.199 1.79-1.79 3.876-3.197 6.198-4.179C14.814 1.016 17.367.5 20 .5s5.186.516 7.59 1.532c2.322.982 4.408 2.388 6.199 4.18 1.79 1.79 3.197 3.876 4.179 6.198C38.984 14.814 39.5 17.367 39.5 20s-.516 5.186-1.532 7.59c-.982 2.322-2.388 4.408-4.18 6.199-1.79 1.79-3.876 3.197-6.198 4.179C25.186 38.984 22.633 39.5 20 39.5z" style="stroke:none"/>
+        <path d="M20 1c-2.565 0-5.054.502-7.395 1.493-2.263.957-4.295 2.327-6.04 4.072s-3.115 3.777-4.072 6.04C1.503 14.946 1 17.435 1 20c0 2.565.502 5.054 1.493 7.395.957 2.263 2.327 4.295 4.072 6.04s3.777 3.115 6.04 4.072C14.946 38.497 17.435 39 20 39c2.565 0 5.054-.502 7.395-1.493 2.263-.957 4.295-2.327 6.04-4.072s3.115-3.777 4.072-6.04C38.497 25.054 39 22.565 39 20c0-2.565-.502-5.054-1.493-7.395-.957-2.263-2.327-4.295-4.072-6.04s-3.777-3.115-6.04-4.072C25.054 1.503 22.565 1 20 1m0-1c11.046 0 20 8.954 20 20s-8.954 20-20 20S0 31.046 0 20 8.954 0 20 0z" style="fill:#fc4b7f;stroke:none"/>
+    </g>
+    <path id="prefix__다각형_2_복사_4" d="M15.272 24a1.089 1.089 0 0 1-1-.648l-4.194-9.434-9.43-4.193A1.091 1.091 0 0 1 .73 7.7L22.549.061A1.1 1.1 0 0 1 23 0H23.04a1.089 1.089 0 0 1 .306.084l.025.016h.009l.014.007.016.008h.007a1.081 1.081 0 0 1 .263.194l.02.028v.006l.011.012.006.007.013.015.011.013a1.089 1.089 0 0 1 .259.795v.038a1.1 1.1 0 0 1-.053.229L16.3 23.27a1.093 1.093 0 0 1-.985.73z" data-name="다각형 2 복사 4" transform="translate(6.242 7.821)" style="fill:rgba(248,127,163,.6)"/>
+    <path id="prefix__다각형_2_복사_7" d="M15.272 24a1.089 1.089 0 0 1-1-.648l-4.194-9.434-9.43-4.193A1.091 1.091 0 0 1 .73 7.7L22.549.061A1.1 1.1 0 0 1 23 0H23.04a1.089 1.089 0 0 1 .306.084l.025.016h.009l.014.007.016.008h.007a1.081 1.081 0 0 1 .263.194l.02.028v.006l.011.012.006.007.013.015.011.013a1.089 1.089 0 0 1 .259.795v.038a1.1 1.1 0 0 1-.053.229L16.3 23.27a1.093 1.093 0 0 1-.985.73zm-.121-4.047L20.3 5.243l-8.09 8.089zm-11.1-11.1l6.619 2.942L18.758 3.7z" data-name="다각형 2 복사 7" transform="translate(6.242 7.821)" style="fill:rgba(228,47,102,.5)"/>
+</svg>

src/assets/images/ico/btn_list_mobile_a24.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="prefix__btn_list_mobile_a24" width="40" height="40" viewBox="0 0 40 40">
+    <defs>
+        <style>
+            .prefix__cls-3{fill:none;stroke:rgba(228,47,102,.5);stroke-linecap:square;stroke-linejoin:round;stroke-width:1.4px}.prefix__cls-4{stroke:none}
+        </style>
+    </defs>
+    <g id="prefix__타원_656_복사" data-name="타원 656 복사" style="fill:#fff3f3">
+        <path d="M20 39.5c-2.633 0-5.186-.516-7.59-1.532-2.322-.982-4.408-2.388-6.199-4.18-1.79-1.79-3.197-3.876-4.179-6.198C1.016 25.186.5 22.633.5 20s.516-5.186 1.532-7.59c.982-2.322 2.388-4.408 4.18-6.199 1.79-1.79 3.876-3.197 6.198-4.179C14.814 1.016 17.367.5 20 .5s5.186.516 7.59 1.532c2.322.982 4.408 2.388 6.199 4.18 1.79 1.79 3.197 3.876 4.179 6.198C38.984 14.814 39.5 17.367 39.5 20s-.516 5.186-1.532 7.59c-.982 2.322-2.388 4.408-4.18 6.199-1.79 1.79-3.876 3.197-6.198 4.179C25.186 38.984 22.633 39.5 20 39.5z" class="prefix__cls-4"/>
+        <path d="M20 1c-2.565 0-5.054.502-7.395 1.493-2.263.957-4.295 2.327-6.04 4.072s-3.115 3.777-4.072 6.04C1.503 14.946 1 17.435 1 20c0 2.565.502 5.054 1.493 7.395.957 2.263 2.327 4.295 4.072 6.04s3.777 3.115 6.04 4.072C14.946 38.497 17.435 39 20 39c2.565 0 5.054-.502 7.395-1.493 2.263-.957 4.295-2.327 6.04-4.072s3.115-3.777 4.072-6.04C38.497 25.054 39 22.565 39 20c0-2.565-.502-5.054-1.493-7.395-.957-2.263-2.327-4.295-4.072-6.04s-3.777-3.115-6.04-4.072C25.054 1.503 22.565 1 20 1m0-1c11.046 0 20 8.954 20 20s-8.954 20-20 20S0 31.046 0 20 8.954 0 20 0z" style="fill:#fc4b7f;stroke:none"/>
+    </g>
+    <rect id="prefix__사각형_59" width="18" height="24" data-name="사각형 59" rx="2" transform="translate(11 8)" style="fill:rgba(248,127,163,.6)"/>
+    <g id="prefix__smartphone_1_" data-name="smartphone (1)" transform="translate(11 8)">
+        <g id="prefix__사각형_58" class="prefix__cls-3" data-name="사각형 58">
+            <rect width="18" height="24" class="prefix__cls-4" rx="2"/>
+            <rect width="16.6" height="22.6" x=".7" y=".7" rx="1.3" style="fill:none"/>
+        </g>
+        <path id="prefix__선_27" d="M0 0L0.008 0" class="prefix__cls-3" data-name="선 27" transform="translate(9.035 20.87)"/>
+    </g>
+</svg>

src/assets/images/ico/btn_list_vc-a24.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="prefix__btn_list_vc-a24" width="40" height="40" viewBox="0 0 40 40">
+    <g id="prefix__타원_656_복사_5" data-name="타원 656 복사 5" style="fill:#fff3f3;stroke:#fc4b7f;stroke-linejoin:round">
+        <circle cx="20" cy="20" r="20" style="stroke:none"/>
+        <circle cx="20" cy="20" r="19.5" style="fill:none"/>
+    </g>
+    <path id="prefix__다각형_2_복사_2" d="M3.375 20A3.58 3.58 0 0 1 0 16.25V3.75A3.581 3.581 0 0 1 3.375 0H15.75a3.582 3.582 0 0 1 3.375 3.75v3.821l6.1-4.838a1.032 1.032 0 0 1 1.169-.094A1.272 1.272 0 0 1 27 3.75v12.5a1.272 1.272 0 0 1-.61 1.113 1.033 1.033 0 0 1-1.169-.1l-6.1-4.837v3.82A3.581 3.581 0 0 1 15.75 20z" data-name="다각형 2 복사 2" transform="translate(7 10)" style="fill:rgba(248,127,163,.6)"/>
+    <path id="prefix__다각형_2_복사_8" d="M3.375 20A3.58 3.58 0 0 1 0 16.25V3.75A3.581 3.581 0 0 1 3.375 0H15.75a3.582 3.582 0 0 1 3.375 3.75v3.821l6.1-4.838a1.032 1.032 0 0 1 1.169-.094A1.272 1.272 0 0 1 27 3.75v12.5a1.272 1.272 0 0 1-.61 1.113 1.033 1.033 0 0 1-1.169-.1l-6.1-4.837v3.82A3.581 3.581 0 0 1 15.75 20zM2.25 3.75v12.5a1.193 1.193 0 0 0 1.125 1.25H15.75a1.193 1.193 0 0 0 1.125-1.25V3.75A1.194 1.194 0 0 0 15.75 2.5H3.375A1.194 1.194 0 0 0 2.25 3.75zM19.935 10l4.815 3.822V6.18z" data-name="다각형 2 복사 8" transform="translate(7 10)" style="fill:#e42f66;opacity:.502"/>
+</svg>

src/assets/images/ico/icon_bot_empty.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
+    <defs>
+        <style>
+            .prefix__cls-3{fill:#c5c5c5}
+        </style>
+    </defs>
+    <g id="prefix__icon_bot_empty" transform="translate(-23 -29)">
+        <g id="prefix__icon-no-message">
+            <path id="prefix__패스_255" d="M0 0h50v50H0z" data-name="패스 255" transform="translate(23 29)" style="fill:none"/>
+            <g id="prefix__그룹_32" data-name="그룹 32" transform="translate(-2.068 4)">
+                <path id="prefix__사각형_721" d="M31.161 71a2.1 2.1 0 0 1-1.986-2.765l3.71-11.166a19.971 19.971 0 0 1 9.271-25.958A19.657 19.657 0 0 1 51 29h1.092a19.877 19.877 0 0 1 18.834 18.784v1.166a19.866 19.866 0 0 1-27.972 18.219l-11.131 3.722a2.057 2.057 0 0 1-.662.109zm19.845-37.8a15.472 15.472 0 0 0-6.969 1.664 15.754 15.754 0 0 0-7.031 21.118 2.109 2.109 0 0 1 .118 1.612L34.47 65.58l7.96-2.662a2.075 2.075 0 0 1 1.607.117 14.612 14.612 0 0 0 7 1.665 15.757 15.757 0 0 0 15.7-15.744V47.9a15.643 15.643 0 0 0-14.76-14.7h-.931z" data-name="사각형 721" style="fill:rgba(153,153,153,.51)"/>
+                <path id="prefix__모서리가_둥근_직사각형_724" d="M50.5 37a2.266 2.266 0 0 1 2.5 1.912L50.5 50 48 38.912A2.266 2.266 0 0 1 50.5 37z" class="prefix__cls-3" data-name="모서리가 둥근 직사각형 724" transform="translate(0 2)"/>
+                <circle id="prefix__모서리가_둥근_직사각형_725" cx="3" cy="3" r="3" class="prefix__cls-3" data-name="모서리가 둥근 직사각형 725" transform="translate(48 53)"/>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/scss/setting/_variables.scss

@@ -11,6 +11,7 @@ $line-height-base: 1.5 !default;
 // Color
 $black: #000 !default;
 $white: #ffffff !default;
+$grayf7-a: #f7f8fa !default;
 $grayf3-5: #f3f4f5 !default;
 $gray-ref0: #f0f0f0 !default;
 $gray-re20: #202020 !default;
@@ -21,6 +22,7 @@ $gray-re4a: #4a4a4a !default;
 $gray-re6: #666666 !default;
 $gray-re70: #707070 !default;
 $gray-re9: #999999 !default;
+$gray-rec: #cccccc !default;
 
 $brown: #7f5360 !default;
 
@@ -29,14 +31,20 @@ $dirty-purple: #5c575a !default;
 $rose-pink: #f0828c !default;
 $warm-pink: #fd578a !default;
 
+$green: #20af9a;
+$red-absence: #f95050;
+$yellow-other: #fecd0d;
+
 // text-color
 $txt-color01: $gray-re6;
 
 // Line Color
+$line-color-gray01: #d4d4d4;
 
 // Bg Color
 $body-bg: $white !default;
 $bg-gray: $grayf3-5;
+$bg-linear-gradient: linear-gradient(57deg, #ffe1ba 13%, #f5878c 87%);
 
 // Design size
 
@@ -68,11 +76,14 @@ $min-xl: 1200;
   list-style: none;
   box-sizing: border-box;
 }
+%blind {
+  font: 0/0 '돋움', dotum;
+}
 %guideline {
-  //border: 1px dashed red;
+  border: 1px dashed red;
 }
 %guideline2 {
-  //border: 1px dotted blue;
+  border: 1px dotted blue;
 }
 %height100vh {
   height: 100vh;
@@ -94,6 +105,22 @@ $min-xl: 1200;
   }
   font-weight: normal;
 }
+@mixin font-family-ico($fontSize: 24, $txtAlign: center, $txtColor: $black) {
+  font-family: 'material Icons';
+  font-size: $fontSize + px;
+  text-align: $txtAlign;
+  color: $txtColor;
+}
+@mixin font-family-txt(
+  $textSize: 12,
+  $textAlign: left,
+  $textColor: $gray-re70
+) {
+  font-family: '나눔고딕, Malgun Gothic, 맑은고딕, Arial, Muli, Helvetica Neue, Arial, sans-serif';
+  font-size: $textSize + px;
+  text-align: $textAlign;
+  color: $textColor;
+}
 
 // Screen
 @mixin screen($size, $type: max, $pixels: false) {
@@ -148,7 +175,8 @@ $lg-red: (
   100: #fff9fc,
   200: #f1e1e5,
   300: #ef4c73,
-  400: #ec407a,
+  400: #ffbf2a,
+  //#ec407a
     500: #ed097e,
   600: #d81b60,
   700: #c2185b,
@@ -303,11 +331,6 @@ $lg-red: (
     color: mat-color($accent, B100);
   }
 
-  .mat-badge-accent .mat-badge-content,
-  .weblink .mat-badge-content {
-    background-color: mat-color($warn, 400);
-  }
-
   .mat-tab-group.mat-primary .mat-ink-bar,
   body.theme-default .mat-tab-nav-bar.mat-primary .mat-ink-bar {
     background-color: mat-color($accent, 500);
@@ -349,7 +372,7 @@ $lg-red: (
     padding: $pixels-amount;
     border-top: $pixels-amount;
   }
-  ////login input
+  //login input... ////////////////////
   .idpass-type {
     .mat-form-field-empty {
       &.mat-form-field-label {
@@ -372,7 +395,54 @@ $lg-red: (
       }
     }
   }
-  //////////
+  // input
+  .inputtype {
+    .mat-form-field-empty {
+      &.mat-form-field-label {
+        top: 11px;
+      }
+    }
+    .mat-form-field-can-float {
+      &.mat-form-field-should-float {
+        .mat-form-field-label {
+          top: 11px;
+          width: 0;
+        }
+      }
+    }
+    .mat-form-field {
+      &.mat-focused {
+        .mat-form-field-label {
+          opacity: 0;
+        }
+      }
+      .mat-form-field-wrapper {
+        padding-bottom: 0;
+      }
+    }
+  }
+  //////////////////// login input...//
+  //panel /////////////////////////////
+  .panelType {
+    @include matpanelCtrl(60px, 0 0 0 0, 1, 0);
+  }
+  ///////////////////////////// panel//
+  //btn //////////////////////////////
+  .btnType {
+    .mat-fab .mat-button-wrapper {
+      padding: 16px 0;
+      display: inline-block;
+      line-height: 24px;
+      .mat-icon {
+        background-repeat: no-repeat;
+        display: inline-block;
+        fill: currentColor;
+        height: 24px;
+        width: 24px;
+      }
+    }
+  }
+  ////////////////////////////// btn//
 
   .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
     height: 34px;
@@ -642,43 +712,252 @@ $lg-red: (
       background-color: mat-color($accent, B100);
     }
   }
-}
+
-///////////////////////////////////////////////////
+  /////////2020
-/////////////
+  //color
-// Select
+  .color-white {
-@mixin selecCtrl($selec-height, $selec-width) {
+    color: $white;
-  .mat-select-value {
-    height: $selec-height + px;
-    line-height: $selec-height + px;
   }
-  .mat-form-field {
+  //mat layout
-    height: $selec-height + px;
+  .mat-drawer-opened {
+    .mat-drawer-inner-container {
+      height: calc(100% - 102px);
+      overflow: auto;
+      margin-top: 102px;
+      @include custom-scrollbar();
     }
-  .mat-form-field-appearance-legacy .mat-form-field-wrapper {
-    height: $selec-height + px;
   }
-  .mat-form-field-appearance-legacy .mat-form-field-wrapper {
+  .mat-drawer-opened + div + .contents-main-area {
-    padding-bottom: 0;
+    .contents-main-box {
+      .contents-main-toolbar {
+        width: calc(100% - 420px) !important;
+        transition: all 0.3s;
+      }
+    }
+  }
+  //mat dadge
+  .mat-badge-accent .mat-badge-content,
+  .weblink .mat-badge-content {
+    background-color: mat-color($warn, 400);
+  }
+  //mat-card
+  .allim-card {
+    .mat-card-header {
+      .mat-card-header-text {
+        margin: 0 0 0 10px;
+        .mat-card-title {
+          line-height: 21px;
+          @include font-family(LG Smart Light, normal);
+          font-size: 16px !important;
+          font-weight: bold;
+          color: $brown;
+          margin-bottom: 3px;
+        }
+        .mat-card-subtitle {
+          line-height: 14px;
+          @include font-family(LG Smart Light, normal);
+          font-size: 12px;
+          color: $gray-re9;
+          margin-top: 0;
+          margin-bottom: 18px;
+        }
+      }
+    }
+    .mat-card-content {
+      border-top: solid 1px #d4d4d4;
+      margin-bottom: 0;
+      min-height: 114px;
+      display: flex;
+      justify-content: space-around;
+      flex-direction: column;
+      align-items: center;
+      color: #d4d4d4;
+      font-size: 12px;
+    }
+    & > .mat-card-actions:last-child {
+      margin-left: -17px;
+      margin-right: -17px;
+      margin-bottom: 0 !important;
+      padding: 0;
     }
-  .mat-form-field-flex {
-    height: $selec-height + px;
   }
 }
 
+///////////////////////////////////////////////////MIXIN
+/////////////
+// Select
+@mixin selecCtrl($selec-height, $selec-pwidth) {
+  height: $selec-height;
+  line-height: $selec-height;
+  padding: 0 $selec-pwidth;
+}
+
 //input
-@mixin matinputCtrl($selec-height, $selec-width) {
+@mixin matinputCtrl($bdw: 1px, $bdr: 0, $maxw, $minw, $inputH) {
-  .mat-form-field-appearance-legacy {
+  border: $bdw solid #cccccc;
-    .mat-form-field-infix {
+  border-radius: $bdr + px;
+  width: 100%;
+  max-width: $maxw;
+  min-width: $minw;
+  height: $inputH;
+  line-height: $inputH;
+  background-color: $white;
+  @content;
+}
+
+// btn
+@mixin matbtnCtrl($btnw, $btnh, $btnbdr, $btnlineH) {
+  min-width: $btnw;
+  height: $btnh;
+  border-radius: $btnbdr;
+  line-height: $btnlineH;
   padding: 0;
-      border-top: 0;
+}
-      width: $selec-width + px;
+
+// panel
+@mixin matpanelCtrl($panelh-h, $panelBody-p, $matcon-o: 0, $matindicator-o: 1) {
+  &.mat-expansion-panel-spacing {
+    margin: 10px 0;
+  }
+  .mat-expansion-panel-header {
+    height: $panelh-h !important;
+    padding: 0 17px;
+    font-size: 12px !important;
+    .mat-content {
+      align-items: center;
+      order: $matcon-o;
+      @if $matcon-o == 1 {
+        margin-left: 18px;
+      }
+      span {
+        margin-left: 6px;
+        font-size: 13px;
+        strong {
+          color: $lipstick;
+        }
+        &.mat-button-wrapper {
+          font-size: 24px;
+          vertical-align: bottom;
+          margin: 0;
         }
       }
-  .mat-form-field-appearance-legacy {
-    .mat-form-field-underline {
-      display: none;
     }
+    .mat-expansion-indicator {
+      align-items: center;
+      order: $matindicator-o;
+      &:after {
+        vertical-align: super;
+      }
+    }
+  }
+  .mat-expansion-panel-content {
+    .mat-expansion-panel-body {
+      padding: $panelBody-p;
+    }
+  }
+}
+
+//profile avatar
+@mixin profile-avatar-default(
+  $mobile-on: 0 5px 5px 0,
+  $mico-size: 8,
+  $mico-color: $green,
+  $mico-bg: 18px
+) {
+  //기본설정
+  display: inline-flex;
+  position: relative;
+  &.mobile-ing {
+    padding: $mobile-on;
+    &:after {
+      @include font-family-ico($mico-size, center, $mico-color);
+      content: 'smartphone';
+      display: block;
+      width: $mico-bg;
+      height: $mico-bg;
+      line-height: $mico-bg;
+      border-radius: 50%;
+      background-color: $white;
+      position: absolute;
+      bottom: 0;
+      right: 0;
+    }
+  }
+  @content;
+}
+@mixin presence-state($circle-size: 8px) {
+  //pc상태설정
+  display: flex;
+  align-items: flex-start;
+  width: $circle-size;
+  height: $circle-size;
+  border-radius: 50%;
+  background-color: $green;
+  @extend %blind;
+  &.offline {
+    background-color: $gray-rec;
+  }
+  &.absence {
+    background-color: $red-absence;
+  }
+  &.other-business {
+    background-color: $yellow-other;
+  }
+  @content;
+}
+@mixin avatar-img($avatar-size: 36px, $avatar-left: 0) {
+  //아바타 이미지 설정
+  border-radius: 50%;
+  overflow: hidden;
+  width: $avatar-size;
+  height: $avatar-size;
+  margin-left: $avatar-left;
+  @content;
+}
+
+// scrollbar
+@mixin custom-scrollbar() {
+  &::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+    padding: 1px;
+    background-color: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: #999;
+    border-radius: 4px;
+  }
+  &::-webkit-scrollbar-track {
+    background-color: $white;
+    border-radius: 4px;
+    box-shadow: inset 0px 0px 2px $white;
+  }
+}
+@mixin no-scrollbar() {
+  &::-webkit-scrollbar {
+    height: 0;
+    width: 0;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    height: 0;
+    width: 0;
+  }
+
+  &::-webkit-scrollbar-track {
+    height: 0;
+    width: 0;
   }
 }
 /////////////
 ////////////////////////////////////////////////////////
+
+// etc//////////////////////////////////////////////////
+.myProfile {
+  .user-list {
+    &.line-top {
+      border-top: none !important;
+    }
+  }
+}
+//////////////////////////////////////////////////etc //