[Feat]관심종목 렌더링 자동화 시도

실패 Issues #19
codestates-seb · Sep 19, 2023 · 60ebdd2 · 60ebdd2
1 parent 9b41764
commit 60ebdd2
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 8 deletions.
diff --git 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
@@ -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
@@ -9,7 +9,6 @@ const deleteStarData = async (companyId: number) => {
       'Content-Type': 'application/json',
       'Authorization': `${accessToken}`
     },
-    body: JSON.stringify({ companyId }),
   });
 
   if (!response.ok) {