fix(FE): 스크롤 버그 수정

client/src/pages/MainPage.js

@@ -12,10 +12,10 @@ const LIST_ICON_URL = `${SERVER_URL.IMG}icon/list-icon.svg`;
 const PLUS_ICON_URL = `${SERVER_URL.IMG}icon/plus.svg`;
 
 let touchStartX = 0;
-let touchEndX = 0;
+const touchEndX = 0;
 let isSwipping = false;
 let cardDatas = [];
-let sortOpt = '';
+const sortOpt = '';
 
 const setCardDatas = (cardData) => (cardDatas = [...cardData]);
 const sortOption = { 0: '마감순', 1: '등록순', 2: '금액순' };
@@ -164,18 +164,19 @@ const handleTouchMove = (e) => {
 };
 
 const handleTouchEnd = (e) => {
+  if (!$.qs('.cards-section').classList.contains('list')) return;
   const card = e.currentTarget;
 
-  if (rightSwipe > 7 && !isSwipping && !isSwippingRight) {
+  if (rightSwipe > 20 && !isSwipping && !isSwippingRight) {
     isSwipping = true;
     card.classList.add('swiped-left');
-  } else if (leftSwipe > -7 && !isSwipping && !isSwippingLeft) {
+  } else if (leftSwipe > -20 && !isSwipping && !isSwippingLeft) {
     isSwipping = true;
     card.classList.add('swiped-right');
-  } else if (leftSwipe > -7 && isSwipping && !isSwippingRight) {
+  } else if (leftSwipe > -20 && isSwipping && !isSwippingRight) {
     card.classList.remove('swiped-left');
     isSwipping = false;
-  } else if (rightSwipe > 7 && isSwipping && !isSwippingLeft) {
+  } else if (rightSwipe > 20 && isSwipping && !isSwippingLeft) {
     card.classList.remove('swiped-right');
     isSwipping = false;
   }
@@ -207,6 +208,7 @@ const switchLayout = ({ target }) => {
 
     if ($.qs('.cards-section').classList.contains('list')) {
       const cardLists = $.qsa('.card-lists');
+
       listEvent(cardLists);
       renderButtons(cardLists);
 
@@ -216,7 +218,7 @@ const switchLayout = ({ target }) => {
       const deleteButtons = $.qsa('.card-delete-button');
       deleteCardEvent(deleteButtons);
 
-      //const oneCardButton = $.qs('.one-card-button');
+      // const oneCardButton = $.qs('.one-card-button');
       // oneCardButton.addEventListener('click', deleteActionSection(cardLists));
     }
   }

client/src/styles/main.scss

@@ -262,12 +262,11 @@
 
       &.list {
         flex-direction: column;
-        overflow-x: scroll;
+        overflow-x: hidden;
         -ms-overflow-style: none;
         scrollbar-width: none;
         transition: 0s;
         transform: translateX(0px) !important;
-        touch-action: none;
 
         &::-webkit-scrollbar {
           display: none;
@@ -287,6 +286,7 @@
           border-radius: 10px;
           box-shadow: inset -3px -2px 3px 0px rgb(0 0 0 / 16%), 0 3px 6px rgba(0, 0, 0, 0.23);
           padding: 1rem;
+          // overflow-x: scroll;
           // touch-action: none;
           transition: transform 0.2s ease-in-out;
 

client/src/utils/slider.js

@@ -3,6 +3,12 @@ import { _ } from '@/utils/customFx';
 
 const slider = () => {
   const parent = document.querySelector('.cards-section');
+
+  if (parent.classList.contains('list')) {
+    parent.style.transform = 'translateX(0px)';
+    return;
+  }
+
   const children = parent.querySelectorAll('.card-lists');
   const childrenCount = children.length;
   const parentWidth = parent.offsetWidth;