group tree is modified

projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html

@@ -9,7 +9,7 @@
     class="group-tree"
   >
     <!-- This is the tree node template for leaf nodes -->
-    <mat-tree-node *matTreeNodeDef="let node">
+    <mat-tree-node *matTreeNodeDef="let node" style="height: 80px;">
       <li>
         <div class="mat-tree-node">
           <ng-container
@@ -25,9 +25,10 @@
     <mat-tree-node
       *matTreeNodeDef="let node; when: hasChild"
       class="tree-node-frame"
+      style="height: 80px;"
     >
-      <li>
-        <div  class="path">
+      <li class="tree-node-header">
+        <div class="path">
           <button
             mat-icon-button
             matTreeNodeToggle
@@ -39,11 +40,30 @@
             </mat-icon>
           </button>
           <ng-container [ngSwitch]="node.nodeType">
-            <span *ngSwitchCase="NodeType.Profile">Profile</span>
-            <span *ngSwitchCase="NodeType.Favorit">Favorit</span>
-            <span *ngSwitchCase="NodeType.Buddy">Buddy</span>
+            <span *ngSwitchCase="NodeType.Profile">내 프로필</span>
+            <span *ngSwitchCase="NodeType.Favorit"
+              >즐겨찾기
+              <span class="text-accent-color number"
+                >({{ node.countOfChildren }}명)</span
+              ></span
+            >
+            <span *ngSwitchCase="NodeType.Buddy">
+              <span class="title-name ellipsis">{{
+                node.groupDetail.name
+              }}</span>
+              <span class="text-accent-color number"
+                >({{ node.countOfChildren }}명)</span
+              >
+            </span>
           </ng-container>
-          <button mat-icon-button aria-label="group menu" *ngIf="!checkable" (click)="onClickMore($event, groupBuddy.group)" class="group-menu">
+
+          <button
+            mat-icon-button
+            aria-label="group menu"
+            *ngIf="!checkable"
+            (click)="onClickMore($event, node.groupDetail)"
+            class="group-menu"
+          >
             <mat-icon>more_vert</mat-icon>
           </button>
         </div>

projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss

@@ -13,10 +13,19 @@
 }
 
 .tree-node-frame {
-  border-bottom:1px solid #dddddd;
-  height:40px;
+  border-bottom: 1px solid #dddddd;
+  height: 40px;
+
+  .tree-node-header {
+    width: 100%;
+
+    .title-name {
+      display: inline-flex;
+      flex: 1 1 auto;
+    }
+  }
   .mat-tree-node {
-    width:100%;
+    width: 100%;
     &:hover {
       background-color: #f4f4f4;
       border: 1px solid #cccccc;
@@ -26,36 +35,35 @@
   }
 }
 .mat-tree-node {
-  &[aria-level="1"]{
+  &[aria-level='1'] {
     position: relative;
     widows: 100px;
-    height:100%;
-    li{
-      margin-left:0;
-      width:100%;
-      height:100%;
-      .mat-tree-node{
-        width:100%;
-        height:100%;
+    height: 100%;
+    li {
+      margin-left: 0;
+      width: 100%;
+      height: 100%;
+      .mat-tree-node {
+        width: 100%;
+        height: 100%;
       }
     }
   }
 }
 
-
 .path {
   padding: 6px 4px;
-  .btn-toggle{
+  .btn-toggle {
     padding: 0;
     min-width: 0;
     width: 20px;
     height: 20px;
     flex-shrink: 0;
     line-height: 20px;
-    margin-right:10px;
+    margin-right: 10px;
   }
-  .group-menu{
-    margin-left:auto;
+  .group-menu {
+    margin-left: auto;
   }
   + ul {
     li:last-chlid {

projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.ts

@@ -44,6 +44,7 @@ interface FlatNode {
   expandable: boolean;
   level: number;
   nodeType: NodeType;
+  countOfChildren?: number;
   userInfo?: UserInfo;
   groupDetail?: GroupDetailData;
 }
@@ -77,7 +78,7 @@ export class ExpansionPanelComponent implements OnInit, AfterViewInit {
 
   @Input()
   set favoritBuddyList(userInfoList: UserInfo[]) {
-    if (!userInfoList) {
+    if (!userInfoList || 0 === userInfoList.length) {
       return;
     }
     const groupNode: GroupNode = {
@@ -181,6 +182,10 @@ export class ExpansionPanelComponent implements OnInit, AfterViewInit {
           expandable: !!node.children && node.children.length > 0,
           level,
           nodeType: node.nodeType,
+          countOfChildren:
+            !!node.children && node.children.length > 0
+              ? node.children.length
+              : undefined,
           userInfo: node.userInfo,
           groupDetail: node.groupDetail
         };