Merge pull request #124 from codeit-maso/feature/jeon

🐛 fix: 카드에서 드래그가 클릭으로 인식되는 현상

Author: dkslel1225

src/components/Carousel/Carousel.jsx

@@ -1,24 +1,14 @@
 import { useState, useEffect } from 'react';
 import styles from './Carousel.module.scss';
 import RecipientCard from '../RecipientCard/RecipientCard';
+import useWindowWidth from '../../hooks/useWindowWidth';
 
 export default function Carousel({ recipients }) {
   const [index, setIndex] = useState(0);
-  const [offsetX, setOffsetX] = useState({}); // x좌표
-  const [startX, setstartX] = useState(0); // 클릭 시작 좌표 - 터치 스크롤
+  const [offsetX, setOffsetX] = useState({}); // 캐러셀 x좌표
+  const [startX, setstartX] = useState(0); // 터치 스크롤 시작 x좌표
   const [isBouncing, setBouncing] = useState(false); // 캐러셀 끝이면 bouncing 모션
-  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
-  const isDesktop = windowWidth > 1200;
-
-  useEffect(() => {
-    function handleResize() {
-      setWindowWidth(window.innerWidth);
-    }
-    window.addEventListener('resize', handleResize);
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, []);
+  const isDesktop = useWindowWidth() > 1200;
 
   // 캐러셀 버튼 작동과정: button onclick --> settingIndex(), setIndex --> useEffect( setOffsetX(),[index] ): x좌표 상태 업데이트: 캐러셀 이동
   useEffect(() => {
@@ -48,7 +38,7 @@ export default function Carousel({ recipients }) {
 
     if (!isNext) {
       if (index === 0) {
-        setBouncing(true); //캐러셀 끝 -> setBounce(띠용)
+        setBouncing(true);
         return;
       } else if (index > 0) {
         settingIndex('back');

src/components/RecipientCard/RecipientCard.jsx

@@ -1,9 +1,9 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import styles from './RecipientCard.module.scss';
 import RecentMessages from '../RecentMessages/RecentMessages';
 import TopReactions from '../TopReactions/TopReactions';
-import { useNavigate } from 'react-router-dom';
 
-//캐러셀 내부 요소 - 카드 컴포넌트
 export default function RecipientCard({ Recipient }) {
   const {
     id,
@@ -15,6 +15,13 @@ export default function RecipientCard({ Recipient }) {
     backgroundImageURL,
   } = Recipient;
   const navigate = useNavigate();
+  const [isDragging, setIsDragging] = useState(false);
+
+  function handleCardClick() {
+    if (!isDragging) {
+      navigate(`/post/${id}`);
+    }
+  }
 
   return (
     <div
@@ -26,24 +33,27 @@ export default function RecipientCard({ Recipient }) {
             }
           : {}
       }
-      onClick={() => navigate(`/post/${id}`)}
+      onClick={handleCardClick}
+      onMouseDown={() => setIsDragging(false)}
+      onTouchStart={() => setIsDragging(false)}
+      onMouseMove={() => setIsDragging(true)}
+      onTouchMove={() => setIsDragging(true)}
     >
       {backgroundColor === 'blue' && <div className={styles.triangle} />}
       <h3
         className={`${styles['card__h3']} ${backgroundImageURL ? styles.white : ''}`}
-      >{`To. ${name}`}</h3>
-      <RecentMessages
-        messages={recentMessages}
-        count={messageCount}
-      ></RecentMessages>
+      >
+        {`To. ${name}`}
+      </h3>
+      <RecentMessages messages={recentMessages} count={messageCount} />
       <div
         className={`${styles['card__writer-count']} ${backgroundImageURL && styles.white}`}
       >
         <span className={styles['card__count']}>{messageCount}</span>
         <span>명이 작성했어요!</span>
       </div>
-      <div className={styles['card__centerline']}></div>
-      <TopReactions reactions={topReactions}></TopReactions>
+      <div className={styles['card__centerline']} />
+      <TopReactions reactions={topReactions} />
     </div>
   );
 }

src/hooks/useWindowWidth.jsx

@@ -0,0 +1,14 @@
+import { useState, useEffect } from 'react';
+
+export default function useWindowWidth() {
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+
+  useEffect(() => {
+    function handleResize() {
+      setWindowWidth(window.innerWidth);
+    }
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+  return windowWidth;
+}