From d018fceedd7899d87845fdae9e31b0292c0915e3 Mon Sep 17 00:00:00 2001
From: Seo San <dannysir@naver.com>
Date: Wed, 27 Nov 2024 12:11:13 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20fix:=20=EC=86=8C=EC=BC=93=20?=
 =?UTF-8?q?=EC=9D=B4=EB=B2=A4=ED=8A=B8=20off=20=EB=A1=9C=EC=A7=81=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20&=20=EC=9E=90=EC=9E=98=ED=95=9C=20?=
 =?UTF-8?q?=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95=20=EC=86=8C=EC=BC=93=20?=
 =?UTF-8?q?off=EB=A1=9C=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EA=B5=AC=EB=8F=85?=
 =?UTF-8?q?=20=ED=95=B4=EC=A7=80=20=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80?=
 =?UTF-8?q?.=20=EC=98=A4=ED=83=80=20=EC=88=98=EC=A0=95.=20formatTime=20?=
 =?UTF-8?q?=EA=B4=80=EB=A0=A8=20=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 FE/src/components/StocksDetail/Header.tsx     | 11 ++---
 .../components/StocksDetail/PriceSection.tsx  | 44 ++++---------------
 FE/src/service/stocks.ts                      |  2 +-
 FE/src/utils/formatTime.ts                    |  2 +-
 4 files changed, 17 insertions(+), 42 deletions(-)

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 (
-    <div className='flex items-center justify-between w-full h-16 px-2'>
+    <div className='flex h-16 w-full items-center justify-between px-2'>
       <div className='flex flex-col font-semibold'>
         <div className='flex gap-2 text-sm'>
           <h2>{hts_kor_isnm}</h2>
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);