로그인- 반응형(inputbox 수정)

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,53 +270,61 @@ $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;
-    }
+    padding-top: 20px;
+    .mat-form-field-wrapper {
+      padding-bottom: 0;
       .mat-form-field-infix {
         padding-top: 0;
         border: 0;
+      }
+      .mat-form-field-label-wrapper {
+        top: -1.4em;
+      }
+      .mat-form-field-underline {
+        bottom: 0;
+      }
+      //min-size 반응형 적용
+      @include tab {
+        .mat-form-field-infix {
           input {
-        line-height: 1em;
-        @media screen and (max-width: #{$tablet-l-width}), (max-height: 800px) {
             font-size: 0.9em;
           }
         }
         .mat-form-field-label-wrapper {
-        @media screen and (max-width: #{$tablet-l-width}), (max-height: 800px) {
           font-size: 0.9em;
-          top: -1em;
-        }
         }
         .mat-form-field-subscript-wrapper {
           .mat-error {
-          @media screen and (max-width: #{$tablet-l-width}), (max-height: 800px) {
             font-size: 0.8em;
           }
         }
-      }
-    }
         &.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;
+  }
 }
 
 @media all and (max-width: 1400px) {

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