- {!isOwnerStock && (
-
- {index === 0 && (
-
- 주식 소유자만
- 확인할 수 있습니다.
-
+
채팅을 불러오는데 실패했어요.
+ }
+ >
+ }>
+ {chatData.length ? (
+ <>
+ {chatData.slice(0, INITIAL_VISIBLE_CHATS).map((chat) => (
+ handleLikeClick(chat.id)}
+ />
+ ))}
+ {chatData.slice(INITIAL_VISIBLE_CHATS).map((chat, index) => (
+
+ {!isOwnerStock && (
+
+ {index === 0 && (
+
+ 주식 소유자만
+ 확인할 수 있어요.
+
+ )}
+
)}
+
handleLikeClick(chat.id)}
+ />
- ))}
-
- ) : (
-
채팅이 없어요.
- )}
+ ))}
+
+ ) : (
+
채팅이 없어요.
+ )}
+
+
{isFetching ?
:
}
diff --git a/packages/frontend/src/pages/stock-detail/NotificationPanel.tsx b/packages/frontend/src/pages/stock-detail/NotificationPanel.tsx
index e839cb22..4a374142 100644
--- a/packages/frontend/src/pages/stock-detail/NotificationPanel.tsx
+++ b/packages/frontend/src/pages/stock-detail/NotificationPanel.tsx
@@ -44,7 +44,7 @@ const NotificationContents = () => {
key={alarm.alarmId}
option={alarm.targetPrice ? '목표가' : '거래가'}
goalPrice={alarm.targetPrice ?? alarm.targetVolume!}
- alarmDate={alarm.alarmDate}
+ alarmDate={alarm.alarmExpiredDate}
/>
));
};
diff --git a/packages/frontend/src/pages/stock-detail/StockDetail.tsx b/packages/frontend/src/pages/stock-detail/StockDetail.tsx
index 9c183021..1d200127 100644
--- a/packages/frontend/src/pages/stock-detail/StockDetail.tsx
+++ b/packages/frontend/src/pages/stock-detail/StockDetail.tsx
@@ -1,27 +1,26 @@
+import { lazy, Suspense } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
import { useParams } from 'react-router-dom';
import { StockDetailHeader } from './components';
-import {
- AddAlarmForm,
- ChatPanel,
- NotificationPanel,
- StockMetricsPanel,
- TradingChart,
-} from '.';
+import { AddAlarmForm, ChatPanel, NotificationPanel, TradingChart } from '.';
import {
useGetOwnership,
useGetStockDetail,
} from '@/apis/queries/stock-detail';
+import { Loader } from '@/components/ui/loader';
+
+const StockMetricsPanel = lazy(() => import('./StockMetricsPanel'));
export const StockDetail = () => {
const { stockId = '' } = useParams();
const { data: stockDetail } = useGetStockDetail({ stockId });
- const { eps, high52w, low52w, marketCap, per, name } = stockDetail || {};
+ const { eps, high52w, low52w, marketCap, per, name } = stockDetail;
const { data: userOwnerStock } = useGetOwnership({ stockId });
- if (!stockDetail || !userOwnerStock) {
- return
데이터가 없습니다.
;
+ if (!userOwnerStock) {
+ return
주식 소유 여부를 불러오지 못했습니다.
;
}
return (
@@ -34,13 +33,17 @@ export const StockDetail = () => {
-
+ 상세 정보를 불러오지 못했어요.}>
+ }>
+
+
+
diff --git a/packages/frontend/src/pages/stock-detail/StockMetricsPanel.tsx b/packages/frontend/src/pages/stock-detail/StockMetricsPanel.tsx
index 50b36656..6c1a6ca3 100644
--- a/packages/frontend/src/pages/stock-detail/StockMetricsPanel.tsx
+++ b/packages/frontend/src/pages/stock-detail/StockMetricsPanel.tsx
@@ -12,7 +12,7 @@ interface RealTimeStockData {
volume: number;
}
-export const StockMetricsPanel = ({
+const StockMetricsPanel = ({
eps,
high52w,
low52w,
@@ -75,3 +75,5 @@ export const StockMetricsPanel = ({
);
};
+
+export default StockMetricsPanel;
diff --git a/packages/frontend/src/pages/stock-detail/TradingChart.tsx b/packages/frontend/src/pages/stock-detail/TradingChart.tsx
index 0d94db21..8b2b15d9 100644
--- a/packages/frontend/src/pages/stock-detail/TradingChart.tsx
+++ b/packages/frontend/src/pages/stock-detail/TradingChart.tsx
@@ -23,14 +23,9 @@ export const TradingChart = () => {
timeunit,
});
- const allPriceData = data?.pages.flatMap((page) => page.priceDtoList) ?? [];
- const allVolumeData = data?.pages.flatMap((page) => page.volumeDtoList) ?? [];
-
- const chart = useChart({
- priceData: allPriceData,
- volumeData: allVolumeData,
- containerRef,
- });
+ const { priceDtoList: priceData = [], volumeDtoList: volumeData = [] } =
+ data || {};
+ const chart = useChart({ priceData, volumeData, containerRef });
const fetchGraphData = useCallback(
async (logicalRange: LogicalRange | null) => {
diff --git a/packages/frontend/src/pages/stocks/StockRankingTable.tsx b/packages/frontend/src/pages/stocks/StockRankingTable.tsx
index 2d61aa1a..92a8cb36 100644
--- a/packages/frontend/src/pages/stocks/StockRankingTable.tsx
+++ b/packages/frontend/src/pages/stocks/StockRankingTable.tsx
@@ -1,13 +1,15 @@
-import { useState } from 'react';
+import { Suspense, useState } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
import { Link } from 'react-router-dom';
import { usePostStockView } from '@/apis/queries/stock-detail';
import { useGetStocksByPrice } from '@/apis/queries/stocks';
import DownArrow from '@/assets/down-arrow.svg?react';
+import { Loader } from '@/components/ui/loader';
import { cn } from '@/utils/cn';
const LIMIT = 10;
-export const StockRankingTable = () => {
+const StockRankingTable = () => {
const [sortType, setSortType] = useState<'increase' | 'decrease'>('increase');
const { data } = useGetStocksByPrice({ limit: LIMIT, type: sortType });
@@ -49,46 +51,52 @@ export const StockRankingTable = () => {
- {data ? (
- data.result.map((stock, index) => (
-
- |
-
- {index + 1}
-
- mutate({ stockId: stock.id })}
- className="display-bold14 hover:text-orange cursor-pointer text-ellipsis hover:underline"
- aria-label={stock.name}
- >
- {stock.name}
-
- |
- {stock.currentPrice?.toLocaleString()}원 |
- = 0 ? 'text-red' : 'text-blue',
- )}
+ 종목 정보를 불러오는데 실패했어요.
+ }
+ >
+ }>
+ {data.result.map((stock, index) => (
+
- {stock.changeRate}%
-
- |
- {stock.volume?.toLocaleString()}원
- |
-
- {stock.marketCap?.toLocaleString()}주
- |
-
- ))
- ) : (
- 종목 정보를 불러오는데 실패했어요.
- )}
+
+
+ {index + 1}
+
+ mutate({ stockId: stock.id })}
+ className="display-bold14 hover:text-orange cursor-pointer text-ellipsis hover:underline"
+ aria-label={stock.name}
+ >
+ {stock.name}
+
+ |
+ {stock.currentPrice?.toLocaleString()}원 |
+ = 0 ? 'text-red' : 'text-blue',
+ )}
+ >
+ {stock.changeRate}%
+ |
+
+ {stock.volume?.toLocaleString()}원
+ |
+
+ {stock.marketCap?.toLocaleString()}주
+ |
+ |
+ ))}
+
+
지수 정보를 불러오는 데 실패했어요.
- )}
+