From 94982f68935b1b419d8141a0b4a6de057f62551b Mon Sep 17 00:00:00 2001
From: "focp212@naver.com" <focp212@naver.com>
Date: Mon, 17 Nov 2025 17:32:02 +0900
Subject: [PATCH] home-page pulltorefresh

---
 src/pages/home/home-page.tsx             |  2 +
 src/widgets/sub-layout/index.tsx         | 90 +++++++++++++-----------
 src/widgets/sub-layout/use-sub-layout.ts |  9 +++
 3 files changed, 60 insertions(+), 41 deletions(-)

diff --git a/src/pages/home/home-page.tsx b/src/pages/home/home-page.tsx
index 1d00f07..51c85f7 100644
--- a/src/pages/home/home-page.tsx
+++ b/src/pages/home/home-page.tsx
@@ -14,6 +14,7 @@ import {
 	useSetHeaderType,
 	useSetFooterMode,
   useSetFooterCurrentPage,
+  useSetIsPullToRefreshEnabled,
 } from '@/widgets/sub-layout/use-sub-layout';
 import { useStore } from '@/shared/model/store';
 import { useHomeBannerListMutation } from '@/entities/home/api/use-home-banner-list-mutation';
@@ -30,6 +31,7 @@ export const HomePage = () => {
   const { openBiometricRegistrationPopup, checkAlarmLink } = useAppBridge();
   const { mutateAsync: homeBannerList } = useHomeBannerListMutation();
   
+  useSetIsPullToRefreshEnabled(true);
   useSetHeaderTitle('');
   useSetHeaderType(HeaderType.Home);
   useSetFooterMode(true);
diff --git a/src/widgets/sub-layout/index.tsx b/src/widgets/sub-layout/index.tsx
index 923ebc0..3f57a2d 100644
--- a/src/widgets/sub-layout/index.tsx
+++ b/src/widgets/sub-layout/index.tsx
@@ -8,6 +8,7 @@ import {
 import { Outlet } from 'react-router-dom';
 import { HeaderNavigation } from '@/widgets/navigation/header';
 import { FooterNavigation } from '@/widgets/navigation/footer';
+import { PullToRefresh } from '@/widgets/pull-to-refresh/pull-to-refresh';
 import { 
   CodeListItem, 
   CodesSelectParams, 
@@ -36,6 +37,7 @@ import { useCodesSelectMutation } from '@/entities/common/api/use-codes-select-m
 import { MenuItems } from '@/entities/common/model/constant';
 import { AlarmLinkOptions } from '@/entities/alarm/model/types';
 import { AlarmRoutes } from '@/entities/alarm/ui/alarm-routes';
+import { useNavigate } from '@/shared/lib/hooks';
 
 export interface ContextType {
   setOnBack: (onBack: () => void) => void;
@@ -65,6 +67,9 @@ export const SubLayout = () => {
     updateUserData
   } = useUserInfo();
 
+  const { reload } = useNavigate();
+
+  const [isPullToRefreshEnabled, setIsPullToRefreshEnabled] = useState(false);
   const [onBack, setOnBack] = useState(undefined);
   const [onRightClick, setOnRightClick] = useState(undefined);
   const [headerTitle, setHeaderTitle] = useState<string>('');
@@ -405,47 +410,50 @@ export const SubLayout = () => {
   }, [mid]);
 
   return (
-    <div className={ wrapperClassName }>
-      <div 
-        className="header-empty-block" 
-        style={{ width: '100%', height: '50px' }}
-      ></div>
-      <Fragment>
-        <HeaderNavigation
-          onBack={ onBack }
-          onRightClick={ onRightClick }
-          headerTitle={ headerTitle }
-          headerType={ headerType }
-          key={ headerNavigationKey }
-          loginSuccess={ loginSuccess }
-          mid={ mid }
-          setMid={ setMid }
-        />
-        { loginSuccess && 
-          <Outlet
-            context={{
-              setOnBack,
-              setOnRightClick,
-              setHeaderTitle,
-              setHeaderType,
-              setFooterMode,
-              setFooterCurrentPage,
-            }}
+    <PullToRefresh onRefresh={reload} isPullable={isPullToRefreshEnabled}>
+      <div className={ wrapperClassName }>
+        <div 
+          className="header-empty-block" 
+          style={{ width: '100%', height: '50px' }}
+        ></div>
+        <Fragment>
+          <HeaderNavigation
+            onBack={ onBack }
+            onRightClick={ onRightClick }
+            headerTitle={ headerTitle }
+            headerType={ headerType }
+            key={ headerNavigationKey }
+            loginSuccess={ loginSuccess }
+            mid={ mid }
+            setMid={ setMid }
           />
-        }
-        {
-          footerMode && 
-          <FooterNavigation
-            footerCurrentPage={ footerCurrentPage }
-          ></FooterNavigation>
-        }
-        { alarmRoutesOn &&
-          <AlarmRoutes
-            options={ alarmOptions }
-          ></AlarmRoutes>
-        }
-        
-      </Fragment>
-    </div>
+          { loginSuccess && 
+            <Outlet
+              context={{
+                setOnBack,
+                setOnRightClick,
+                setHeaderTitle,
+                setHeaderType,
+                setFooterMode,
+                setFooterCurrentPage,
+                setIsPullToRefreshEnabled,
+              }}
+            />
+          }
+          {
+            footerMode && 
+            <FooterNavigation
+              footerCurrentPage={ footerCurrentPage }
+            ></FooterNavigation>
+          }
+          { alarmRoutesOn &&
+            <AlarmRoutes
+              options={ alarmOptions }
+            ></AlarmRoutes>
+          }
+          
+        </Fragment>
+      </div>
+    </PullToRefresh>
   );
 };
diff --git a/src/widgets/sub-layout/use-sub-layout.ts b/src/widgets/sub-layout/use-sub-layout.ts
index eeb0b0e..12518cd 100644
--- a/src/widgets/sub-layout/use-sub-layout.ts
+++ b/src/widgets/sub-layout/use-sub-layout.ts
@@ -64,4 +64,13 @@ export const useSetFooterCurrentPage = (footerCurrentPage?: FooterItemActiveKey
     return () => setFooterCurrentPage(undefined);
   }, [footerCurrentPage, setFooterCurrentPage]);
   return { setFooterCurrentPage };
+};
+
+export const useSetIsPullToRefreshEnabled = (enabled: boolean) => {
+  const { setIsPullToRefreshEnabled } = useSubLayoutContext();
+  useEffect(() => {
+    setIsPullToRefreshEnabled(enabled);
+    return () => setIsPullToRefreshEnabled(false);
+  }, [setIsPullToRefreshEnabled, enabled]);
+  return { setIsPullToRefreshEnabled };
 };
\ No newline at end of file