Merge pull request #14 from PBTP/styles/tablet

[styles]: phone and tablet responsive styles
PBTP · May 25, 2024 · 1e63e8d · 1e63e8d
2 parents 7a3d4a9 + e8f9d22
commit 1e63e8d
Show file tree

Hide file tree

Showing 10 changed files with 62 additions and 62 deletions.
diff --git a/src/components/Alliance/AllianceBenefit/AllianceBenefit.module.scss b/src/components/Alliance/AllianceBenefit/AllianceBenefit.module.scss
@@ -1,10 +1,10 @@
-@import "/src/styles/responsive.scss";
+@import '/src/styles/responsive.scss';
 
 .AllianceBenefitWrapper {
   padding: 116px 176px;
   background-color: #688edc;
 
-  @include media(phone) {
+  @include media(phone, tablet) {
     padding: 40px 20px;
   }
 
@@ -15,7 +15,7 @@
     font-weight: 700;
     line-height: 30px;
 
-    @include media(phone) {
+    @include media(phone, tablet) {
       font-size: 17px;
       font-weight: 600;
       line-height: 24px;
@@ -30,7 +30,7 @@
     line-height: 48px;
     margin-top: 30px;
 
-    @include media(phone) {
+    @include media(phone, tablet) {
       font-size: 24px;
       font-weight: 700;
       line-height: 32px;
@@ -46,7 +46,7 @@
     justify-content: center;
     gap: 20px;
 
-    @include media(phone) {
+    @include media(phone, tablet) {
       flex-direction: column;
       margin-top: 40px;
       gap: 24px;

diff --git a/src/components/Alliance/AllianceContact/AllianceContact.module.scss b/src/components/Alliance/AllianceContact/AllianceContact.module.scss
@@ -1,10 +1,10 @@
-@import "/src/styles/responsive.scss";
+@import '/src/styles/responsive.scss';
 
 .AllianceContactWrapper {
   background-color: #fefdee;
   padding: 120px 0px 100px 0px;
 
-  @include media(phone) {
+  @include media(phone, tablet) {
     padding: 80px 20px 60px;
   }
 
@@ -17,7 +17,7 @@
       font-size: 22px;
       line-height: 30px;
 
-      @include media(phone) {
+      @include media(phone, tablet) {
         font-size: 17px;
         font-weight: 600;
         line-height: 24px;
@@ -29,7 +29,7 @@
       font-size: 36px;
       line-height: 48px;
 
-      @include media(phone) {
+      @include media(phone, tablet) {
         font-size: 24px;
         line-height: 32px;
       }
@@ -44,7 +44,7 @@
     margin-top: 80px;
     max-width: 460px;
 
-    @include media(phone) {
+    @include media(phone, tablet) {
       margin-top: 48px;
     }
 
@@ -83,7 +83,7 @@
         grid-row-gap: 16px;
         grid-template-columns: repeat(3, minmax(0, 1fr));
 
-        @include media(phone) {
+        @include media(phone, tablet) {
           grid-template-columns: repeat(2, minmax(0, 1fr));
         }
 
@@ -141,7 +141,7 @@
       line-height: 32px;
       transition: background-color 0.3s;
 
-      @include media(phone) {
+      @include media(phone, tablet) {
         margin-top: 48px;
         font-size: 17px;
         font-weight: 600;

diff --git a/src/components/Alliance/AllianceMain/AllianceMain.module.scss b/src/components/Alliance/AllianceMain/AllianceMain.module.scss
@@ -1,9 +1,9 @@
-@import "/src/styles/responsive.scss";
+@import '/src/styles/responsive.scss';
 
 .AllianceMainWrapper {
   padding: 60px 176px;
 
-  @include media(phone) {
+  @include media(phone, tablet) {
     padding: 0px 20px;
   }
 
@@ -14,7 +14,7 @@
     font-weight: 700;
     line-height: 30px;
 
-    @include media(phone) {
+    @include media(phone, tablet) {
       font-size: 17px;
       font-weight: 600;
       line-height: 24px;
@@ -29,7 +29,7 @@
     line-height: 48px;
     margin-top: 30px;
 
-    @include media(phone) {
+    @include media(phone, tablet) {
       font-size: 24px;
       font-weight: 700;
       line-height: 32px;
@@ -45,7 +45,7 @@
     line-height: 32px;
     margin-top: 60px;
 
-    @include media(phone) {
+    @include media(phone, tablet) {
       font-size: 14px;
       font-weight: 400;
       line-height: 20px;
@@ -60,7 +60,7 @@
     display: flex;
     justify-content: space-between;
 
-    @include media(phone) {
+    @include media(phone, tablet) {
       flex-direction: column;
       gap: 40px;
     }
@@ -75,7 +75,7 @@
       font-weight: 700;
       line-height: 32px;
 
-      @include media(phone) {
+      @include media(phone, tablet) {
         flex-direction: column-reverse;
         //gap 값 다시 받아야함
         gap: 24px;
@@ -94,7 +94,7 @@
   > .AllianceMainScheduleContent {
     margin-top: 60px;
 
-    @include media(phone) {
+    @include media(phone, tablet) {
       display: flex;
       flex-direction: column-reverse;
       margin-top: 40px;
@@ -105,7 +105,7 @@
       justify-content: center;
       gap: 36px;
 
-      @include media(phone) {
+      @include media(phone, tablet) {
         display: flex;
         flex-direction: column;
         gap: 24px;
@@ -120,7 +120,7 @@
       line-height: 32px;
       margin-top: 32px;
 
-      @include media(phone) {
+      @include media(phone, tablet) {
         font-size: 17px;
         font-weight: 600;
         line-height: 24px;
@@ -137,7 +137,7 @@
     gap: 90px;
     margin-top: 85px;
 
-    @include media(phone) {
+    @include media(phone, tablet) {
       flex-direction: column;
       gap: 24px;
       margin-top: 40px;
@@ -150,7 +150,7 @@
       font-weight: 400;
       line-height: 32px;
 
-      @include media(phone) {
+      @include media(phone, tablet) {
         font-size: 17px;
         font-weight: 600;
         line-height: 24px;

diff --git a/src/components/Layout/Footer/Footer.module.scss b/src/components/Layout/Footer/Footer.module.scss
@@ -1,11 +1,11 @@
-@import "/src/styles/responsive.scss";
+@import '/src/styles/responsive.scss';
 
 .FooterWrapper {
   background-color: #fff;
   padding: 60px 176px;
   color: #535961;
 
-  @include media(phone) {
+  @include media(phone, tablet) {
     padding: 24px 20px;
   }
 
@@ -52,7 +52,7 @@
     display: flex;
     gap: 16px;
 
-    @include media(phone) {
+    @include media(phone, tablet) {
       font-size: 11px;
       font-weight: 500;
       line-height: 16px;

diff --git a/src/components/Layout/Layout.module.scss b/src/components/Layout/Layout.module.scss
@@ -1,12 +1,12 @@
-@import "./src/styles/responsive.scss";
+@import './src/styles/responsive.scss';
 .LayoutContainer {
-  @include media(phone) {
+  @include media(phone, tablet) {
     background: #fefdee;
   }
 
   > .LayoutMobileApplyLink {
     display: none;
-    @include media(phone) {
+    @include media(phone, tablet) {
       display: block;
       position: fixed;
       bottom: 34px;

diff --git a/src/components/Layout/Nav/Nav.module.scss b/src/components/Layout/Nav/Nav.module.scss
@@ -1,19 +1,19 @@
-@import "/src/styles/theme.scss";
-@import "/src/styles/responsive.scss";
+@import '/src/styles/theme.scss';
+@import '/src/styles/responsive.scss';
 
 .NavContainer {
   width: 100%;
 
   background: #f6f4dc;
-  @include media(phone) {
+  @include media(phone, tablet) {
     background: #fefdee;
   }
   .NavWrapper {
     max-width: 1200px;
     margin: 0 auto;
     display: flex;
     align-items: center;
-    @include media(phone) {
+    @include media(phone, tablet) {
       display: flex;
       justify-content: space-between;
       padding: 20px;
@@ -23,7 +23,7 @@
     .MenuWrapper {
       margin-left: 50px;
       width: 100%;
-      @include media(phone) {
+      @include media(phone, tablet) {
         width: auto;
         margin-left: 0;
       }
@@ -37,7 +37,7 @@
         align-items: center;
         li:nth-child(2) {
           margin-left: 53px;
-          @include media (phone) {
+          @include media(phone) {
             margin-left: 0;
           }
         }
@@ -46,7 +46,7 @@
           cursor: pointer;
           font-size: 24px;
           font-weight: 400;
-          @include media(phone) {
+          @include media(phone, tablet) {
             font-size: 14px;
             font-weight: 600;
           }
@@ -58,7 +58,7 @@
         background-color: $primary;
         color: #fff;
         margin-right: 30px;
-        @include media(phone) {
+        @include media(phone, tablet) {
           display: none;
         }
       }

diff --git a/src/components/Lending/BaseComponents/LendingFlexContent.module.scss b/src/components/Lending/BaseComponents/LendingFlexContent.module.scss
@@ -1,13 +1,12 @@
-@import "./src/styles/responsive.scss";
+@import './src/styles/responsive.scss';
 
 .LendingFlexContent {
   width: 100%;
   display: flex;
   justify-content: space-between;
-  @include media(phone) {
+  @include media(phone, tablet) {
     display: block;
   }
-
 }
 
 .Header {
@@ -17,7 +16,7 @@
   line-height: 68px;
   margin-bottom: 24px;
 
-  @include media(phone) {
+  @include media(phone, tablet) {
     font-size: 24px;
     line-height: 32px; /* 133.333% */
   }
@@ -27,8 +26,8 @@
   color: #000;
   font-size: 24px;
   line-height: 32px;
-  
-  @include media(phone) {
+
+  @include media(phone, tablet) {
     > div {
       font-size: 14px;
       font-style: normal;
@@ -39,8 +38,8 @@
 }
 
 .Image {
-    display: block;
-  @include media(phone) {
+  display: block;
+  @include media(phone, tablet) {
     display: none;
   }
-}
+}