0530 sync

2020-05-31 18:35:45 +09:00 · 2020-05-31 18:35:45 +09:00 · cbe1ddbd29
commit cbe1ddbd29
parent 5733157489
22 changed files with 321 additions and 303 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -3508,8 +3508,8 @@
      "dev": true
    },
    "@ucap/ng-store-chat": {
-      "version": "file:pack/ucap-ng-store-chat-0.0.16.tgz",
-      "integrity": "sha512-Rwupo2Gqa+4+0ANBZLtup+mdlTU42Tj5gkGnJJ86Vylo4xQcdR+PUdedWZ/lG7DyzrfBc8ON80aUPRikpWUCow==",
+      "version": "file:pack/ucap-ng-store-chat-0.0.19.tgz",
+      "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",
-      "integrity": "sha512-UuZSzWM4tBR+e5Z/1PFdNenHS00Pn4K7dTafIicG29YjHE5sTXXRqjDCVrKNxJQoMSEPWjUj7qnTgYwP2U83Vg==",
+      "version": "file:pack/ucap-ng-ui-0.0.24.tgz",
+      "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",
-      "integrity": "sha512-uXtqUm3O0l/7jIh9KAXrxFxma/EAtnwpr1c30gOSxDcsMgp/Tuuqb/7YjI2AOIYHaq9iWX0yNNab1ijH5Pcj+g==",
+      "version": "file:pack/ucap-ng-ui-chat-0.0.13.tgz",
+      "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",
-      "integrity": "sha512-ls2xfMNbceUecR0Vrhm/qzbKDJmBENtA4Y0ODVKVgjui8IQnS/EXGXSeNS+rFrnASTlI2XHWiaVHFqdZi/4ipQ==",
+      "version": "file:pack/ucap-ng-ui-organization-0.0.84.tgz",
+      "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",
--- a/package.json
+++ b/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",
--- a/projects/store-chat/package.json
+++ b/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/"
  },
--- a/projects/store-chat/src/lib/store/chatting/effects.ts
+++ b/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>,
--- a/projects/store-chat/src/lib/store/chatting/reducers.ts
+++ b/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 })
+    };
  })
 );
--- a/projects/store-chat/src/lib/store/room/actions.ts
+++ b/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 }>()
+);
--- a/projects/store-chat/src/lib/store/room/effects.ts
+++ b/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;
--- a/projects/store-chat/src/lib/store/room/reducers.ts
+++ b/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.]
   *******************************************************************/
--- a/projects/ui-chat/package.json
+++ b/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/"
  },
--- a/projects/ui-chat/src/lib/components/room-expansion.component.ts
+++ b/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();
  }
--- a/projects/ui-organization/package.json
+++ b/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/"
  },
--- a/projects/ui-organization/src/lib/components/profile-01.component.html
+++ b/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="user-profile-info">
+  <div class="profile-card-content">
+    <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()">
-          <img
-            src="../../../assets/images/ico/img_nophoto.svg"
-            style="width: 122px; height: 122px;"
-          />
+        <div class="profile-image" (click)="onProfileImageView()">
+          <img src="../../../assets/images/ico/img_nophoto.svg" />
        </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-info">
+          <div class="nickname-area">
+            <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>

-      <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>
--- a/projects/ui-organization/src/lib/components/profile-01.component.scss
+++ b/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;
-            margin-left: 6px;
-            order: 0;
-            -ms-flex-order: 0;
-          }
-          & + .deptName {
-            margin-top: 9px;
-          }
        }
-        .deptName {
-          font: {
-            size: 22px;
-          }
-
-          line-height: 25px;
-          font-weight: 600;
-        }
-        .nickName {
+        .nickname-area {
          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;
--- a/projects/ui-organization/src/lib/components/profile-list-item-01.component.html
+++ b/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"
--- a/projects/ui-organization/src/lib/components/profile-list-item-01.component.scss
+++ b/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;
-    padding-left: 17px;
+    flex-grow: 1.6;

    .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;
-    &:before {
-      content: '';
-      width: 1px;
-      height: 36px;
-      position: absolute;
-      left: 0;
-      top: calc(50% - 18px);
-      border-left: 1px solid #cccccc;
-    }
  }
-  .contact {
+  .contact-info {
    flex-grow: 1;
-    font: {
-      size: 14px;
-    }
-    color: #333333;
  }
-  .chk-box {
-    flex: 0 0 56px;
+  .checkbox-area {
+    flex: 0 0 20px;
    display: flex;
    justify-content: center;
  }
--- a/projects/ui-organization/src/lib/components/profile-selection-01.component.ts
+++ b/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
--- a/projects/ui-organization/src/lib/components/search-for-tenant.component.html
+++ b/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)"
    >
--- a/projects/ui-organization/src/lib/components/search-for-tenant.component.scss
+++ b/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%;
-    max-width: 20%;
-    min-width: 20%;
+    flex: 1 1 24%;
+    max-width: 24%;
+    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(
-        var(--ucap-organization-search-for-tenant-height, 38px),
-        0 12px
-      );
+      height: 100%;
+      display: flex;
+      align-items: center;
    }
  }

@ -54,18 +53,7 @@
    box-sizing: border-box;

    .form-field-input-searchword {
-      @include ucapMatFormField(
-        0px solid #cccccc,
-        0,
-        100%,
-        auto,
-        auto,
-        100%,
-        100%
-      );
-      .btn-close {
-        margin-top: 2px;
-      }
+      width: 100%;
    }
  }

--- a/projects/ui-organization/src/lib/components/tree.component.scss
+++ b/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;
--- a/projects/ui-skin-default/src/assets/scss/partials/_search-frame.scss
+++ b/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;
    }
  }
 }
+*/
--- a/projects/ui/package.json
+++ b/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/"
  },
--- a/projects/ui/src/lib/ui.module.ts
+++ b/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,