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; };