Refactor: 라우팅 시 즉각적인 loading 피드백, lint 수정, Footer를 layout으로 (#675)

* refactor: 코드스플리팅 제거

* refactor: Modal 관련 hook import error 임시조치

* refactor: community article list 통합

* refactor: Footer -> layout으로 이동

* refactor: 폴더 구조 변경

* refactor: lint 수정

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),

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

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) {

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`);
  },
  });
 };

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

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 = () => {};
 

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

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

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();

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(),

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 (
- <div className="p-20" onClick={onClick || (() => push(`/community/${articleId}`, false))}>
+ <div
+ className="p-20"
+ onClick={onClick || (() => push(`/community/detail/${articleId}`, false))}
+ >
  <Flex justify="between" align="center">
  <ArticleBadge type={category.name}>{t(`category.${category.name}`)}</ArticleBadge>
  <p className="text-caption text-sign-tertiary">{formatDate(createdAt, locale)}</p>
@@ -80,7 +72,7 @@ export default function ArticleItem({ articleData, onClick }: ArticleItemProps)
  </div>
  {!!images?.length && (
  <div className="rounded-8 relative h-80 w-80 shrink-0 overflow-hidden">
- <Image src={images[0]} alt="이미지" fill className="object-cover" />
+ <Image src={images[0]} alt="이미지" sizes="80px" fill className="object-cover" />
  </div>
  )}
  </Flex>

packages/web/src/app/[lng]/(main)/community/components/QuestionContent.tsx → 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();

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() {
  </Tabs.List>
  <Tabs.Panel value="all">
  <Suspense fallback={<Loading />}>
- <AllContent />
+ <CommunityArticles categoryId={0} />
  </Suspense>
  </Tabs.Panel>
  <Tabs.Panel value="kpop">
  <Suspense fallback={<Loading />}>
- <KpopContent />
+ <CommunityArticles categoryId={1} />
  </Suspense>
  </Tabs.Panel>
  <Tabs.Panel value="question">
  <Suspense fallback={<Loading />}>
- <QuestionContent />
+ <CommunityArticles categoryId={2} />
  </Suspense>
  </Tabs.Panel>
  <Tabs.Panel value="language">
  <Suspense fallback={<Loading />}>
- <LanguageContent />
+ <CommunityArticles categoryId={3} />
  </Suspense>
  </Tabs.Panel>
  </Tabs>

packages/web/src/app/[lng]/(main)/community/[articleId]/components/ArticleDetailHeader.tsx → 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';
 

packages/web/src/app/[lng]/(main)/community/[articleId]/components/ArticleItem.tsx → 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';
 

packages/web/src/app/[lng]/(main)/community/[articleId]/components/CommentItem.tsx → 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';

packages/web/src/app/[lng]/(main)/community/[articleId]/components/ReplyItem.tsx → 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';

packages/web/src/app/[lng]/(main)/community/[articleId]/components/ReplyList.tsx → 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';