fix: 모바일 화면에서 로그인 실패시 에러 메시지 출력

BCSDLab · Mar 22, 2024 · adaa78f · adaa78f
1 parent 83084e1
commit adaa78f
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/src/page/Auth/Login/Login.module.scss b/src/page/Auth/Login/Login.module.scss
@@ -71,7 +71,7 @@
 
       @include media.media-breakpoint-down(mobile) {
         border: none;
-        border-bottom: 1px solid #d2dae2;
+        border-bottom: 1px solid #f7941e;
       }
     }
 
@@ -98,10 +98,6 @@
   &__error-message {
     font-size: 12px;
     color: #f7941e;
-
-    @include media.media-breakpoint-down(mobile) {
-      display: none;
-    }
   }
 
   &__icon {
@@ -136,7 +132,7 @@
     &--login {
       @include media.media-breakpoint-down(mobile) {
         background: #f7941e;
-        margin-top: 48px;
+        margin-top: 38px;
       }
     }
   }
@@ -190,6 +186,10 @@
       }
     }
   }
+
+  &__error {
+    height: 10px;
+  }
 }
 
 .option {

diff --git a/src/page/Auth/Login/index.tsx b/src/page/Auth/Login/index.tsx
@@ -83,7 +83,7 @@ export default function Login() {
           </div>
           <div className={styles['form__auto-login']}>
             {(isError || !!isFormError) && (
-            <div className={styles['form__error-message']}>{loginError || emailError}</div>
+              <div className={styles['form__error-message']}>{loginError || emailError}</div>
             )}
             <label className={styles['form__auto-login__label']} htmlFor="auto-login">
               <input
@@ -96,6 +96,11 @@ export default function Login() {
               자동로그인
             </label>
           </div>
+          <div className={styles.form__error}>
+            {isMobile && (isError || !!isFormError) && (
+              <div className={styles['form__error-message']}>{loginError || emailError}</div>
+            )}
+          </div>
           <button
             className={cn({
               [styles.form__button]: true,