docs: TimeAgo 함수 utils로 이관

eunji-0623 · Jul 16, 2024 · b1dc2ed · b1dc2ed
1 parent 34d9690
commit b1dc2ed
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 5 deletions.
diff --git a/components/NavigationDropdown/NotificationDropdown.tsx b/components/NavigationDropdown/NotificationDropdown.tsx
@@ -5,7 +5,7 @@ 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';
+import formatTimeAgo from '@/utils/formatTimeAgo';
 
 export default function NotificationDropdown({
   data,
@@ -87,7 +87,7 @@ export default function NotificationDropdown({
               <div className="w-[298px] h-[44px] mb-[4px]">
                 <p>{ContentWithHighlights(notification.content)}</p>
               </div>
-              <p>{getTimeAgoString(notification.updatedAt)}</p>
+              <p>{formatTimeAgo(notification.updatedAt)}</p>
             </div>
           ))}
           {hasNextPage && <div ref={ref} />}

diff --git a/components/ReservationListCard/ReservationListCard.tsx b/components/ReservationListCard/ReservationListCard.tsx
@@ -10,6 +10,7 @@ import { apiEditMyReservation } from '@/pages/api/myReservations/apiMyReservatio
 import { useUserData } from '@/hooks/useUserData';
 import { formatCurrency } from '@/utils/formatCurrency';
 import Link from 'next/link';
+import Spinner from '../Spinner/Spinner';
 
 const ReservationListCard = ({ reservationData }: ReservationCardProps) => {
   const { openModal, closeModal } = useModal();
@@ -23,7 +24,7 @@ const ReservationListCard = ({ reservationData }: ReservationCardProps) => {
   };
 
   const { openPopup } = usePopup();
-  const userData = useUserData();
+  const { userData, isLoading } = useUserData();
   const queryClient = useQueryClient();
 
   const EditMyReservationMutation = useMutation({
@@ -47,6 +48,10 @@ const ReservationListCard = ({ reservationData }: ReservationCardProps) => {
     });
   };
 
+  if (isLoading) {
+    return <Spinner />;
+  }
+
   return (
     <div className="h-[212px] relative flex rounded-3xl shadow-card overflow-hidden">
       <div className="min-w-[204px] h-[204px] relative">

diff --git a/hooks/useReservationList.ts b/hooks/useReservationList.ts
@@ -9,7 +9,7 @@ const INITIAL_SIZE = 4;
 const REFETCH_SIZE = 1;
 
 export const useReservationList = (filterOption: statusType | undefined) => {
-  const userData = useUserData();
+  const { userData } = useUserData();
 
   const { data, fetchNextPage, hasNextPage, isLoading, isFetchingNextPage } =
     useInfiniteQuery<MyReservationListResponse>({

diff --git a/hooks/useGetTimeAgo.ts → utils/formatTimeAgo.ts b/hooks/useGetTimeAgo.ts → utils/formatTimeAgo.ts
@@ -1,4 +1,4 @@
-export default function getTimeAgoString(updatedAt: string): string {
+export default function formatTimeAgo(updatedAt: string): string {
   const updatedAtUTC = Date.parse(updatedAt);
   const now = new Date();
   const diff = now.getTime() - updatedAtUTC;