[Fix]보유종목 리스트 활성화

삼성전자만 보이는 에러 해결 companyId가 매칭되는 것을 보여주는 기능 구현 Issues #19
codestates-seb · Sep 16, 2023 · 422b09d · 422b09d
1 parent 57bf623
commit 422b09d
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 8 deletions.
diff --git a/client/src/components/HoldingList/HoldingList.tsx b/client/src/components/HoldingList/HoldingList.tsx
@@ -37,17 +37,19 @@ const HoldingList: React.FC<WatchListProps> = ({ currentListType, onChangeListTy
         ) : isError || isCompanyDataError ? (
           <div>Error fetching data</div>
         ) : (
-          stockHolds.map((stockHold: StockItemProps['stockData']) => (
-            companyData ? (
+          stockHolds.map((stockHold: StockItemProps['stockData']) => {
+            const matchedCompany = companyData ? companyData.find(company => company.companyId === stockHold.companyId) : undefined;
+
+            return matchedCompany ? (
               <StockItem
                 key={stockHold.companyId}
                 stockData={stockHold}
-                companyData={companyData}
+                companyData={matchedCompany}
                 setShowChangePrice={setShowChangePrice}
                 showChangePrice={showChangePrice}
               />
-            ) : null
-          ))
+            ) : null;
+          })
         )}
       </StockList>
     </WatchListContainer>

diff --git a/client/src/components/HoldingList/StockItem.tsx b/client/src/components/HoldingList/StockItem.tsx
@@ -21,7 +21,7 @@ export type StockItemProps = {
     stockPrice: string;
     stockChangeAmount: string;
     stockChangeRate: string;
-}[];
+  };
   setShowChangePrice: (value: boolean) => void;
   showChangePrice: boolean;
 };
@@ -31,7 +31,7 @@ export type StockItemProps = {
 const StockItem: React.FC<StockItemProps> = ({ companyData, stockData, setShowChangePrice, showChangePrice }) => {
   const {  stockCount, reserveSellStockCount, totalPrice, percentage, stockReturn } = stockData;
   const totalStocksHeld = stockCount + reserveSellStockCount;
-  const company = companyData ? companyData[0] : undefined;
+  const company = companyData ? companyData : undefined;
 
   const { 
     code = '', 
@@ -83,6 +83,8 @@ const StockItem: React.FC<StockItemProps> = ({ companyData, stockData, setShowCh
   );
 };
 
+export default StockItem;
+
 const ItemContainer = styled.div`
   display: flex;
   justify-content: space-between;
@@ -181,4 +183,4 @@ const ThickDivider = styled.div`
   background-color: #aaa; 
   margin: 8px 0; 
 `;
-export default StockItem;
+
diff --git a/client/src/components/watchlist/WatchList.tsx b/client/src/components/watchlist/WatchList.tsx
@@ -35,6 +35,11 @@ const WatchList: React.FC<WatchListProps> = ({ currentListType, onChangeListType
       // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedCompanyId]);
 
+  //
+  useEffect(() => {
+    localStorage.setItem('searchedCompanyIds', JSON.stringify(searchedCompanyIds));
+  }, [searchedCompanyIds]);
+
   return (
     <WatchListContainer>
       <Header