[FE] 데이터 로딩 처리

frontend/src/pages/Feed.tsx

@@ -6,6 +6,7 @@ import { getFeed } from '@api/Feed';
 
 import { InfiniteDiaryListProps } from '@type/components/Common/DiaryList';
 
+import Loading from '@components/Common/Loading';
 import NavBar from '@components/Common/NavBar';
 import DiaryListItem from '@components/Common/DiaryListItem';
 
@@ -16,6 +17,7 @@ const Feed = () => {
 
   const {
     data: feedData,
+    isLoading,
     isSuccess,
     fetchNextPage,
   } = useInfiniteQuery<
@@ -55,6 +57,10 @@ const Feed = () => {
 
   const isEmpty = !feedData?.pages[0].diaryList.length;
 
+  if (isLoading) {
+    return <Loading phrase="로딩 중이에요." />;
+  }
+
   return (
     <div className="mb-12 flex w-full flex-col items-center justify-start">
       <NavBar />

frontend/src/pages/Home.tsx

@@ -35,7 +35,7 @@ const Home = () => {
   const {
     data: profileData,
     isError,
-    isLoading,
+    isLoading: profileDataLoading,
   } = useQuery({
     queryKey: ['profileData', userId],
     queryFn: () => getCurrentUser(userId ? +userId : 0),
@@ -44,6 +44,7 @@ const Home = () => {
   const {
     data: diaryData,
     fetchNextPage,
+    isLoading: diaryDataLoading,
     isSuccess,
   } = useInfiniteQuery<
     any,
@@ -85,7 +86,7 @@ const Home = () => {
     return () => io.disconnect();
   }, [isSuccess]);
 
-  if (isLoading) {
+  if (profileDataLoading || diaryDataLoading) {
     return <Loading phrase="로딩 중이에요." />;
   }
 

frontend/src/pages/MyDiary.tsx

@@ -8,6 +8,7 @@ import dizzyFace from '@assets/image/dizzyFace.png';
 import { viewTypes, searchOptionsType, isViewTypes } from '@type/pages/MyDiary';
 import { InfiniteDiaryListProps } from '@type/components/Common/DiaryList';
 
+import Loading from '@components/Common/Loading';
 import NavBar from '@components/Common/NavBar';
 import DiaryListItem from '@components/Common/DiaryListItem';
 import Modal from '@components/Common/Modal';
@@ -31,6 +32,7 @@ const MyDiary = () => {
   const {
     data: diaryData,
     isSuccess: diaryDataSuccess,
+    isLoading: diaryDataLoading,
     fetchNextPage: fetchNextDiaryPage,
   } = useInfiniteQuery<
     any,
@@ -69,6 +71,7 @@ const MyDiary = () => {
 
   const {
     data: searchData,
+    isLoading: searchDataLoading,
     isSuccess: searchDataSuccess,
     fetchNextPage: fetchNextSearchPage,
   } = useInfiniteQuery<
@@ -123,6 +126,10 @@ const MyDiary = () => {
 
   const isEmpty = !diaryData?.pages[0].diaryList.length;
 
+  if (diaryDataLoading || searchDataLoading) {
+    return <Loading phrase="로딩 중이에요." />;
+  }
+
   return (
     <>
       <NavBar />

frontend/src/util/funcs.ts

@@ -1,43 +1,50 @@
 import { DAY_OF_WEEK } from '@util/constants';
 
 export const getNowMonth = (date: Date) => {
-  const month = date.getMonth() + 1;
-  const monthName = date.toLocaleString('en-US', { month: 'long' });
+  const koreaTime = new Date(date.toUTCString());
+  const month = koreaTime.getMonth() + 1;
+  const monthName = koreaTime.toLocaleString('en-US', { month: 'long' });
   return [month, monthName];
 };
 
 export const getNowWeek = (date: Date) => {
-  const year = date.getFullYear();
-  const nowDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+  const koreaTime = new Date(date.toUTCString());
+  const year = koreaTime.getFullYear();
+  const nowDate = new Date(koreaTime.getFullYear(), koreaTime.getMonth(), koreaTime.getDate());
   const firstDate = new Date(year, 0, 1);
   const diffDate = nowDate.getTime() - firstDate.getTime();
   const diffDay = diffDate / (1000 * 60 * 60 * 24);
   const nowWeek = Math.floor((diffDay + firstDate.getDay()) / 7) + 1;
   return nowWeek;
 };
 
-export const formatDate = (date: Date) => date.toLocaleDateString().slice(0, -1);
+export const formatDate = (date: Date) => {
+  const koreaTime = new Date(date.toUTCString());
+  return koreaTime.toLocaleDateString().slice(0, -1);
+};
 
 export const formatDateString = (str: string) => {
   const DateObject = new Date(str);
-  const year = DateObject.getFullYear();
-  const month = DateObject.getMonth() + 1;
-  const day = DateObject.getDate();
-  const date = DateObject.getDay();
+  const koreaTime = new Date(DateObject.toUTCString());
+  const year = koreaTime.getFullYear();
+  const month = koreaTime.getMonth() + 1;
+  const day = koreaTime.getDate();
+  const date = koreaTime.getDay();
 
   return `${year}년 ${month}월 ${day}일 ${DAY_OF_WEEK[date]}`;
 };
 
 export const formatDateDash = (date: Date) => {
-  const year = date.getFullYear();
-  const month = (date.getMonth() + 1).toString().padStart(2, '0');
-  const day = date.getDate().toString().padStart(2, '0');
+  const koreaTime = new Date(date.toUTCString());
+  const year = koreaTime.getFullYear();
+  const month = (koreaTime.getMonth() + 1).toString().padStart(2, '0');
+  const day = koreaTime.getDate().toString().padStart(2, '0');
 
   return `${year}-${month}-${day}`;
 };
 
 export const calPrev = (date: Date, num: number) => {
-  const newDate = new Date(date);
+  const newDate = new Date(date.toUTCString());
   newDate.setDate(newDate.getDate() + num);
   return newDate;
 };