Merge pull request #114 from codestates-seb/dev-client#19/watchList

[FE] 보유종목 구현 Dev client#19/watch list

Author: sirloinbh

client/src/asset/images/StockHolmImage.png

@@ -10,7 +10,7 @@ import CompareChartBtn from "./CompareChartBtn";
 const UpperMenuBar = () => {
   const companyId = useSelector((state: StateProps) => state.companyId);
 
-  console.log(localStorage.getItem("authToken"));
+  console.log(localStorage.getItem("accessToken"));
 
   return (
     <Container>

client/src/components/CentralChartMenu/Index.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; /* 스크롤이 발생할 최대 높이를 지정하세요 */

client/src/components/EntireList/EntireList.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import logo from '../../asset/logos/SK_logo.png';
+import logo from '../../asset/images/StockHolmImage.png';
 
 const StockItem: React.FC<StockItemProps> = ({ company, setShowChangePrice, showChangePrice }) => {
   const isPositiveChange = parseFloat(company.stockChangeRate) > 0;

client/src/components/EntireList/StockItem.tsx

@@ -35,8 +35,8 @@ const LoginHeader: React.FC<LoginHeaderProps> = () => {
 
   const handleLogout = () => {
     dispatch(setLogoutState()); // 전역변수에서 로그아웃 상태로 설정
-    localStorage.removeItem("Authorization"); // 엑세스 토큰 제거
-    localStorage.removeItem("Refresh-token"); // 리프레시 토큰 제거
+    localStorage.removeItem("accessToken"); // 엑세스 토큰 제거
+    localStorage.removeItem("refreshToken"); // 리프레시 토큰 제거
 };
 
   return (

client/src/components/Headers/LoginHeader.tsx

@@ -46,6 +46,7 @@ const Icon = styled.img`
   height: 24px;
   cursor: pointer;
   margin-right: 10px;
+  margin-left:10px;
 `;
 
 const HeaderText = styled.span`

client/src/components/HoldingList/Header.tsx

@@ -2,17 +2,23 @@ import React, { useState } from 'react';
 import styled from 'styled-components';
 import Header from './Header';
 import StockItem from './StockItem';
+import useGetStockHolds from '../../hooks/useGetStockholds';
+import { StockItemProps } from './StockItem';
 import useCompanyData from '../../hooks/useCompanyData';
 
-const WatchList: React.FC<WatchListProps> = ({ currentListType, onChangeListType }) => {
+const HoldingList: React.FC<WatchListProps> = ({ currentListType, onChangeListType }) => {
   const [isMenuOpen, setMenuOpen] = useState(false);
   const [showChangePrice, setShowChangePrice] = useState(false);
 
-  // useCompanyData 훅 사용하여 데이터 가져오기
-  const { data: companies, isLoading, isError } = useCompanyData(1, 14);
+  const { stockHolds, stockHoldsLoading: isLoading, stockHoldsError: isError } = useGetStockHolds();
+  const { data: companyData, isLoading: isCompanyDataLoading, isError: isCompanyDataError } = useCompanyData(1, 14);
 
-  // 'companies'가 'undefined'인 경우를 처리하기 위해 빈 배열로 초기화
-  const companiesList = companies || [];
+  // 모든 stockReturn의 합을 계산합니다.
+  let totalEvaluationProfit = 0;
+
+  if (stockHolds) {
+    totalEvaluationProfit = stockHolds.reduce((sum:number, stockHold: StockItemProps['stockData']) => sum + stockHold.stockReturn, 0);
+  }
 
   return (
     <WatchListContainer>
@@ -23,74 +29,75 @@ const WatchList: React.FC<WatchListProps> = ({ currentListType, onChangeListType
         setMenuOpen={setMenuOpen}
       />
       <Divider1 />
-      <EvaluationProfit>평가 수익금: +5,000,000원</EvaluationProfit> {/* 임의의 평가 수익금 */}
+      <EvaluationProfit>평가 수익금: {totalEvaluationProfit.toLocaleString()}원</EvaluationProfit>
       <Divider2 />
       <StockList>
-        {isLoading ? (
+        {isLoading || isCompanyDataLoading ? (
           <div>Loading...</div>
-        ) : isError ? (
+        ) : isError || isCompanyDataError ? (
           <div>Error fetching data</div>
         ) : (
-          companiesList.map((company) => (
-            <StockItem
-              key={company.companyId}
-              company={company}
-              setShowChangePrice={setShowChangePrice}
-              showChangePrice={showChangePrice}
-            />
+          stockHolds.map((stockHold: StockItemProps['stockData']) => (
+            companyData ? (
+              <StockItem
+                key={stockHold.companyId}
+                stockData={stockHold}
+                companyData={companyData}
+                setShowChangePrice={setShowChangePrice}
+                showChangePrice={showChangePrice}
+              />
+            ) : null
           ))
         )}
       </StockList>
     </WatchListContainer>
   );
 };
 
-// Props와 상태에 대한 타입 정의
+export default HoldingList;
+
 type WatchListProps = {
   currentListType: '전체종목' | '관심종목' | '보유종목';
   onChangeListType: (type: '전체종목' | '관심종목' | '보유종목') => void;
+
 };
 
-// WatchList 컴포넌트에 대한 스타일드 컴포넌트 정의
 const WatchListContainer = styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
 `;
 
 const Divider1 = styled.div`
-margin:0px;
-padding:0px;
-width: 100%;
-height: 10px;
-display: flex;
-flex-direction: row;
-border-bottom: 1px solid #2f4f4f;
+  margin: 0px;
+  padding: 0px;
+  width: 100%;
+  height: 10px;
+  display: flex;
+  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;
-padding:0px;
-width: 100%;
-height: 4.5px;
-display: flex;
-flex-direction: row;
-border-bottom: 1px solid #2f4f4f;
+  margin: 0px;
+  padding: 0px;
+  width: 100%;
+  height: 4.5px;
+  display: flex;
+  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: 90%;
-  max-height: 800px; /* 스크롤이 발생할 최대 높이를 지정하세요 */
-  overflow-y: auto; /* 세로 스크롤을 활성화합니다 */
+  max-height: 800px;
+  overflow-y: auto;
 `;
-
-export default WatchList;