feat(home): 홈 페이지의 인기 아티클 태그 목록 실제 데이터를 조회 후 연동하도록 합니다.

apps/react-world/src/apis/article/PopularArticleTagService.ts

@@ -0,0 +1,19 @@
+import { isAxiosError } from 'axios';
+import { api } from '../apiInstances';
+import type { PopularArticleTagsResponse } from './PopularArticleTagService.types';
+
+class PopularArticleTagService {
+  static async fetchPopularArticleTags(): Promise<PopularArticleTagsResponse> {
+    try {
+      const response = await api.get('/tags');
+      return response.data;
+    } catch (error) {
+      if (isAxiosError(error) && error.response) {
+        throw error.response.data;
+      }
+      throw error;
+    }
+  }
+}
+
+export default PopularArticleTagService;

apps/react-world/src/apis/article/PopularArticleTagService.types.ts

@@ -0,0 +1,3 @@
+export interface PopularArticleTagsResponse {
+  tags: string[];
+}

apps/react-world/src/components/home/HomeFeedContents.tsx

@@ -6,25 +6,28 @@ import HomeFeedTab from './HomeFeedTab';
 import Pagination from './Pagination';
 import useArticlePreviewQuery from '../../quries/useArticlePreviewQuery';
 import { ARTICLE_PREVIEW_FETCH_LIMIT } from '../../apis/article/ArticlePreviewService';
+import usePopularArticleTagsQuery from '../../quries/usePopularArticleTagsQuery';
 
 const HomeFeedContents = () => {
   const [currentPageIndex, setCurrentPageIndex] = useState(0);
-  const { data, isLoading } = useArticlePreviewQuery(currentPageIndex);
-
+  const { articlePreviews, isArticlePreviewsLoading } =
+    useArticlePreviewQuery(currentPageIndex);
+  const { popularArticleTags, isPopularArticleTagsLoading } =
+    usePopularArticleTagsQuery();
   const handlePageChange = (newPageIndex: number) => {
     setCurrentPageIndex(newPageIndex);
   };
 
-  const totalPageCount = data?.articlesCount
-    ? Math.ceil(data.articlesCount / ARTICLE_PREVIEW_FETCH_LIMIT)
+  const totalPageCount = articlePreviews?.articlesCount
+    ? Math.ceil(articlePreviews.articlesCount / ARTICLE_PREVIEW_FETCH_LIMIT)
     : 0;
 
   return (
     <Container>
       <div className="row">
         <div className="col-md-9">
           <HomeFeedTab activeFeed="global_feed" />
-          {isLoading ? (
+          {isArticlePreviewsLoading ? (
             <span
               style={{
                 display: 'inline-block',
@@ -35,7 +38,7 @@ const HomeFeedContents = () => {
             </span>
           ) : (
             <>
-              {data?.articles?.map(articlePreview => (
+              {articlePreviews?.articles?.map(articlePreview => (
                 <ArticlePreview
                   key={articlePreview.slug}
                   articlePreview={articlePreview}
@@ -49,19 +52,9 @@ const HomeFeedContents = () => {
             </>
           )}
         </div>
-
-        <PopularArticleTagList
-          tags={[
-            'programming',
-            'javascript',
-            'emberjs',
-            'angularjs',
-            'react',
-            'mean',
-            'node',
-            'rails',
-          ]}
-        />
+        {isPopularArticleTagsLoading ? null : (
+          <PopularArticleTagList tags={popularArticleTags?.tags ?? []} />
+        )}
       </div>
     </Container>
   );

apps/react-world/src/quries/useArticlePreviewQuery.ts

@@ -5,10 +5,15 @@ export const ARTICLE_PREVIEW_CACHE_KEY = '@article/preview';
 
 const useArticlePreviewQuery = (pageNumber: number) => {
   ArticlePreviewService;
-  return useQuery(
+  const queryResult = useQuery(
     [ARTICLE_PREVIEW_CACHE_KEY, pageNumber], // 페이지 번호를 조합해 QueryKey 지정
     () => ArticlePreviewService.fetchArticlePreviews(pageNumber),
   );
+
+  return {
+    articlePreviews: queryResult.data,
+    isArticlePreviewsLoading: queryResult.isLoading,
+  };
 };
 
 export default useArticlePreviewQuery;

apps/react-world/src/quries/usePopularArticleTagsQuery.ts

@@ -0,0 +1,18 @@
+import { useQuery } from '@tanstack/react-query';
+import PopularArticleTagService from '../apis/article/PopularArticleTagService';
+
+export const POPULAR_ARTICLE_TAG_CACHE_KEY = '@article/popular_tags';
+
+const usePopularArticleTagsQuery = () => {
+  PopularArticleTagService;
+  const queryResult = useQuery([POPULAR_ARTICLE_TAG_CACHE_KEY], () =>
+    PopularArticleTagService.fetchPopularArticleTags(),
+  );
+
+  return {
+    popularArticleTags: queryResult.data,
+    isPopularArticleTagsLoading: queryResult.isLoading,
+  };
+};
+
+export default usePopularArticleTagsQuery;