From b5dc6138f7fbeab52ba691d4284d24d1e39aeb05 Mon Sep 17 00:00:00 2001
From: LimDong <ilhai6@naver.com>
Date: Thu, 20 Jun 2024 15:24:54 +0900
Subject: [PATCH] =?UTF-8?q?[#39]=20Feat:=20PullToRefresh=20hook=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84=20=EB=B0=8F=20font=20=EA=B9=A8=EC=A7=90=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../nav/nav-list/nav-list-item.module.scss    |  1 +
 hooks/usePullReload.tsx                       | 47 +++++++++++++++++++
 2 files changed, 48 insertions(+)
 create mode 100644 hooks/usePullReload.tsx

diff --git a/components/common/nav/nav-list/nav-list-item.module.scss b/components/common/nav/nav-list/nav-list-item.module.scss
index 176d5831..5bbb23d2 100644
--- a/components/common/nav/nav-list/nav-list-item.module.scss
+++ b/components/common/nav/nav-list/nav-list-item.module.scss
@@ -13,6 +13,7 @@
     }
     span {
       font-weight: 500;
+      word-break: keep-all;
     }
   }
   &:hover {
diff --git a/hooks/usePullReload.tsx b/hooks/usePullReload.tsx
new file mode 100644
index 00000000..d6672fa1
--- /dev/null
+++ b/hooks/usePullReload.tsx
@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react';
+
+export default function usePullReload() {
+  const [pullDownDistance, setPullDownDistance] = useState(0);
+  const [isDragging, setIsDragging] = useState(false);
+  const [startY, setStartY] = useState(0);
+
+  useEffect(() => {
+    let distance = 0;
+    const handleMouseDown = (e: MouseEvent) => {
+      setIsDragging(true);
+      setStartY(e.clientY);
+    };
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (isDragging) {
+        const currentY = e.clientY;
+        distance = currentY - startY;
+        if (distance < 0) distance = 0;
+        if (distance > 200) distance = 200; // 최대 높이를 200px로 제한
+        setPullDownDistance(distance);
+      }
+    };
+
+    const handleMouseUp = () => {
+      if (distance > 50) {
+        window.location.reload();
+      }
+      setIsDragging(false);
+      setPullDownDistance(0); // 마우스를 놓으면 여백을 초기화
+    };
+
+    // 이벤트 리스너 등록
+    document.addEventListener('mousedown', handleMouseDown);
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+
+    return () => {
+      // 컴포넌트가 언마운트될 때 이벤트 리스너 제거
+      document.removeEventListener('mousedown', handleMouseDown);
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [isDragging, startY]);
+
+  return pullDownDistance;
+}