Refactor: 코드리뷰 반영

src/components/ArticleCard.tsx

@@ -29,7 +29,7 @@ const ArticleCard = ({
         <Link href={`/articles/${slug}`}>Read more...</Link>
         <ul className="flex gap-1">
           {tagList.map((tag) => (
-            <Tag text={tag} />
+            <Tag text={tag} key={tag} />
           ))}
         </ul>
       </div>

src/components/Articles.tsx

@@ -27,15 +27,15 @@ const Articles = () => {
           {isLoading && <div>Loading...</div>}
           {articleResponse && (
             <div>
-              <Tabs tabs={[undefined, "Global Feed", articlesParams.tag]} />
+              <Tabs tabs={["Global Feed", articlesParams.tag]} />
               <ul>
                 {articleResponse.articles.map((article) => (
                   <ArticleCard article={article} />
                 ))}
               </ul>
+              <PaginationBar count={articleResponse.articlesCount} />
             </div>
           )}
-          {articleResponse && <PaginationBar count={articleResponse.articlesCount} />}
         </div>
         <PopularTags />
       </section>

src/components/Comment.tsx

@@ -0,0 +1,16 @@
+interface Props {
+  profileImg: string;
+  username: string;
+  createdAt: Date;
+  comment: string;
+}
+
+const Comment = ({ profileImg, username, createdAt, comment }: Props) => {
+  return (
+    <article>
+      <section>{comment}</section>
+      <section></section>
+    </article>
+  );
+};
+export default Comment;

src/components/PaginationBar.tsx

@@ -17,23 +17,17 @@ const PaginationBar: React.FC<PaginationBarProps> = ({ count }) => {
     setCurrentPage(page);
   };
 
-  const renderPaginationButtons = () => {
-    const pageBtns = [];
-    for (let i = 1; i <= Math.ceil(count / 10); i++) {
-      pageBtns.push(
-        <PageBtn key={i} onClick={() => handlePageClick(i)} isActive={i === currentPage}>
-          {i}
-        </PageBtn>,
-      );
-    }
-    return pageBtns;
+  const PaginationButtons = () => {
+    return [...Array(Math.ceil(count / 10) + 1)].map((_, index) => (
+      <PageBtn key={index + 1} onClick={() => handlePageClick(index)} isActive={index === currentPage - 1}>
+        {index + 1}
+      </PageBtn>
+    ));
   };
 
   return (
     <div>
-      <div className="[&>*:first-child]:rounded-l-md [&>*:last-child]:rounded-r-md mt-5">
-        {renderPaginationButtons()}
-      </div>
+      <div className="[&>*:first-child]:rounded-l-md [&>*:last-child]:rounded-r-md mt-5">{PaginationButtons()}</div>
     </div>
   );
 };

src/components/PopularTags.tsx

@@ -5,7 +5,7 @@ import PopularTagBtn from "./buttons/PopularTagBtn";
 import { useTabsStore, useArticlesParamsStore } from "@/stores/useStore";
 
 const PopularTags = () => {
-  const { data: tags } = useQuery(["/api/tags"], () => getTags(), {
+  const { data: tags, isLoading } = useQuery(["/api/tags"], () => getTags(), {
     refetchOnWindowFocus: false,
   });
   const {
@@ -24,17 +24,16 @@ const PopularTags = () => {
   return (
     <div className="bg-gray-200 p-2">
       <h2 className="text-sm mb-1">Popular Tags</h2>
-      {tags ? (
+      {tags && (
         <ul className="flex flex-wrap w-60 gap-1 ">
           {tags.map((tag) => (
             <PopularTagBtn selected={selectedTag === tag} key={tag} onClick={() => handleClickPopularTag(tag)}>
               {tag}
             </PopularTagBtn>
           ))}
         </ul>
-      ) : (
-        <p>Loading tags...</p>
       )}
+      {isLoading && <p>Loading tags...</p>}
     </div>
   );
 };

src/components/ProvidersWrapper.tsx

@@ -5,10 +5,6 @@ import { QueryClientProvider } from "@tanstack/react-query";
 const queryClient = new QueryClient();
 
 const ProvidersWrapper = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <div>
-      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-    </div>
-  );
+  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
 };
 export default ProvidersWrapper;

src/components/Tabs.tsx

@@ -2,11 +2,17 @@ import { activeTabStyle, inactiveTabStyle } from "./styles/tabs.css";
 import { useTabsStore, useArticlesParamsStore } from "@/stores/useStore";
 
 interface TabsProps {
-  tabs: (string | undefined)[];
+  tabs: string[];
 }
 
 const Tabs = ({ tabs }: TabsProps) => {
-  return <ul className="flex">{tabs.map((tab) => tab && <Tab key={tab} text={tab} />)}</ul>;
+  return (
+    <ul className="flex">
+      {tabs.map((tab) => (
+        <Tab key={tab} text={tab} />
+      ))}
+    </ul>
+  );
 };
 export default Tabs;
 

src/components/atoms/Tag.tsx

@@ -7,4 +7,5 @@ interface Props {
 const Tag = ({ text }: Props) => {
   return <div className={TagStyle}>{text}</div>;
 };
+
 export default Tag;

src/components/buttons/PopularTagBtn.tsx

@@ -1,8 +1,7 @@
-import { ButtonHTMLAttributes, ReactNode } from "react";
+import { ButtonHTMLAttributes } from "react";
 import { popularTagBtnStyles, selectedPopularTagStyles } from "./styles/popularTagBtn.css";
 
 interface PopularTagBtnProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  children: ReactNode;
   selected: boolean;
 }
 

src/services/comments.ts

@@ -0,0 +1,9 @@
+import { executeAPI } from "./app";
+
+export const getComments = async (slug: string): Promise<any> => {
+  const result = await executeAPI({
+    method: "GET",
+    url: `/articles/${slug}/comments`,
+  });
+  return result;
+};

src/stores/useStore.ts

@@ -6,6 +6,17 @@ interface TabState {
   setActiveTab: (tab: string) => void;
 }
 
+type ArticlesState = {
+  articlesParams: ArticleQueryParams;
+};
+
+type ArticlesStoreActions = {
+  setSelectedTag: (tag: string) => void;
+  resetSelectedTag: () => void;
+  setCurrentPage: (selectedPage: number) => void;
+  resetCurrentPage: () => void;
+};
+
 export const useTabsStore = create<TabState>((set) => ({
   activeTab: "Global Feed",
   setActiveTab: (newTab: string) => set({ activeTab: newTab }),
@@ -19,17 +30,6 @@ const defaultArticlesState = {
   limit: 10,
 };
 
-type ArticlesState = {
-  articlesParams: ArticleQueryParams;
-};
-
-type ArticlesStoreActions = {
-  setSelectedTag: (tag: string) => void;
-  resetSelectedTag: () => void;
-  setCurrentPage: (selectedPage: number) => void;
-  resetCurrentPage: () => void;
-};
-
 export const useArticlesParamsStore = create(
   immer<ArticlesState & ArticlesStoreActions>((set) => ({
     articlesParams: defaultArticlesState,