조직도 레이아웃 수정.

1. expansion panel indicator 수정.
2. class 변경.

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/organization.component.html

@@ -177,7 +177,7 @@
 
   <div fxFlex="auto" fxLayout="column">
     <mat-accordion class="organization-accordion">
-      <mat-expansion-panel>
+      <mat-expansion-panel hideToggle>
         <mat-expansion-panel-header>
           <mat-panel-title class="select-user-title">
             {{ 'organization.selectedUser' | translate }}
@@ -186,18 +186,34 @@
               {{ 'common.units.persons' | translate }}
             </span>
           </mat-panel-title>
-          <mat-panel-description> </mat-panel-description>
+          <mat-panel-description>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              height="24"
+              viewBox="0 0 24 24"
+              width="24"
+              class="indicator"
+            >
+              <path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" />
+              <path d="M0 0h24v24H0z" fill="none" />
+            </svg>
+          </mat-panel-description>
         </mat-expansion-panel-header>
 
         <div class="list-chip">
           <mat-chip-list aria-label="User selection">
-            <mat-chip
+            <perfect-scrollbar
-              *ngFor="let userInfo of selectedUserList"
+              [config]="{ suppressScrollX: true }"
-              (removed)="onClickDeleteUser(userInfo)"
+              class="selected-user-list-chip"
             >
-              {{ userInfo.name }}
+              <mat-chip
-              <mat-icon matChipRemove>clear</mat-icon>
+                *ngFor="let userInfo of selectedUserList"
-            </mat-chip>
+                (removed)="onClickDeleteUser(userInfo)"
+              >
+                {{ userInfo.name }}
+                <mat-icon matChipRemove>clear</mat-icon>
+              </mat-chip>
+            </perfect-scrollbar>
           </mat-chip-list>
         </div>
         <div class="btn-box">

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/main-contents/organization.component.scss

@@ -163,17 +163,23 @@
   font-weight: 600;
 }
 
-::ng-depp .organization-accordion {
+::ng-deep .organization-accordion {
   .mat-expansion-panel {
     .mat-expansion-panel-header {
-      .mat-expansion-indicator {
+      .indicator {
-        transform: rotate(180deg) !important;
+        position: absolute;
+        right: 10px;
+        transform: rotate(0deg) !important;
       }
       &.mat-expanded {
-        .mat-expansion-indicator {
+        .indicator {
-          transform: rotate(0deg) !important;
+          transform: rotate(180deg) !important;
         }
       }
     }
   }
 }
+
+.selected-user-list-chip {
+  max-height: 120px;
+}

projects/ucap-webmessenger-ui-organization/src/lib/components/detail-table.component.html

@@ -7,7 +7,7 @@
   >
     <ng-container matColumnDef="profileImage">
       <th mat-header-cell *matHeaderCellDef class="profileImage">
-        <span class="ui-column-resizer none"></span>
+        <span class="ui-column-divider"></span>
         <span>
           {{ 'search.fieldProfile' | translate }}
         </span>
@@ -42,7 +42,7 @@
     <ng-container matColumnDef="profileInfo">
       <th mat-header-cell *matHeaderCellDef class="profileInfo" minWidth="150">
         <span
-          class="ui-column-resizer"
+          class="ui-column-divider resizable"
           (mousedown)="resizeTable($event)"
         ></span>
         <span mat-sort-header="name">
@@ -84,7 +84,7 @@
     <ng-container matColumnDef="company_hpNumber">
       <th mat-header-cell *matHeaderCellDef minWidth="75">
         <span
-          class="ui-column-resizer"
+          class="ui-column-divider resizable"
           (mousedown)="resizeTable($event)"
         ></span>
         <div mat-sort-header="company">
@@ -106,7 +106,7 @@
     <ng-container matColumnDef="workplace_lineNumber">
       <th mat-header-cell *matHeaderCellDef minWidth="75">
         <span
-          class="ui-column-resizer"
+          class="ui-column-divider resizable"
           (mousedown)="resizeTable($event)"
         ></span>
         <div mat-sort-header="workplace">
@@ -118,7 +118,7 @@
       </th>
       <td mat-cell *matCellDef="let element">
         <span
-          class="ui-column-resizer"
+          class="ui-column-divider resizable"
           (mousedown)="resizeTable($event)"
         ></span>
         <div class="workplace">
@@ -131,10 +131,7 @@
     </ng-container>
     <ng-container matColumnDef="responsibilities_email">
       <th mat-header-cell *matHeaderCellDef minWidth="90">
-        <span
+        <span class="ui-column-divider"></span>
-          class="ui-column-resizer"
-          (mousedown)="resizeTable($event)"
-        ></span>
         <div mat-sort-header="responsibilities">
           {{ 'search.fieldResponsibilities' | translate }}
         </div>

projects/ucap-webmessenger-ui-organization/src/lib/components/detail-table.component.scss

@@ -37,7 +37,7 @@ th.mat-header-cell {
   position: relative;
   padding: 0 10px;
 
-  span.ui-column-resizer {
+  span.ui-column-divider {
     display: block;
     position: absolute;
     top: 10px;
@@ -46,12 +46,12 @@ th.mat-header-cell {
     width: 2px;
     height: 40px;
     padding: 0;
-    cursor: col-resize;
+    cursor: initial;
     border: none;
     background-color: #d4d4d4;
 
-    &.none {
+    &.resizable {
-      cursor: initial;
+      cursor: col-resize;
     }
   }
   span {