diff --git a/frontend/src/pages/Feed.tsx b/frontend/src/pages/Feed.tsx
index 0e4aabf..b8935e7 100644
--- a/frontend/src/pages/Feed.tsx
+++ b/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 ;
+ }
+
return (
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index 143893f..6520ff2 100644
--- a/frontend/src/pages/Home.tsx
+++ b/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 ;
}
diff --git a/frontend/src/pages/MyDiary.tsx b/frontend/src/pages/MyDiary.tsx
index d7c9a98..5933620 100644
--- a/frontend/src/pages/MyDiary.tsx
+++ b/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 ;
+ }
+
return (
<>
diff --git a/frontend/src/util/funcs.ts b/frontend/src/util/funcs.ts
index 8f9a885..4f7dd7d 100644
--- a/frontend/src/util/funcs.ts
+++ b/frontend/src/util/funcs.ts
@@ -1,14 +1,16 @@
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);
@@ -16,28 +18,33 @@ export const getNowWeek = (date: Date) => {
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;
};