0530 sync

package-lock.json

@@ -3508,8 +3508,8 @@
       "dev": true
     },
     "@ucap/ng-store-chat": {
-      "version": "file:pack/ucap-ng-store-chat-0.0.16.tgz",
+      "version": "file:pack/ucap-ng-store-chat-0.0.19.tgz",
-      "integrity": "sha512-Rwupo2Gqa+4+0ANBZLtup+mdlTU42Tj5gkGnJJ86Vylo4xQcdR+PUdedWZ/lG7DyzrfBc8ON80aUPRikpWUCow==",
+      "integrity": "sha512-J6jhvJW7GfFOIrPfXnDZ2sqUF10C7cJm8d/9O7ThxJ8muvKhQ/ZN86yJLLtA8Y+sIIupnUikH2MGNW7mgZjHPg==",
       "dev": true
     },
     "@ucap/ng-store-group": {
@@ -3523,8 +3523,8 @@
       "dev": true
     },
     "@ucap/ng-ui": {
-      "version": "file:pack/ucap-ng-ui-0.0.19.tgz",
+      "version": "file:pack/ucap-ng-ui-0.0.24.tgz",
-      "integrity": "sha512-UuZSzWM4tBR+e5Z/1PFdNenHS00Pn4K7dTafIicG29YjHE5sTXXRqjDCVrKNxJQoMSEPWjUj7qnTgYwP2U83Vg==",
+      "integrity": "sha512-7G+Ee2EPYwDv64yMmy+Ga5Wcj7HK8YC0WLqvRWrLv3XZQtLfZ/oP/lWyjPvCNme0hNQo6EH1MpPn6u+uhoST6w==",
       "dev": true
     },
     "@ucap/ng-ui-authentication": {
@@ -3533,8 +3533,8 @@
       "dev": true
     },
     "@ucap/ng-ui-chat": {
-      "version": "file:pack/ucap-ng-ui-chat-0.0.12.tgz",
+      "version": "file:pack/ucap-ng-ui-chat-0.0.13.tgz",
-      "integrity": "sha512-uXtqUm3O0l/7jIh9KAXrxFxma/EAtnwpr1c30gOSxDcsMgp/Tuuqb/7YjI2AOIYHaq9iWX0yNNab1ijH5Pcj+g==",
+      "integrity": "sha512-ytFXvVxwkaNXH6RY4jdXpwqwfq6+HPiYN+Jqv1o5oddhlpBd7OSzhudUew318GJgclxoXbStcSc0/UODDdTptw==",
       "dev": true
     },
     "@ucap/ng-ui-group": {
@@ -3548,13 +3548,13 @@
       "dev": true
     },
     "@ucap/ng-ui-organization": {
-      "version": "file:pack/ucap-ng-ui-organization-0.0.83.tgz",
+      "version": "file:pack/ucap-ng-ui-organization-0.0.84.tgz",
-      "integrity": "sha512-ls2xfMNbceUecR0Vrhm/qzbKDJmBENtA4Y0ODVKVgjui8IQnS/EXGXSeNS+rFrnASTlI2XHWiaVHFqdZi/4ipQ==",
+      "integrity": "sha512-T2q3KPCjY1ZZ1bY4UtSvY1XWpb0T8AZ9GbuOFlAJK3rs+grZC+iAmC8NO8iWhUgELdUStN1Mh8ja77RSo9Nqlg==",
       "dev": true
     },
     "@ucap/ng-ui-skin-default": {
       "version": "file:pack/ucap-ng-ui-skin-default-0.0.1.tgz",
-      "integrity": "sha512-+lHYAzbnyyWh6hf+Ui7vP/ibyGJXuDUO++82jOiOsnPMCl17hkCCag8vQcB/aVgl0iHmebiPshnsL3CptJfeAg=="
+      "integrity": "sha512-xYq5hlNUjo39R1TLBaUR59GjgGyCzTdj5CWZyUIBbFicBirsSERoUX5704HlTa0L8YSjW7exOL8VWSgEsMng6g=="
     },
     "@ucap/ng-web-socket": {
       "version": "file:pack/ucap-ng-web-socket-0.0.2.tgz",

package.json

@@ -185,15 +185,15 @@
     "@ucap/ng-protocol-sync": "file:pack/ucap-ng-protocol-sync-0.0.3.tgz",
     "@ucap/ng-protocol-umg": "file:pack/ucap-ng-protocol-umg-0.0.3.tgz",
     "@ucap/ng-store-authentication": "file:pack/ucap-ng-store-authentication-0.0.11.tgz",
-    "@ucap/ng-store-chat": "file:pack/ucap-ng-store-chat-0.0.16.tgz",
+    "@ucap/ng-store-chat": "file:pack/ucap-ng-store-chat-0.0.19.tgz",
     "@ucap/ng-store-group": "file:pack/ucap-ng-store-group-0.0.14.tgz",
     "@ucap/ng-store-organization": "file:pack/ucap-ng-store-organization-0.0.8.tgz",
-    "@ucap/ng-ui": "file:pack/ucap-ng-ui-0.0.19.tgz",
+    "@ucap/ng-ui": "file:pack/ucap-ng-ui-0.0.24.tgz",
     "@ucap/ng-ui-authentication": "file:pack/ucap-ng-ui-authentication-0.0.25.tgz",
-    "@ucap/ng-ui-chat": "file:pack/ucap-ng-ui-chat-0.0.12.tgz",
+    "@ucap/ng-ui-chat": "file:pack/ucap-ng-ui-chat-0.0.13.tgz",
     "@ucap/ng-ui-group": "file:pack/ucap-ng-ui-group-0.0.33.tgz",
     "@ucap/ng-ui-material": "file:pack/ucap-ng-ui-material-0.0.4.tgz",
-    "@ucap/ng-ui-organization": "file:pack/ucap-ng-ui-organization-0.0.83.tgz",
+    "@ucap/ng-ui-organization": "file:pack/ucap-ng-ui-organization-0.0.84.tgz",
     "@ucap/ng-ui-skin-default": "file:pack/ucap-ng-ui-skin-default-0.0.1.tgz",
     "@ucap/ng-web-socket": "file:pack/ucap-ng-web-socket-0.0.2.tgz",
     "@ucap/ng-web-storage": "file:pack/ucap-ng-web-storage-0.0.3.tgz",

projects/store-chat/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ucap/ng-store-chat",
-  "version": "0.0.16",
+  "version": "0.0.19",
   "publishConfig": {
     "registry": "https://nexus.loafle.net/repository/npm-ucap/"
   },

projects/store-chat/src/lib/store/chatting/effects.ts

@@ -20,7 +20,7 @@ import { EventProtocolService } from '@ucap/ng-protocol-event';
 import { RoomProtocolService } from '@ucap/ng-protocol-room';
 import { FileProtocolService } from '@ucap/ng-protocol-file';
 
-import * as roomActions from '../room/actions';
+import * as RoomActions from '../room/actions';
 import {
   events,
   eventsFailure,
@@ -51,26 +51,6 @@ import { Chatting } from './state';
 
 @Injectable()
 export class Effects {
-  selectedRoom$ = createEffect(
-    () => {
-      return this.actions$.pipe(
-        ofType(roomActions.selectedRoom),
-        debounceTime(300),
-        tap((action) => {
-          const requestCount = this.moduleConfig?.eventRequestInitCount || 50;
-          const req: InfoRequest = {
-            roomId: action.roomId,
-            baseSeq: 0,
-            requestCount
-          };
-
-          this.store.dispatch(events({ req }));
-        })
-      );
-    },
-    { dispatch: false }
-  );
-
   events$ = createEffect(
     () => {
       return this.actions$.pipe(
@@ -239,7 +219,6 @@ export class Effects {
         ofType(sendSuccess),
         tap((action) => {
           const res = action.res;
-          console.log('sendSuccess', action);
 
           this.store.dispatch(
             addEvent({
@@ -255,6 +234,29 @@ export class Effects {
     { dispatch: false }
   );
 
+  /*******************************************************************
+   * [Room Action watching.]
+   *******************************************************************/
+  selectedRoomSuccess$ = createEffect(
+    () => {
+      return this.actions$.pipe(
+        ofType(RoomActions.selectedRoomSuccess),
+        debounceTime(300),
+        tap((action) => {
+          const requestCount = this.moduleConfig?.eventRequestInitCount || 50;
+          const req: InfoRequest = {
+            roomId: action.roomId,
+            baseSeq: 0,
+            requestCount
+          };
+
+          this.store.dispatch(events({ req }));
+        })
+      );
+    },
+    { dispatch: false }
+  );
+
   constructor(
     private actions$: Actions,
     private store: Store<any>,

projects/store-chat/src/lib/store/chatting/reducers.ts

@@ -9,11 +9,10 @@ import {
   adapterFileInfoCheckList
 } from './state';
 
-import * as roomActions from '../room/actions';
+import * as RoomActions from '../room/actions';
 import {
   eventsSuccess,
   eventsFailure,
-  readSuccess,
   fileInfosSuccess,
   fileInfosFailure,
   addEvent
@@ -22,24 +21,6 @@ import {
 export const reducer = createReducer(
   initialState,
 
-  on(roomActions.selectedRoom, (state, action) => {
-    return {
-      ...state,
-      activeRoomId: action.roomId
-    };
-  }),
-
-  on(roomActions.clearSelectedRoom, (state, action) => {
-    if (action.roomId === state.activeRoomId) {
-      return {
-        ...state,
-        activeRoomId: null
-      };
-    } else {
-      return state;
-    }
-  }),
-
   on(eventsSuccess, (state, action) => {
     const roomId = action.res.roomId;
 
@@ -188,5 +169,35 @@ export const reducer = createReducer(
     } else {
       return state;
     }
+  }),
+
+  /*******************************************************************
+   * [Room Action watching.]
+   *******************************************************************/
+  on(RoomActions.selectedRoomSuccess, (state, action) => {
+    return {
+      ...state,
+      activeRoomId: action.roomId
+    };
+  }),
+
+  on(RoomActions.clearSelectedRoom, (state, action) => {
+    if (action.roomId === state.activeRoomId) {
+      return {
+        ...state,
+        activeRoomId: null
+      };
+    } else {
+      return state;
+    }
+  }),
+
+  on(RoomActions.close, (state, action) => {
+    const roomIds = action.roomIds;
+
+    return {
+      ...state,
+      chattings: adapterChatting.removeMany(roomIds, { ...state.chattings })
+    };
   })
 );

projects/store-chat/src/lib/store/room/actions.ts

@@ -23,7 +23,9 @@ import {
   ExitForcingResponse,
   UpdateTimerSetRequest,
   UpdateTimerSetResponse,
-  UserInfoShort
+  UserInfo,
+  UserInfoShort,
+  InfoResponse
 } from '@ucap/protocol-room';
 
 /**
@@ -33,6 +35,23 @@ export const selectedRoom = createAction(
   '[ucap::chat::selectedRoom] selected room',
   props<{ roomId: string; localeCode: LocaleCode }>()
 );
+/**
+ * retrieve selected Room Success.
+ */
+export const selectedRoomSuccess = createAction(
+  '[ucap::chat::selectedRoom] selected room validation Success',
+  props<{
+    roomId: string;
+    roomInfo2Res: {
+      roomInfo: RoomInfo;
+      roomUserInfo: {
+        userInfoList: UserInfo[];
+        userInfoShortList: UserInfoShort[];
+      };
+      res: InfoResponse;
+    };
+  }>()
+);
 /**
  * clear selected Room.
  */
@@ -391,7 +410,7 @@ export const updateTimeRoomIntervalFailure = createAction(
 );
 
 /**
- * norification for invited users
+ * notification for invited users
  */
 export const inviteNotification = createAction(
   '[ucap::chat::room] invite Notification',
@@ -399,9 +418,14 @@ export const inviteNotification = createAction(
 );
 
 /**
- * norification for exited user
+ * notification for exited user
  */
 export const exitNotification = createAction(
   '[ucap::chat::room] Exit Notification',
   props<{ roomId: string; userSeq: string; senderSeq: string }>()
 );
+
+export const updateUnreadCount = createAction(
+  '[ucap::chat::room] Update unread count',
+  props<{ roomId: string; noReadCnt?: number }>()
+);

projects/store-chat/src/lib/store/room/effects.ts

@@ -31,8 +31,7 @@ import { RoomProtocolService } from '@ucap/ng-protocol-room';
 import { SyncProtocolService } from '@ucap/ng-protocol-sync';
 
 import { LoginActions } from '@ucap/ng-store-authentication';
-import { addEventSuccess } from '../Chatting/actions';
+import * as ChattingAction from '../Chatting/actions';
-
 import { RoomSelector } from '../state';
 
 import {
@@ -78,7 +77,9 @@ import {
   delMultiSuccess,
   delMultiFailure,
   selectedRoom,
-  room2Success
+  room2Success,
+  selectedRoomSuccess,
+  clearSelectedRoom
 } from './actions';
 import { Router } from '@angular/router';
 import { LocaleCode } from '@ucap/core';
@@ -104,7 +105,38 @@ export class Effects {
           };
 
           // retrieve room info
-          this.store.dispatch(room({ req }));
+          this.roomProtocolService
+            .info2(req)
+            .pipe(
+              map((res) => {
+                let isJoinRoom = true;
+                if (!res.roomInfo || !res.roomInfo.isJoinRoom) {
+                  isJoinRoom = false;
+                }
+
+                if (!!isJoinRoom) {
+                  this.store.dispatch(
+                    selectedRoomSuccess({
+                      roomId: req.roomId,
+                      roomInfo2Res: res
+                    })
+                  );
+                } else {
+                  // is not join room. so, redirect chat main.
+                  this.router.navigate([
+                    'chat',
+                    {
+                      outlets: { content: 'index' }
+                    }
+                  ]);
+                  this.store.dispatch(
+                    clearSelectedRoom({ roomId: req.roomId })
+                  );
+                }
+              }),
+              catchError((error) => of(roomFailure({ error })))
+            )
+            .subscribe();
 
           // retrieve event info >> chatting.effect.selectedRoom$
         })
@@ -113,6 +145,24 @@ export class Effects {
     { dispatch: false }
   );
 
+  selectedRoomSuccess$ = createEffect(
+    () => {
+      return this.actions$.pipe(
+        ofType(selectedRoomSuccess),
+        tap((action) => {
+          // room info success reduce.
+          this.store.dispatch(
+            room2Success({
+              roomInfo: action.roomInfo2Res.roomInfo,
+              roomUserInfo: action.roomInfo2Res.roomUserInfo
+            })
+          );
+        })
+      );
+    },
+    { dispatch: false }
+  );
+
   rooms$ = createEffect(() => {
     return this.actions$.pipe(
       ofType(rooms),
@@ -237,7 +287,9 @@ export class Effects {
       exhaustMap((req) => {
         return this.roomProtocolService.exit(req).pipe(
           switchMap((res: DeleteResponse) => [
+            // close room, clear chatting
             close({ roomIds: [res.roomId] }),
+            // clear room in rooms.
             delSuccess({ res })
           ]),
           catchError((error) => of(delFailure({ error })))
@@ -253,7 +305,9 @@ export class Effects {
       exhaustMap((req) => {
         return this.roomProtocolService.exitAll(req).pipe(
           switchMap((res: DeleteMultiResponse) => [
+            // close room, clear chatting
             close({ roomIds: res.roomIds }),
+            // clear room in rooms.
             delMultiSuccess({ res })
           ]),
           catchError((error) => of(delMultiFailure({ error })))
@@ -430,7 +484,7 @@ export class Effects {
   addEventSuccess$ = createEffect(
     () => {
       return this.actions$.pipe(
-        ofType(addEventSuccess),
+        ofType(ChattingAction.addEventSuccess),
         withLatestFrom(this.store.pipe(select(RoomSelector.rooms))),
         map(([action, roomList]) => {
           const roomId = action.roomId;

projects/store-chat/src/lib/store/room/reducers.ts

@@ -26,7 +26,8 @@ import {
   delMultiSuccess,
   updateSuccess,
   room2Success,
-  createSuccess
+  createSuccess,
+  updateUnreadCount
 } from './actions';
 import { Info, EventJson } from '@ucap/protocol-event';
 import { ChatUtil } from '../../utils/chat.util';
@@ -53,7 +54,6 @@ export const reducer = createReducer(
       const value = state.rooms.entities[key];
       unreadTotal += isNaN(value.noReadCnt) ? 0 : value.noReadCnt;
     }
-    action.roomList.map((item) => (unreadTotal += item.noReadCnt));
 
     return {
       ...state,
@@ -324,6 +324,32 @@ export const reducer = createReducer(
     };
   }),
 
+  on(updateUnreadCount, (state, action) => {
+    const roomId = action.roomId;
+    const noReadCnt = action.noReadCnt || 0;
+    const roomInfo = state.rooms.entities[roomId];
+
+    let unreadTotal = 0;
+    // tslint:disable-next-line: forin
+    for (const key in state.rooms.entities) {
+      const value = state.rooms.entities[key];
+      unreadTotal += isNaN(value.noReadCnt) ? 0 : value.noReadCnt;
+    }
+
+    if (!!roomInfo) {
+      return {
+        ...state,
+        rooms: adapterRoom.updateOne(
+          { id: roomId, changes: { ...roomInfo, noReadCnt } },
+          { ...state.rooms }
+        ),
+        unreadTotal
+      };
+    } else {
+      return state;
+    }
+  }),
+
   /*******************************************************************
    * [Chatting Action watching.]
    *******************************************************************/

projects/ui-chat/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ucap/ng-ui-chat",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "publishConfig": {
     "registry": "https://nexus.loafle.net/repository/npm-ucap/"
   },

projects/ui-chat/src/lib/components/room-expansion.component.ts

@@ -90,6 +90,20 @@ export class RoomExpansionComponent implements OnInit, OnDestroy {
           this.nodeMap.set(item.division, [node]);
         }
       }
+
+      // deleted filtering.
+      this.nodeMap = new Map(
+        [...this.nodeMap.entries()].filter(
+          (map) => list.findIndex((item) => item.division === map[0]) > -1
+        )
+      );
+
+      // sorting.
+      this.nodeMap = new Map(
+        [...this.nodeMap.entries()].sort((a, b) =>
+          b[0] > a[0] ? 1 : b[0] < a[0] ? -1 : 0
+        )
+      );
     }
     this.refreshNodes();
   }

projects/ui-organization/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ucap/ng-ui-organization",
-  "version": "0.0.83",
+  "version": "0.0.84",
   "publishConfig": {
     "registry": "https://nexus.loafle.net/repository/npm-ucap/"
   },

projects/ui-organization/src/lib/components/profile-01.component.html

@@ -1,7 +1,48 @@
 <div class="ucap-organization-profile-01-container">
   <!--Profile -->
-  <div class="profile-card-box">
+  <div class="profile-card-content">
-    <div class="user-profile-info">
+    <div *ngIf="!isMe" class="btn-profile-option-area">
+      <div class="btn-profile-favorites">
+        <button
+          mat-icon-button
+          class="btn-star-add"
+          aria-label="Example icon-button with a heart icon"
+          *ngIf="isBuddy"
+          (click)="onToggleFavorit()"
+        >
+          <mat-icon>star_border</mat-icon>
+        </button>
+        <button
+          mat-icon-button
+          class="btn-star-add"
+          aria-label="Example icon-button with a heart icon"
+          (click)="onClickAddBuddy()"
+        >
+          <mat-icon>star</mat-icon>
+        </button>
+      </div>
+      <div class="btn-group-add">
+        <button
+          mat-icon-button
+          class="btn-group-add"
+          aria-label="Example icon-button with a heart icon"
+          *ngIf="getShowBuddyToggleBtn('DEL')"
+          (click)="onClickDelBuddy()"
+        >
+          <img src="../../../assets/images/ico/btn_group_add.svg" />
+        </button>
+        <button
+          mat-icon-button
+          class="btn-star-delete"
+          aria-label="Example icon-button with a heart icon"
+          *ngIf="getShowBuddyToggleBtn('DEL')"
+          (click)="onClickDelBuddy()"
+        >
+          <img src="../../../assets/images/ico/btn_group_delete.svg" />
+        </button>
+      </div>
+    </div>
+    <div class="user-profile-info-area">
       <!--[[ 대화상대 프로필-->
       <!-- 모바일이 온라인일 경우 + mobile-ing -->
       <div class="user-profile-thumb">
@@ -11,13 +52,10 @@
           [matTooltip]="presenceMsg"
           matTooltipPosition="after"
         ></span>
-        <div class="profileImage" (click)="onProfileImageView()">
+        <div class="profile-image" (click)="onProfileImageView()">
-          <img
+          <img src="../../../assets/images/ico/img_nophoto.svg" />
-            src="../../../assets/images/ico/img_nophoto.svg"
-            style="width: 122px; height: 122px;"
-          />
         </div>
-        <!--[[ 내프로필-->
+        <!--[[ 내프로필]-->
         <div *ngIf="isMe" class="btn-profile-ctrl">
           <button
             mat-mini-fab
@@ -37,7 +75,7 @@
         <!--]]-->
       </div>
       <!--]]-->
-      <div class="userInfo">
+      <div class="user-info">
         <div class="user-n-g">
           <div class="name">{{ userInfo?.name }}</div>
           <div class="grade">{{ userInfo?.grade }}</div>
@@ -46,8 +84,8 @@
 
         <ng-container *ngIf="!isMe">
           <!-- + 대화상대 프로필 추가 -->
-          <div class="nickName">
+          <div class="nickname-area">
-            <div class="nickName-info">
+            <div class="nickname-info">
               <mat-form-field
                 class="example-full-width my-in-input"
                 appearance="none"
@@ -70,7 +108,6 @@
               <mat-icon>create</mat-icon>
             </button>
           </div>
-          <!--]]-->
         </ng-container>
         <ng-container
           *ngIf="isMe; then mineProfileIntro; else otherProfileIntro"
@@ -106,36 +143,9 @@
           </div>
         </ng-template>
       </div>
-
-      <div *ngIf="!isMe" class="btn-profile-add">
-        <button
-          mat-icon-button
-          class="btn-star-add"
-          aria-label="Example icon-button with a heart icon"
-          *ngIf="isBuddy"
-          (click)="onToggleFavorit()"
-        >
-          <img src="../../../assets/images/ico/btn_favorite_w24_s.svg" alt="" />
-        </button>
-        <button
-          mat-icon-button
-          class="btn-star-add"
-          aria-label="Example icon-button with a heart icon"
-          *ngIf="getShowBuddyToggleBtn('ADD')"
-          (click)="onClickAddBuddy()"
-        >
-          <img src="../../../assets/images/ico/btn_group_add_w24.svg" alt="" />
-        </button>
-        <button
-          mat-icon-button
-          class="btn-star-add"
-          aria-label="Example icon-button with a heart icon"
-          *ngIf="getShowBuddyToggleBtn('DEL')"
-          (click)="onClickDelBuddy()"
-        >
-          <img src="../../../assets/images/ico/btn_group_add_w24.svg" alt="" />
-        </button>
     </div>
+
+    <div class="btn-link-area">
       <div *ngIf="!isMe" class="btn-partner-set">
         <button mat-icon-button aria-label="chat" (click)="onOpenChat()">
           <img src="../../../assets/images/ico/btn_lise_chat_a24.svg" alt="" />
@@ -169,7 +179,25 @@
           <img src="../../../assets/images/ico/btn_list_vc-a24.svg" alt="" />
         </button>
       </div>
+      <div *ngIf="isMe" class="btn-my-set">
+        <button mat-icon-button aria-label="mytalk">
+          <img src="../../../assets/images/ico/btn_lise_chat_a24.svg" alt="" />
+        </button>
+        <button mat-icon-button aria-label="profile_set">
+          <img
+            src="../../../assets/images/ico/btn_list_profile_set_a24.svg"
+            alt=""
+          />
+        </button>
+        <button mat-icon-button aria-label="setting">
+          <img
+            src="../../../assets/images/ico/btn_list_setting_a24.svg"
+            alt=""
+          />
+        </button>
       </div>
+    </div>
+
     <div class="user-profile-info-list">
       <ul>
         <li>

projects/ui-organization/src/lib/components/profile-01.component.scss

@@ -3,119 +3,66 @@
 .ucap-organization-profile-01-container {
   width: 100%;
   height: 100%;
-
   min-width: 450px;
+
   @include screen(mid) {
     height: auto;
   }
 
-  .profile-card-box {
+  .profile-card-content {
     display: flex;
     flex-direction: column;
-    padding: 60px 8.7%;
     width: 100%;
     position: relative;
-    .user-profile-info {
+    .btn-profile-option-area {
+      position: absolute;
+      right: 0;
+      display: flex;
+      justify-content: flex-end;
+    }
+
+    .user-profile-info-area {
       display: inline-flex;
       flex-direction: row;
       align-items: center;
       // Profile thumb//////////////////
       .user-profile-thumb {
+        display: flex;
+        align-self: flex-start;
+        .profile-image {
+          display: flex;
+          align-items: flex-start;
+        }
       }
       //////////////////Profile thumb //
-      .userInfo {
+      .user-info {
         display: flex;
         flex-direction: column;
         align-items: flex-start;
         justify-content: center;
-        padding-left: 38px;
         .user-n-g {
           display: flex;
+          flex-direction: row;
           flex-flow: row-reverse nowrap;
           align-items: flex-end;
-          height: 44px;
           .name {
-            font: {
-              size: 26px;
-              weight: 600;
-            }
             order: 1;
             -ms-flex-order: 1;
           }
-          .grade {
-            font: {
-              size: 18px;
         }
-            color: #f1f1f1;
+        .nickname-area {
-            margin-left: 6px;
-            order: 0;
-            -ms-flex-order: 0;
-          }
-          & + .deptName {
-            margin-top: 9px;
-          }
-        }
-        .deptName {
-          font: {
-            size: 22px;
-          }
-
-          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);
-            font: {
-              size: 14px;
-            }
-          }
-          button {
-          }
-        }
-        .address-txt {
-          font: {
-            size: 16px;
-          }
-
-          line-height: 21px;
-          margin-top: 20px;
-        }
-      }
-      .btn-profile-add {
-        position: absolute;
-        z-index: 5;
-        top: 40px;
-        right: 40px;
-        button {
-          margin: 0 2px;
-          &.btn-star-add {
-            line-height: 24px !important;
         }
       }
     }
   }
-    .btn-partner-set {
+  .btn-links-area {
+    .btn-partner-set,
+    .btn-my-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;
-      }
     }
     .my-input {
       display: flex;
@@ -123,65 +70,28 @@
       justify-content: space-between;
       margin: 0;
       width: 100%;
-      margin-top: 78px;
-      .my-in-input {
-        font: {
-          size: 16px;
-        }
 
+      .my-in-input {
         flex-grow: 1;
-        height: 24px;
-        line-height: 24px;
-        margin-top: 8px;
       }
       button {
-        margin-bottom: 5px;
       }
     }
     .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;
-          span {
-            width: 100px;
-            height: 34px;
-            border-radius: 18px;
-            border: solid 1px #f8f9fd;
-            background-color: #aaa0a5;
-            font: {
-              size: 14px;
-              weight: 600;
-            }
-            font-weight: 600;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            margin-right: 40px;
-          }
-        }
       }
     }
   }
 
   ///////////////////////////////////////////////////////////////////////////////// 제거
   .profile-card {
-    //mat-card
     width: 100%;
     background-color: transparent;
     box-shadow: none;
     .profileImage {
-      width: 126px;
-      height: 126px;
-      border-radius: 50%;
       box-sizing: border-box;
       overflow: hidden;
       display: flex;

projects/ui-organization/src/lib/components/profile-list-item-01.component.html

@@ -1,5 +1,5 @@
 <div class="ucap-organization-profile-list-item-01-container">
-  <div class="user-profile-info">
+  <div class="user-profile-info-content">
     <div class="profile-image">
       <ng-content
         select="[ucapOrganizationProfileListItem01='profileImage']"
@@ -23,7 +23,7 @@
     <div class="companyName">{{ userInfo.companyName }}</div>
     <div class="email">{{ userInfo.email }}</div>
   </div>
-  <div class="contact">
+  <div class="contact-info">
     <div class="mobileNumber" (click)="onSendCall($event, CallType.Mobile)">
       {{ userInfo.hpNumber | ucapPhoneNumber }}
     </div>
@@ -31,7 +31,7 @@
       {{ userInfo.lineNumber | ucapPhoneNumber }}
     </div>
   </div>
-  <div *ngIf="checkable">
+  <div *ngIf="checkable" class="checkbox-area">
     <mat-checkbox
       #checkbox
       [checked]="checked"

projects/ui-organization/src/lib/components/profile-list-item-01.component.scss

@@ -6,25 +6,19 @@
 .ucap-organization-profile-list-item-01-container {
   width: 100%;
   height: 100%;
+  padding-left: var(--ucap-organization-profile-list-item-01-padding);
+  padding-right: var(--ucap-organization-profile-list-item-01-padding);
 
   display: flex;
   flex-flow: row nowrap;
   justify-content: space-between;
   padding: 0;
-  height: 70px;
   align-items: center;
-  &.line-top {
-    border-top: 1px solid #cccccc;
-  }
-  &.line-bottom {
-    border-bottom: 1px solid #cccccc;
-  }
 
-  .user-profile-info {
+  .user-profile-info-content {
     display: inline-flex;
     flex-direction: row;
-    flex-grow: 1.07;
+    flex-grow: 1.6;
-    padding-left: 17px;
 
     .profile-image {
       width: var(--ucap-organization-profile-list-item-01-size);
@@ -36,22 +30,13 @@
       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;
-
         .user-name {
           // @include ellipsis-column(1);
-          height: 22px;
-          font: {
-            size: 14px;
-            weight: 600;
-          }
-          color: #212121;
           order: 1;
           -ms-flex-order: 1;
         }
@@ -59,11 +44,6 @@
         .user-grade {
           // @include ellipsis(1);
           align-self: stretch;
-          font: {
-            size: 13px;
-          }
-          color: #707070;
-          margin-left: 4px;
           order: 0;
           -ms-flex-order: 0;
         }
@@ -71,42 +51,19 @@
 
       .dept-name {
         // @include ellipsis(1);
-        font: {
-          size: 12px;
-        }
-        color: #666666;
-        line-height: 16px;
       }
     }
   }
 
   .company-info {
     flex-grow: 1.4;
-    padding-left: 16px;
     position: relative;
-    font: {
-      size: 14px;
   }
-    color: #333333;
+  .contact-info {
-    &:before {
-      content: '';
-      width: 1px;
-      height: 36px;
-      position: absolute;
-      left: 0;
-      top: calc(50% - 18px);
-      border-left: 1px solid #cccccc;
-    }
-  }
-  .contact {
     flex-grow: 1;
-    font: {
-      size: 14px;
   }
-    color: #333333;
+  .checkbox-area {
-  }
+    flex: 0 0 20px;
-  .chk-box {
-    flex: 0 0 56px;
     display: flex;
     justify-content: center;
   }

projects/ui-organization/src/lib/components/profile-selection-01.component.ts

@@ -44,7 +44,6 @@ export class ProfileSelection01ActionsDirective {}
 export class ProfileSelection01Component implements OnInit, OnDestroy {
   @Input()
   set userInfoList(value: UserInfo[]) {
-    console.log('userInfoList', value);
     this._userInfoList = value;
   }
   // tslint:disable-next-line: variable-name

projects/ui-organization/src/lib/components/search-for-tenant.component.html

@@ -46,7 +46,7 @@
   <div class="btn-search-container">
     <button
       mat-flat-button
-      color="primary"
+      color="accent"
       class="btn-search"
       (click)="onClickSearch($event)"
     >

projects/ui-organization/src/lib/components/search-for-tenant.component.scss

@@ -24,9 +24,9 @@
   .company-container {
     box-sizing: border-box;
 
-    flex: 1 1 20%;
+    flex: 1 1 24%;
-    max-width: 20%;
+    max-width: 24%;
-    min-width: 20%;
+    min-width: 24%;
 
     @media only screen and (min-width: 1025px) {
       flex: 1 1 260px;
@@ -42,10 +42,9 @@
 
     .form-field-select-company {
       width: 100%;
-      @include ucapMatSelect(
+      height: 100%;
-        var(--ucap-organization-search-for-tenant-height, 38px),
+      display: flex;
-        0 12px
+      align-items: center;
-      );
     }
   }
 
@@ -54,18 +53,7 @@
     box-sizing: border-box;
 
     .form-field-input-searchword {
-      @include ucapMatFormField(
+      width: 100%;
-        0px solid #cccccc,
-        0,
-        100%,
-        auto,
-        auto,
-        100%,
-        100%
-      );
-      .btn-close {
-        margin-top: 2px;
-      }
     }
   }
 

projects/ui-organization/src/lib/components/tree.component.scss

@@ -1,16 +1,16 @@
 @import '~@ucap/ng-ui-material/material';
 
 .ucap-organization-tree-container {
-  padding-left: 17px;
+  padding-left: 16px;
   height: 100%;
 
   .mat-tree {
     background-color: transparent;
-    padding-right: 17px;
+    padding-right: 16px;
 
     &:before {
       content: '';
-      width: 21px;
+      width: 20px;
       height: 100%;
       border-left: 1px solid #ccc;
       border-right: 1px solid #ccc;
@@ -22,7 +22,7 @@
 
     &:after {
       content: '';
-      width: 21px;
+      width: 20px;
       height: 100%;
       border-left: 1px solid #ccc;
       border-right: 1px solid #ccc;

projects/ui-skin-default/src/assets/scss/partials/_search-frame.scss

@@ -1,4 +1,4 @@
-$search-font-size: 14px;
+/*$search-font-size: 14px;
 
 @mixin list-search {
   display: flex;
@@ -150,3 +150,4 @@ $search-font-size: 14px;
     }
   }
 }
+*/

projects/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ucap/ng-ui",
-  "version": "0.0.19",
+  "version": "0.0.24",
   "publishConfig": {
     "registry": "https://nexus.loafle.net/repository/npm-ucap/"
   },

projects/ui/src/lib/ui.module.ts

@@ -1,6 +1,8 @@
 import { NgModule, ModuleWithProviders } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
+import { FlexLayoutModule } from '@angular/flex-layout';
+
 import { MatButtonModule } from '@angular/material/button';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatCardModule } from '@angular/material/card';
@@ -104,6 +106,8 @@ export class UiRootModule {}
   imports: [
     CommonModule,
 
+    FlexLayoutModule,
+
     MatButtonModule,
     MatButtonToggleModule,
     MatCardModule,