diff --git a/client/src/pages/MainPage.js b/client/src/pages/MainPage.js index 060bc38..3fc8fbc 100644 --- a/client/src/pages/MainPage.js +++ b/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)); } } diff --git a/client/src/styles/main.scss b/client/src/styles/main.scss index 208e093..8d0e06d 100644 --- a/client/src/styles/main.scss +++ b/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; diff --git a/client/src/utils/slider.js b/client/src/utils/slider.js index 55b2155..1437137 100644 --- a/client/src/utils/slider.js +++ b/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;