[Feat][Design]왼쪽 섹션 헤더 변경

전체종목을 보여줄 때는 현금 보유량을 표기 관심종목을 보여줄 때는 검색창을 표기 보유종복을 보여줄 때는 평가 수익금을 표기 메뉴아이콘 및 표기되는 사항들 정렬 Issues #19
codestates-seb · Sep 15, 2023 · 76dd351 · 76dd351
1 parent 50f1a2d
commit 76dd351
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 18 deletions.
diff --git a/client/src/components/EntireList/EntireList.tsx b/client/src/components/EntireList/EntireList.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import Header from './Header';
 import StockItem from './StockItem';
 import useCompanyData from '../../hooks/useCompanyData';
+import { useGetCash } from '../../hooks/useCash'; // 훅 가져오기
 
 const EntireList: React.FC<EntireListProps> = ({ currentListType, onChangeListType }) => {
   const [isMenuOpen, setMenuOpen] = useState(false);
@@ -14,6 +15,11 @@ const EntireList: React.FC<EntireListProps> = ({ currentListType, onChangeListTy
   // 'companies'가 'undefined'인 경우를 처리하기 위해 빈 배열로 초기화
   const companiesList = companies || [];
 
+    // 현금 보유량 가져오기
+    const moneyId = localStorage.getItem('moneyId');
+    const { data: cashData } = useGetCash(moneyId);
+    const holdingsAmount = cashData?.data?.money || "0";
+
   return (
     <WatchListContainer>
       <Header
@@ -23,7 +29,7 @@ const EntireList: React.FC<EntireListProps> = ({ currentListType, onChangeListTy
         setMenuOpen={setMenuOpen}
       />
       <Divider1 />
-      <EvaluationProfit>평가 수익금: +5,000,000원</EvaluationProfit> {/* 임의의 평가 수익금 */}
+      <HoldingsAmount>현금 보유량: {holdingsAmount}원</HoldingsAmount> {/* 현금 보유량 표시 */}
       <Divider2 />
       <StockList>
         {isLoading ? (
@@ -68,6 +74,15 @@ flex-direction: row;
 border-bottom: 1px solid #2f4f4f;
 `;
 
+const HoldingsAmount = styled.div`
+  font-size: 16px;
+  font-weight: bold;
+  margin: 8px 12px ;
+  text-align: center;
+  color: darkslategray // 현금 보유량을 파란색으로 표시
+`;
+
+
 const Divider2 = styled.div`
 margin:0px;
 padding:0px;
@@ -78,15 +93,6 @@ flex-direction: row;
 border-bottom: 1px solid #2f4f4f;
 `;
 
-
-
-const EvaluationProfit = styled.div`
-font-size: 16px;
-font-weight: bold;
-margin: 8px 0;
-text-align: center;
-color: red; // 수익금이 플러스일 경우 초록색으로 표시
-`;
 const StockList = styled.div`
   width: 100%;
   max-height: 740px; /* 스크롤이 발생할 최대 높이를 지정하세요 */

diff --git a/client/src/components/HoldingList/Header.tsx b/client/src/components/HoldingList/Header.tsx
@@ -46,6 +46,7 @@ const Icon = styled.img`
   height: 24px;
   cursor: pointer;
   margin-right: 10px;
+  margin-left:10px;
 `;
 
 const HeaderText = styled.span`

diff --git a/client/src/components/HoldingList/HoldingList.tsx b/client/src/components/HoldingList/HoldingList.tsx
@@ -13,6 +13,10 @@ const HoldingList: React.FC<WatchListProps> = ({ currentListType, onChangeListTy
   const { stockHolds, stockHoldsLoading: isLoading, stockHoldsError: isError } = useGetStockHolds();
   const { data: companyData, isLoading: isCompanyDataLoading, isError: isCompanyDataError } = useCompanyData(1, 14);
 
+  // 모든 stockReturn의 합을 계산합니다.
+  const totalEvaluationProfit = stockHolds.reduce((sum: number, stockHold: StockItemProps['stockData']) => sum + stockHold.stockReturn, 0);
+
+
   return (
     <WatchListContainer>
       <Header
@@ -22,7 +26,7 @@ const HoldingList: React.FC<WatchListProps> = ({ currentListType, onChangeListTy
         setMenuOpen={setMenuOpen}
       />
       <Divider1 />
-      <EvaluationProfit>평가 수익금: +5,000,000원</EvaluationProfit>
+      <EvaluationProfit>평가 수익금: {totalEvaluationProfit.toLocaleString()}원</EvaluationProfit>
       <Divider2 />
       <StockList>
         {isLoading || isCompanyDataLoading ? (
@@ -52,6 +56,7 @@ export default HoldingList;
 type WatchListProps = {
   currentListType: '전체종목' | '관심종목' | '보유종목';
   onChangeListType: (type: '전체종목' | '관심종목' | '보유종목') => void;
+
 };
 
 const WatchListContainer = styled.div`
@@ -69,6 +74,13 @@ const Divider1 = styled.div`
   flex-direction: row;
   border-bottom: 1px solid #2f4f4f;
 `;
+const EvaluationProfit = styled.div`
+  font-size: 16px;
+  font-weight: bold;
+  margin: 8px 12px;
+  text-align: center;
+  color: red;
+`;
 
 const Divider2 = styled.div`
   margin: 0px;
@@ -80,13 +92,7 @@ const Divider2 = styled.div`
   border-bottom: 1px solid #2f4f4f;
 `;
 
-const EvaluationProfit = styled.div`
-  font-size: 16px;
-  font-weight: bold;
-  margin: 8px 0;
-  text-align: center;
-  color: red;
-`;
+
 const StockList = styled.div`
   width: 90%;
   max-height: 800px;

diff --git a/client/src/components/watchlist/Header.tsx b/client/src/components/watchlist/Header.tsx
@@ -46,6 +46,7 @@ const Icon = styled.img`
   height: 24px;
   cursor: pointer;
   margin-right: 10px;
+  margin-left:10px;
 `;
 
 const HeaderText = styled.span`

diff --git a/client/src/components/watchlist/StockSearchComponent.tsx b/client/src/components/watchlist/StockSearchComponent.tsx
@@ -69,6 +69,7 @@ const SearchContainer = styled.div`
   display: flex;
   align-items: center;
   flex-grow: 0.7;
+  margin: 1px 10px;
 `;
 
 const StyledSearchInput = styled.input.attrs({