fix/#47: 차트 API 연결

SolSolHigh · Aug 29, 2024 · d5ff19c · d5ff19c
1 parent 5d12cd7
commit d5ff19c
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 23 deletions.
diff --git a/ssh-web/src/components/molecules/EggCard/index.tsx b/ssh-web/src/components/molecules/EggCard/index.tsx
@@ -7,6 +7,7 @@ import { isModalOpenState } from '../../../atoms/modal';
 import { SellDetailModalContent } from '../../../pages/Market/components/SellDetailModalContent';
 
 interface IEggCardProps {
+  eggId: number;
   eggName: string;
   eggPrice: number;
   eggImageUrl: string;
@@ -16,6 +17,7 @@ interface IEggCardProps {
 }
 
 export const EggCard: React.FC<IEggCardProps> = ({
+  eggId,
   eggName,
   eggPrice,
   eggImageUrl,
@@ -30,6 +32,7 @@ export const EggCard: React.FC<IEggCardProps> = ({
       isOpen: true,
       content: (
         <SellDetailModalContent
+          eggId={eggId}
           eggName={eggName}
           eggImageUrl={eggImageUrl}
           eggPrice={eggPrice}

diff --git a/ssh-web/src/pages/Egg/components/PriceChart.tsx b/ssh-web/src/pages/Egg/components/PriceChart.tsx
@@ -1,21 +1,17 @@
 import React, { useEffect, useRef } from 'react';
 import Chart from 'chart.js/auto';
 import { formatTimeAgo } from '../../../utils/dateUtils';
-
-interface ITradeData {
-  price: number;
-  tradeDate: string;
-}
+import { ISpecialEggTradeHistory } from '../../../interfaces/eggInterface';
 
 interface IPriceChartProps {
-  tradeData: ITradeData[];
+  tradeData: ISpecialEggTradeHistory[] | undefined;
 }
 
 export const PriceChart: React.FC<IPriceChartProps> = ({ tradeData }) => {
   const chartRef = useRef<HTMLCanvasElement>(null);
 
   useEffect(() => {
-    if (tradeData.length > 0 && chartRef.current) {
+    if (tradeData && tradeData.length > 0 && chartRef.current) {
       const sortedData = tradeData.sort((a, b) =>
         a.tradeDate > b.tradeDate ? 1 : -1,
       );

diff --git a/ssh-web/src/pages/Market/MarketFetch.tsx b/ssh-web/src/pages/Market/MarketFetch.tsx
@@ -23,7 +23,10 @@ import {
   searchEggsForSale,
   getMyRegisteredEggTrades,
 } from '../../apis/eggApi';
-import { IPaginatedTrades } from '../../interfaces/eggInterface';
+import {
+  IPaginatedTrades,
+  ISpecialEggInfo,
+} from '../../interfaces/eggInterface';
 
 export const MarketFetch = () => {
   const size = useRecoilValue(resizeState);
@@ -118,7 +121,7 @@ export const MarketFetch = () => {
             sortOrder={sortOrder}
             setSearchTerm={setSearchTerm}
             setSortOrder={setSortOrder}
-            fetchEggData={fetchEggData} // pass the callback to fetch egg data
+            fetchEggData={fetchEggData}
           />
         </div>
         <Modal color="light" />

diff --git a/ssh-web/src/pages/Market/components/EggCardList.tsx b/ssh-web/src/pages/Market/components/EggCardList.tsx
@@ -17,6 +17,7 @@ export const EggCardList: React.FC<IEggCardListProps> = ({
       {eggData.map((egg) => (
         <EggCard
           key={egg.sellBoardId}
+          eggId={egg.specialEggInfo.specialEggId}
           eggName={egg.specialEggInfo.specialEggName}
           eggPrice={egg.pricePerOnce}
           eggImageUrl={egg.specialEggInfo.imageUrl}

diff --git a/ssh-web/src/pages/Market/components/SellDetailModalContent.tsx b/ssh-web/src/pages/Market/components/SellDetailModalContent.tsx
@@ -5,13 +5,16 @@ import { PriceChart } from '../../Egg/components/PriceChart';
 import {
   requestEggPurchase,
   deleteSpecialEggTrade,
+  getSpecialEggTradeHistory,
 } from '../../../apis/eggApi';
 import { useSetRecoilState } from 'recoil';
 import { isModalOpenState } from '../../../atoms/modal';
 import { showToast } from '../../../utils/toastUtil';
 import { LastPriceInfoBar } from './LastPriceInfoBar';
+import { ISpecialEggTradeHistory } from '../../../interfaces/eggInterface';
 
 interface SpecialEggDetailProps {
+  eggId: number;
   eggName: string;
   eggImageUrl: string;
   eggPrice: number;
@@ -20,16 +23,17 @@ interface SpecialEggDetailProps {
   sellBoardId: number;
 }
 
-const fetchDummyData = (): { price: number; tradeDate: string }[] => {
-  return [
-    { price: 2, tradeDate: '2024-08-08' },
-    { price: 3, tradeDate: '2024-08-23' },
-    { price: 4, tradeDate: '2024-08-26' },
-    { price: 1, tradeDate: '2024-08-28' },
-  ];
-};
+// const fetchDummyData = (): [] => {
+//   return [
+//     { price: 2, tradeDate: '2024-08-08' },
+//     { price: 3, tradeDate: '2024-08-23' },
+//     { price: 4, tradeDate: '2024-08-26' },
+//     { price: 1, tradeDate: '2024-08-28' },
+//   ];
+// };
 
 export const SellDetailModalContent: React.FC<SpecialEggDetailProps> = ({
+  eggId,
   eggName,
   eggImageUrl,
   eggPrice,
@@ -39,14 +43,31 @@ export const SellDetailModalContent: React.FC<SpecialEggDetailProps> = ({
 }) => {
   const [lastPrice, setLastPrice] = useState<number | null>(null);
   const setIsModalOpen = useSetRecoilState(isModalOpenState);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const [tradeData, setTradeData] = useState<ISpecialEggTradeHistory[]>();
+
+  useEffect(() => {
+    const fetchSpecialEggHistory = async (specialEggId: number) => {
+      try {
+        const response = await getSpecialEggTradeHistory(specialEggId);
+        console.log(response);
+        setTradeData(response.data);
+      } catch (error) {
+        console.error('가격 로드 실패', error);
+        showToast('error', '가격 로드 실패');
+      }
+    };
+    fetchSpecialEggHistory(eggId);
+  }, []);
 
   useEffect(() => {
-    const tradeData = fetchDummyData();
-    if (tradeData.length > 0) {
-      const prices = tradeData.map((data) => data.price);
+    if (tradeData && tradeData?.length > 0) {
+      const prices = tradeData?.map(
+        (data: ISpecialEggTradeHistory) => data?.price,
+      );
       setLastPrice(prices[prices.length - 1]);
     }
-  }, []);
+  }, [tradeData]);
 
   const handlePurchase = async () => {
     try {
@@ -70,8 +91,6 @@ export const SellDetailModalContent: React.FC<SpecialEggDetailProps> = ({
     }
   };
 
-  const tradeData = fetchDummyData();
-
   return (
     <div className="flex flex-col items-center justify-center">
       <div className="w-full text-left">