diff --git a/packages/web/src/apis/auth/queries.ts b/packages/web/src/apis/auth/queries.ts index f43265052..5164d07be 100644 --- a/packages/web/src/apis/auth/queries.ts +++ b/packages/web/src/apis/auth/queries.ts @@ -1,6 +1,7 @@ -import { Keys, NicknameDuplicateResponse, getNicknameDuplicate, getSchoolSearch } from '.'; import { useQuery, useSuspenseQuery } from '@tanstack/react-query'; +import { Keys, NicknameDuplicateResponse, getNicknameDuplicate, getSchoolSearch } from '.'; + export const useGetSearchSchool = (searchWord: string) => useSuspenseQuery({ queryKey: Keys.getSchoolSearch(searchWord), diff --git a/packages/web/src/apis/common/mutations.ts b/packages/web/src/apis/common/mutations.ts index c4ccbe4af..3b623bbf0 100644 --- a/packages/web/src/apis/common/mutations.ts +++ b/packages/web/src/apis/common/mutations.ts @@ -1,6 +1,7 @@ -import { postFiles } from './apis'; import { useMutation } from '@tanstack/react-query'; +import { postFiles } from './apis'; + export const usePostFiles = () => { return useMutation({ mutationFn: postFiles }); }; diff --git a/packages/web/src/apis/config/privateApi.ts b/packages/web/src/apis/config/privateApi.ts index 657d6bafa..42468826b 100644 --- a/packages/web/src/apis/config/privateApi.ts +++ b/packages/web/src/apis/config/privateApi.ts @@ -1,7 +1,5 @@ import axios, { AxiosError, AxiosResponse, type InternalAxiosRequestConfig } from 'axios'; -import { postReissue } from '../auth'; - import type { CustomInstance, ErrorType } from './type'; import { BASE_API_URL } from '@/constants'; @@ -19,7 +17,7 @@ privateApi.defaults.timeout = 2500; privateApi.interceptors.request.use( async (config: InternalAxiosRequestConfig) => { try { - const { accessToken, refreshToken } = await getTokenFromCookie(); + const { accessToken } = await getTokenFromCookie(); config.headers['X-AUTH-TOKEN'] = accessToken; return config; } catch (error) { diff --git a/packages/web/src/apis/groups/mutations.tsx b/packages/web/src/apis/groups/mutations.tsx index eae56200d..fb808a41e 100644 --- a/packages/web/src/apis/groups/mutations.tsx +++ b/packages/web/src/apis/groups/mutations.tsx @@ -18,9 +18,9 @@ import { GroupDetailResponse } from './type'; import { MeetingScrapResponse } from '../meeting'; import { Keys as MeetingKeys } from '../meeting/keys'; -import FeedbackCompleteModal from '@/app/[lng]/(main)/meeting/participate/feedback/[groupId]/funnels/step3/FeedbackCompleteModal.client'; +import FeedbackCompleteModal from '@/app/[lng]/(main)/meeting/participate/feedback/[groupId]/funnels/step3/FeedbackCompleteModal'; import useAppRouter from '@/hooks/useAppRouter'; -import { useModal } from '@/hooks/useModal'; +import useModal from '@/hooks/useModal/useModal'; export const usePostCreateGroup = () => { const { replace } = useAppRouter(); @@ -30,7 +30,7 @@ export const usePostCreateGroup = () => { mutationFn: postCreateGroup, onSuccess: (data) => { queryClient.resetQueries({ queryKey: GroupsKeys.getGroups() }); - replace(`/grouping/${data.groupId}?tab=detail`); + replace(`/grouping/detail/${data.groupId}?tab=detail`); }, }); }; diff --git a/packages/web/src/apis/meeting/mutations.ts b/packages/web/src/apis/meeting/mutations.ts index a3a8768be..da14c267e 100644 --- a/packages/web/src/apis/meeting/mutations.ts +++ b/packages/web/src/apis/meeting/mutations.ts @@ -1,4 +1,5 @@ -import { postMeetingRejected } from '.'; import { useMutation } from '@tanstack/react-query'; +import { postMeetingRejected } from '.'; + export const usePostApply = () => useMutation({ mutationFn: postMeetingRejected }); diff --git a/packages/web/src/apis/meeting/queries.ts b/packages/web/src/apis/meeting/queries.ts index b170847b4..e7822c986 100644 --- a/packages/web/src/apis/meeting/queries.ts +++ b/packages/web/src/apis/meeting/queries.ts @@ -1,3 +1,5 @@ +import { useSuspenseQuery } from '@tanstack/react-query'; + import { getMeetingHosting, getMeetingNotEstimated, @@ -7,7 +9,6 @@ import { getMeetingWaiting, } from '.'; import { Keys } from './keys'; -import { useSuspenseQuery } from '@tanstack/react-query'; export const useGetExample = () => {}; diff --git a/packages/web/src/apis/notifications/mutations.ts b/packages/web/src/apis/notifications/mutations.ts index ed4b7eb9c..901cc6f92 100644 --- a/packages/web/src/apis/notifications/mutations.ts +++ b/packages/web/src/apis/notifications/mutations.ts @@ -1,6 +1,7 @@ -import { postFCMToken } from './apis'; import { useMutation } from '@tanstack/react-query'; +import { postFCMToken } from './apis'; + export const usePostFCMToken = () => { return useMutation({ mutationFn: postFCMToken }); }; diff --git a/packages/web/src/apis/notifications/queries.ts b/packages/web/src/apis/notifications/queries.ts index a29540092..0828f78c3 100644 --- a/packages/web/src/apis/notifications/queries.ts +++ b/packages/web/src/apis/notifications/queries.ts @@ -1,5 +1,6 @@ -import { Keys, getNotification } from '.'; import { useSuspenseQuery } from '@tanstack/react-query'; +import { Keys, getNotification } from '.'; + export const useGetNotifications = () => useSuspenseQuery({ queryKey: Keys.getNotifications(), queryFn: getNotification }); diff --git a/packages/web/src/apis/profile/mutations.ts b/packages/web/src/apis/profile/mutations.ts index a07ea9bb4..6f5b88945 100644 --- a/packages/web/src/apis/profile/mutations.ts +++ b/packages/web/src/apis/profile/mutations.ts @@ -1,6 +1,8 @@ +import { useMutation, useQueryClient } from '@tanstack/react-query'; + import { Keys, deleteMate, patchProfile, patchSignOut, postEmailVerify } from '.'; + import useAppRouter from '@/hooks/useAppRouter'; -import { useMutation, useQueryClient } from '@tanstack/react-query'; export const usePatchProfile = () => { const queryClient = useQueryClient(); diff --git a/packages/web/src/apis/profile/queries.ts b/packages/web/src/apis/profile/queries.ts index d998312f4..3501ec6aa 100644 --- a/packages/web/src/apis/profile/queries.ts +++ b/packages/web/src/apis/profile/queries.ts @@ -1,6 +1,7 @@ -import { Keys, getMates, getPraises, getProfile, getProfileById } from '.'; import { useSuspenseQuery } from '@tanstack/react-query'; +import { Keys, getMates, getPraises, getProfile, getProfileById } from '.'; + export const useGetProfile = () => useSuspenseQuery({ queryKey: Keys.getProfile(), diff --git a/packages/web/src/app/[lng]/(main)/chat/page.tsx b/packages/web/src/app/[lng]/(main)/chat/page.tsx new file mode 100644 index 000000000..42a9856b6 --- /dev/null +++ b/packages/web/src/app/[lng]/(main)/chat/page.tsx @@ -0,0 +1,3 @@ +export default function ChatPage() { + return
; +} diff --git a/packages/web/src/app/[lng]/(main)/community/components/AllContent.tsx b/packages/web/src/app/[lng]/(main)/community/components/AllContent.tsx deleted file mode 100644 index 97478a977..000000000 --- a/packages/web/src/app/[lng]/(main)/community/components/AllContent.tsx +++ /dev/null @@ -1,37 +0,0 @@ -'use client'; - -import { useEffect } from 'react'; -import { useInView } from 'react-intersection-observer'; - -import { useGetCommunityArticles } from '@/apis/community/queries'; -import ArticleItem from '@/app/[lng]/(main)/community/components/ArticleItem'; -import Empty from '@/app/[lng]/(main)/community/components/Empty'; -import { ItemList } from '@/components/List'; -import { useBlockStore } from '@/store/useBlockStore'; - -export default function AllContent() { - const { ref, inView } = useInView(); - const { blockCommunityArticleIds } = useBlockStore(); - const { data: articleList, fetchNextPage, hasNextPage } = useGetCommunityArticles(0); - - useEffect(() => { - if (inView && hasNextPage) fetchNextPage(); - }, [inView, fetchNextPage]); - - return ( - <> - { - return ( - !blockCommunityArticleIds.includes(articleData.article.id) && ( - - ) - ); - }} - renderEmpty={() => } - /> -
- - ); -} diff --git a/packages/web/src/app/[lng]/(main)/community/components/ArticleItem.tsx b/packages/web/src/app/[lng]/(main)/community/components/ArticleItem.tsx index 635f8eed8..e8eaae9d0 100644 --- a/packages/web/src/app/[lng]/(main)/community/components/ArticleItem.tsx +++ b/packages/web/src/app/[lng]/(main)/community/components/ArticleItem.tsx @@ -47,26 +47,18 @@ export default function ArticleItem({ articleData, onClick }: ArticleItemProps) likeCount, isLiked, createdAt, - isWriter, - userId, - thumbnail, category, } = article; - const { - id: writerId, - isCertifiedStudent, - reliabilityLevel, - nickName, - countryName, - countryImage, - profileImage, - } = writer; + const { isCertifiedStudent, reliabilityLevel, nickName, countryImage, profileImage } = writer; const locale = i18n.language === 'ko' ? ko : enUS; return ( -
push(`/community/${articleId}`, false))}> +
push(`/community/detail/${articleId}`, false))} + > {t(`category.${category.name}`)}

{formatDate(createdAt, locale)}

@@ -80,7 +72,7 @@ export default function ArticleItem({ articleData, onClick }: ArticleItemProps)
{!!images?.length && (
- 이미지 + 이미지
)} diff --git a/packages/web/src/app/[lng]/(main)/community/components/LanguageContent.tsx b/packages/web/src/app/[lng]/(main)/community/components/CommunityArticles.tsx similarity index 85% rename from packages/web/src/app/[lng]/(main)/community/components/LanguageContent.tsx rename to packages/web/src/app/[lng]/(main)/community/components/CommunityArticles.tsx index 983c7f264..a4882d363 100644 --- a/packages/web/src/app/[lng]/(main)/community/components/LanguageContent.tsx +++ b/packages/web/src/app/[lng]/(main)/community/components/CommunityArticles.tsx @@ -10,10 +10,14 @@ import { useGetCommunityArticles } from '@/apis/community/queries'; import { ItemList } from '@/components/List'; import { useBlockStore } from '@/store/useBlockStore'; -export default function LanguageContent() { +interface CommunityArticle { + categoryId: number; +} + +export default function CommunityArticles({ categoryId }: CommunityArticle) { const { ref, inView } = useInView(); const { blockCommunityArticleIds } = useBlockStore(); - const { data: articleList, fetchNextPage, hasNextPage } = useGetCommunityArticles(3); + const { data: articleList, fetchNextPage, hasNextPage } = useGetCommunityArticles(categoryId); useEffect(() => { if (inView && hasNextPage) fetchNextPage(); diff --git a/packages/web/src/app/[lng]/(main)/community/components/ContentSection.tsx b/packages/web/src/app/[lng]/(main)/community/components/ContentSection.tsx index 7bb7a006f..b563f6a30 100644 --- a/packages/web/src/app/[lng]/(main)/community/components/ContentSection.tsx +++ b/packages/web/src/app/[lng]/(main)/community/components/ContentSection.tsx @@ -1,16 +1,12 @@ 'use client'; -import dynamic from 'next/dynamic'; import { Suspense } from 'react'; +import CommunityArticles from './CommunityArticles'; + import { useTranslation } from '@/app/i18n/client'; import { Loading } from '@/components/Loading'; import { Tabs } from '@/components/Tabs'; -const AllContent = dynamic(() => import('./AllContent')); -const KpopContent = dynamic(() => import('./KpopContent')); -const LanguageContent = dynamic(() => import('./LanguageContent')); -const QuestionContent = dynamic(() => import('./QuestionContent')); - export default function ContentSection() { const { t } = useTranslation('community'); @@ -24,22 +20,22 @@ export default function ContentSection() { }> - + }> - + }> - + }> - + diff --git a/packages/web/src/app/[lng]/(main)/community/components/KpopContent.tsx b/packages/web/src/app/[lng]/(main)/community/components/KpopContent.tsx deleted file mode 100644 index 7f012d8a3..000000000 --- a/packages/web/src/app/[lng]/(main)/community/components/KpopContent.tsx +++ /dev/null @@ -1,38 +0,0 @@ -'use client'; - -import { useEffect } from 'react'; -import { useInView } from 'react-intersection-observer'; - -import ArticleItem from './ArticleItem'; -import Empty from './Empty'; - -import { useGetCommunityArticles } from '@/apis/community/queries'; -import { ItemList } from '@/components/List'; -import { useBlockStore } from '@/store/useBlockStore'; - -export default function KpopContent() { - const { ref, inView } = useInView(); - const { blockCommunityArticleIds } = useBlockStore(); - const { data: articleList, fetchNextPage, hasNextPage } = useGetCommunityArticles(1); - - useEffect(() => { - if (inView && hasNextPage) fetchNextPage(); - }, [inView, fetchNextPage]); - - return ( - <> - { - return ( - !blockCommunityArticleIds.includes(articleData.article.id) && ( - - ) - ); - }} - renderEmpty={() => } - /> -
- - ); -} diff --git a/packages/web/src/app/[lng]/(main)/community/components/QuestionContent.tsx b/packages/web/src/app/[lng]/(main)/community/components/QuestionContent.tsx deleted file mode 100644 index 7076a67d8..000000000 --- a/packages/web/src/app/[lng]/(main)/community/components/QuestionContent.tsx +++ /dev/null @@ -1,39 +0,0 @@ -'use client'; - -import { useEffect } from 'react'; -import { useInView } from 'react-intersection-observer'; - -import ArticleItem from './ArticleItem'; -import Empty from './Empty'; - -import { useGetCommunityArticles } from '@/apis/community/queries'; -import { ItemList } from '@/components/List'; -import { Loading } from '@/components/Loading'; -import { useBlockStore } from '@/store/useBlockStore'; - -export default function QuestionContent() { - const { ref, inView } = useInView(); - const { blockCommunityArticleIds } = useBlockStore(); - const { data: articleList, fetchNextPage, hasNextPage } = useGetCommunityArticles(2); - - useEffect(() => { - if (inView && hasNextPage) fetchNextPage(); - }, [inView, fetchNextPage]); - - return ( - <> - { - return ( - !blockCommunityArticleIds.includes(articleData.article.id) && ( - - ) - ); - }} - renderEmpty={() => } - /> -
- - ); -} diff --git a/packages/web/src/app/[lng]/(main)/community/[articleId]/components/ArticleDetail.tsx b/packages/web/src/app/[lng]/(main)/community/detail/[articleId]/components/ArticleDetail.tsx similarity index 100% rename from packages/web/src/app/[lng]/(main)/community/[articleId]/components/ArticleDetail.tsx rename to packages/web/src/app/[lng]/(main)/community/detail/[articleId]/components/ArticleDetail.tsx diff --git a/packages/web/src/app/[lng]/(main)/community/[articleId]/components/ArticleDetailHeader.tsx b/packages/web/src/app/[lng]/(main)/community/detail/[articleId]/components/ArticleDetailHeader.tsx similarity index 98% rename from packages/web/src/app/[lng]/(main)/community/[articleId]/components/ArticleDetailHeader.tsx rename to packages/web/src/app/[lng]/(main)/community/detail/[articleId]/components/ArticleDetailHeader.tsx index f53ff98e4..49d0ccd6c 100644 --- a/packages/web/src/app/[lng]/(main)/community/[articleId]/components/ArticleDetailHeader.tsx +++ b/packages/web/src/app/[lng]/(main)/community/detail/[articleId]/components/ArticleDetailHeader.tsx @@ -12,7 +12,7 @@ import { DropDownOptionType } from '@/components/DropDown/DropDown'; import { Header } from '@/components/Header'; import { Icon } from '@/components/Icon'; import useAppRouter from '@/hooks/useAppRouter'; -import { useModal } from '@/hooks/useModal'; +import useModal from '@/hooks/useModal/useModal'; import { useNumberParams } from '@/hooks/useNumberParams'; import { useBlockStore } from '@/store/useBlockStore'; diff --git a/packages/web/src/app/[lng]/(main)/community/[articleId]/components/ArticleItem.tsx b/packages/web/src/app/[lng]/(main)/community/detail/[articleId]/components/ArticleItem.tsx similarity index 98% rename from packages/web/src/app/[lng]/(main)/community/[articleId]/components/ArticleItem.tsx rename to packages/web/src/app/[lng]/(main)/community/detail/[articleId]/components/ArticleItem.tsx index 7b63947c1..903103d84 100644 --- a/packages/web/src/app/[lng]/(main)/community/[articleId]/components/ArticleItem.tsx +++ b/packages/web/src/app/[lng]/(main)/community/detail/[articleId]/components/ArticleItem.tsx @@ -12,7 +12,7 @@ import { Flex } from '@/components/Layout'; import { Loading } from '@/components/Loading'; import { ImageModal } from '@/components/Modal'; import { Spacing } from '@/components/Spacing'; -import { useModal } from '@/hooks/useModal'; +import useModal from '@/hooks/useModal/useModal'; import cn from '@/utils/cn'; import { getLocalCookie } from '@/utils/cookieController'; diff --git a/packages/web/src/app/[lng]/(main)/community/[articleId]/components/CommentForm.tsx b/packages/web/src/app/[lng]/(main)/community/detail/[articleId]/components/CommentForm.tsx similarity index 100% rename from packages/web/src/app/[lng]/(main)/community/[articleId]/components/CommentForm.tsx rename to packages/web/src/app/[lng]/(main)/community/detail/[articleId]/components/CommentForm.tsx diff --git a/packages/web/src/app/[lng]/(main)/community/[articleId]/components/CommentItem.tsx b/packages/web/src/app/[lng]/(main)/community/detail/[articleId]/components/CommentItem.tsx similarity index 99% rename from packages/web/src/app/[lng]/(main)/community/[articleId]/components/CommentItem.tsx rename to packages/web/src/app/[lng]/(main)/community/detail/[articleId]/components/CommentItem.tsx index 5f5fb08a1..6d8403f8d 100644 --- a/packages/web/src/app/[lng]/(main)/community/[articleId]/components/CommentItem.tsx +++ b/packages/web/src/app/[lng]/(main)/community/detail/[articleId]/components/CommentItem.tsx @@ -23,7 +23,7 @@ import { Icon } from '@/components/Icon'; import { Flex } from '@/components/Layout'; import { Loading } from '@/components/Loading'; import { Spacing } from '@/components/Spacing'; -import { useModal } from '@/hooks/useModal'; +import useModal from '@/hooks/useModal/useModal'; import { useBlockStore } from '@/store/useBlockStore'; import cn from '@/utils/cn'; import { getLocalCookie } from '@/utils/cookieController'; diff --git a/packages/web/src/app/[lng]/(main)/community/[articleId]/components/CommentList.tsx b/packages/web/src/app/[lng]/(main)/community/detail/[articleId]/components/CommentList.tsx similarity index 100% rename from packages/web/src/app/[lng]/(main)/community/[articleId]/components/CommentList.tsx rename to packages/web/src/app/[lng]/(main)/community/detail/[articleId]/components/CommentList.tsx diff --git a/packages/web/src/app/[lng]/(main)/community/[articleId]/components/CommentProvider.tsx b/packages/web/src/app/[lng]/(main)/community/detail/[articleId]/components/CommentProvider.tsx similarity index 100% rename from packages/web/src/app/[lng]/(main)/community/[articleId]/components/CommentProvider.tsx rename to packages/web/src/app/[lng]/(main)/community/detail/[articleId]/components/CommentProvider.tsx diff --git a/packages/web/src/app/[lng]/(main)/community/[articleId]/components/CommunityModal.tsx b/packages/web/src/app/[lng]/(main)/community/detail/[articleId]/components/CommunityModal.tsx similarity index 100% rename from packages/web/src/app/[lng]/(main)/community/[articleId]/components/CommunityModal.tsx rename to packages/web/src/app/[lng]/(main)/community/detail/[articleId]/components/CommunityModal.tsx diff --git a/packages/web/src/app/[lng]/(main)/community/[articleId]/components/ReplyItem.tsx b/packages/web/src/app/[lng]/(main)/community/detail/[articleId]/components/ReplyItem.tsx similarity index 98% rename from packages/web/src/app/[lng]/(main)/community/[articleId]/components/ReplyItem.tsx rename to packages/web/src/app/[lng]/(main)/community/detail/[articleId]/components/ReplyItem.tsx index de127edb0..e66bf1011 100644 --- a/packages/web/src/app/[lng]/(main)/community/[articleId]/components/ReplyItem.tsx +++ b/packages/web/src/app/[lng]/(main)/community/detail/[articleId]/components/ReplyItem.tsx @@ -15,7 +15,7 @@ import { Icon } from '@/components/Icon'; import { Flex } from '@/components/Layout'; import { Loading } from '@/components/Loading'; import { Spacing } from '@/components/Spacing'; -import { useModal } from '@/hooks/useModal'; +import useModal from '@/hooks/useModal/useModal'; import { useBlockStore } from '@/store/useBlockStore'; import cn from '@/utils/cn'; import { getLocalCookie } from '@/utils/cookieController'; diff --git a/packages/web/src/app/[lng]/(main)/community/[articleId]/components/ReplyList.tsx b/packages/web/src/app/[lng]/(main)/community/detail/[articleId]/components/ReplyList.tsx similarity index 88% rename from packages/web/src/app/[lng]/(main)/community/[articleId]/components/ReplyList.tsx rename to packages/web/src/app/[lng]/(main)/community/detail/[articleId]/components/ReplyList.tsx index eabdb1989..bfb8e7f97 100644 --- a/packages/web/src/app/[lng]/(main)/community/[articleId]/components/ReplyList.tsx +++ b/packages/web/src/app/[lng]/(main)/community/detail/[articleId]/components/ReplyList.tsx @@ -1,5 +1,5 @@ import { Reply } from '@/apis/community'; -import ReplyItem from '@/app/[lng]/(main)/community/[articleId]/components/ReplyItem'; +import ReplyItem from '@/app/[lng]/(main)/community/detail/[articleId]/components/ReplyItem'; import { ItemList } from '@/components/List'; import { useBlockStore } from '@/store/useBlockStore'; diff --git a/packages/web/src/app/[lng]/(main)/community/[articleId]/page.tsx b/packages/web/src/app/[lng]/(main)/community/detail/[articleId]/page.tsx similarity index 67% rename from packages/web/src/app/[lng]/(main)/community/[articleId]/page.tsx rename to packages/web/src/app/[lng]/(main)/community/detail/[articleId]/page.tsx index e6b11bea7..4069e7b4d 100644 --- a/packages/web/src/app/[lng]/(main)/community/[articleId]/page.tsx +++ b/packages/web/src/app/[lng]/(main)/community/detail/[articleId]/page.tsx @@ -1,7 +1,10 @@ +import { ErrorBoundary } from 'react-error-boundary'; + +import ArticleDetail from './components/ArticleDetail'; +import ArticleDetailHeader from './components/ArticleDetailHeader'; + import { Keys, getCommunityArticleDetail } from '@/apis/community'; -import ArticleDetail from '@/app/[lng]/(main)/community/[articleId]/components/ArticleDetail'; -import ArticleDetailHeader from '@/app/[lng]/(main)/community/[articleId]/components/ArticleDetailHeader'; -import { LocalSuspenseErrorBoundary } from '@/components/ErrorBoundary'; +import { ErrorFallback } from '@/components/ErrorBoundary'; import { HydrationProvider } from '@/components/Provider'; import { Spacing } from '@/components/Spacing'; @@ -16,7 +19,7 @@ export default function CommunityArticlePage({ params }: CommunityArticlePagePro return ( <> - + getCommunityArticleDetail(articleId)} queryKey={Keys.getCommunityArticleDetail(articleId)} @@ -24,7 +27,7 @@ export default function CommunityArticlePage({ params }: CommunityArticlePagePro - + ); diff --git a/packages/web/src/app/[lng]/(main)/community/loading.tsx b/packages/web/src/app/[lng]/(main)/community/loading.tsx new file mode 100644 index 000000000..eab0965c3 --- /dev/null +++ b/packages/web/src/app/[lng]/(main)/community/loading.tsx @@ -0,0 +1,19 @@ +import { Flex } from '@/components/Layout'; +import cn from '@/utils/cn'; + +interface LoadingProps { + className?: string; +} + +const loadingIconStyle = 'h-10 w-10 rounded-full bg-primary'; + +export default function Loading({ className }: LoadingProps) { + return ( + +
+
+
+
+ + ); +} diff --git a/packages/web/src/app/[lng]/(main)/community/page.tsx b/packages/web/src/app/[lng]/(main)/community/page.tsx index 7ff2802d0..54a4c316e 100644 --- a/packages/web/src/app/[lng]/(main)/community/page.tsx +++ b/packages/web/src/app/[lng]/(main)/community/page.tsx @@ -1,10 +1,11 @@ +import { ErrorBoundary } from 'react-error-boundary'; + import CommunityHeader from './components/CommunityHeader'; import ContentSection from './components/ContentSection'; import CreateArticleButton from './components/CreateArticleButton'; import { Keys, getCommunityArticles } from '@/apis/community'; -import { LocalSuspenseErrorBoundary } from '@/components/ErrorBoundary'; -import { Footer } from '@/components/Footer'; +import { ErrorFallback } from '@/components/ErrorBoundary'; import { HydrationProvider } from '@/components/Provider'; import { Spacing } from '@/components/Spacing'; @@ -18,28 +19,17 @@ export default function CommunityPage({ params: { lng } }: CommunityPageProps) { return ( <> - + getCommunityArticles({ categoryId: 0, pageParam: 0 }), - () => getCommunityArticles({ categoryId: 1, pageParam: 0 }), - () => getCommunityArticles({ categoryId: 2, pageParam: 0 }), - () => getCommunityArticles({ categoryId: 3, pageParam: 0 }), - ]} - queryMultipleKey={[ - Keys.getCommunityArticles(0), - Keys.getCommunityArticles(1), - Keys.getCommunityArticles(2), - Keys.getCommunityArticles(3), - ]} + queryFn={() => getCommunityArticles({ categoryId: 0, pageParam: 0 })} + queryKey={Keys.getCommunityArticles(0)} isInfiniteQuery > - + -