diff --git a/FE/src/components/StocksDetail/Header.tsx b/FE/src/components/StocksDetail/Header.tsx index 173daf23..aff53e0a 100644 --- a/FE/src/components/StocksDetail/Header.tsx +++ b/FE/src/components/StocksDetail/Header.tsx @@ -1,15 +1,15 @@ import { useEffect, useState } from 'react'; -import { unsbscribe } from 'service/stocks'; +import { unsubscribe } from 'service/stocks'; import { StockDetailType } from 'types'; import { stringToLocaleString } from 'utils/common'; import { socket } from 'utils/socket'; -type StocksDeatailHeaderProps = { +type StocksDetailHeaderProps = { code: string; data: StockDetailType; }; -export default function Header({ code, data }: StocksDeatailHeaderProps) { +export default function Header({ code, data }: StocksDetailHeaderProps) { const { hts_kor_isnm, stck_prpr, @@ -42,7 +42,8 @@ export default function Header({ code, data }: StocksDeatailHeaderProps) { socket.on(`detail/${code}`, handleSocketData); return () => { - unsbscribe(code); + socket.off(`detail/${code}`, handleSocketData); + unsubscribe(code); }; }, [code]); @@ -64,7 +65,7 @@ export default function Header({ code, data }: StocksDeatailHeaderProps) { currPrdyVrssSign === '3' ? '' : currPrdyVrssSign < '3' ? '+' : '-'; return ( -
+

{hts_kor_isnm}

diff --git a/FE/src/components/StocksDetail/PriceSection.tsx b/FE/src/components/StocksDetail/PriceSection.tsx index dd8436a2..41e114de 100644 --- a/FE/src/components/StocksDetail/PriceSection.tsx +++ b/FE/src/components/StocksDetail/PriceSection.tsx @@ -6,7 +6,7 @@ import { useParams } from 'react-router-dom'; import { useQuery, useQueryClient } from '@tanstack/react-query'; import { DailyPriceDataType, PriceDataType } from './PriceDataType.ts'; import { getTradeHistory } from 'service/getTradeHistory.ts'; -import { createSSEConnection } from './PriceSectionSseHook.ts'; +import { socket } from 'utils/socket.ts'; export default function PriceSection() { const { id } = useParams(); @@ -34,44 +34,18 @@ export default function PriceSection() { [id, buttonFlag], ); - // useEffect(() => { - // // 이벤트 리스너 등록 - // const handleTradeHistory = (chartData: PriceDataType) => { - // addData(chartData); - // }; - // - // // 소켓 이벤트 구독 - // socket.on(`trade-history/${id}`, handleTradeHistory); - // - // return () => { - // console.log('socket unSub!'); - // socket.off(`trade-history/${id}`, handleTradeHistory); - // - // fetch(`/api/stocks/trade-history/${id}/unsubscribe`, { - // method: 'GET', - // headers: { - // 'Content-Type': 'application/json', - // }, - // }).catch((error) => { - // console.error('Failed to unsubscribe:', error); - // }); - // }; - // }, [id, addData]); - useEffect(() => { - if (!buttonFlag) return; - const eventSource = createSSEConnection( - `${import.meta.env.VITE_API_URL}/stocks/trade-history/${id}/today-sse`, - addData, - ); + // 이벤트 리스너 등록 + const handleTradeHistory = (chartData: PriceDataType) => { + addData(chartData); + }; + + socket.on(`trade-history/${id}`, handleTradeHistory); return () => { - if (eventSource) { - console.log('SSE connection close'); - eventSource.close(); - } + socket.off(`trade-history/${id}`, handleTradeHistory); }; - }, [buttonFlag, id, addData]); + }, [id, addData]); useEffect(() => { const tmpIndex = buttonFlag ? 0 : 1; diff --git a/FE/src/service/stocks.ts b/FE/src/service/stocks.ts index fae307b9..e461b550 100644 --- a/FE/src/service/stocks.ts +++ b/FE/src/service/stocks.ts @@ -23,7 +23,7 @@ export async function getStocksChartDataByCode( }).then((res) => res.json()); } -export async function unsbscribe(code: string) { +export async function unsubscribe(code: string) { return fetch( `${import.meta.env.VITE_API_URL}/stocks/trade-history/${code}/unsubscribe`, { diff --git a/FE/src/utils/formatTime.ts b/FE/src/utils/formatTime.ts index 87f476e5..6490b73b 100644 --- a/FE/src/utils/formatTime.ts +++ b/FE/src/utils/formatTime.ts @@ -1,5 +1,5 @@ export function formatTime(time: string) { - if (!time.length) return '----.--.--'; + if (!time || !time.length) return '----.--.--'; const year = time.slice(0, 4); const mon = time.slice(4, 6); const day = time.slice(6, 8);