Merge pull request #73 from SOPT-all/feat/tanstack-query-convention/#72

[feat/#72] tanstack-query 컨벤션 정의 및 query-key 생성

Author: odukong

src/apis/constants/query-key.ts

@@ -0,0 +1,18 @@
+export const productQueryKeys = {
+  all: () => ["product"],
+  item: (productId: number) => [...productQueryKeys.all(), productId],
+  detail: (productId: number) => [
+    ...productQueryKeys.item(productId),
+    "detail",
+  ],
+  reviews: (productId: number) => [
+    ...productQueryKeys.item(productId),
+    "reviews",
+  ],
+};
+
+export const authorQueryKeys = {
+  all: () => ["author"],
+  item: (authorId: number) => [...authorQueryKeys.all(), authorId],
+  detail: (authorId: number) => [...authorQueryKeys.item(authorId), "detail"],
+};

src/apis/mutations/use-author-like.mutation.ts

@@ -0,0 +1 @@
+// 작가 좋아요 생성 API

src/apis/mutations/use-product-like.mutation.ts

@@ -0,0 +1 @@
+// 작품 좋아요 생성 API

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

@@ -0,0 +1 @@
+// 작가 정보 조회 API

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

@@ -0,0 +1 @@
+// 작품 정보 조회 API

src/apis/queries/use-product-review.query.ts

@@ -0,0 +1 @@
+// 작품 리뷰 조회 API

src/pages/product/product-page.tsx

@@ -1,4 +1,4 @@
-import { lazy } from "react";
+import { lazy, Suspense } from "react";
 import LazySection from "@/shared/components/lazy-section/lazy-section";
 import ProductInfo from "./components/product-info";
 import LoadingFallback from "@/shared/components/layout/loading-fallback";
@@ -12,7 +12,9 @@ const ProductPage = () => {
   return (
     <div>
       {/* ProductInfo는 첫 진입 시 바로 로드 */}
-      <ProductInfo />
+      <Suspense fallback={<LoadingFallback />}>
+        <ProductInfo />
+      </Suspense>
 
       {/* 나머지 컴포넌트들은 스크롤해서 화면에 보이면 로드 */}
       <LazySection fallback={<LoadingFallback />}>