feat: 차트 점 추가

i-Tracker · Jun 13, 2024 · 40cc13f · 40cc13f
1 parent ea987f9
commit 40cc13f
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 16 deletions.
diff --git a/package.json b/package.json
@@ -39,6 +39,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/recharts": "^1.8.29",
     "@typescript-eslint/eslint-plugin": "6.21.0",
     "autoprefixer": "^10.0.1",
     "eslint": "^8",

diff --git a/src/features/productDetail/components/LineChart/CustomDot/index.tsx b/src/features/productDetail/components/LineChart/CustomDot/index.tsx
@@ -0,0 +1,11 @@
+import { DotProps } from 'recharts';
+
+export const CustomDot = ({ cx, cy }: DotProps) => {
+  if (cx && cy) {
+    return (
+      <svg x={cx - 6} y={cy - 6} xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24">
+        <path fill="currentColor" d="M12 16a4 4 0 1 1 0-8a4 4 0 0 1 0 8Z" />
+      </svg>
+    );
+  }
+};
diff --git a/src/features/productDetail/components/LineChart/CustomTooltip/index.tsx b/src/features/productDetail/components/LineChart/CustomTooltip/index.tsx
@@ -0,0 +1,17 @@
+/* eslint-disable @typescript-eslint/restrict-template-expressions */
+import { convertToLocalFormat } from '@/shared/utils';
+import { TooltipProps } from 'recharts';
+import { ValueType, NameType } from 'recharts/types/component/DefaultTooltipContent';
+
+export const CustomTooltip = ({ active, payload, label }: TooltipProps<ValueType, NameType>) => {
+  if (active) {
+    return (
+      <div className="custom-tooltip">
+        <p className="label">{`날짜: ${label}`}</p>
+        <p className="label">{`해당일 가격: ${payload && payload.length > 0 ? convertToLocalFormat(payload[0].value as number) : '데이터 없음'}`}</p>
+      </div>
+    );
+  }
+
+  return null;
+};
diff --git a/src/features/productDetail/components/LineChart/index.tsx b/src/features/productDetail/components/LineChart/index.tsx
@@ -1,25 +1,41 @@
 'use client';
 
-import { ResponsiveContainer, LineChart, Line, XAxis, CartesianGrid, Tooltip, YAxis, Legend } from 'recharts';
+import {
+  ResponsiveContainer,
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ReferenceLine,
+} from 'recharts';
+import { CustomTooltip } from './CustomTooltip';
+import { CustomDot } from './CustomDot';
 
 interface PriceChartProps {
   priceInfos: { date: string; currentPrice: number }[];
+  allTimeHighPrice: number;
+  allTimeLowPrice: number;
+  averagePrice: number;
 }
 
-const PriceChart = ({ priceInfos }: PriceChartProps) => {
+const PriceChart = ({ priceInfos, allTimeHighPrice, allTimeLowPrice, averagePrice }: PriceChartProps) => {
   return (
-    <div className="w-[100%] h-[200px]">
-      <ResponsiveContainer width="100%" height="100%">
-        <LineChart data={priceInfos} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
-          <CartesianGrid strokeDasharray="3 3" />
-          <XAxis dataKey="date" />
-          <YAxis />
-          <Tooltip />
-          <Legend />
-          <Line type="monotone" dataKey="currentPrice" stroke="#8884d8" activeDot={{ r: 8 }} />
-        </LineChart>
-      </ResponsiveContainer>
-    </div>
+    <ResponsiveContainer width="100%" height="100%">
+      <LineChart data={priceInfos} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis dataKey="date" />
+        <YAxis domain={['dataMin', 'dataMax']} />
+        <Tooltip content={<CustomTooltip />} />
+        <Legend />
+        <Line type="monotone" dataKey="currentPrice" stroke="#8884d8" activeDot={{ r: 8 }} dot={<CustomDot />} />
+        {/* <ReferenceLine y={allTimeHighPrice} label="최고가" stroke="red" strokeDasharray="3 3" />
+        <ReferenceLine y={allTimeLowPrice} label="최저가" stroke="green" strokeDasharray="3 3" />
+        <ReferenceLine y={averagePrice} label="평균가" stroke="blue" strokeDasharray="3 3" /> */}
+      </LineChart>
+    </ResponsiveContainer>
   );
 };
 

diff --git a/src/features/productDetail/components/ProductDetail/index.tsx b/src/features/productDetail/components/ProductDetail/index.tsx
@@ -14,7 +14,6 @@ import { CategoryType } from '@/features/category/constants';
 // server component
 
 export const ProductDetail = async ({ productId, category }: { productId: number; category: CategoryType }) => {
-  console.log(category);
   try {
     const response = await fetch(`${API_BASE_URL}/api/v1/products/${category}/${productId}`);
     if (!response.ok) {
@@ -111,7 +110,14 @@ export const ProductDetail = async ({ productId, category }: { productId: number
                 </div>
               </div>
               <Suspense>
-                <PriceChart priceInfos={data.priceInfos} />
+                <div className="max-w-[550px] h-[200px]">
+                  <PriceChart
+                    priceInfos={data.priceInfos}
+                    averagePrice={data.averagePrice}
+                    allTimeHighPrice={data.allTimeHighPrice}
+                    allTimeLowPrice={data.allTimeLowPrice}
+                  />
+                </div>
               </Suspense>
             </div>
           </div>

diff --git a/yarn.lock b/yarn.lock
@@ -1755,13 +1755,25 @@
   resolved "https://registry.yarnpkg.com/@types/d3-path/-/d3-path-3.1.0.tgz#2b907adce762a78e98828f0b438eaca339ae410a"
   integrity sha512-P2dlU/q51fkOc/Gfl3Ul9kicV7l+ra934qBFXCFhrZMOL6du1TM0pm1ThYvENukyOn5h9v+yMJ9Fn5JK4QozrQ==
 
+"@types/d3-path@^1":
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/@types/d3-path/-/d3-path-1.0.11.tgz#45420fee2d93387083b34eae4fe6d996edf482bc"
+  integrity sha512-4pQMp8ldf7UaB/gR8Fvvy69psNHkTpD/pVw3vmEi8iZAB9EPMBruB1JvHO4BIq9QkUUd2lV1F5YXpMNj7JPBpw==
+
 "@types/d3-scale@^4.0.2":
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/@types/d3-scale/-/d3-scale-4.0.8.tgz#d409b5f9dcf63074464bf8ddfb8ee5a1f95945bb"
   integrity sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==
   dependencies:
     "@types/d3-time" "*"
 
+"@types/d3-shape@^1":
+  version "1.3.12"
+  resolved "https://registry.yarnpkg.com/@types/d3-shape/-/d3-shape-1.3.12.tgz#8f2f9f7a12e631ce6700d6d55b84795ce2c8b259"
+  integrity sha512-8oMzcd4+poSLGgV0R1Q1rOlx/xdmozS4Xab7np0eamFFUYq71AU9pOCJEFnkXW2aI/oXdVYJzw6pssbSut7Z9Q==
+  dependencies:
+    "@types/d3-path" "^1"
+
 "@types/d3-shape@^3.1.0":
   version "3.1.6"
   resolved "https://registry.yarnpkg.com/@types/d3-shape/-/d3-shape-3.1.6.tgz#65d40d5a548f0a023821773e39012805e6e31a72"
@@ -1830,6 +1842,14 @@
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
+"@types/recharts@^1.8.29":
+  version "1.8.29"
+  resolved "https://registry.yarnpkg.com/@types/recharts/-/recharts-1.8.29.tgz#5e117521a65bf015b808350b45b65553ff5011f3"
+  integrity sha512-ulKklaVsnFIIhTQsQw226TnOibrddW1qUQNFVhoQEyY1Z7FRQrNecFCGt7msRuJseudzE9czVawZb17dK/aPXw==
+  dependencies:
+    "@types/d3-shape" "^1"
+    "@types/react" "*"
+
 "@types/semver@^7.5.0":
   version "7.5.8"
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.8.tgz#8268a8c57a3e4abd25c165ecd36237db7948a55e"