🔧 fix: 소켓 이벤트 off 로직 추가 & 자잘한 버그 수정

소켓 off로 이벤트 구독 해지 로직 추가.
오타 수정.
formatTime 관련 버그 수정.

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>

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;

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`,
     {

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);