Merge pull request #110 from codeit-maso/feature/jeon

🎨 style: 스켈레톤 반응형 위치 수정

Author: dkslel1225

src/components/Carousel/Carousel.module.scss

@@ -84,6 +84,7 @@
   //캐러셀 안밀리도록 추가함
   .carousel__cardset-wrapper {
     width: 100vw;
+    padding: 0 24px;
   }
 }
 // 태블릿
@@ -102,6 +103,9 @@
 
 //모바일
 @media (max-width: 767px) {
+  .carousel__cardset-wrapper {
+    padding: 0 20px;
+  }
   h2 {
     margin-bottom: 12px;
   }

src/components/CarouselSkeleton/CarouselSkeleton.module.scss

@@ -17,9 +17,6 @@
 }
 
 .section--sk {
-  // position: absolute;
-  // top: 52px;
-  // z-index: 1;
   display: flex;
   gap: 20px;
 }
@@ -42,17 +39,19 @@
   -webkit-animation: shimmer 1.2s infinite;
   animation: shimmer 1.2s infinite;
 }
-
-//모바일,태블릿 공통 적용
-@media (max-width: 1023px) {
+@media (max-width: 1200px) {
+  //안밀리도록 추가함(캐러셀보다 화면 사이즈가 작아질때부터 적용해야함..)
   .section--sk {
-    max-width: 100%;
+    width: 100vw;
+    padding: 0 24px;
     overflow: hidden;
-    padding: 0 20px;
   }
 }
 //모바일
 @media (max-width: 767px) {
+  .section--sk {
+    padding: 0 20px;
+  }
   .card--sk {
     min-width: 208px;
     height: 232px;

src/pages/RecipientList/RecipientList.module.scss

@@ -28,7 +28,11 @@
   -ms-user-select: none;
   user-select: none;
 }
-
+@media (max-width: 1200px) {
+  .section__h2 {
+    width: 100%;
+  }
+}
 @media (min-width: 768px) and (max-width: 1023px) {
   .section-listpage {
     padding: 0 24px;
@@ -37,10 +41,6 @@
     margin-top: 156px;
     margin-bottom: 24px;
   }
-
-  .section__h2 {
-    max-width: 100%;
-  }
 }
 @media (max-width: 767px) {
   .section-listpage {
@@ -51,10 +51,6 @@
     margin-top: 66px;
     margin-bottom: 24px;
   }
-
-  .section__h2 {
-    width: 100%;
-  }
   .section--mobile-gap {
     margin-bottom: 74px;
   }