From a14148389bde1fe9bbfebfffc3b9e5f0d06e97de Mon Sep 17 00:00:00 2001
From: richard-loafle <44828666+richard-loafle@users.noreply.github.com>
Date: Wed, 5 Feb 2020 11:38:51 +0900
Subject: [PATCH 1/2] bug fixed

---
 .../src/lib/components/list-item.component.ts        | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.ts b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.ts
index 3b4a72a4..6d6d11ac 100644
--- a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.ts
+++ b/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', ',');
 

From fb5dda3eb98602820b49930ca22a2ca071daf987 Mon Sep 17 00:00:00 2001
From: khk <khk@gmail.com>
Date: Wed, 5 Feb 2020 11:46:16 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8-=20=EB=B0=98?=
 =?UTF-8?q?=EC=9D=91=ED=98=95(inputbox=20=EC=88=98=EC=A0=95)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/login.page.component.scss      | 74 +++++++++++--------
 .../src/assets/scss/global/_default.scss      |  1 +
 .../src/lib/components/login.component.scss   | 37 +++++++---
 .../src/lib/components/form.component.scss    |  7 +-
 4 files changed, 76 insertions(+), 43 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.scss b/projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.scss
index 544a5551..b1617f40 100644
--- a/projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.scss
+++ b/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;
   }
 }
 
diff --git a/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss b/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
index 18272614..528140bc 100644
--- a/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
+++ b/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;
diff --git a/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.scss b/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.scss
index 97957da7..13f0bcc6 100644
--- a/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.scss
+++ b/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;
     }
   }
 }
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.scss
index 6c45d0cd..48ec081b 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.scss
+++ b/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);