Merge pull request #80 from SOPT-all/api/author-info/#76

[api/#76] 작가 정보 조회 api 연동

Author: jstar000

src/apis/queries/use-author-info.query.ts

@@ -1 +1,24 @@
 // 작가 정보 조회 API
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { HTTPMethod, request } from "@/apis/request";
+import { API_ENDPOINTS } from "@/apis/constants/api-endpoints";
+import { authorQueryKeys } from "@/apis/constants/query-key";
+import type { AuthorInfoResponse } from "@/apis/types/author";
+
+const fetchAuthorInfo = (authorId: number, userId: number) =>
+  request<AuthorInfoResponse>({
+    method: HTTPMethod.GET,
+    url: API_ENDPOINTS.AUTHORS.AUTHOR_INFO(authorId), // /authors/{authorId}
+    query: { userId },
+  });
+
+export const useAuthorInfoQuery = (authorId: number, userId: number) =>
+  useSuspenseQuery({
+    queryKey: [...authorQueryKeys.detail(authorId), userId],
+    queryFn: () => fetchAuthorInfo(authorId, userId),
+    retry: false,
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+    refetchOnWindowFocus: false,
+    staleTime: 5 * 60 * 1000,
+  });

src/apis/types/author.ts

@@ -1 +1,9 @@
 // 요청, 응답 타입을 정의합니다
+export interface AuthorInfoResponse {
+  id: number;
+  name: string;
+  description: string;
+  imageUrl: string;
+  likeCount: number;
+  isLiked: boolean;
+}

src/pages/product-info/product-info.tsx

@@ -1,7 +1,9 @@
+import { Suspense } from "react";
 import { MakerInfo } from "@/shared/components/maker-info/maker-info";
 import { Carousel } from "./components/carousel/carousel";
 import { ProductMainInfo } from "./components/product-main-info/product-main-info";
 import { ProductSummary } from "./components/product-summary/product-summary";
+import { useAuthorInfoQuery } from "@/apis/queries/use-author-info.query";
 
 export const ProductInfo = () => {
   const data = {
@@ -14,19 +16,43 @@ export const ProductInfo = () => {
     reviewCount: 634,
     salesCount: 4319,
   };
+
+  const authorId = 1;
+  const userId = 1;
+
+  const AuthorInfoContent = () => {
+    const { data: author } = useAuthorInfoQuery(authorId, userId);
+
+    return (
+      <MakerInfo
+        name={author?.name ?? data.authorName}
+        description={author?.description ?? "작가 정보를 불러오는 중입니다."}
+        profileImage={author?.imageUrl}
+        liked={author?.isLiked}
+        likeCount={author?.likeCount}
+      />
+    );
+  };
+
   return (
     <>
       {/** 캐러셀 */}
       <Carousel />
       {/** 작품 메인 정보 */}
-      <ProductMainInfo data={data} />
+      <ProductMainInfo data={{ ...data }} />
       {/** 작품 요약 정보 */}
       <ProductSummary />
       {/** 작가 정보 */}
-      <MakerInfo
-        name="SPEDEAR"
-        description="소중한 시간을 담을 수 있는 아이템입니다."
-      />
+      <Suspense
+        fallback={
+          <MakerInfo
+            name={data.authorName}
+            description="작가 정보를 불러오는 중입니다."
+            profileImage={undefined}
+          />
+        }>
+        <AuthorInfoContent />
+      </Suspense>
     </>
   );
 };

src/shared/components/maker-info/maker-info.tsx

@@ -7,12 +7,16 @@ interface MakerInfoProps {
   name: string;
   description: string;
   profileImage?: string;
+  liked?: boolean;
+  likeCount?: number;
 }
 
 export function MakerInfo({
   name,
   description,
   profileImage = MakerProfileImage,
+  liked = false,
+  likeCount = 0,
 }: MakerInfoProps) {
   // TODO: api 연동해서 LikeButton에 전달 => 낙관적 업데이트
 
@@ -33,7 +37,7 @@ export function MakerInfo({
           <p className={styles.description}>{description}</p>
         </div>
       </div>
-      <LikeButton variant="maker" liked={true} count={9999} />
+      <LikeButton variant="maker" liked={liked} count={likeCount} />
     </div>
   );
 }