로그인 (미디어쿼리적용)

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

@@ -1,3 +1,8 @@
+$desktop-l-width: 1440px;
+$tablet-l-width: 1024px;
+$tablet-s-width: 768px;
+$mob-l-width: 640px;
+
 .login {
   width: 100%;
   background-size: cover;
@@ -37,16 +42,16 @@ $ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
 
 .slider {
   position: relative;
-  height: 100vh;
+  height: 100%;
-  width: 100vw;
+  width: 100%;
   background: $main;
   overflow: hidden;
 
   &_wrap {
     position: absolute;
-    width: 100vw;
+    width: 100%;
-    height: 100vh;
+    height: 100%;
-    transform: translateX(100vw);
+    transform: translateX(100%);
     top: 0%;
     left: 0;
     right: auto;
@@ -135,6 +140,9 @@ $ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
   &_link {
     cursor: pointer;
     position: absolute;
+    display: flex;
+    justify-content: center;
+    justify-items: center;
     font-family: $heebo;
     font-size: 1.2rem;
     letter-spacing: $base * 0.1;
@@ -146,7 +154,8 @@ $ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
     border-radius: 100px;
     color: #00dbed;
     width: $base * 5;
-
+    // next버튼 숨김
+    display: none;
     &:before {
       content: '';
       border-top: 1px solid white;
@@ -170,8 +179,8 @@ $ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
   &_slide {
     position: absolute;
     left: 0;
-    height: 100vh;
+    height: 100%;
-    width: 100vw;
+    width: 100%;
     transition: transform $time/3 $ease-in-out;
     transition-delay: $time/3;
     pointer-events: none;
@@ -192,7 +201,7 @@ $ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
         transition-delay: $time/2 !important;
       }
       .slider_inner {
-        transform: scale(0.6);
+        transform: scale(0.7);
         box-shadow: 0 $base/3 $base * 1 rgba(darken($accent, 50%), 0.2);
         pointer-events: auto;
         opacity: 1;
@@ -255,19 +264,50 @@ $ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
 
 ::ng-deep .login-form-box {
   position: absolute;
-  height: 60vh;
+  width: 30vw;
-  top: 20%;
+  height: 70%;
-  right: 20%;
+  top: 15%;
+  right: 15%;
   display: flex;
   justify-content: flex-end;
   z-index: 100;
+  @media screen and (max-width: #{$tablet-l-width}), (max-height: 800px) {
+    width: 34vw;
+  }
   .mat-form-field {
-    &:last-child {
+    &: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;
+        }
+      }
+      .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;
+        }
       }
     }
   }

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

@@ -111,10 +111,10 @@ export class LoginPageComponent implements OnInit, OnDestroy {
     this.protocolService.disconnect();
     this.store.dispatch(logoutInitialize());
 
-    this.rotateInfomationIntervalObject = setInterval(() => {
+    /*this.rotateInfomationIntervalObject = setInterval(() => {
       this.rotateInfomationIndex =
         (this.rotateInfomationIndex + 1) % this.rotateInfomation.length;
-    }, 8000);
+    }, 8000);*/
 
     this.defatulLoginBtnText = this.translateService.instant('accounts.login');
     this.defatulWaitingTime = 5 * 60; // sec

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

@@ -1,7 +1,38 @@
+$desktop-l-width: 1440px;
+$tablet-l-width: 1024px;
+$tablet-s-width: 768px;
+$mob-l-width: 640px;
+$login-max-height: 800px;
+// 태블릿
+@mixin tab {
+  @media screen and (max-width: #{$tablet-l-width}), (max-height: #{$login-max-height}) {
+    @content;
+  }
+}
+
+// 모바일 large
+@mixin mob-large {
+  @media screen and (max-width: #{$mob-l-width}) {
+    @content;
+  }
+}
+
+@include tab {
+  .login-form {
+    width: 34vw;
+    min-width: 34vw;
+    font-size: 0.9em;
+  }
+  .mat-title {
+    width: 14vh;
+    height: 14vh;
+    margin: 10px 0 10px 0;
+  }
+}
 .login-form {
   position: relative;
   transform: scale(1);
-  width: 540px;
+  width: 100%;
   min-width: 100%;
   top: 0;
   right: 0;
@@ -9,14 +40,6 @@
   text-align: center;
   background-color: rgba(255, 255, 255, 1);
   border-radius: 0px;
-  @media all and (max-height: 800px), (max-width: 1400px) {
-    width: 380px;
-    min-width: 380px;
-  }
-  @media all and (max-height: 1000px), (max-width: 1600px) {
-    width: 420px;
-    min-width: 420px;
-  }
 
   .mat-title {
     margin: 10px 0 40px 0;
@@ -28,11 +51,10 @@
     display: inline-flex;
     background-size: 100% auto;
     flex: 1 1 auto;
-    @media all and (max-height: 800px), (max-width: 1400px) {
+    /*@media all and (max-height: 800px), (max-width: 1400px) {
-      width: 120px;
+        width: 14vh;
-      min-width: 120px;
         margin: 10px 0 10px 0;
-    }
+      }*/
   }
 
   form {
@@ -54,7 +76,7 @@
       }
 
       .auto-login {
-        font-size: 13px;
+        font-size: 0.9em;
         font-weight: 600;
         margin-bottom: 2vh;
       }
@@ -134,3 +156,34 @@
     }
   }
 }
+// 모바일 large
+@include mob-large {
+}
+
+@include tab {
+  .login-form {
+    font-size: 0.9em;
+    padding: 12%;
+    .mat-title {
+      width: 14vh;
+      height: 14vh;
+      margin: 10px 0 10px 0;
+    }
+    .mat-form-field .mat-form-field-infix input {
+      font-size: 0.9em;
+    }
+    .policy {
+      position: absolute;
+      bottom: 0;
+      display: block;
+      text-align: center;
+      opacity: 0.7;
+      padding: 0;
+      border-radius: 0;
+      width: 100%;
+      margin-left: -12%;
+      font-size: 0.9em;
+      padding: 6px;
+    }
+  }
+}