[리팩터링] CategorySortButton관련 스타일 및 로직 수정

lib/api/category/categoryService.ts

@@ -7,6 +7,9 @@ import {
   GetUserCategoriesResponseDto,
 } from "@til-log.lab/tilog-api";
 
+import GetCategoryListInterface from "@Library/api/category/interface/GetCategoryListInterface";
+import ExceptionInterface from "@Library/api/exception/interface";
+
 export default class CategoryService {
   constructor(
     private readonly categoryRepository: CategoryRepository,
@@ -15,7 +18,7 @@ export default class CategoryService {
   getCategories(
     categoryName?: string,
     options?: AxiosRequestConfig
-  ): Promise<AxiosResponse<GetCategoriesResponseDto, any>> {
+  ): Promise<AxiosResponse<GetCategoriesResponseDto, ExceptionInterface>> {
     return this.categoryRepository.categoriesControllerGetCategories(
       categoryName,
       options
@@ -24,10 +27,31 @@ export default class CategoryService {
   getUsersCategories(
     userId: number,
     options?: AxiosRequestConfig
-  ): Promise<AxiosResponse<GetUserCategoriesResponseDto, any>> {
+  ): Promise<AxiosResponse<GetUserCategoriesResponseDto, ExceptionInterface>> {
     return this.categoryRepository.categoriesControllerGetUsersCategories(
       userId,
       options
     );
   }
+
+  getCategoryList({
+    userId,
+    options,
+  }: GetCategoryListInterface): Promise<
+    AxiosResponse<
+      GetUserCategoriesResponseDto | GetCategoriesResponseDto,
+      ExceptionInterface
+    >
+  > {
+    if (userId) {
+      return this.categoryRepository.categoriesControllerGetUsersCategories(
+        userId,
+        options
+      );
+    }
+    return this.categoryRepository.categoriesControllerGetCategories(
+      undefined,
+      options
+    );
+  }
 }

lib/api/category/interface/GetCategoryListInterface.ts

@@ -0,0 +1,6 @@
+import { AxiosRequestConfig } from "axios";
+
+export default interface GetCategoryListInterface {
+  userId?: number;
+  options?: AxiosRequestConfig;
+}

lib/utility/isArrayEmpty.ts

@@ -0,0 +1,6 @@
+const isArrayEmpty = <ArrayType>(array: ArrayType[]): boolean => {
+  if (array.length === 0) return true;
+  return false;
+};
+
+export default isArrayEmpty;

lib/utility/routerHelper.ts

@@ -0,0 +1,12 @@
+const routerHelper = (href: string, targetName: string, target: string) => {
+  return (
+    href
+      // 1. target이 & 일경우 그냥 다 날려주면 됩니다.
+      .replace(`&${targetName}=${target}`, "")
+      // 2. target이 ? 일경우 &를 찾아서 ?로 변경해줘야합니다.
+      .replace(`?${targetName}=${target}`, "")
+      .replace("&", "?")
+  );
+};
+
+export default routerHelper;

src/components/common/molecules/buttons/CategorySortButton.tsx

@@ -2,6 +2,7 @@ import { useRouter } from "next/router";
 import React from "react";
 
 import LinkTo from "@Components/common/atom/LinkTo";
+import routerHelper from "@Library/utility/routerHelper";
 
 interface CategorySortButtonProps {
   categoryName: string;
@@ -18,22 +19,19 @@ const CategorySortButton = ({ categoryName }: CategorySortButtonProps) => {
           pathname: router.pathname,
           query: { ...router.query, category: categoryName },
         }}
-        className="p-2 text-sm font-semibold rounded-sm hover:no-underline font-eng-sub-font-2 bg-neutral-50 dark:bg-neutral-800 ring-1 ring-neutral-200 dark:ring-neutral-700 hover:bg-neutral-100 hover:dark:bg-neutral-700"
+        className="p-2 text-lg font-semibold hover:no-underline text-neutral-400 dark:text-neutral-50"
       >
-        <span className={`text-${categoryName}`}># </span>
-        <span className="text-neutral-900 dark:text-neutral-50">
-          {categoryName}
-        </span>
+        {categoryName}
       </LinkTo>
     );
   }
   return (
     <LinkTo
       scroll={false}
-      href={`${router.asPath.split("?")[0]}`}
-      className="p-2 text-sm font-semibold rounded-sm hover:no-underline font-eng-sub-font-2 bg-neutral-50 dark:bg-neutral-800 ring-1 ring-neutral-200 dark:ring-neutral-700 hover:bg-neutral-100 hover:dark:bg-neutral-700"
+      href={`${routerHelper(router.asPath, "category", categoryName)}`}
+      className="p-2 text-lg font-semibold hover:no-underline text-neutral-800 dark:text-neutral-400"
     >
-      <span className={`text-${categoryName}`}># {categoryName}</span>
+      {categoryName}
     </LinkTo>
   );
 };

src/components/common/organisms/list/CategorySortButtonList.tsx

@@ -0,0 +1,32 @@
+import Spinner from "@Components/common/atom/loading/Spinner";
+import CategorySortButton from "@Components/common/molecules/buttons/CategorySortButton";
+import useGetAllCategoryListQuery from "@Hooks/react-query/category/useGetAllCategoryListQuery";
+import isArrayEmpty from "@Library/utility/isArrayEmpty";
+
+import { GetMeResponseDto } from "@til-log.lab/tilog-api";
+
+const CategorySortButtonList = ({
+  userId,
+}: {
+  userId?: GetMeResponseDto["userId"];
+}) => {
+  const categoryList = useGetAllCategoryListQuery({ userId });
+  if (categoryList.isLoading) return <Spinner size="10" />;
+  if (categoryList.isError) return <div>{categoryList.error.message.ko}</div>;
+  if (!categoryList.data) return null;
+  if (isArrayEmpty(categoryList.data.data.list))
+    return <h2 className="text-base">카테고리가 존재하지 않아요.</h2>;
+
+  return (
+    <div className="sticky top-0 z-10 border-b border-neutral-300 bg-neutral-50 dark:bg-neutral-900">
+      <div className="m-auto max-w-[1280px] items-center px-5">
+        <div className="py-3 overflow-y-auto scrollbar-hide">
+          {categoryList.data.data.list.map((category) => (
+            <CategorySortButton categoryName={category.categoryName} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+export default CategorySortButtonList;

src/components/modules/blog/index.tsx

@@ -1,5 +1,5 @@
+import CategorySortButtonList from "@Components/common/organisms/list/CategorySortButtonList";
 import PostCardList from "@Components/common/organisms/list/PostCardList";
-import UserCategoryButtonList from "@Components/common/organisms/list/UserCategoryButtonList";
 import UserInfoProfile from "@Components/common/organisms/profile/UserInfoProfile";
 
-export { UserCategoryButtonList, UserInfoProfile, PostCardList };
+export { CategorySortButtonList, UserInfoProfile, PostCardList };

src/hooks/react-query/category/useGetAllCategoryListQuery.ts

@@ -0,0 +1,38 @@
+import { AxiosResponse } from "axios";
+import { useQuery } from "react-query";
+
+import api from "@Library/api";
+
+import {
+  GetCategoriesResponseDto,
+  GetUserCategoriesResponseDto,
+} from "@til-log.lab/tilog-api";
+
+import GetCategoryListInterface from "@Library/api/category/interface/GetCategoryListInterface";
+import ExceptionInterface from "@Library/api/exception/interface";
+
+const useGetAllCategoryListQuery = ({
+  userId,
+  options,
+}: GetCategoryListInterface) => {
+  return useQuery<
+    AxiosResponse<GetUserCategoriesResponseDto | GetCategoriesResponseDto>,
+    ExceptionInterface,
+    AxiosResponse<GetUserCategoriesResponseDto | GetCategoriesResponseDto>
+  >(
+    ["CategoryList", userId],
+    () => api.categoryService.getCategoryList({ userId, options }),
+    {
+      retry: 0,
+      refetchOnWindowFocus: false,
+      refetchInterval: false,
+
+      // NOTE: 전체 카테고리의 데이터는 유동적이지 않기 때문에 한번 Fetching한 후 데이터를 서버와 동기화 하지 않습니다.
+      retryOnMount: false,
+      refetchOnMount: false,
+      staleTime: Infinity,
+    }
+  );
+};
+
+export default useGetAllCategoryListQuery;

src/hooks/react-query/category/useAllGetCategoryListQuery.ts → src/hooks/react-query/category/useGetCategoryQuery.ts

@@ -7,7 +7,7 @@ import { GetCategoriesResponseDto } from "@til-log.lab/tilog-api";
 
 import ExceptionInterface from "@Library/api/exception/interface";
 
-const useAllGetCategoryListQuery = () => {
+const useGetCategoryQuery = () => {
   return useQuery<
     AxiosResponse<GetCategoriesResponseDto>,
     ExceptionInterface,
@@ -24,4 +24,4 @@ const useAllGetCategoryListQuery = () => {
   });
 };
 
-export default useAllGetCategoryListQuery;
+export default useGetCategoryQuery;

src/hooks/react-query/category/useSearchCategory.ts

@@ -1,14 +1,19 @@
-import useAllGetCategoryListQuery from "@Hooks/react-query/category/useAllGetCategoryListQuery";
+import useGetCategoryQuery from "@Hooks/react-query/category/useGetCategoryQuery";
 
-import { GetCategoriesItem } from "@til-log.lab/tilog-api";
+import {
+  GetCategoriesItem,
+  GetUserCategoriesItem,
+} from "@til-log.lab/tilog-api";
 
 const useSearchCategory = () => {
-  const { data } = useAllGetCategoryListQuery();
+  const { data } = useGetCategoryQuery();
 
   return (
-    categoryName?: GetCategoriesItem["categoryName"],
+    categoryName?:
+      | GetUserCategoriesItem["categoryName"]
+      | GetCategoriesItem["categoryName"],
     categoryId?: string
-  ): GetCategoriesItem[] | null => {
+  ): GetCategoriesItem[] | GetUserCategoriesItem[] | null => {
     if (!data) return null;
     const categoryList = data.data.list;
 

src/pages/_app.tsx

@@ -14,9 +14,7 @@ const App = ({ Component, pageProps }: AppProps) => {
     <QueryClientProvider client={queryClient}>
       <Toaster />
       <Header />
-      <div className="m-auto max-w-[1280px] h-20 mt-20 items-center px-5">
-        <Component {...pageProps} />
-      </div>
+      <Component {...pageProps} />
     </QueryClientProvider>
   );
 };

src/pages/blog/[username].tsx

@@ -2,31 +2,28 @@ import { GetServerSideProps, NextPage } from "next";
 
 import { DefaultSeoProps, NextSeo } from "next-seo";
 
-import {
-  UserCategoryButtonList,
-  UserInfoProfile,
-  PostCardList,
-} from "@Components/modules/blog";
+import CategorySortButtonList from "@Components/common/organisms/list/CategorySortButtonList";
+import { UserInfoProfile, PostCardList } from "@Components/modules/blog";
 import useGetStringTypeToRouter from "@Hooks/router/useGetStringTypeToRouter";
 import api from "@Library/api";
 import { userBlogDetailSeo } from "@Library/utility/seo";
 
 interface BlogPagePageProps {
   seo: DefaultSeoProps;
 }
-// TODO: 현재 BlogPage는 UserID 1 번을 반환하도록 하드 코딩되어 있습니다. userName로 전달받을 수 있게 변경된다면 그렇게 변경해야합니다.
+// TODO: 현재 BlogPage는 UserID 1 번을 반환하도록 하드 코딩되어 있습니다. userName로 전달받을 수 있게 변경된 후 코드를 변경해야합니다.
 const BlogPage: NextPage<BlogPagePageProps> = ({ seo }: BlogPagePageProps) => {
   const category = useGetStringTypeToRouter("category");
   return (
     <div>
       <NextSeo {...seo} />
-      <div className="m-auto max-w-[1280px] h-full items-center">
+      <CategorySortButtonList userId={1} />
+
+      <div className="m-auto max-w-[1280px] h-full mt-20 items-center px-5">
         <div className="grid justify-center grid-flow-row p-3 md:justify-between md:grid-flow-col">
           <div className="w-full max-w-[450px]">
             <UserInfoProfile userId={1} />
             <hr />
-            <UserCategoryButtonList userId={1} />
-            <hr />
             {/* TODO GITHUB STATUS LINK */}
             <p className="text-lg text-neutral-600">Pinned Repo</p>
             <div className="flex flex-col gap-y-1">