From 6c74c71998995d044e37457986f63702c1254a1b Mon Sep 17 00:00:00 2001
From: cham0287 <crtmt97@gmail.com>
Date: Wed, 4 Oct 2023 08:39:39 +0900
Subject: [PATCH] =?UTF-8?q?Refactor:=20=EC=BD=94=EB=93=9C=EB=A6=AC?=
 =?UTF-8?q?=EB=B7=B0=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ArticleCard.tsx           |  2 +-
 src/components/Articles.tsx              |  4 ++--
 src/components/Comment.tsx               | 16 ++++++++++++++++
 src/components/PaginationBar.tsx         | 20 +++++++-------------
 src/components/PopularTags.tsx           |  7 +++----
 src/components/ProvidersWrapper.tsx      |  6 +-----
 src/components/Tabs.tsx                  | 10 ++++++++--
 src/components/atoms/Tag.tsx             |  1 +
 src/components/buttons/PopularTagBtn.tsx |  3 +--
 src/services/comments.ts                 |  9 +++++++++
 src/stores/useStore.ts                   | 22 +++++++++++-----------
 11 files changed, 60 insertions(+), 40 deletions(-)
 create mode 100644 src/components/Comment.tsx
 create mode 100644 src/services/comments.ts

diff --git a/src/components/ArticleCard.tsx b/src/components/ArticleCard.tsx
index ae1a2751..90ac85d5 100644
--- a/src/components/ArticleCard.tsx
+++ b/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>
diff --git a/src/components/Articles.tsx b/src/components/Articles.tsx
index 956a6a9a..db5ab833 100644
--- a/src/components/Articles.tsx
+++ b/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>
diff --git a/src/components/Comment.tsx b/src/components/Comment.tsx
new file mode 100644
index 00000000..c1736ef4
--- /dev/null
+++ b/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;
diff --git a/src/components/PaginationBar.tsx b/src/components/PaginationBar.tsx
index ce209439..f1ccb7d4 100644
--- a/src/components/PaginationBar.tsx
+++ b/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>
   );
 };
diff --git a/src/components/PopularTags.tsx b/src/components/PopularTags.tsx
index 2b1c09cf..94b920e4 100644
--- a/src/components/PopularTags.tsx
+++ b/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,7 +24,7 @@ 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)}>
@@ -32,9 +32,8 @@ const PopularTags = () => {
             </PopularTagBtn>
           ))}
         </ul>
-      ) : (
-        <p>Loading tags...</p>
       )}
+      {isLoading && <p>Loading tags...</p>}
     </div>
   );
 };
diff --git a/src/components/ProvidersWrapper.tsx b/src/components/ProvidersWrapper.tsx
index cfdfc317..b08cfb4c 100644
--- a/src/components/ProvidersWrapper.tsx
+++ b/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;
diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx
index 177ac3d3..2ad73b7a 100644
--- a/src/components/Tabs.tsx
+++ b/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;
 
diff --git a/src/components/atoms/Tag.tsx b/src/components/atoms/Tag.tsx
index cf43253d..a3771a74 100644
--- a/src/components/atoms/Tag.tsx
+++ b/src/components/atoms/Tag.tsx
@@ -7,4 +7,5 @@ interface Props {
 const Tag = ({ text }: Props) => {
   return <div className={TagStyle}>{text}</div>;
 };
+
 export default Tag;
diff --git a/src/components/buttons/PopularTagBtn.tsx b/src/components/buttons/PopularTagBtn.tsx
index b15dd27c..563e80ba 100644
--- a/src/components/buttons/PopularTagBtn.tsx
+++ b/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;
 }
 
diff --git a/src/services/comments.ts b/src/services/comments.ts
new file mode 100644
index 00000000..5935c881
--- /dev/null
+++ b/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;
+};
diff --git a/src/stores/useStore.ts b/src/stores/useStore.ts
index 26e6eb10..6a848451 100644
--- a/src/stores/useStore.ts
+++ b/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,