[Fix] 종목 즐겨찾기 버튼 눌렀을 때 차트 변경되지 않도록 수정

- 종목 즐겨찾기 추가/제거 버튼 눌렀을 때 종목관련 차트 및 상세내역 변경되지 않도록 수정 (즐겨찾기 여부만 변경되도록 수정) Issues #122
codestates-seb · Sep 23, 2023 · f4d5e8b · f4d5e8b
1 parent b7f1062
commit f4d5e8b
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 91 deletions.
diff --git a/client/src/components/EntireList/StockItem.tsx b/client/src/components/EntireList/StockItem.tsx
@@ -1,12 +1,12 @@
 import React, { useState } from "react";
 import styled from "styled-components";
 
-import { useDispatch } from 'react-redux'; 
+import { useDispatch } from "react-redux";
 import { changeCompanyId } from "../../reducer/CompanyId-Reducer";
 
 import logo from "../../asset/images/StockHolmImage.png";
-import star_icon from "../../asset/icon/star_icon.png"
-import star_filled_icon from "../../asset/icon/star_filled_icon.png"
+import star_icon from "../../asset/icon/star_icon.png";
+import star_filled_icon from "../../asset/icon/star_filled_icon.png";
 
 import usePostStar from "../../hooks/stars/usePoststars";
 import useDeleteStar from "../../hooks/stars/useDeletestars";
@@ -59,7 +59,7 @@ const StockItem: React.FC<StockItemProps> = ({ company }) => {
   const [showChangePrice, setShowChangePrice] = useState(false); // 상태를 여기로 이동
   const [isHovering, setIsHovering] = useState(false); // 마우스 호버 상태
   const { data: starredData } = useGetStar();
-  const starredCompanyIds = starredData?.map(item => item.companyResponseDto.companyId) || [];
+  const starredCompanyIds = starredData?.map((item) => item.companyResponseDto.companyId) || [];
 
   // 해당 companyId가 이미 존재하는지 확인하고, isFavorited의 초기값을 설정합니다.
   const [isFavorited, setIsFavorited] = useState(starredCompanyIds.includes(company.companyId));
@@ -68,8 +68,9 @@ const StockItem: React.FC<StockItemProps> = ({ company }) => {
   const postMutation = usePostStar();
   const deleteMutation = useDeleteStar();
 
-  const toggleFavorite = () => {
-    // 현재 isFavorited 상태에 따라 요청을 결정합니다.
+  const toggleFavorite: React.MouseEventHandler<HTMLDivElement> = (e) => {
+    e.stopPropagation();
+
     if (isFavorited) {
       deleteMutation.mutate(company.companyId);
     } else {
@@ -189,7 +190,6 @@ const FavoriteStarFilled = styled(FavoriteStar)<{ opacity: number }>`
   background-size: contain; // 👈 이 부분도 추가
 `;
 
-
 // 🔴 font 사이즈
 const StockInfo = styled.div`
   height: 100%;
@@ -237,6 +237,4 @@ const StockChange = styled.span<{ change: string }>`
   font-size: 13px;
 `;
 
-
-
 export default StockItem;
diff --git a/client/src/components/HoldingList/StockItem.tsx b/client/src/components/HoldingList/StockItem.tsx
@@ -1,11 +1,11 @@
 import React, { useState } from "react";
 import styled from "styled-components";
 import logo from "../../asset/images/StockHolmImage.png";
-import { useDispatch } from 'react-redux';
+import { useDispatch } from "react-redux";
 import { changeCompanyId } from "../../reducer/CompanyId-Reducer";
 
-import star_icon from "../../asset/icon/star_icon.png"
-import star_filled_icon from "../../asset/icon/star_filled_icon.png"
+import star_icon from "../../asset/icon/star_icon.png";
+import star_filled_icon from "../../asset/icon/star_filled_icon.png";
 
 import usePostStar from "../../hooks/stars/usePoststars";
 import useDeleteStar from "../../hooks/stars/useDeletestars";
@@ -62,30 +62,30 @@ const StockItem: React.FC<StockItemProps> = ({ companyData, stockData }) => {
 
   // Format percentage to two decimal places
   const formattedPercentage = parseFloat(percentage.toFixed(2));
-    // 이미 import된 로고들을 바탕으로 logos 객체 생성
+  // 이미 import된 로고들을 바탕으로 logos 객체 생성
   const logos: { [key: string]: string } = {
-      '삼성전자': logosamsung,
-      'POSCO홀딩스': posco,
-      '셀트리온': celltrion,
-      '에코프로': ecopro,
-      '에코프로비엠': ecoproBM,
-      '디와이': dy,
-      '쿠쿠홀딩스': kuckoo,
-      '카카오뱅크': kakaoBank,
-      '한세엠케이': hanse,
-      'KG케미칼': KG,
-      'LG화학': LGchem,
-      '현대차': hyundai,
-      'LG전자': LGelec,
-      '기아': kia,
-      };
+    삼성전자: logosamsung,
+    POSCO홀딩스: posco,
+    셀트리온: celltrion,
+    에코프로: ecopro,
+    에코프로비엠: ecoproBM,
+    디와이: dy,
+    쿠쿠홀딩스: kuckoo,
+    카카오뱅크: kakaoBank,
+    한세엠케이: hanse,
+    KG케미칼: KG,
+    LG화학: LGchem,
+    현대차: hyundai,
+    LG전자: LGelec,
+    기아: kia,
+  };
   // 그리고 나서, 이 `logos` 객체를 사용하여 기업명에 따라 적절한 로고를 선택할 수 있습니다.
   const companyLogo = company ? logos[company.korName] || logo : logo; // 기본 로고를 대체로 사용
 
   const [isHovering, setIsHovering] = useState(false); // 마우스 호버 상태
-    
+
   const { data: starredData } = useGetStar();
-  const starredCompanyIds = starredData?.map(item => item.companyResponseDto.companyId) || [];
+  const starredCompanyIds = starredData?.map((item) => item.companyResponseDto.companyId) || [];
 
   // 해당 companyId가 이미 존재하는지 확인하고, isFavorited의 초기값을 설정합니다.
   const [isFavorited, setIsFavorited] = useState(starredCompanyIds.includes(stockData.companyId));
@@ -100,10 +100,9 @@ const StockItem: React.FC<StockItemProps> = ({ companyData, stockData }) => {
     dispatch(changeCompanyId(stockData.companyId));
   };
 
-
+  const toggleFavorite: React.MouseEventHandler<HTMLDivElement> = (e) => {
+    e.stopPropagation();
 
-  const toggleFavorite = () => {
-    // 현재 isFavorited 상태에 따라 요청을 결정합니다.
     if (isFavorited) {
       deleteMutation.mutate(stockData.companyId);
     } else {
@@ -141,7 +140,7 @@ const StockItem: React.FC<StockItemProps> = ({ companyData, stockData }) => {
           </StockChange>
         </StockPriceSection>
       </ItemContainer>
-      <StockDetails>
+      <StockDetails onClick={handleItemClick}>
         <DetailSection01>
           <DetailTitle>수익</DetailTitle>
           <DetailTitle>보유</DetailTitle>
@@ -207,11 +206,13 @@ const FavoriteStar = styled.div<{ opacity: number }>`
   background-size: contain;
   cursor: pointer;
   opacity: ${(props) => props.opacity};
+  /* z-index: 100; */
 `;
 
 const FavoriteStarFilled = styled(FavoriteStar)<{ opacity: number }>`
   background: url(${star_filled_icon}) no-repeat center;
   background-size: contain;
+  /* z-index: 100; */
 `;
 
 const StockInfo = styled.div`

diff --git a/client/src/components/watchlist/StockItem.tsx b/client/src/components/watchlist/StockItem.tsx
@@ -1,29 +1,28 @@
-import React,{ useState } from 'react';
-import styled from 'styled-components';
-import logo from '../../asset/images/StockHolmImage.png';
-import deleteIcon from '../../asset/icon/delete_icon.png';
-import useDeleteStar from '../../hooks/stars/useDeletestars';
-import { useDispatch } from 'react-redux';
+import React, { useState } from "react";
+import styled from "styled-components";
+import logo from "../../asset/images/StockHolmImage.png";
+import deleteIcon from "../../asset/icon/delete_icon.png";
+import useDeleteStar from "../../hooks/stars/useDeletestars";
+import { useDispatch } from "react-redux";
 import { changeCompanyId } from "../../reducer/CompanyId-Reducer";
 
-import kia from '../../asset/logos/기아.svg';
-import dy from '../../asset/logos/디와이.jpeg';
-import logosamsung from '../../asset/logos/삼성전자.svg';
-import celltrion from '../../asset/logos/셀트리온.svg';
-import ecopro from '../../asset/logos/에코프로.jpeg';
-import ecoproBM from '../../asset/logos/에코프로비엠.svg';
-import kakaoBank from '../../asset/logos/카카오뱅크.svg';
-import kuckoo from '../../asset/logos/쿠쿠홀딩스.jpeg';
-import hanse from '../../asset/logos/한세엠케이.jpeg';
-import hyundai from '../../asset/logos/현대차.svg';
-import KG from '../../asset/logos/KG케미칼.png';
-import LGelec from '../../asset/logos/LG전자.svg';
-import LGchem from '../../asset/logos/LG화학.svg';
-import posco from '../../asset/logos/POSCO홀딩스.svg';
-
-
-const StockItem: React.FC<StockItemProps> = ({ company, onDelete  }) => {
-  const [showChangePrice, setShowChangePrice] = useState(false);  
+import kia from "../../asset/logos/기아.svg";
+import dy from "../../asset/logos/디와이.jpeg";
+import logosamsung from "../../asset/logos/삼성전자.svg";
+import celltrion from "../../asset/logos/셀트리온.svg";
+import ecopro from "../../asset/logos/에코프로.jpeg";
+import ecoproBM from "../../asset/logos/에코프로비엠.svg";
+import kakaoBank from "../../asset/logos/카카오뱅크.svg";
+import kuckoo from "../../asset/logos/쿠쿠홀딩스.jpeg";
+import hanse from "../../asset/logos/한세엠케이.jpeg";
+import hyundai from "../../asset/logos/현대차.svg";
+import KG from "../../asset/logos/KG케미칼.png";
+import LGelec from "../../asset/logos/LG전자.svg";
+import LGchem from "../../asset/logos/LG화학.svg";
+import posco from "../../asset/logos/POSCO홀딩스.svg";
+
+const StockItem: React.FC<StockItemProps> = ({ company, onDelete }) => {
+  const [showChangePrice, setShowChangePrice] = useState(false);
   const isPositiveChange = parseFloat(company.stockChangeRate) > 0;
   // 🔴 색깔 통일 (그냥 깔끔하게)
   const priceColor1 = isPositiveChange ? "#e22926" : "#2679ed";
@@ -34,55 +33,60 @@ const StockItem: React.FC<StockItemProps> = ({ company, onDelete  }) => {
   const [isHovered, setIsHovered] = useState(false); // 마우스 호버 상태
   const deleteMutation = useDeleteStar();
 
-  const handleDelete = () => {
+  const handleDelete: React.MouseEventHandler<HTMLImageElement> = (e) => {
+    e.stopPropagation();
     deleteMutation.mutate(company.companyId, {
       onSuccess: () => {
-        onDelete(company.companyId);  // 콜백 함수 호출
-
-      }
+        onDelete(company.companyId); // 콜백 함수 호출
+      },
     });
   };
 
-
   const dispatch = useDispatch();
 
   const handleItemClick = () => {
     dispatch(changeCompanyId(company.companyId));
   };
 
-    // 🔴 회계 단위 추가
-    const price = parseInt(company.stockPrice).toLocaleString();
-    const changeAmout = parseInt(company.stockChangeAmount).toLocaleString();
-    const priceUnit = "원";
+  // 🔴 회계 단위 추가
+  const price = parseInt(company.stockPrice).toLocaleString();
+  const changeAmout = parseInt(company.stockChangeAmount).toLocaleString();
+  const priceUnit = "원";
 
   // 이미 import된 로고들을 바탕으로 logos 객체 생성
   const logos: { [key: string]: string } = {
-  '삼성전자': logosamsung,
-  'POSCO홀딩스': posco,
-  '셀트리온': celltrion,
-  '에코프로': ecopro,
-  '에코프로비엠': ecoproBM,
-  '디와이': dy,
-  '쿠쿠홀딩스': kuckoo,
-  '카카오뱅크': kakaoBank,
-  '한세엠케이': hanse,
-  'KG케미칼': KG,
-  'LG화학': LGchem,
-  '현대차': hyundai,
-  'LG전자': LGelec,
-  '기아': kia,
+    삼성전자: logosamsung,
+    POSCO홀딩스: posco,
+    셀트리온: celltrion,
+    에코프로: ecopro,
+    에코프로비엠: ecoproBM,
+    디와이: dy,
+    쿠쿠홀딩스: kuckoo,
+    카카오뱅크: kakaoBank,
+    한세엠케이: hanse,
+    KG케미칼: KG,
+    LG화학: LGchem,
+    현대차: hyundai,
+    LG전자: LGelec,
+    기아: kia,
   };
-   // 그리고 나서, 이 `logos` 객체를 사용하여 기업명에 따라 적절한 로고를 선택할 수 있습니다.
+  // 그리고 나서, 이 `logos` 객체를 사용하여 기업명에 따라 적절한 로고를 선택할 수 있습니다.
   const companyLogo = logos[company.korName] || logo; // 기본 로고를 대체로 사용
 
   return (
-    <StockItemWrapper 
+    <StockItemWrapper
       onClick={handleItemClick}
-      onMouseEnter={() => { setShowChangePrice(true); setIsHovered(true); }}
-      onMouseLeave={() => { setShowChangePrice(false); setIsHovered(false); }}
+      onMouseEnter={() => {
+        setShowChangePrice(true);
+        setIsHovered(true);
+      }}
+      onMouseLeave={() => {
+        setShowChangePrice(false);
+        setIsHovered(false);
+      }}
     >
       <LogoContainer>
-        <Logo src={companyLogo} alt="stock logo" isHovered={isHovered}/>
+        <Logo src={companyLogo} alt="stock logo" isHovered={isHovered} />
         <DeleteIcon src={deleteIcon} alt="delete icon" isHovered={isHovered} onClick={handleDelete} />
       </LogoContainer>
       <StockInfo>
@@ -100,7 +104,6 @@ const StockItem: React.FC<StockItemProps> = ({ company, onDelete  }) => {
 };
 export default StockItem;
 
-
 type NewCompanyData = {
   companyId: number;
   code: string;
@@ -145,7 +148,7 @@ const Logo = styled.img<{ isHovered: boolean }>`
   margin-left: 10px;
   margin-right: 10px;
   position: absolute;
-  opacity: ${props => props.isHovered ? 0 : 1};
+  opacity: ${(props) => (props.isHovered ? 0 : 1)};
 `;
 
 const DeleteIcon = styled.img<{ isHovered: boolean }>`
@@ -156,7 +159,7 @@ const DeleteIcon = styled.img<{ isHovered: boolean }>`
   margin-right: 10px;
   position: absolute;
   cursor: pointer;
-  opacity: ${props => props.isHovered ? 1 : 0};
+  opacity: ${(props) => (props.isHovered ? 1 : 0)};
 `;
 
 const StockInfo = styled.div`
@@ -203,5 +206,3 @@ const StockChange = styled.span<{ change: string }>`
   cursor: pointer;
   font-size: 13px;
 `;
-
-