Merge pull request #146 from kss761036/Basic-김승석-sprint4

[김승석] Sprint4
codeit-bootcamp-frontend · Nov 18, 2024 · fad4e65 · fad4e65
2 parents ef4f691 + 275f094
commit fad4e65
Show file tree

Hide file tree

Showing 9 changed files with 238 additions and 57 deletions.
diff --git a/css/_mixin.scss b/css/_mixin.scss
@@ -1,24 +1,24 @@
 @import "./variable";
 
-@mixin mobile {
+@mixin mini {
     @media screen and (max-width: #{$breakpoint-mobile - 1px}) {
         @content;
     }
 }
 
-@mixin tablet {
+@mixin mobile {
     @media screen and (max-width: #{$breakpoint-tablet - 1px}) {
         @content;
     }
 }
 
-@mixin pc {
+@mixin tablet {
     @media screen and (max-width: #{$breakpoint-pc - 1px}) {
         @content;
     }
 }
 
-@mixin desktop {
+@mixin pc {
     @media screen and (max-width: #{$breakpoint-desktop - 1px}) {
         @content;
     }

diff --git a/css/style.css b/css/style.css
@@ -641,6 +641,7 @@ img {
 }
 .form_box .form_inp_list > li .desc {
   position: relative;
+  z-index: 2;
 }
 .form_box .form_inp_list > li .desc .btn {
   position: absolute;
@@ -654,6 +655,28 @@ img {
 .form_box .form_inp_list > li .desc .btn.active {
   background: url(/img/btn_visibility_on.svg) no-repeat 50% 50%/24px;
 }
+.form_box .form_inp_list > li .err_box {
+  position: relative;
+  height: 32px;
+  margin-top: -32px;
+  padding: 8px 16px 0px;
+  color: #F74747;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.7142;
+  transition: all 0.2s;
+  opacity: 0;
+}
+.form_box .form_inp_list > li.err .desc > .inp {
+  border-color: #F74747;
+}
+.form_box .form_inp_list > li.err .err_box {
+  margin-top: 0px;
+  opacity: 1;
+}
+.form_box .form_inp_list > li.suc .desc > .inp {
+  border-color: var(--blue);
+}
 .form_box .form_inp_list > li + li {
   margin-top: 24px;
 }

diff --git a/css/style.css.map b/css/style.css.map
diff --git a/css/style.scss b/css/style.scss
@@ -33,12 +33,12 @@ img {display: block;}
 .inp.blue:focus {border: 1px solid var(--blue);}
 /* button태그 기본디자인 */
 .btn_sml {display: block; width: 128px; padding: 12px 20px; background-color: var(--blue); border-radius: 8px; color: var(--gray100); font-size: 16px; font-weight: 600; line-height: 1.5; text-align: center; transition: all 0.2s;
-    @include tablet {
+    @include mobile {
         width: 82px;
     }
 }
 .btn_lg {display: block; width: 357px; padding: 12px 20px; background-color: var(--blue); border-radius: 50px; color: var(--gray100); font-size: 20px; font-weight: 600; line-height: 1.6; text-align: center; transition: all 0.2s;
-    @include tablet {
+    @include mobile {
         width: 240px; font-size: 18px;
     }
 }
@@ -54,10 +54,10 @@ img {display: block;}
 .header {position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 70px; background-color: #fff; transition: all 0.2s;}
 .header.scr {box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15);}
 .header > .hd_inner {display : flex; align-items: center; justify-content: space-between; max-width: 1120px; width: 100%; height: 100%; margin: 0 auto;
-    @include pc {
+    @include tablet {
         padding-left: 24px; padding-right: 24px;
     }
-    @include tablet {
+    @include mobile {
         padding-left: 16px; padding-right: 16px;
     }
 }
@@ -78,7 +78,7 @@ img {display: block;}
             > img {max-width: 746px; width: 100%;}
         }
     }
-    @include pc {
+    @include tablet {
         height: auto; padding-top: 84px; text-align: center;
         .bgbox_inner {
             flex-direction: column; align-items: center;
@@ -95,7 +95,7 @@ img {display: block;}
             }
         }
     }
-    @include tablet {
+    @include mobile {
         padding-top: 48px;
         .bgbox_inner {
             .cont { 
@@ -114,130 +114,130 @@ img {display: block;}
 }
 
 .main_mid {
-    @include pc {
+    @include tablet {
         background-color: #fcfcfc;
     }
 }
 .main_mid > .mid_inner {
     max-width: 988px; width: 100%; margin: 0 auto;
-    @include pc {
+    @include tablet {
         padding: 24px 24px 56px;
     }
-    @include tablet {
+    @include mobile {
         padding: 52px 16px 83px;
     }
 }
 .main_mid .main_list > li {
     padding: 138px 0;
-    @include pc {
+    @include tablet {
         padding: 0;
     }
 }
 .main_mid .main_list > li + li {
-    @include pc {
+    @include tablet {
         padding-top: 52px; 
     }
-    @include tablet {
+    @include mobile {
         padding-top: 40px;
     }
 }
 .main_mid .main_list > li > .box {
     overflow: hidden; display : flex; align-items: center; justify-content: space-between; gap: 64px; background-color: #FCFCFC; border-radius: 12px;
-    @include pc {
+    @include tablet {
         display: block; gap:0; border-radius: 0;
     }
 }
 .main_mid .main_list > li .thum {
-    @include pc {
+    @include tablet {
         overflow: hidden; margin-bottom: 24px; border-radius: 14px; 
     }
-    @include tablet {
+    @include mobile {
         border-radius: 7px;
     }
 }
 .main_mid .main_list > li .thum img {
     display: block; height: 444px;
-    @include pc {
+    @include tablet {
         width: 100%; height: auto;
     }
 }
 .main_mid .main_list > li .cont {
     flex:1; padding-right: 42px; word-break: keep-all;
-    @include pc {
+    @include tablet {
         padding-right: 0;
     }
 }
 .main_mid .main_list > li:nth-child(even) .cont {
     order: -1; padding-left: 42px; padding-right: 0; text-align: right;
-    @include pc {
+    @include tablet {
         padding-left: 0;
     }
 }
 .main_mid .main_list > li .cont .cate {
     margin-bottom: 12px; color: var(--blue); font-size: 18px; font-weight: 700; line-height: 1.4444;
-    @include pc {
+    @include tablet {
         margin-bottom: 16px;
     }
-    @include tablet {
+    @include mobile {
         margin-bottom: 8px; font-size: 16px; line-height: 1.625;
     }
 }
 .main_mid .main_list > li .cont .tit {
     margin-bottom: 24px; font-size: 40px; font-weight: 700; line-height: 1.4;
-    @include pc {
+    @include tablet {
         font-size: 32px; line-height: 1.3125;
     }
-    @include tablet {
+    @include mobile {
         margin-bottom: 16px; font-size: 24px; line-height: 1.3333;
     }
 }
 .main_mid .main_list > li .cont .desc {
     font-size: 24px; font-weight: 500; line-height: 1.3333;
-    @include pc {
+    @include tablet {
         font-size: 18px; line-height: 1.4444;
     }
-    @include tablet {
+    @include mobile {
         font-size: 16px; line-height: 1.625;
     }
 }
 
 .main_bgbox.main_btm {
     position: relative; margin-top: 138px;
-    @include pc {
+    @include tablet {
         margin-top: 0;
         padding-top: 201px;
     }
-    @include tablet {
+    @include mobile {
         padding-top: 121px;
     }
 }
 .main_bgbox.main_btm::before {
     content: ''; position: absolute; bottom: 100%; left: 0; display: block; width: 100%; height: 138px; background-color: #fcfcfc;
-    @include pc {
+    @include tablet {
         display: none;
     }
 }
 .main_bgbox.main_btm .cont {
     padding-bottom: 172.5px;
-    @include pc {
+    @include tablet {
         padding-bottom: 0;
     }
 }
 .main_bgbox.main_btm .cont .tit > br {
-    @include pc {
+    @include tablet {
         display: block;
     }
 }
 .main_bgbox.main_btm .thum {
-    @include pc {
+    @include tablet {
         padding-top: 217px;
     }
-    @include tablet {
+    @include mobile {
         padding-top: 131px;
     }
 }
 .main_bgbox.main_btm .thum > img {
-    @include pc {
+    @include tablet {
         min-width: auto;
     }
 }
@@ -270,13 +270,13 @@ img {display: block;}
         }
     }
 
-    @include pc {
+    @include tablet {
         height: auto; padding: 32px 0 108px;
         > .ft_inner {
             padding: 0 104px;
         }
     }
-    @include tablet {
+    @include mobile {
         padding: 32px 0;
         > .ft_inner {
             flex-wrap: wrap; justify-content: space-between; padding: 0 32px;
@@ -299,7 +299,7 @@ img {display: block;}
 /* 로그인, 회원가입 */
 .form_section {
     max-width: 640px; width: 100%; margin: 0 auto; padding: 150px 0;
-    @include tablet { 
+    @include mobile { 
         max-width: 400px; padding: 70px 16px;
     }
 }
@@ -309,7 +309,7 @@ img {display: block;}
     img {
         height: 132px;
     }
-    @include tablet {
+    @include mobile {
         margin-bottom: 24px;
         img {
             height: 66px; 
@@ -323,19 +323,35 @@ img {display: block;}
             display: block; margin-bottom: 16px; font-size: 18px; font-weight: 700; line-height: 1.4444;
         }
         .desc {
-            position: relative;
+            position: relative; z-index: 2;
             .btn {
                 position: absolute; right: 24px; top: 50%; width: 24px; height: 24px; background: url(/img/btn_visibility_off.svg) no-repeat 50% 50% / 24px; transform: translateY(-50%);
             }
             .btn.active {
                 background: url(/img/btn_visibility_on.svg) no-repeat 50% 50% / 24px;
             }
         }
+        .err_box {
+            position: relative; height: 32px; margin-top: -32px; padding: 8px 16px 0px; color: #F74747; font-size: 14px; font-weight: 600; line-height: 1.7142; transition: all 0.2s; opacity: 0;
+        }
     }
+    > li.err {
+        .desc {
+            > .inp {border-color: #F74747;}
+        }
+        .err_box {
+            margin-top: 0px; opacity: 1;
+        }
+    }
+    > li.suc {
+        .desc {
+            > .inp {border-color: var(--blue);}
+        }
+    } 
     > li + li {
         margin-top: 24px;
     }
-    @include tablet {
+    @include mobile {
         > li {
             .tit {
                 margin-bottom: 8px; font-size: 14px; font-weight: 700; line-height: 1.7142;
@@ -349,7 +365,7 @@ img {display: block;}
 
 .form_box .form_btn {
     margin-top: 24px;
-    @include tablet {
+    @include mobile {
         margin-top: 16px;
     }
 }

diff --git a/items.html b/items.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ko">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>판다마켓</title>
 </head>
 <body>
 

diff --git a/login.html b/login.html
@@ -7,6 +7,7 @@
 
     <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.min.css" />
     <link rel="stylesheet" href="/css/style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
 </head>
 <body>
     <article class="form_section">
@@ -19,6 +20,7 @@
                         <div class="desc">
                             <input type="text" name="" id="panda_email" class="inp blue" placeholder="이메일을 입력해주세요">
                         </div>
+                        <div class="err_box"></div>
                     </li>
                     <li>
                         <label class="tit" for="panda_password">비밀번호</label>
@@ -28,10 +30,11 @@
                                 <div class="hidden">비밀번호 확인하기 및 가리기 버튼</div>
                             </button>
                         </div>
+                        <div class="err_box"></div>
                     </li>
                 </ul>
                 <div class="form_btn">
-                    <button class="a_btn btn_lg w100" type="submit" disabled>로그인</button>
+                    <button data-link="/items.html" class="a_btn btn_lg w100" type="submit" disabled>로그인</button>
                 </div>
                 <div class="form_simple">
                     <p>간편 로그인하기</p>