From ccc7b981fdfac2c053586ce8f6b5b93a98836ad2 Mon Sep 17 00:00:00 2001
From: khk <khk@gmail.com>
Date: Tue, 31 Dec 2019 15:49:48 +0900
Subject: [PATCH] =?UTF-8?q?=EC=9C=84=EC=A0=AF-=20=EB=A7=88=EC=9D=B4?=
 =?UTF-8?q?=ED=94=84=EB=A1=9C=ED=95=84=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../my-profile-widget.component.html          | 19 ++++++-
 .../my-profile-widget.component.scss          | 52 ++++++++++++++-----
 2 files changed, 55 insertions(+), 16 deletions(-)

diff --git a/projects/ucap-webmessenger-ui-profile/src/lib/components/my-profile-widget.component.html b/projects/ucap-webmessenger-ui-profile/src/lib/components/my-profile-widget.component.html
index 4c4bd682..d9114857 100644
--- a/projects/ucap-webmessenger-ui-profile/src/lib/components/my-profile-widget.component.html
+++ b/projects/ucap-webmessenger-ui-profile/src/lib/components/my-profile-widget.component.html
@@ -1,5 +1,5 @@
 <div class="myprofile">
-  <span class="myprofile-img">
+  <span class="myprofile-img thumbnail-mask">
     <img
       class="thumbnail"
       ucapImage
@@ -8,5 +8,20 @@
       [default]="'assets/images/img_nophoto_50.png'"
     />
   </span>
-  <span>내프로필</span>
+  <div class="btn-setting">
+    <span class="presence pcOff"></span>
+    <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="M6 9l6 6 6-6" />
+    </svg>
+  </div>
 </div>
diff --git a/projects/ucap-webmessenger-ui-profile/src/lib/components/my-profile-widget.component.scss b/projects/ucap-webmessenger-ui-profile/src/lib/components/my-profile-widget.component.scss
index 209015a3..6b5b3019 100644
--- a/projects/ucap-webmessenger-ui-profile/src/lib/components/my-profile-widget.component.scss
+++ b/projects/ucap-webmessenger-ui-profile/src/lib/components/my-profile-widget.component.scss
@@ -1,26 +1,50 @@
 .myprofile {
-  position: absolute;
-  display: flex;
-  flex-flow: column;
-  justify-content: center;
-  height: 80px;
-  width: 68px;
+  position: relative;
+  flex-flow: row;
+  width: 60px;
+  height: 30px;
   bottom: 10px;
   color: #ffffff;
   font-size: 11px;
-  text-align: center;
+  justify-items: flex-end;
+  margin: 0 10px;
 
   .myprofile-img {
     display: block;
     border-radius: 10px;
-    height: 42px;
-    width: 42px;
+    height: 30px;
+    width: 30px;
     background-color: #efefef;
-    align-self: center;
-    margin-bottom: 6px;
-
-    .thumbnail {
-      border-radius: 10px;
+    &.thumbnail-mask {
+      border-radius: 50%;
+      width: 30px;
+      height: 30px;
+      overflow: hidden;
+      .thumbnail {
+        width: 30px;
+        height: auto;
+      }
+    }
+  }
+  .btn-setting {
+    position: absolute;
+    bottom: 0;
+    display: inline-flex;
+    justify-items: flex-end;
+    left: 20px;
+    .presence {
+      display: inline-block;
+      bottom: 0;
+      width: 10px;
+      height: 11px;
+      border: 1px solid #ffffff;
+      align-self: flex-end;
+    }
+    svg {
+      padding-left: 6px;
+      &.on {
+        transform: rotate(180deg);
+      }
     }
   }
 }