기능추가 :: 프로필 > 즐겨찾기 등록/해제, 동료추가 / 삭제

2019-11-20 14:57:54 +09:00 · 2019-11-20 14:57:54 +09:00 · 47ff1d3e4a
commit 47ff1d3e4a
parent 2f72ee7ae6
6 changed files with 395 additions and 87 deletions
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/profile/profile.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/profile/profile.dialog.component.html
@ -5,5 +5,7 @@
  [isBuddy]="isBuddy"
  [isFavorit]="isFavorit"
  (openChat)="onClickChat($event)"
+  (toggleFavorit)="onClickToggleFavorit($event)"
+  (toggleBuddy)="onClickToggleBuddy($event)"
 >
 </ucap-profile-profile>
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/profile/profile.dialog.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/profile/profile.dialog.component.ts
@ -1,4 +1,4 @@
-import { Component, OnInit, Inject, ViewChild } from '@angular/core';
+import { Component, OnInit, Inject, ViewChild, OnDestroy } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
 import { KEY_LOGIN_RES_INFO } from '@app/types/login-res-info.type';
 import { KEY_VER_INFO } from '@app/types/ver-info.type';
@ -7,17 +7,20 @@ import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 import { Store, select } from '@ngrx/store';
 import * as AppStore from '@app/store';
 import * as ChatStore from '@app/store/messenger/chat';
+import * as SyncStore from '@app/store/messenger/sync';

-import { UserInfo } from '@ucap-webmessenger/protocol-sync';
+import { UserInfo, GroupDetailData } from '@ucap-webmessenger/protocol-sync';
 import {
  UserInfoSS,
  UserInfoF,
  UserInfoDN
 } from '@ucap-webmessenger/protocol-query';
-import { DialogService } from '@ucap-webmessenger/ui';
+import { DialogService, ConfirmDialogComponent, ConfirmDialogData, ConfirmDialogResult } from '@ucap-webmessenger/ui';
 import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
 import { map } from 'rxjs/operators';
+import { Subscription } from 'rxjs';
+import { SelectGroupDialogComponent, SelectGroupDialogData, SelectGroupDialogResult } from '../group/select-group.dialog.component';

 export interface ProfileDialogData {
  userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN;
@ -30,13 +33,15 @@ export interface ProfileDialogResult {}
  templateUrl: './profile.dialog.component.html',
  styleUrls: ['./profile.dialog.component.scss']
 })
-export class ProfileDialogComponent implements OnInit {
+export class ProfileDialogComponent implements OnInit, OnDestroy {
  loginRes: LoginResponse;
  sessionVerinfo: VersionInfo2Response;
  isMe: boolean;
  isBuddy: boolean;
  isFavorit: boolean;

+  selectAllBuddy2Subscription: Subscription;
+
  constructor(
    public dialogRef: MatDialogRef<ProfileDialogData, ProfileDialogResult>,
    @Inject(MAT_DIALOG_DATA) public data: ProfileDialogData,
@ -55,18 +60,26 @@ export class ProfileDialogComponent implements OnInit {
  ngOnInit() {
    this.isMe = this.loginRes.userSeq === this.data.userInfo.seq;

-    this.store.pipe(
-      select(AppStore.MessengerSelector.SyncSelector.selectAllBuddy2),
-      map(buddyList => {
-        const users = buddyList.filter(
-          buddy => buddy.seq === this.data.userInfo.seq
-        );
-        this.isBuddy = users.length > 0;
-        if (this.isBuddy) {
-          this.isFavorit = users[0].isFavorit;
-        }
-      })
-    );
+    this.selectAllBuddy2Subscription = this.store
+      .pipe(
+        select(AppStore.MessengerSelector.SyncSelector.selectAllBuddy2),
+        map(buddyList => {
+          const users = buddyList.filter(
+            buddy => buddy.seq === this.data.userInfo.seq
+          );
+          this.isBuddy = users.length > 0;
+          if (this.isBuddy) {
+            this.isFavorit = users[0].isFavorit;
+          }
+        })
+      )
+      .subscribe();
+  }
+
+  ngOnDestroy(): void {
+    if (!!this.selectAllBuddy2Subscription) {
+      this.selectAllBuddy2Subscription.unsubscribe();
+    }
  }

  onClickChat(userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN) {
@ -80,4 +93,71 @@ export class ProfileDialogComponent implements OnInit {

    this.dialogRef.close();
  }
+
+  onClickToggleFavorit(param: {
+    userInfo: UserInfo | UserInfoF;
+    isFavorit: boolean;
+  }) {
+    this.store.dispatch(
+      SyncStore.updateBuddy({
+        seq: param.userInfo.seq,
+        isFavorit: param.isFavorit
+      })
+    );
+  }
+
+  async onClickToggleBuddy(param: {
+    userInfo: UserInfo | UserInfoF;
+    isBuddy: boolean;
+  }) {
+    if (param.isBuddy) {
+      // 동료추가.
+      const result = await this.dialogService.open<
+        SelectGroupDialogComponent,
+        SelectGroupDialogData,
+        SelectGroupDialogResult
+      >(SelectGroupDialogComponent, {
+        width: '600px',
+        data: {
+          title: 'Group Select'
+        }
+      });
+
+      if (!!result && !!result.choice && result.choice) {
+        if (!!result.group) {
+          const oldGroup: GroupDetailData = result.group;
+          const trgtUserSeq: number[] = [];
+          result.group.userSeqs.map(seq => trgtUserSeq.push(seq));
+          trgtUserSeq.push(param.userInfo.seq);
+
+          this.store.dispatch(
+            SyncStore.updateGroupMember({
+              oldGroup,
+              trgtUserSeq
+            })
+          );
+        }
+      }
+    } else {
+      // 동료삭제.
+      const result = await this.dialogService.open<
+        ConfirmDialogComponent,
+        ConfirmDialogData,
+        ConfirmDialogResult
+      >(ConfirmDialogComponent, {
+        width: '360px',
+        data: {
+          title: 'Delete Buddy',
+          html: `[${param.userInfo.name} ${param.userInfo.grade}]를 그룹에서 삭제하시겠습니까?<br/>프로필에서 삭제하면 모든 그룹에서 삭제됩니다.`
+        }
+      });
+
+      if (!!result && !!result.choice && result.choice) {
+        this.store.dispatch(
+          SyncStore.delBuddyAndClear({ seq: param.userInfo.seq })
+        );
+        this.isBuddy = false
+      }
+    }
+  }
 }
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/sync/actions.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/sync/actions.ts
@ -176,6 +176,19 @@ export const delBuddyFailure = createAction(
  '[Messenger::Sync] Buddy Del Failure',
  props<{ error: any }>()
 );
+/** 동료 삭제 및 그룹 클리어.(in profile) */
+export const delBuddyAndClear = createAction(
+  '[Messenger::Sync] Buddy Del and Group Clear',
+  props<{ seq: number }>()
+);
+export const delBuddyAndClearSuccess = createAction(
+  '[Messenger::Sync] Buddy Del and Group Clear Success',
+  props<BuddyDelResponse>()
+);
+export const delBuddyAndClearFailure = createAction(
+  '[Messenger::Sync] Buddy Del and Group Clear Failure',
+  props<{ error: any }>()
+);
 /** 동료 변경(즐겨찾기) */
 export const updateBuddy = createAction(
  '[Messenger::Sync] Buddy Update',
--- a/projects/ucap-webmessenger-app/src/app/store/messenger/sync/effects.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/messenger/sync/effects.ts
@ -1,4 +1,3 @@
-import { openTimer } from './../room/actions';
 import { Injectable } from '@angular/core';

 import { Actions, ofType, createEffect } from '@ngrx/effects';
@ -48,7 +47,8 @@ import {
  updateGroupMember,
  delGroup,
  delGroupFailure,
-  delGroupSuccess
+  delGroupSuccess,
+  delBuddyAndClear
 } from './actions';
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 import { LoginInfo, KEY_LOGIN_INFO } from '@app/types';
@ -727,6 +727,54 @@ export class Effects {
    )
  );

+  delBuddyAndClear$ = createEffect(
+    () => {
+      return this.actions$.pipe(
+        ofType(delBuddyAndClear),
+        withLatestFrom(
+          this.store.pipe(
+            select(
+              (state: any) =>
+                state.messenger.sync.group2.entities as Dictionary<
+                  GroupDetailData
+                >
+            )
+          )
+        ),
+        tap(([req, groupList]) => {
+          // tslint:disable-next-line: forin
+          for (const key in groupList) {
+            const group: GroupDetailData = groupList[key];
+            if (group.userSeqs.indexOf(req.seq) > -1) {
+              // Group Clear..
+              this.store.dispatch(
+                updateGroup({
+                  groupSeq: group.seq,
+                  groupName: group.name,
+                  userSeqs: group.userSeqs.filter(
+                    userSeq => userSeq !== req.seq
+                  )
+                })
+              );
+            }
+          }
+
+          // Favorit Clear..
+          this.store.dispatch(
+            updateBuddy({
+              seq: req.seq,
+              isFavorit: false
+            })
+          );
+
+          // Buddy Clear..
+          this.store.dispatch(delBuddy({ userSeqs: [req.seq] }));
+        })
+      );
+    },
+    { dispatch: false }
+  );
+
  updateBuddy$ = createEffect(() =>
    this.actions$.pipe(
      ofType(updateBuddy),
--- a/projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.html
+++ b/projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.html
@ -9,71 +9,147 @@

  <mat-card-content>
    <div class="profile-img">
-      <img ucapImage [base]="profileImageRoot" [path]="userInfo.profileImageFile"
-        [default]="'assets/images/img_nophoto_50.png'" />
+      <img
+        ucapImage
+        [base]="profileImageRoot"
+        [path]="userInfo.profileImageFile"
+        [default]="'assets/images/img_nophoto_50.png'"
+      />
    </div>
-    <!-- 내프로필의 경우<div class="profile-option">이 없음 -->
-    <div class="profile-option">
-      <span class="btn-favorite">
-        <!--즐겨찾기 추가버튼 추가된 상태: svg에 class="on"-->
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
-          stroke="currentColor" stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
+
+    <div *ngIf="!isMe" class="profile-option">
+      <span *ngIf="isBuddy" class="btn-favorite" (click)="onToggleFavorit()">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="butt"
+          stroke-linejoin="round"
+          [ngClass]="[isFavorit ? 'on' : '']"
+        >
          <polygon
-            points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
-          </polygon>
+            points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
+          ></polygon>
        </svg>
      </span>
      <span class="btn-groupadd">
-        <!--친구 추가 버튼-->
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
-          stroke="currentColor" stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round" class="on">
-          <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
-          <circle cx="8.5" cy="7" r="4"></circle>
-          <line x1="20" y1="8" x2="20" y2="14"></line>
-          <line x1="23" y1="11" x2="17" y2="11"></line>
-        </svg>
-        <!--친구 삭제 버튼-->
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
-          stroke="currentColor" stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
-          <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
-          <circle cx="8.5" cy="7" r="4"></circle>
-          <line x1="23" y1="11" x2="17" y2="11"></line>
-        </svg>
+        <ng-container [ngSwitch]="isBuddy">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="butt"
+            stroke-linejoin="round"
+            class="on"
+            *ngSwitchCase="false"
+            (click)="onClickAddBuddy()"
+          >
+            <!-- not buddy -->
+            <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+            <circle cx="8.5" cy="7" r="4"></circle>
+            <line x1="20" y1="8" x2="20" y2="14"></line>
+            <line x1="23" y1="11" x2="17" y2="11"></line>
+          </svg>
+
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="butt"
+            stroke-linejoin="round"
+            class="on"
+            *ngSwitchCase="true"
+            (click)="onClickDelBuddy()"
+          >
+            <!-- is buddy -->
+            <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+            <circle cx="8.5" cy="7" r="4"></circle>
+            <line x1="23" y1="11" x2="17" y2="11"></line>
+          </svg>
+        </ng-container>
      </span>
    </div>

    <ul>
      <li>
-        <!--<mat-icon>chat</mat-icon>-->
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
-          stroke="currentColor" stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
-          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="butt"
+          stroke-linejoin="round"
+        >
+          <path
+            d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
+          ></path>
        </svg>
        {{ userInfo.intro }}
      </li>
      <li>
-        <!--<mat-icon>email</mat-icon>-->
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
-          stroke="currentColor" stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
-          <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="butt"
+          stroke-linejoin="round"
+        >
+          <path
+            d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
+          ></path>
          <polyline points="22,6 12,13 2,6"></polyline>
        </svg>
        {{ userInfo.email }}
      </li>
      <li>
-        <!--<mat-icon>local_phone</mat-icon>-->
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
-          stroke="currentColor" stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="butt"
+          stroke-linejoin="round"
+        >
          <path
-            d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z">
-          </path>
+            d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"
+          ></path>
        </svg>
        {{ userInfo.lineNumber }}
      </li>
      <li>
-        <!--<mat-icon>phone_android</mat-icon>-->
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
-          stroke="currentColor" stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="butt"
+          stroke-linejoin="round"
+        >
          <rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect>
          <line x1="12" y1="18" x2="12" y2="18"></line>
        </svg>
@ -84,47 +160,103 @@

  <mat-card-actions>
    <div fxFlex fxLayout="row" fxLayoutAlign="space-around center">
-      <button mat-mini-fab class="mat-elevation-z" [matTooltip]="isMe ? 'MyTalk' : '1:1 대화'" matTooltipPosition="above"
-        (click)="onClickOpenChat()">
-        <!--<mat-icon>chat</mat-icon>-->
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
-          stroke="currentColor" stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
+      <button
+        mat-mini-fab
+        class="mat-elevation-z"
+        [matTooltip]="isMe ? 'MyTalk' : '1:1 대화'"
+        matTooltipPosition="above"
+        (click)="onClickOpenChat()"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="butt"
+          stroke-linejoin="round"
+        >
          <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">
-          </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"
+          ></path>
        </svg>
      </button>

-      <button mat-mini-fab class="mat-elevation-z" *ngIf="!isMe" matTooltip="전화" matTooltipPosition="above"
-        (click)="onClickCall()">
-        <!--<mat-icon>call</mat-icon>-->
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
-          stroke="currentColor" stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
+      <button
+        mat-mini-fab
+        class="mat-elevation-z"
+        *ngIf="!isMe"
+        matTooltip="전화"
+        matTooltipPosition="above"
+        (click)="onClickCall()"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="butt"
+          stroke-linejoin="round"
+        >
          <path
-            d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z">
-          </path>
+            d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"
+          ></path>
        </svg>
      </button>

-      <button mat-mini-fab class="mat-elevation-z" *ngIf="!isMe" matTooltip="화상회의" matTooltipPosition="above"
-        (click)="onClickVideoConference()">
-        <!--<mat-icon>videocam</mat-icon>-->
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
-          stroke="currentColor" stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
+      <button
+        mat-mini-fab
+        class="mat-elevation-z"
+        *ngIf="!isMe"
+        matTooltip="화상회의"
+        matTooltipPosition="above"
+        (click)="onClickVideoConference()"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="butt"
+          stroke-linejoin="round"
+        >
          <path
-            d="M15.6 11.6L22 7v10l-6.4-4.5v-1zM4 5h9a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7c0-1.1.9-2 2-2z" />
+            d="M15.6 11.6L22 7v10l-6.4-4.5v-1zM4 5h9a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7c0-1.1.9-2 2-2z"
+          />
        </svg>
      </button>

-      <button mat-mini-fab class="mat-elevation-z" *ngIf="!isMe" matTooltip="쪽지" matTooltipPosition="above"
-        (click)="onClickMessage()">
-        <!--<mat-icon>sms</mat-icon>-->
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
-          stroke="currentColor" stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
+      <button
+        mat-mini-fab
+        class="mat-elevation-z"
+        *ngIf="!isMe"
+        matTooltip="쪽지"
+        matTooltipPosition="above"
+        (click)="onClickMessage()"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="butt"
+          stroke-linejoin="round"
+        >
          <line class="st0" x1="18" y1="2" x2="9.2" y2="10.8" />
          <polygon class="st0" points="18,2 12.4,18 9.2,10.8 2,7.6 " />
        </svg>
      </button>
    </div>
  </mat-card-actions>
-</mat-card>
+</mat-card>
--- a/projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.ts
+++ b/projects/ucap-webmessenger-ui-profile/src/lib/components/profile.component.ts
@ -22,10 +22,20 @@ export class ProfileComponent implements OnInit {
  @Input()
  isFavorit: boolean;
  @Input()
-  userInfo: UserInfo | UserInfoSS | UserInfoF | UserInfoDN;
+  userInfo: UserInfo | UserInfoF;

  @Output()
-  openChat = new EventEmitter<UserInfo | UserInfoSS | UserInfoF | UserInfoDN>();
+  openChat = new EventEmitter<UserInfo | UserInfoF>();
+  @Output()
+  toggleFavorit = new EventEmitter<{
+    userInfo: UserInfo | UserInfoF;
+    isFavorit: boolean;
+  }>();
+  @Output()
+  toggleBuddy = new EventEmitter<{
+    userInfo: UserInfo | UserInfoF;
+    isBuddy: boolean;
+  }>();

  constructor() {}

@ -40,4 +50,27 @@ export class ProfileComponent implements OnInit {
  onClickVideoConference() {}

  onClickMessage() {}
+
+  onToggleFavorit() {
+    this.isFavorit = !this.isFavorit;
+
+    this.toggleFavorit.emit({
+      userInfo: this.userInfo,
+      isFavorit: this.isFavorit
+    });
+  }
+
+  onClickAddBuddy() {
+    this.toggleBuddy.emit({
+      userInfo: this.userInfo,
+      isBuddy: true
+    });
+  }
+
+  onClickDelBuddy() {
+    this.toggleBuddy.emit({
+      userInfo: this.userInfo,
+      isBuddy: false
+    });
+  }
 }