refresh 수정

src/widgets/pull-to-refresh/pull-to-refresh.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-/* eslint-disable @cspell/spellchecker */
 // import './main.scss';
 import { JSX } from 'react/jsx-runtime';
 import { DIRECTION } from './types';
@@ -209,7 +207,7 @@ export const PullToRefresh: React.FC<PullToRefreshProps> = ({
     // pullDownRef.current!.style.opacity = (yDistanceMoved / 65).toString();
     childrenRef.current!.style.overflow = 'visible';
     childrenRef.current!.style.transform = `translate(0px, ${appr(yDistanceMoved)}px)`;
-    // pullDownRef.current!.style.visibility = 'visible';
+    pullDownRef.current!.style.visibility = 'visible';
   };
 
   const onEnd = (): void => {
@@ -235,11 +233,18 @@ export const PullToRefresh: React.FC<PullToRefreshProps> = ({
   return (
     <div className={`ptr ${className}`} style={{ backgroundColor }} ref={containerRef}>
       {
-        /*
+      
-      <div className="ptr__pull-down" ref={pullDownRef}>
+      <div 
-        <div className="ptr__loader ptr__pull-down--loading">{refreshingContent}</div>
+        className="ptr__pull-down" 
+        ref={pullDownRef}
+        style={{ position: 'absolute', width: '100%' }}
+      >
+        <div 
+          className="ptr__loader ptr__pull-down--loading"
+          style={{ width: '100%', textAlign: 'center', position: 'relative'}}
+        >{refreshingContent}</div>
       </div>
-      */
+      
       }
       <div className="ptr__children" ref={childrenRef}>
         {children}

src/widgets/pull-to-refresh/refreshing-content.tsx

@@ -4,7 +4,10 @@ import './refreshing-content.scss';
 
 export const RefreshingContent = () => {
   return (
-    <div className="lds-ellipsis">
+    <div 
+      className="lds-ellipsis"
+      style={{margin: '0 auto'}}
+    >
       <div></div>
       <div></div>
       <div></div>

src/widgets/pull-to-refresh/refreshing-loading.tsx

@@ -0,0 +1,27 @@
+import { CSSProperties, useState } from 'react';
+import { FadeLoader } from 'react-spinners';
+
+const override: CSSProperties = {
+  position: 'fixed',
+  display: 'block',
+  margin: '0 auto',
+  top: '50%',
+  left: '50%',
+  zIndex: 2000
+};
+export const RefreshingLoading = () => {
+  let [loading, setLoading] = useState<boolean>(false);
+  let [color, setColor] = useState<string>('#0b0606');
+
+  return (
+    <>
+      <FadeLoader
+        color={color}
+        loading={loading}
+        cssOverride={override}
+        aria-label="Loading Spinner"
+        data-testid="loader"
+      />
+    </>
+  );
+};