Revert "Refactor: article data 전역 상태로 관리"

This reverts commit 80a4d88.

src/app/article/[slug]/page.tsx

@@ -1,13 +1,19 @@
 "use client";
 import Tag from "@/components/atoms/Tag";
 import Profile from "@/components/common/Profile";
-import { useArticleStore } from "@/stores/ArticleStore";
+import { getArticle } from "@/services/articles";
+import { useQuery } from "@tanstack/react-query";
 import Link from "next/link";
 import React from "react";
 
-const ArticleDetail = () => {
-  const { article } = useArticleStore();
-  if (!article) return;
+type Props = { params: { slug: string } };
+
+const ArticleDetail = ({ params: { slug } }: Props) => {
+  const { data: article } = useQuery([`/api/article/${slug}`], () => getArticle(slug));
+
+  if (!article) return <div>Loading...</div>;
+
+  console.log(article);
   const { title, author, createdAt, body, tagList } = article;
 
   return (

src/components/ArticleCard.tsx

@@ -1,24 +1,16 @@
-"use client";
 import { Article } from "@/types/articles";
 import LikeOrFavoriteBtn from "./buttons/LikeOrFavoriteBtn";
 import Profile from "./common/Profile";
 import Link from "next/link";
 import Tag from "./atoms/Tag";
-import { useArticleStore } from "@/stores/ArticleStore";
 
 interface ArticleCardProps {
   article: Article;
 }
 
-const ArticleCard = ({ article }: ArticleCardProps) => {
-  const { title, description, tagList, favoritesCount, author, createdAt, slug } = article;
-
-  const { setArticle } = useArticleStore();
-
-  const handleClickArticle = () => {
-    setArticle(article);
-  };
-
+const ArticleCard = ({
+  article: { title, description, tagList, favoritesCount, author, createdAt, slug },
+}: ArticleCardProps) => {
   return (
     <li className="border-t-[1px] border-t-gray-300 px-2 py-4 xl:max-w-4xl">
       <div className="flex justify-between items-center">
@@ -27,7 +19,7 @@ const ArticleCard = ({ article }: ArticleCardProps) => {
           <LikeOrFavoriteBtn>♥ {favoritesCount}</LikeOrFavoriteBtn>
         </div>
       </div>
-      <Link href={`/article/${slug}`} onClick={handleClickArticle}>
+      <Link href={`/article/${slug}`}>
         <article className="mt-2">
           <h1 className="text-xl font-semibold">{title}</h1>
           <p className="text-sm text-gray-400">{description}</p>

src/services/app.ts

@@ -12,7 +12,6 @@ export const executeAPI = async ({ method, body, url }: ExecuteAPIProps) => {
     method,
     headers: {
       "Content-Type": "application/json; charset=UTF-8",
-      credentials: "include",
     },
     body: JSON.stringify(body),
   });