Fix: DetailContent 컴포넌트 가로스크롤 이슈 수정 (#32)

* Add: medium size blur background image asset

* Style: DetailContent 백그라운드 이미지 리사이징

Author: jokj624

public/static/images/blur-bg-image-sm.webp

@@ -57,11 +57,11 @@
     &__mainImage {
       position: relative;
       height: 37rem;
-      left: 5rem;
+      left: 5vw;
       z-index: 1;
 
       @include tablet {
-        left: 10rem;
+        left: 15vw;
         height: 40rem;
         top: 5rem;
       }
@@ -75,7 +75,7 @@
 
     &__textWrapper {
       @include tablet {
-        margin-left: 55%;
+        margin-left: 50vw;
       }
 
       @include mobile {
@@ -128,19 +128,20 @@
   &__backgroundImage {
     position: absolute;
     margin-bottom: 10rem;
-    left: 40vw;
+    right: 30vw;
     width: 25rem;
     z-index: 0;
+    overflow-x: hidden;
 
     @include tablet {
       margin-bottom: 5rem;
       right: 0;
     }
 
     @include mobile {
+      width: 15rem;
       margin-bottom: 5rem;
-      left: 45vw;
-      width: 20rem;
+      right: 0;
     }
   }
 }

src/components/DetailContent/DetailContent.module.scss

@@ -7,7 +7,8 @@ import { RESPONSIVE_VARIABLE } from '@/constants/objects/responsive';
 import mockupLgSrc from '../../../public/static/images/mockup-content-list-pc.webp';
 import mockupMdSrc from '../../../public/static/images/mockup-content-list-md.webp';
 import mockupSmSrc from '../../../public/static/images/mockup-content-list-sm.webp';
-import backImageSrc from '../../../public/static/images/blur-bg-image.webp';
+import blurBackImageLgSrc from '../../../public/static/images/blur-bg-image.webp';
+import blurBackImageSmSrc from '../../../public/static/images/blur-bg-image-sm.webp';
 
 import Styles from './DetailContent.module.scss';
 
@@ -21,6 +22,11 @@ export default function DetailContent(): JSX.Element {
       ? mockupSmSrc
       : mockupMdSrc;
 
+  const blurBackImageSrc =
+    width <= RESPONSIVE_VARIABLE['tablet']
+      ? blurBackImageSmSrc
+      : blurBackImageLgSrc;
+
   const TitleText = (): JSX.Element => {
     return width >= RESPONSIVE_VARIABLE['pc'] ? (
       <span>
@@ -67,7 +73,7 @@ export default function DetailContent(): JSX.Element {
       </div>
       <div className={Styles.DetailContent__backgroundImage}>
         <Image
-          src={backImageSrc}
+          src={blurBackImageSrc}
           alt="background blur image"
           style={{ width: '105%', height: 'auto' }}
         />

src/components/DetailContent/DetailContent.tsx

@@ -80,6 +80,7 @@ html,
 body {
   max-width: 100vw;
   overflow-x: hidden;
+  touch-action: none;
 }
 
 body {