From 60ebdd2b11c0b260d96c1b26efa80ec992f1dc52 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=91=ED=98=84?=
 <gimbyeonghyeon@gimbyeonghyeon-ui-MacBookAir.local>
Date: Tue, 19 Sep 2023 19:43:23 +0900
Subject: [PATCH] =?UTF-8?q?[Feat]=EA=B4=80=EC=8B=AC=EC=A2=85=EB=AA=A9=20?=
 =?UTF-8?q?=EB=A0=8C=EB=8D=94=EB=A7=81=20=EC=9E=90=EB=8F=99=ED=99=94=20?=
 =?UTF-8?q?=EC=8B=9C=EB=8F=84=20=EC=8B=A4=ED=8C=A8=20Issues=20#19?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/watchlist/StockItem.tsx |  9 ++++----
 client/src/components/watchlist/WatchList.tsx | 21 ++++++++++++++++---
 client/src/hooks/stars/useDeletestars.ts      |  1 -
 3 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/client/src/components/watchlist/StockItem.tsx b/client/src/components/watchlist/StockItem.tsx
index 089d23f..a89290e 100644
--- a/client/src/components/watchlist/StockItem.tsx
+++ b/client/src/components/watchlist/StockItem.tsx
@@ -22,7 +22,7 @@ import LGchem from '../../asset/logos/LG화학.svg';
 import posco from '../../asset/logos/POSCO홀딩스.svg';
 
 
-const StockItem: React.FC<StockItemProps> = ({ company }) => {
+const StockItem: React.FC<StockItemProps> = ({ company, onDelete  }) => {
   const [showChangePrice, setShowChangePrice] = useState(false);  
   const isPositiveChange = parseFloat(company.stockChangeRate) > 0;
   // 🔴 색깔 통일 (그냥 깔끔하게)
@@ -37,13 +37,13 @@ const StockItem: React.FC<StockItemProps> = ({ company }) => {
   const handleDelete = () => {
     deleteMutation.mutate(company.companyId, {
       onSuccess: () => {
-        // 성공적으로 삭제되면 컴포넌트를 리렌더링 (상위 컴포넌트에서 상태 변경을 통해 구현해야 할 수도 있음)
-        // 여기서는 간단하게 window.location.reload()를 사용하겠습니다.
-        window.location.reload();
+        console.log("Delete successful!");  // 여기가 출력되는지 확인
+        onDelete(company.companyId);  // 콜백 함수 호출
       }
     });
   };
 
+
   const dispatch = useDispatch();
 
   const handleItemClick = () => {
@@ -112,6 +112,7 @@ type NewCompanyData = {
 
 type StockItemProps = {
   company: NewCompanyData;
+  onDelete: (deletedCompanyId: number) => void;
 };
 
 const StockItemWrapper = styled.div`
diff --git a/client/src/components/watchlist/WatchList.tsx b/client/src/components/watchlist/WatchList.tsx
index e5da762..d41cc7c 100644
--- a/client/src/components/watchlist/WatchList.tsx
+++ b/client/src/components/watchlist/WatchList.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import styled from "styled-components";
 import StockSearchComponent from "./StockSearchComponent";
 import Header from "./Header";
@@ -16,8 +16,23 @@ const WatchList: React.FC<WatchListProps> = ({ currentListType, onChangeListType
   const companiesList = companies || [];
 
   const { data: starredData } = useGetStars();
-  const starredCompanyIds = starredData?.map(item => item.companyResponseDto.companyId) || [];
 
+  const [starredCompanyIds, setStarredCompanyIds] = useState<number[]>([]);
+  useEffect(() => {
+    if (starredData) {
+      
+      setStarredCompanyIds(starredData.map(item => item.companyResponseDto.companyId));
+    }
+  }, [starredData]);
+
+  useEffect(() => {
+    console.log("Updated starredCompanyIds:", starredCompanyIds);  // 여기가 출력되는지 확인
+  }, [starredCompanyIds]);
+  
+  const handleCompanyDelete = (deletedCompanyId: number) => {
+    console.log("Company ID to delete:", deletedCompanyId);  // 여기가 출력되는지 확인
+    setStarredCompanyIds(prevState => prevState.filter(id => id !== deletedCompanyId));
+  };
   return (
     <WatchListContainer>
       <Header1Container>
@@ -34,7 +49,7 @@ const WatchList: React.FC<WatchListProps> = ({ currentListType, onChangeListType
         ) : isError ? (
           <div>Error fetching data</div>
         ) : loginStatus === 1 ? (
-          companiesList.filter((company) => starredCompanyIds.includes(company.companyId)).map((company) => <StockItem key={company.companyId} company={company} />)
+          companiesList.filter((company) => starredCompanyIds.includes(company.companyId)).map((company) => <StockItem key={company.companyId} company={company} onDelete={handleCompanyDelete} />)
         ) : (
           <div>로그인이 필요합니다.</div>
         )}
diff --git a/client/src/hooks/stars/useDeletestars.ts b/client/src/hooks/stars/useDeletestars.ts
index e18ad03..2faf738 100644
--- a/client/src/hooks/stars/useDeletestars.ts
+++ b/client/src/hooks/stars/useDeletestars.ts
@@ -9,7 +9,6 @@ const deleteStarData = async (companyId: number) => {
       'Content-Type': 'application/json',
       'Authorization': `${accessToken}`
     },
-    body: JSON.stringify({ companyId }),
   });
 
   if (!response.ok) {