style: 모달 내 스크롤 노출에 대한 반응형 처리

JECT-Study · Jan 26, 2025 · 573035e · 573035e
1 parent 0d2d96c
commit 573035e
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 10 deletions.
diff --git a/src/components/Modal/CollectionModal/index.tsx b/src/components/Modal/CollectionModal/index.tsx
@@ -1,5 +1,7 @@
 'use client';
 
+import '@/styles/scroll.css';
+
 import { useStore } from 'zustand';
 
 import Icon from '@/components/Icon/Icon';
@@ -26,7 +28,7 @@ const CollectionModal = () => {
           onClick={closeModal}
         />
       </div>
-      <div className='grid tablet:grid-cols-4 grid-cols-1 gap-x-[33px] gap-y-[30px] max-h-[555px] tablet:pr-[34px] overflow-y-auto'>
+      <div className='grid tablet:grid-cols-4 grid-cols-1 gap-x-[33px] gap-y-[30px] max-h-[555px] tablet:pr-[34px] overflow-y-auto scroll-hide'>
         <CreateCollectionUnit />
         {collections.map((collection) => (
           <CollectionUnit

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -92,13 +92,4 @@
     vertical-align: middle;
     fill: currentColor; /* 텍스트 색상과 동일하게 적용 */
   }
-
-  .scroll-hide::-webkit-scrollbar {
-    display: none;
-  }
-
-  .scroll-hide {
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-  }
 }
diff --git a/src/styles/scroll.css b/src/styles/scroll.css
@@ -0,0 +1,10 @@
+@media (max-width: 1400px) {
+  .scroll-hide::-webkit-scrollbar {
+    display: none;
+  }
+
+  .scroll-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+}