feat: 차트 기능 구현

package.json

@@ -27,6 +27,7 @@
     "next": "^14.2.3",
     "query-string": "^9.0.0",
     "react": "^18",
+    "react-chartjs-2": "^5.2.0",
     "react-dom": "^18",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7"

src/app/(iTracker)/products/[productId]/layout.tsx

@@ -1,17 +1,5 @@
-import { Text } from '@/shared/components/shadcn/Text';
 import React from 'react';
 
 export default function Layout({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="flex-1 w-full flex flex-col py-4">
-      <Text typography="h2" className="mb-6 text-center">
-        상세페이지
-      </Text>
-      <Text typography="h4">오늘의 할인율 TOP5</Text>
-      <Text typography="p" className="md:text-lg text-gray-500">
-        오늘 할인율이 가장 높은 상품리스트
-      </Text>
-      {children}
-    </div>
-  );
+  return <div className="flex-1 w-full flex flex-col py-4">{children}</div>;
 }

src/app/(iTracker)/products/[productId]/page.tsx

@@ -1,12 +1,13 @@
+import { ProductDetail } from '@/features/productDetail/components/ProductDetail';
 import { Text } from '@/shared/components/shadcn/Text';
 
-export default function ProductDetail({ params }: { params: { productId: number } }) {
-  console.log(params);
+export default function ProductDetailPage({ params }: { params: { productId: number } }) {
   return (
     <main>
       <Text typography="h4" className="md:text-2xl">
-        상페에지이 입니다.
+        ID: {params.productId} 제품에 대한 상세페이지 입니다.
       </Text>
+      <ProductDetail productId={params.productId} />
     </main>
   );
 }

src/features/product/components/macbook/Item/index.tsx

@@ -16,7 +16,7 @@ export const MacbookProductListItem = ({ productItem }: ProductItemProps) => {
 
   return (
     <li className="w-full">
-      <Link href="/products/1" className="flex flex-col gap-2 cursor-pointer">
+      <Link href={`/products/${productItem.id}`} className="flex flex-col gap-2 cursor-pointer">
         <div className="flex items-center justify-center w-auto h-full rounded-md border-gray-200 border">
           <Image
             src={productItem.imageUrl}

src/features/productDetail/api/getProductDetail.ts

@@ -0,0 +1,26 @@
+import { Macbook } from '@/features/product/api/getProductList';
+
+export type GetProductDetailResponse = Macbook & ProductDetailInfo;
+
+export type ProductDetailInfo = {
+  allTimeHighPrice: number;
+  allTimeLowPrice: number;
+  averagePrice: number;
+  priceInfos: {
+    date: string;
+    currentPrice: number;
+  }[];
+};
+
+// 클라이언트 상태 관리를 위한 api 호출함수
+// export const getProductDetailUrl = (productId: number) => `/api/products/${productId}`;
+
+// export const getProductDetail = async (productId: number): Promise<GetProductDetailResponse> => {
+//   const url = `${getProductDetailUrl(productId)}`;
+
+//   const response = await fetch(url);
+
+//   const data = (await response.json()) as GetProductDetailResponse;
+
+//   return data;
+// };

src/features/productDetail/components/LineChart/index.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import 'chart.js/auto';
+
+const Line = dynamic(() => import('react-chartjs-2').then((mod) => mod.Line), {
+  ssr: false,
+});
+
+const LineChart = ({ priceInfos }: { priceInfos: { date: string; currentPrice: number }[] }) => {
+  const data = {
+    labels: priceInfos.map((info) => info.date),
+    datasets: [
+      {
+        label: '가격 변동 추이',
+        data: priceInfos.map((info) => info.currentPrice),
+        fill: false,
+        borderColor: 'rgb(75, 192, 192)',
+        tension: 0.1,
+        stepped: true,
+      },
+    ],
+  };
+
+  return (
+    <div className="w-full h-auto">
+      <h1>Example 1: Line Chart</h1>
+      <Line data={data} />
+    </div>
+  );
+};
+export default LineChart;

src/features/productDetail/components/ProductDetail/index.tsx

@@ -0,0 +1,36 @@
+import { Text } from '@/shared/components/shadcn/Text';
+import LineChart from '../LineChart';
+import { API_BASE_URL } from '@/shared/api/constants';
+import { GetProductDetailResponse } from '../../api/getProductDetail';
+
+// server component
+
+export const ProductDetail = async ({ productId }: { productId: number }) => {
+  try {
+    const response = await fetch(`${API_BASE_URL}/api/v1/products/macbook_pro/${productId}`);
+    if (!response.ok) {
+      throw new Error(`서버에서 데이터를 가져오는 데 실패했습니다. 상태 코드: ${response.status}`);
+    }
+
+    const data = (await response.json()) as GetProductDetailResponse;
+
+    return (
+      <div>
+        <div>
+          <Text>{data?.category}</Text>
+          <Text>{data?.title}</Text>
+          <Text>평균가: {data?.averagePrice}</Text>
+          <Text>최고가: {data?.allTimeHighPrice}</Text>
+          <Text>최저가: {data?.allTimeLowPrice}</Text>
+        </div>
+        <Text typography="h3" className="mt-12">
+          그래프
+        </Text>
+        {data?.priceInfos && <LineChart priceInfos={data.priceInfos} />}
+      </div>
+    );
+  } catch (error) {
+    console.error(error);
+    return <Text>제품 정보를 불러오는 중 오류가 발생했습니다.</Text>;
+  }
+};

yarn.lock

@@ -4199,6 +4199,11 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
+react-chartjs-2@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/react-chartjs-2/-/react-chartjs-2-5.2.0.tgz#43c1e3549071c00a1a083ecbd26c1ad34d385f5d"
+  integrity sha512-98iN5aguJyVSxp5U3CblRLH67J8gkfyGNbiK3c+l1QI/G4irHMPQw44aEPmjVag+YKTyQ260NcF82GTQ3bdscA==
+
 react-dom@^18:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"