[Design] 랜딩 페이지 반응형 스타일 적용

app/(landing)/(home)/_ui/average-metrics-section/average-metrics-chart.tsx

@@ -26,7 +26,6 @@ const AverageMetricsChart = ({ data }: Props) => {
   const chartOptions: Highcharts.Options = {
     chart: {
       type: 'areaspline',
-      width: 1000,
       height: 450,
       backgroundColor: '#FFFFFF',
       zooming: {
@@ -176,6 +175,20 @@ const AverageMetricsChart = ({ data }: Props) => {
         pointPlacement: 'on',
       },
     ],
+    responsive: {
+      rules: [
+        {
+          condition: {
+            maxWidth: 1000,
+          },
+          chartOptions: {
+            chart: {
+              width: null,
+            },
+          },
+        },
+      ],
+    },
     credits: { enabled: false },
   }
 

app/(landing)/(home)/_ui/average-metrics-section/index.tsx

@@ -47,7 +47,9 @@ const AverageMetricsSection = () => {
             FROM <span className={cx('date')}>{startDate}</span>TO
             <span className={cx('date')}>{endDate}</span>
           </div>
-          <AverageMetricsChart data={chartData} />
+          <div className={cx('chart-wrapper')}>
+            <AverageMetricsChart data={chartData} />
+          </div>
         </div>
       </div>
     </section>

app/(landing)/(home)/_ui/average-metrics-section/styles.module.scss

@@ -31,3 +31,7 @@
     background-color: $color-gray-200;
   }
 }
+
+.chart-wrapper {
+  width: 100%;
+}

app/(landing)/(home)/_ui/hero-section/index.tsx

@@ -18,7 +18,7 @@ const HeroSection = () => {
         <br />
         참고하거나 공유하고 싶다면
         <br />
-        <Logo className={cx('logo')} width="65" height="39" /> 인베스트메틱에서!
+        <Logo className={cx('logo')} /> 인베스트메틱에서!
       </h1>
       <LinkButton href={PATH.SIGN_UP_USER_TYPE} variant="filled" className={cx('button')}>
         바로 함께하기

app/(landing)/(home)/_ui/hero-section/styles.module.scss

@@ -12,6 +12,14 @@
   display: inline-block;
   width: 65px;
   height: auto;
+
+  @include tablet-md {
+    width: 42px;
+  }
+
+  @include mobile {
+    width: 34px;
+  }
 }
 
 .button {

app/(landing)/(home)/_ui/top-favorite-section/styles.module.scss

@@ -9,4 +9,8 @@
   display: flex;
   justify-content: center;
   gap: 20px;
+
+  @include tablet-md {
+    flex-direction: column;
+  }
 }

app/(landing)/(home)/_ui/top-sm-score-section/styles.module.scss

@@ -18,4 +18,10 @@
       grid-row: 1 / 3;
     }
   }
+
+  @include tablet-md {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
 }

app/(landing)/(home)/_ui/user-metrics-section/styles.module.scss

@@ -3,4 +3,17 @@
   gap: 20px;
   justify-content: center;
   margin-top: 36px;
+
+  @include tablet-md {
+    & > div {
+      padding: 10px;
+    }
+  }
+
+  @include mobile {
+    flex-wrap: wrap;
+    & > div {
+      width: calc(50% - 10px);
+    }
+  }
 }

shared/styles/base/_mixins.scss

@@ -5,19 +5,19 @@
 }
 
 @mixin tablet-sm {
-  @media (min-width: #{$breakpoint-sm}) and (max-width: #{$breakpoint-md - 1}) {
+  @media (max-width: #{$breakpoint-md - 1}) {
     @content;
   }
 }
 
 @mixin tablet-md {
-  @media (min-width: #{$breakpoint-md}) and (max-width: #{$breakpoint-lg - 1}) {
+  @media (max-width: #{$breakpoint-lg - 1}) {
     @content;
   }
 }
 
 @mixin desktop {
-  @media (min-width: #{$breakpoint-lg}) and (max-width: #{$breakpoint-xl - 1}) {
+  @media (max-width: #{$breakpoint-xl - 1}) {
     @content;
   }
 }
@@ -39,24 +39,52 @@
   @extend %base-headline;
   font-size: $text-h1;
   font-weight: $text-bold;
+
+  @include tablet-md {
+    font-size: $text-h2;
+  }
+
+  @include mobile {
+    font-size: $text-h3;
+  }
 }
 
 @mixin typo-h2 {
   @extend %base-headline;
   font-size: $text-h2;
   font-weight: $text-bold;
+
+  @include tablet-md {
+    font-size: $text-h3;
+  }
+
+  @include mobile {
+    font-size: $text-h4;
+  }
 }
 
 @mixin typo-h3 {
   @extend %base-headline;
   font-size: $text-h3;
   font-weight: $text-semibold;
+
+  @include tablet-md {
+    font-size: $text-h4;
+  }
+
+  @include mobile {
+    font-size: $text-b1;
+  }
 }
 
 @mixin typo-h4 {
   @extend %base-headline;
   font-size: $text-h4;
   font-weight: $text-semibold;
+
+  @include tablet-md {
+    font-size: $text-b1;
+  }
 }
 
 // body
@@ -70,6 +98,10 @@
 @mixin typo-b1 {
   @extend %base-body;
   font-size: $text-b1;
+
+  @include tablet-md {
+    font-size: $text-b2;
+  }
 }
 
 @mixin typo-b2 {