위젯- 마이프로필 수정

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>

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);
+      }
     }
   }
 }