Merge branch 'master' of https://git.loafle.net/ucap-web/next-ucap-messenger

projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.scss

@@ -3,6 +3,12 @@ $tablet-l-width: 1024px;
 $tablet-s-width: 768px;
 $mob-l-width: 640px;
 
+@mixin tab {
+  @media screen and (max-width: #{$tablet-l-width}), (max-height: #{$tablet-s-width}) {
+    @content;
+  }
+}
+
 .login {
   width: 100%;
   background-size: cover;
@@ -84,7 +90,7 @@ $ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
     background-size: auto 133.3333%;
     background-position: center;
     background-repeat: none;
-    transform: scale(0.75);
+    transform: scale(0.70);
     transition: transform $time/4 $ease-in-out, box-shadow $time/4 $ease-in-out,
       opacity $time/4 step-end;
     opacity: 0;
@@ -264,52 +270,60 @@ $ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
 
 ::ng-deep .login-form-box {
   position: absolute;
-  width: 30vw;
+  width: 26vw;
   height: 70%;
   top: 15%;
   right: 15%;
   display: flex;
   justify-content: flex-end;
   z-index: 100;
-  @media screen and (max-width: #{$tablet-l-width}), (max-height: 800px) {
+  @media screen and (max-width: #{$desktop-l-width}) {
+    width: 28vw;
+  }
+
+  @media screen and (max-width: #{$tablet-l-width}), (max-height: $tablet-s-width) {
     width: 34vw;
   }
   .mat-form-field {
-    &:last-child,
-    &:first-child {
-      margin-top: 10px;
-    }
-    .mat-form-field-infix {
-      padding-top: 0;
-      border: 0;
-      input {
-        line-height: 1em;
-        @media screen and (max-width: #{$tablet-l-width}), (max-height: 800px) {
-          font-size: 0.9em;
-        }
+    padding-top: 20px;
+    .mat-form-field-wrapper {
+      padding-bottom: 0;
+      .mat-form-field-infix {
+        padding-top: 0;
+        border: 0;
       }
       .mat-form-field-label-wrapper {
-        @media screen and (max-width: #{$tablet-l-width}), (max-height: 800px) {
-          font-size: 0.9em;
-          top: -1em;
-        }
+        top: -1.4em;
       }
-      .mat-form-field-subscript-wrapper {
-        .mat-error {
-          @media screen and (max-width: #{$tablet-l-width}), (max-height: 800px) {
+      .mat-form-field-underline {
+        bottom: 0;
+      }
+      //min-size 반응형 적용
+      @include tab {
+        .mat-form-field-infix {
+          input {
+            font-size: 0.9em;
+          }
+        }
+        .mat-form-field-label-wrapper {
+          font-size: 0.9em;
+        }
+        .mat-form-field-subscript-wrapper {
+          .mat-error {
             font-size: 0.8em;
           }
         }
+        &.mat-focused,
+        &:not(.mat-form-field-hide-placeholder) {
+          .mat-form-field-label-wrapper {
+            font-size: 0;
+          }
+        }
       }
     }
-    &.mat-focused,
-    &:not(.mat-form-field-hide-placeholder) {
-      .mat-form-field-label-wrapper {
-        @media screen and (max-width: #{$tablet-l-width}), (max-height: 800px) {
-          font-size: 0;
-        }
-      }
-    }
+  }
+  .error-container {
+    padding-top: 10px;
   }
 }
 

projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss

@@ -275,6 +275,7 @@ $daesang-grey: (
     cursor: pointer;
   }
 
+  //snackbar
   .cdk-global-overlay-wrapper {
     align-items: center !important;
     justify-content: center !important;

projects/ucap-webmessenger-ui-account/src/lib/components/login.component.scss

@@ -3,15 +3,22 @@ $tablet-l-width: 1024px;
 $tablet-s-width: 768px;
 $mob-l-width: 640px;
 $login-max-height: 800px;
+
+@mixin desktop-m {
+  @media screen and (max-width: #{$desktop-l-width}) {
+    @content;
+  }
+}
+
 // 태블릿
 @mixin tab {
-  @media screen and (max-width: #{$tablet-l-width}), (max-height: #{$login-max-height}) {
+  @media screen and (max-width: #{$tablet-l-width}) {
     @content;
   }
 }
 
 // 모바일 large
-@mixin mob-large {
+@mixin mob-l {
   @media screen and (max-width: #{$mob-l-width}) {
     @content;
   }
@@ -31,7 +38,7 @@ $login-max-height: 800px;
   font-size: 14px;
 
   .mat-title {
-    margin: 10px 0 40px 0;
+    margin: 10px 0 10px 0;
     text-indent: -10000000px;
     width: 140px;
     height: 140px;
@@ -39,6 +46,7 @@ $login-max-height: 800px;
     display: inline-flex;
     background-size: 100% auto;
     flex: 1 1 auto;
+    background-position-x: center;
   }
 
   form {
@@ -47,10 +55,10 @@ $login-max-height: 800px;
 
     mat-form-field {
       width: 100%;
-      &.login-id {
-        margin-bottom: 10px;
+      &.login-pw {
+        margin-top: 10px;
         @media screen and (max-width: #{$tablet-s-width}) {
-          margin-bottom: 0;
+          margin-top: 0;
         }
       }
     }
@@ -130,8 +138,9 @@ $login-max-height: 800px;
     opacity: 0.7;
     padding: 6px;
     border-radius: 100px;
-    width: 68%;
-    color: #2d3a4a;
+    width: 72%;
+    color: #333333;
+    font-size: 0.86em;
     &:hover {
       opacity: 1;
     }
@@ -146,8 +155,13 @@ $login-max-height: 800px;
     }
   }
 }
-// 모바일 large
-@include mob-large {
+
+@include desktop-m {
+  .login-form {
+    .mat-title {
+      background-size: 86% auto;
+    }
+  }
 }
 
 @include tab {
@@ -173,7 +187,8 @@ $login-max-height: 800px;
       width: 100%;
       margin-left: -12%;
       font-size: 0.9em;
-      padding: 6px;
+      padding: 0px;
+      line-height: 3em;
     }
   }
 }

projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.scss

@@ -11,8 +11,8 @@ $tablet-l-width: 1024px;
     display: inline-flex;
     margin-right: 20px;
     justify-items: center;
-    width: 80px;
     justify-content: space-between;
+    flex: 0 0 auto;
     @media screen and (max-width: #{$tablet-l-width}), (max-height: 800px) {
       margin-right: 10px;
     }
@@ -20,8 +20,11 @@ $tablet-l-width: 1024px;
       width: 24px;
       height: 24px;
       line-height: normal;
-      margin-right: 6px;
+      margin-right: 12px;
       color: rgb(0, 0, 0, 0.7);
+      @media screen and (max-width: #{$tablet-l-width}) {
+        margin-right: 6px;
+      }
       .mat-icon {
         font-size: 20px;
         color: rgb(0, 0, 0, 0.87);

projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.ts

@@ -5,7 +5,8 @@ import {
   Output,
   EventEmitter,
   ViewChildren,
-  ChangeDetectorRef
+  ChangeDetectorRef,
+  ChangeDetectionStrategy
 } from '@angular/core';
 import {
   RoomInfo,
@@ -18,7 +19,7 @@ import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
 import { TranslatePipe } from 'projects/ucap-webmessenger-ui/src/lib/pipes/translate.pipe';
 import {
-  TranslateService as uiTranslateService,
+  TranslateService as UcapUiTranslateService,
   StringUtil
 } from '@ucap-webmessenger/ui';
 import { TranslateService } from '@ngx-translate/core';
@@ -27,7 +28,8 @@ import { EventType } from '@ucap-webmessenger/protocol-event';
 @Component({
   selector: 'ucap-room-list-item',
   templateUrl: './list-item.component.html',
-  styleUrls: ['./list-item.component.scss']
+  styleUrls: ['./list-item.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ListItemComponent implements OnInit {
   @Input()
@@ -58,7 +60,7 @@ export class ListItemComponent implements OnInit {
 
   constructor(
     private logger: NGXLogger,
-    private uiTranslateService: uiTranslateService,
+    private ucapUiTranslateService: UcapUiTranslateService,
     private translateService: TranslateService,
     private changeDetectorRef: ChangeDetectorRef
   ) {}
@@ -125,7 +127,7 @@ export class ListItemComponent implements OnInit {
 
   getRoomNameByRoomUser(roomUserInfos: (RoomUserInfo | UserInfoShort)[]) {
     let roomName = new TranslatePipe(
-      this.uiTranslateService,
+      this.ucapUiTranslateService,
       this.changeDetectorRef
     ).transform(roomUserInfos, 'name', ',');