feat: sideNavigatio, Navigation, MyPageInput 로딩 추가

components/Layout/NavigationBar.tsx

@@ -9,13 +9,14 @@ import useClickOutside from '@/hooks/useClickOutside';
 import useGetNotification from '@/hooks/useGetNotification';
 import NotificationDropdown from '../NavigationDropdown/NotificationDropdown';
 import useLoginState from '@/hooks/useLoginState';
+import Spinner from '../Spinner/Spinner';
 
 export default function NavigationBar() {
-  const userData = useUserData();
+  const { userData, isLoading } = useUserData();
   const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);
   const { isLoggedIn } = useLoginState();
   const [isNotificationOpen, setIsNotificationOpen] = useState<boolean>(false);
-  const { data, isLoading, isError } = useGetNotification({
+  const { data, isNotifyCountLoading } = useGetNotification({
     cursorId: 0,
     size: 2,
   });
@@ -32,6 +33,10 @@ export default function NavigationBar() {
 
   const dropdownRef = useClickOutside<HTMLDivElement>(closeProfileDropdown);
 
+  if (isLoading || isNotifyCountLoading) {
+    return <Spinner />;
+  }
+
   return (
     <div className="sticky top-0 flex h-[70px] z-30 justify-between pl-[369px] pr-[351px] t:px-[24px] m:px-[24px]  border-b bg-white border-var-gray3 border-solid ">
       <div className="flex items-center">

components/MyPageInput/MyPageInput.tsx

@@ -12,6 +12,7 @@ import { ProfileImageResponse } from '@/pages/api/users/apiUser.types';
 import profileThumbnail from '@/public/image/profile-circle-icon-512x512-zxne30hp.png';
 import editProfileIcon from '@/public/image/btn.png';
 import { useSideNavigation } from '@/hooks/useSideNavigation';
+import Spinner from '../Spinner/Spinner';
 
 export default function MyPageInput() {
   const {
@@ -24,7 +25,8 @@ export default function MyPageInput() {
 
   const { openSideNavigation } = useSideNavigation();
 
-  const userData = useUserData();
+  const { userData, isLoading } = useUserData();
+
   const { postProfileImgMutation } = useUploadProfile();
   const { postMyInfoMutation } = useEditMyInfo();
   const [profileImageUrl, setProfileImageUrl] = useState<string | null>(
@@ -84,6 +86,9 @@ export default function MyPageInput() {
 
   const isAllFieldsValid = isFormFilled && isNotError;
 
+  if (isLoading) {
+    return <Spinner />;
+  }
   return (
     <div className="flex flex-col w-[792px] h-[564px] t:w-[429px] t:h-[556px] m:w-full m:h-full m:pb-[150px] m:px-[16px] ">
       <form className="flex flex-col gap-[24px] t:gap-[16px]">

components/NavigationDropdown/NotificationDropdown.tsx

@@ -1,17 +1,15 @@
 import { CloseButton } from '../Button/Button';
 import { NotificationDropdownProps } from './NotificationDropdown.types';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import StatusIndicator from '../StatusIndicator/StatusIndicator';
 import useDeleteNotification from '@/hooks/useDeleteNotification';
-import { NotificationId } from '@/pages/api/myNotifications/apiMyNotifications.types';
 import { useInView } from 'react-intersection-observer';
 import useGetNotificationList from '@/hooks/useGetNotificationList';
 
 export default function NotificationDropdown({
   data,
   onClick,
 }: NotificationDropdownProps) {
-  const [notifications, setNotifications] = useState<any[]>([]);
   const { deleteNotificationMutation } = useDeleteNotification();
 
   const handleDelete = async (id: number) => {
@@ -79,7 +77,7 @@ export default function NotificationDropdown({
         알림 {data ? `${data.totalCount}` : '0'}개
         <CloseButton onClick={onClick} />
       </div>
-      {notificationList ? (
+      {notificationList && data?.totalCount ? (
         <div className="flex flex-col items-center gap-[15px]">
           {notificationList.map((notification) => (
             <div

components/SideNavigation/SideNavigation.tsx

@@ -16,10 +16,11 @@ import useUploadProfile from '@/hooks/useUploadProfile';
 import useEditMyInfo from '@/hooks/useEditMyInfo';
 import { ProfileImageResponse } from '@/pages/api/users/apiUser.types';
 import { useUserData } from '@/hooks/useUserData';
+import Spinner from '../Spinner/Spinner';
 
 export default function SidenNavigation() {
   const router = useRouter();
-  const userData = useUserData();
+  const { userData, isLoading } = useUserData();
   const [activeButton, setActiveButton] = useState<string | null>(null);
   const [profileImageUrl, setProfileImageUrl] = useState<string | null>(
     userData?.profileImageUrl
@@ -47,7 +48,6 @@ export default function SidenNavigation() {
     setting: '/setting',
     calendar: '/calendar',
   };
-
   const { postProfileImgMutation } = useUploadProfile();
   const { postMyInfoMutation } = useEditMyInfo();
 
@@ -89,6 +89,10 @@ export default function SidenNavigation() {
 
   const sideNavBtnStyle = `font-bold flex gap-[8px] h-[44px] w-fill items-center pl-[16px] text-[16px] `;
 
+  if (isLoading) {
+    return <Spinner />;
+  }
+
   return (
     <div className="w-[384px] h-[432px] p-[24px] flex flex-col rounded-[12px] border border-solid border-var-gray3 justify-center gap-[24px] t:w-[251px]">
       <div className="w-fill flex justify-center relative">

hooks/useGetNotification.ts

@@ -10,14 +10,15 @@ export default function useGetNotification(query: MyNotificationListQuery) {
   const { cursorId = undefined, size = 10 } = query;
   const { isLoggedIn } = useLoginState();
 
-  const { data, isLoading, isError } = useQuery<
-    MyNotificationListResponse,
-    Error
-  >({
+  const {
+    data,
+    isLoading: isNotifyCountLoading,
+    isError,
+  } = useQuery<MyNotificationListResponse, Error>({
     queryKey: ['myNotification', query],
     queryFn: () => apiMyNotificationList({ cursorId, size }),
     enabled: !!isLoggedIn,
   });
 
-  return { data, isLoading, isError };
+  return { data, isNotifyCountLoading, isError };
 }

hooks/useUserData.ts

@@ -10,7 +10,7 @@ export const useUserData = () => {
   const [userData, setUserData] = useRecoilState(userState);
   const { isLoggedIn } = useLoginState();
 
-  const { data: userResponseData } = useQuery({
+  const { data: userResponseData, isLoading } = useQuery({
     queryKey: ['user', userId],
     queryFn: apiMyInfo,
     enabled: !!isLoggedIn,
@@ -27,5 +27,5 @@ export const useUserData = () => {
     setUserId(userId);
   }, []);
 
-  return userData;
+  return { userData, isLoading };
 };