Fix: main mockup image 가 모바일에서 깨지는 이슈 수정 (#29)

* Fix: iOS 에서 main mockup 반응형 깨지는 버그 수정

* Style: 이미지 리사이즈, 글자 깨지는 버그 수정

Author: jokj624

src/components/DetailCheck/DetailCheck.module.scss

@@ -27,6 +27,7 @@
     text-align: center;
 
     @include tablet {
+      margin-top: 5rem;
       font-size: 2rem;
     }
 
@@ -59,7 +60,7 @@
   }
 
   &__image {
-    width: 65vw;
+    width: 55vw;
 
     @include tablet {
       width: 70vw;

src/components/DetailCheck/DetailCheck.tsx

@@ -19,7 +19,7 @@ export default function DetailCheck(): JSX.Element {
     if (width >= RESPONSIVE_VARIABLE['pc']) {
       return (
         <div className={Styles.DetailCheck__title}>
-          잊기 쉬운 콘텐츠, 모두 확인 할 수 있도록
+          잊기 쉬운 콘텐츠, 모두 확인 할 수 있도록
         </div>
       );
     }

src/components/Main/Main.module.scss

@@ -6,12 +6,17 @@
   align-items: center;
   padding: 2rem 2rem 0 2rem;
   width: 100%;
+  height: 71.25rem;
   color: var(--white);
   background: var(--main-background);
   font-family: 'Pretendard';
 
+  @include tablet {
+    height: 46.5rem;
+  }
+
   @include mobile {
-    height: 38rem;
+    height: 37.5rem;
   }
 
   &__title {
@@ -83,10 +88,10 @@
   }
 
   &__image {
-    height: 35rem;
     padding-right: 5rem;
 
     @include tablet {
+      padding: 0;
     }
 
     @include mobile {

src/components/Main/Main.tsx

@@ -71,7 +71,7 @@ export default function Main(): JSX.Element {
         <Image
           src={mockupSrc}
           alt="havit mockup main"
-          style={{ width: 'auto', height: '100%' }}
+          style={{ width: 'auto', height: 'auto' }}
           priority
         />
       </div>