From 6cd9b106cda129a8bda5b7970b66c7bc50c0787c Mon Sep 17 00:00:00 2001 From: Hee Su Date: Thu, 4 Apr 2024 15:32:30 +0900 Subject: [PATCH] =?UTF-8?q?Refactor:=20=EB=9D=BC=EC=9A=B0=ED=8C=85=20?= =?UTF-8?q?=EC=8B=9C=20=EC=A6=89=EA=B0=81=EC=A0=81=EC=9D=B8=20loading=20?= =?UTF-8?q?=ED=94=BC=EB=93=9C=EB=B0=B1,=20lint=20=EC=88=98=EC=A0=95,=20Foo?= =?UTF-8?q?ter=EB=A5=BC=20layout=EC=9C=BC=EB=A1=9C=20(#675)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * refactor: 코드스플리팅 제거 * refactor: Modal 관련 hook import error 임시조치 * refactor: community article list 통합 * refactor: Footer -> layout으로 이동 * refactor: 폴더 구조 변경 * refactor: lint 수정 --- packages/web/src/apis/auth/queries.ts | 3 +- packages/web/src/apis/common/mutations.ts | 3 +- packages/web/src/apis/config/privateApi.ts | 4 +- packages/web/src/apis/groups/mutations.tsx | 4 +- packages/web/src/apis/meeting/mutations.ts | 3 +- packages/web/src/apis/meeting/queries.ts | 3 +- .../web/src/apis/notifications/mutations.ts | 3 +- .../web/src/apis/notifications/queries.ts | 3 +- packages/web/src/apis/profile/mutations.ts | 4 +- packages/web/src/apis/profile/queries.ts | 3 +- .../community/components/AllContent.tsx | 37 ------------------ .../community/components/ArticleItem.tsx | 20 +++------- ...stionContent.tsx => CommunityArticles.tsx} | 9 +++-- .../community/components/ContentSection.tsx | 16 +++----- .../community/components/KpopContent.tsx | 38 ------------------- .../community/components/LanguageContent.tsx | 38 ------------------- .../[articleId]/components/ArticleDetail.tsx | 0 .../components/ArticleDetailHeader.tsx | 2 +- .../[articleId]/components/ArticleItem.tsx | 2 +- .../[articleId]/components/CommentForm.tsx | 0 .../[articleId]/components/CommentItem.tsx | 2 +- .../[articleId]/components/CommentList.tsx | 0 .../components/CommentProvider.tsx | 0 .../[articleId]/components/CommunityModal.tsx | 0 .../[articleId]/components/ReplyItem.tsx | 2 +- .../[articleId]/components/ReplyList.tsx | 2 +- .../{ => detail}/[articleId]/page.tsx | 13 ++++--- .../app/[lng]/(main)/community/loading.tsx | 19 ++++++++++ .../src/app/[lng]/(main)/community/page.tsx | 24 ++++-------- .../write/components/InputSection.tsx | 2 +- .../write/components/WriteHeader.tsx | 2 +- .../grouping/components/ArticleItem.tsx | 2 +- .../grouping/components/GroupingCardList.tsx | 5 +-- .../create/funnels/main/MainStep.client.tsx | 3 +- .../create/funnels/main/SettingSection.tsx | 2 +- .../funnels/meetDate/CalendarSection.tsx | 3 +- .../app/[lng]/(main)/grouping/create/page.tsx | 8 ++-- .../apply/components/ApplyHeader.tsx | 0 .../[groupId]/apply/components/ApplyModal.tsx | 0 .../[groupId]/apply/components/InputForm.tsx | 2 +- .../{ => detail}/[groupId]/apply/page.tsx | 0 .../[articleId]/components/ArticleDetail.tsx | 0 .../[articleId]/components/ArticleHeader.tsx | 0 .../[articleId]/components/CommentForm.tsx | 0 .../[articleId]/components/CommentList.tsx | 0 .../[groupId]/articles/[articleId]/page.tsx | 8 ++-- .../[groupId]/components/GroupDetail.tsx | 0 .../components/GroupDetailHeader.tsx | 10 ++--- .../[groupId]/components/TopSection.tsx | 2 +- .../components/articles/ArticleSection.tsx | 0 .../components/articles/ArticlesContent.tsx | 0 .../components/articles/NoticeItem.tsx | 4 +- .../components/articles/NoticeSection.tsx | 0 .../components/detail/DetailContent.tsx | 0 .../components/detail/LocationSection.tsx | 0 .../components/detail/MemberSection.tsx | 0 .../components/detail/TimeSection.tsx | 0 .../[groupId]/manage/components/ApplyCard.tsx | 2 +- .../manage/components/ManageDetail.tsx | 11 +++++- .../manage/components/ManageHeader.tsx | 0 .../manage/components/ManageModal.tsx | 0 .../{ => detail}/[groupId]/manage/page.tsx | 8 ++-- .../members/components/MemberList.tsx | 0 .../members/components/MembersHeader.tsx | 0 .../{ => detail}/[groupId]/members/page.tsx | 8 ++-- .../grouping/{ => detail}/[groupId]/page.tsx | 8 ++-- .../write/components/ImageSection.tsx | 0 .../[groupId]/write/components/InputForm.tsx | 2 +- .../write/components/WriteHeader.tsx | 3 +- .../[groupId]/write/components/WriteModal.tsx | 0 .../{ => detail}/[groupId]/write/page.tsx | 8 ++-- .../{ => detail}/[groupId]/write/type.ts | 0 .../(main)/grouping/hooks/useMoreSheet.tsx | 3 +- .../src/app/[lng]/(main)/grouping/loading.tsx | 19 ++++++++++ .../src/app/[lng]/(main)/grouping/page.tsx | 10 ++--- packages/web/src/app/[lng]/(main)/layout.tsx | 11 ++++++ packages/web/src/app/[lng]/(main)/loading.tsx | 19 ++++++++++ .../(main)/meeting/components/NoMeeting.tsx | 16 -------- .../src/app/[lng]/(main)/meeting/loading.tsx | 19 ++++++++++ .../participate/components/ContentSection.tsx | 9 ++--- .../components/FeedbackContent.tsx | 6 +-- .../components/ParticipatingContent.tsx | 8 ++-- .../participate/components/WaitingContent.tsx | 8 ++-- .../[groupId]/components/FeedbackHeader.tsx | 2 +- .../[groupId]/funnels/step1/Step1.tsx | 2 +- .../[lng]/(main)/meeting/participate/page.tsx | 10 ++--- .../scrap/components/ContentSection.tsx | 10 ++--- .../app/[lng]/(main)/meeting/scrap/page.tsx | 12 +++--- .../[lng]/(main)/profile/[userId]/page.tsx | 8 ++-- .../src/app/[lng]/(main)/profile/loading.tsx | 19 ++++++++++ .../profile/mates/components/MatesDetail.tsx | 6 +-- .../mates/components/MoreBottomSheet.tsx | 2 +- .../app/[lng]/(main)/profile/mates/page.tsx | 8 ++-- .../web/src/app/[lng]/(main)/profile/page.tsx | 10 ++--- .../app/[lng]/(main)/profile/praise/page.tsx | 8 ++-- .../setting/delete/components/DeleteModal.tsx | 2 +- .../setting/delete/components/Step2.tsx | 2 +- .../setting/edit/components/ProfileEdit.tsx | 2 +- .../edit/components/step1/Step1InputForm.tsx | 2 +- .../app/[lng]/(main)/profile/setting/page.tsx | 8 ++-- .../profile/verify/components/EmailForm.tsx | 2 +- .../funnels/step1/components/NumberForm.tsx | 2 +- .../join/funnels/step2/Step2Component.tsx | 2 +- .../funnels/step3/components/EmailForm.tsx | 2 +- .../funnels/step4/components/InputForm.tsx | 2 +- .../funnels/step5/components/InputForm.tsx | 2 +- .../web/src/app/[lng]/(sub)/join/page.tsx | 2 +- packages/web/src/app/[lng]/not-found.tsx | 7 ++-- packages/web/src/components/Avatar/Avatar.tsx | 26 +++++++++++-- .../web/src/components/Calendar/Calendar.tsx | 11 ++++-- .../web/src/components/Card/GroupingCard.tsx | 2 +- .../web/src/components/Card/NoMeeting.tsx | 16 -------- packages/web/src/components/Empty/Empty.tsx | 11 ++---- .../ErrorBoundary/ErrorFallback.tsx | 16 ++++++++ .../LocalSuspenseErrorBoundary.tsx | 21 +++------- .../web/src/components/ErrorBoundary/index.ts | 1 + packages/web/src/components/Footer/Footer.tsx | 28 +++++++------- packages/web/src/components/Layout/Flex.tsx | 3 +- .../web/src/components/Modal/ImageModal.tsx | 11 +++++- .../components/Provider/HydrationProvider.tsx | 9 ++++- .../src/components/Provider/QueryProvider.tsx | 3 +- .../src/components/Provider/ToastProvider.tsx | 2 +- packages/web/src/hooks/useModal/index.ts | 3 -- packages/web/src/hooks/useModal/useToast.tsx | 1 + packages/web/src/middleware.ts | 2 +- 125 files changed, 400 insertions(+), 388 deletions(-) delete mode 100644 packages/web/src/app/[lng]/(main)/community/components/AllContent.tsx rename packages/web/src/app/[lng]/(main)/community/components/{QuestionContent.tsx => CommunityArticles.tsx} (85%) delete mode 100644 packages/web/src/app/[lng]/(main)/community/components/KpopContent.tsx delete mode 100644 packages/web/src/app/[lng]/(main)/community/components/LanguageContent.tsx rename packages/web/src/app/[lng]/(main)/community/{ => detail}/[articleId]/components/ArticleDetail.tsx (100%) rename packages/web/src/app/[lng]/(main)/community/{ => detail}/[articleId]/components/ArticleDetailHeader.tsx (98%) rename packages/web/src/app/[lng]/(main)/community/{ => detail}/[articleId]/components/ArticleItem.tsx (98%) rename packages/web/src/app/[lng]/(main)/community/{ => detail}/[articleId]/components/CommentForm.tsx (100%) rename packages/web/src/app/[lng]/(main)/community/{ => detail}/[articleId]/components/CommentItem.tsx (99%) rename packages/web/src/app/[lng]/(main)/community/{ => detail}/[articleId]/components/CommentList.tsx (100%) rename packages/web/src/app/[lng]/(main)/community/{ => detail}/[articleId]/components/CommentProvider.tsx (100%) rename packages/web/src/app/[lng]/(main)/community/{ => detail}/[articleId]/components/CommunityModal.tsx (100%) rename packages/web/src/app/[lng]/(main)/community/{ => detail}/[articleId]/components/ReplyItem.tsx (98%) rename packages/web/src/app/[lng]/(main)/community/{ => detail}/[articleId]/components/ReplyList.tsx (88%) rename packages/web/src/app/[lng]/(main)/community/{ => detail}/[articleId]/page.tsx (67%) create mode 100644 packages/web/src/app/[lng]/(main)/community/loading.tsx rename packages/web/src/app/[lng]/(main)/grouping/{ => detail}/[groupId]/apply/components/ApplyHeader.tsx (100%) rename packages/web/src/app/[lng]/(main)/grouping/{ => detail}/[groupId]/apply/components/ApplyModal.tsx (100%) rename packages/web/src/app/[lng]/(main)/grouping/{ => detail}/[groupId]/apply/components/InputForm.tsx (97%) rename packages/web/src/app/[lng]/(main)/grouping/{ => detail}/[groupId]/apply/page.tsx (100%) rename packages/web/src/app/[lng]/(main)/grouping/{ => detail}/[groupId]/articles/[articleId]/components/ArticleDetail.tsx (100%) rename packages/web/src/app/[lng]/(main)/grouping/{ => detail}/[groupId]/articles/[articleId]/components/ArticleHeader.tsx (100%) rename packages/web/src/app/[lng]/(main)/grouping/{ => detail}/[groupId]/articles/[articleId]/components/CommentForm.tsx (100%) rename packages/web/src/app/[lng]/(main)/grouping/{ => detail}/[groupId]/articles/[articleId]/components/CommentList.tsx (100%) rename packages/web/src/app/[lng]/(main)/grouping/{ => detail}/[groupId]/articles/[articleId]/page.tsx (82%) rename packages/web/src/app/[lng]/(main)/grouping/{ => detail}/[groupId]/components/GroupDetail.tsx (100%) rename packages/web/src/app/[lng]/(main)/grouping/{ => detail}/[groupId]/components/GroupDetailHeader.tsx (93%) rename packages/web/src/app/[lng]/(main)/grouping/{ => detail}/[groupId]/components/TopSection.tsx (98%) rename packages/web/src/app/[lng]/(main)/grouping/{ => detail}/[groupId]/components/articles/ArticleSection.tsx (100%) rename packages/web/src/app/[lng]/(main)/grouping/{ => detail}/[groupId]/components/articles/ArticlesContent.tsx (100%) rename packages/web/src/app/[lng]/(main)/grouping/{ => detail}/[groupId]/components/articles/NoticeItem.tsx (93%) rename packages/web/src/app/[lng]/(main)/grouping/{ => detail}/[groupId]/components/articles/NoticeSection.tsx (100%) rename packages/web/src/app/[lng]/(main)/grouping/{ => detail}/[groupId]/components/detail/DetailContent.tsx (100%) rename packages/web/src/app/[lng]/(main)/grouping/{ => detail}/[groupId]/components/detail/LocationSection.tsx (100%) rename packages/web/src/app/[lng]/(main)/grouping/{ => detail}/[groupId]/components/detail/MemberSection.tsx (100%) rename packages/web/src/app/[lng]/(main)/grouping/{ => detail}/[groupId]/components/detail/TimeSection.tsx (100%) rename packages/web/src/app/[lng]/(main)/grouping/{ => detail}/[groupId]/manage/components/ApplyCard.tsx (98%) rename packages/web/src/app/[lng]/(main)/grouping/{ => detail}/[groupId]/manage/components/ManageDetail.tsx (90%) rename packages/web/src/app/[lng]/(main)/grouping/{ => detail}/[groupId]/manage/components/ManageHeader.tsx (100%) rename packages/web/src/app/[lng]/(main)/grouping/{ => detail}/[groupId]/manage/components/ManageModal.tsx (100%) rename packages/web/src/app/[lng]/(main)/grouping/{ => detail}/[groupId]/manage/page.tsx (76%) rename packages/web/src/app/[lng]/(main)/grouping/{ => detail}/[groupId]/members/components/MemberList.tsx (100%) rename packages/web/src/app/[lng]/(main)/grouping/{ => detail}/[groupId]/members/components/MembersHeader.tsx (100%) rename packages/web/src/app/[lng]/(main)/grouping/{ => detail}/[groupId]/members/page.tsx (78%) rename packages/web/src/app/[lng]/(main)/grouping/{ => detail}/[groupId]/page.tsx (83%) rename packages/web/src/app/[lng]/(main)/grouping/{ => detail}/[groupId]/write/components/ImageSection.tsx (100%) rename packages/web/src/app/[lng]/(main)/grouping/{ => detail}/[groupId]/write/components/InputForm.tsx (98%) rename packages/web/src/app/[lng]/(main)/grouping/{ => detail}/[groupId]/write/components/WriteHeader.tsx (95%) rename packages/web/src/app/[lng]/(main)/grouping/{ => detail}/[groupId]/write/components/WriteModal.tsx (100%) rename packages/web/src/app/[lng]/(main)/grouping/{ => detail}/[groupId]/write/page.tsx (77%) rename packages/web/src/app/[lng]/(main)/grouping/{ => detail}/[groupId]/write/type.ts (100%) create mode 100644 packages/web/src/app/[lng]/(main)/grouping/loading.tsx create mode 100644 packages/web/src/app/[lng]/(main)/layout.tsx create mode 100644 packages/web/src/app/[lng]/(main)/loading.tsx delete mode 100644 packages/web/src/app/[lng]/(main)/meeting/components/NoMeeting.tsx create mode 100644 packages/web/src/app/[lng]/(main)/meeting/loading.tsx create mode 100644 packages/web/src/app/[lng]/(main)/profile/loading.tsx delete mode 100644 packages/web/src/components/Card/NoMeeting.tsx create mode 100644 packages/web/src/components/ErrorBoundary/ErrorFallback.tsx delete mode 100644 packages/web/src/hooks/useModal/index.ts 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 97b5d4545..fb808a41e 100644 --- a/packages/web/src/apis/groups/mutations.tsx +++ b/packages/web/src/apis/groups/mutations.tsx @@ -20,7 +20,7 @@ import { Keys as MeetingKeys } from '../meeting/keys'; 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)/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/QuestionContent.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/QuestionContent.tsx rename to packages/web/src/app/[lng]/(main)/community/components/CommunityArticles.tsx index 7076a67d8..a4882d363 100644 --- a/packages/web/src/app/[lng]/(main)/community/components/QuestionContent.tsx +++ b/packages/web/src/app/[lng]/(main)/community/components/CommunityArticles.tsx @@ -8,13 +8,16 @@ 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() { +interface CommunityArticle { + categoryId: number; +} + +export default function CommunityArticles({ categoryId }: CommunityArticle) { const { ref, inView } = useInView(); const { blockCommunityArticleIds } = useBlockStore(); - const { data: articleList, fetchNextPage, hasNextPage } = useGetCommunityArticles(2); + 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/LanguageContent.tsx b/packages/web/src/app/[lng]/(main)/community/components/LanguageContent.tsx deleted file mode 100644 index 983c7f264..000000000 --- a/packages/web/src/app/[lng]/(main)/community/components/LanguageContent.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 LanguageContent() { - const { ref, inView } = useInView(); - const { blockCommunityArticleIds } = useBlockStore(); - const { data: articleList, fetchNextPage, hasNextPage } = useGetCommunityArticles(3); - - 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 > - + -