refactor: useGetTimeAgo 훅 분리 & 드롭다운 스크롤바 제어

eunji-0623 · Jul 15, 2024 · 34d9690 · 34d9690
1 parent e02f2fb
commit 34d9690
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 43 deletions.
diff --git a/components/Layout/NavigationBar.tsx b/components/Layout/NavigationBar.tsx
@@ -30,8 +30,15 @@ export default function NavigationBar() {
   const closeProfileDropdown = () => {
     setIsDropdownOpen(false);
   };
+  const closeNotificationDropdown = () => {
+    setIsNotificationOpen(false);
+  };
 
-  const dropdownRef = useClickOutside<HTMLDivElement>(closeProfileDropdown);
+  const profiledropdownRef =
+    useClickOutside<HTMLDivElement>(closeProfileDropdown);
+  const notificationdropdownRef = useClickOutside<HTMLDivElement>(
+    closeNotificationDropdown
+  );
 
   if (isLoading || isNotifyCountLoading) {
     return <Spinner />;
@@ -45,7 +52,7 @@ export default function NavigationBar() {
         </Link>
       </div>
       {isLoggedIn ? (
-        <div className="flex items-center gap-[25px]">
+        <div className="flex items-center gap-[15px]">
           <button onClick={toggleNotifyDropdown}>
             <div className="relative">
               <Image src={notificationIcon} alt="알림 아이콘" />
@@ -56,12 +63,17 @@ export default function NavigationBar() {
               )}
             </div>
           </button>
-          {isNotificationOpen && (
-            <NotificationDropdown data={data} onClick={toggleNotifyDropdown} />
-          )}
+          <div ref={notificationdropdownRef}>
+            {isNotificationOpen && (
+              <NotificationDropdown
+                data={data}
+                onClick={toggleNotifyDropdown}
+              />
+            )}
+          </div>
           <div
             className="flex relative items-center gap-[10px] border-l-2 cursor-pointer border-var-gray3 border-solid pl-[25px] m:pl-[12px]"
-            ref={dropdownRef}
+            ref={profiledropdownRef}
             onClick={toggleDropdown}
           >
             {isDropdownOpen && <NavigationDropdown />}

diff --git a/components/NavigationDropdown/NotificationDropdown.tsx b/components/NavigationDropdown/NotificationDropdown.tsx
@@ -5,40 +5,22 @@ import StatusIndicator from '../StatusIndicator/StatusIndicator';
 import useDeleteNotification from '@/hooks/useDeleteNotification';
 import { useInView } from 'react-intersection-observer';
 import useGetNotificationList from '@/hooks/useGetNotificationList';
+import getTimeAgoString from '@/hooks/useGetTimeAgo';
 
 export default function NotificationDropdown({
   data,
   onClick,
 }: NotificationDropdownProps) {
   const { deleteNotificationMutation } = useDeleteNotification();
+  const { ref, inView } = useInView();
+  const { fetchNextPage, notificationList, hasNextPage, isFetchingNextPage } =
+    useGetNotificationList();
 
-  const handleDelete = async (id: number) => {
-    try {
-      await deleteNotificationMutation.mutateAsync(id);
-    } catch (error) {
-      console.error('Error deleting notification:', error);
-    }
-  };
-
-  const getTimeAgoString = (updatedAt: string): string => {
-    const updatedAtUTC = Date.parse(updatedAt);
-    const now = new Date();
-    const diff = now.getTime() - updatedAtUTC;
-    const seconds = Math.floor(diff / 1000);
-    const minutes = Math.floor(seconds / 60);
-    const hours = Math.floor(minutes / 60);
-    const days = Math.floor(hours / 24);
-
-    if (days > 0) {
-      return `${days}일 전`;
-    } else if (hours > 0) {
-      return `${hours}시간 전`;
-    } else if (minutes > 0) {
-      return `${minutes}분 전`;
-    } else {
-      return `방금 전`;
+  useEffect(() => {
+    if (inView && hasNextPage && !isFetchingNextPage) {
+      fetchNextPage();
     }
-  };
+  }, [inView, fetchNextPage, isFetchingNextPage, hasNextPage]);
 
   const ContentWithHighlights = (content: string): JSX.Element[] => {
     const parts = content.split(/(승인|거절)/gi);
@@ -60,19 +42,24 @@ export default function NotificationDropdown({
       }
     });
   };
-
-  const { ref, inView } = useInView();
-  const { fetchNextPage, notificationList, hasNextPage, isFetchingNextPage } =
-    useGetNotificationList();
+  const handleDelete = async (id: number) => {
+    try {
+      await deleteNotificationMutation.mutateAsync(id);
+    } catch (error) {
+      console.error('알림 삭제에 실패했습니다', error);
+    }
+  };
 
   useEffect(() => {
-    if (inView && hasNextPage && !isFetchingNextPage) {
-      fetchNextPage();
-    }
-  }, [inView, fetchNextPage, isFetchingNextPage, hasNextPage]);
+    document.body.style.overflow = 'hidden';
+
+    return () => {
+      document.body.style.overflow = 'auto';
+    };
+  }, []);
 
   return (
-    <div className="z-50 px-[20px] pt-[17px] pb-[24px] absolute top-[70px] right-[400px] t:right-[100px] w-[368px] h-[340px] animate-slideDown flex-col justify-center overflow-y-auto scrollbar-hide rounded-[5px] m:fixed m:inset-0 m:rounded-none m:w-full m:h-full bg-var-green1 m:overflow-y-hidden ">
+    <div className="z-50 px-[20px] pt-[17px] pb-[24px] absolute top-[60px] right-[400px] t:right-[100px] w-[368px] h-[340px] animate-slideDown flex-col justify-center overflow-y-auto scrollbar-hide rounded-[5px] m:fixed m:inset-0 m:rounded-none m:w-full m:h-full bg-var-green1 m:overflow-y-hidden ">
       <div className="flex text-[20px] font-bold mb-[25px] justify-between ">
         알림 {data ? `${data.totalCount}` : '0'}개
         <CloseButton onClick={onClick} />

diff --git a/components/SideNavigation/SideNavigationMobile.tsx b/components/SideNavigation/SideNavigationMobile.tsx
@@ -15,10 +15,11 @@ import { useUserData } from '@/hooks/useUserData';
 import { useRecoilState } from 'recoil';
 import { sideNavigationState } from '@/states/sideNavigationState';
 import { CloseButton } from '../Button/Button';
+import Spinner from '../Spinner/Spinner';
 
 export default function SidenNavigationMobile() {
   const router = useRouter();
-  const userData = useUserData();
+  const { userData, isLoading } = useUserData();
   const [isOpen, setIsOpen] = useRecoilState(sideNavigationState);
   const [activeButton, setActiveButton] = useState<string | null>(null);
 
@@ -62,9 +63,12 @@ export default function SidenNavigationMobile() {
 
   const sideNavBtnStyle = `font-bold flex gap-[8px] h-[44px] w-fill items-center pl-[16px] text-[16px] `;
 
+  if (isLoading) {
+    return <Spinner />;
+  }
   return (
     isOpen && (
-      <div className="fixed inset-0 bg-black bg-opacity-60 mt-[70px] overflow-hidden ">
+      <div className="fixed inset-0 bg-black bg-opacity-70 mt-[70px] overflow-hidden ">
         <div className="fixed left-0 top-0 z-20 w-4/5 h-full p-[24px] flex flex-col mt-[70px] border border-solid border-var-gray3 gap-[24px] bg-white">
           <div className="flex justify-end">
             <CloseButton onClick={handleCloseSideNav} />

diff --git a/hooks/useGetTimeAgo.ts b/hooks/useGetTimeAgo.ts
@@ -0,0 +1,19 @@
+export default function getTimeAgoString(updatedAt: string): string {
+  const updatedAtUTC = Date.parse(updatedAt);
+  const now = new Date();
+  const diff = now.getTime() - updatedAtUTC;
+  const seconds = Math.floor(diff / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+
+  if (days > 0) {
+    return `${days}일 전`;
+  } else if (hours > 0) {
+    return `${hours}시간 전`;
+  } else if (minutes > 0) {
+    return `${minutes}분 전`;
+  } else {
+    return `방금 전`;
+  }
+}