From 66725227b8dff1c7636c4dcf4bad9b2cb0f92be7 Mon Sep 17 00:00:00 2001
From: jyn <spdlqjdkslel1226@naver.com>
Date: Tue, 29 Apr 2025 17:12:05 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20=EC=B9=B4=EB=93=9C?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20=EB=93=9C=EB=9E=98=EA=B7=B8=EA=B0=80=20?=
 =?UTF-8?q?=ED=81=B4=EB=A6=AD=EC=9C=BC=EB=A1=9C=20=EC=9D=B8=EC=8B=9D?=
 =?UTF-8?q?=EB=90=98=EB=8A=94=20=ED=98=84=EC=83=81=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Carousel/Carousel.jsx          | 20 ++++---------
 .../RecipientCard/RecipientCard.jsx           | 30 ++++++++++++-------
 src/hooks/useWindowWidth.jsx                  | 14 +++++++++
 3 files changed, 39 insertions(+), 25 deletions(-)
 create mode 100644 src/hooks/useWindowWidth.jsx

diff --git a/src/components/Carousel/Carousel.jsx b/src/components/Carousel/Carousel.jsx
index c0d7543..792d046 100644
--- a/src/components/Carousel/Carousel.jsx
+++ b/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');
diff --git a/src/components/RecipientCard/RecipientCard.jsx b/src/components/RecipientCard/RecipientCard.jsx
index 37aee91..d92b6c2 100644
--- a/src/components/RecipientCard/RecipientCard.jsx
+++ b/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>
   );
 }
diff --git a/src/hooks/useWindowWidth.jsx b/src/hooks/useWindowWidth.jsx
new file mode 100644
index 0000000..96ec2ab
--- /dev/null
+++ b/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;
+}