[Feat]관심종목 재구현

useGetstars, usePosrstars, useDeletestars 훅을 생성.
전체종목과 보유종목에서 종목에 마우스 호버 시 별표 아이콘 보임
별표 아이콘을 누르면 post요청 또는 delete요청
관심종목에서는 get요청을 보내서 데이터를 받아옴
관심종목에서 종목에 마우스 호버 시 삭제 아이콘 보임
삭제 아이콘을 누르면 delete요청
서버와 데이터 통신 문제가 발생하여 미완성
Isseus #19

client/src/components/EntireList/Header.tsx

@@ -76,6 +76,7 @@ const HeaderText = styled.span`
 `;
 
 const SlideMenu = styled.div`
+  z-index:30;
   position: absolute;
   top: 100%;
   left: 0;

client/src/components/EntireList/StockItem.tsx

@@ -1,6 +1,12 @@
 import React, { useState } from "react";
 import styled from "styled-components";
 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 usePostStar from "../../hooks/stars/usePoststars";
+import useDeleteStar from "../../hooks/stars/useDeletestars";
+import useGetStar from "../../hooks/stars/useGetstars";
 
 import kia from '../../asset/logos/기아.svg';
 import dy from '../../asset/logos/디와이.jpeg';
@@ -47,6 +53,28 @@ const StockItem: React.FC<StockItemProps> = ({ company }) => {
   // const priceColor2 = isPositiveChange ? "#f87369" : "#5a99f8";
 
   const [showChangePrice, setShowChangePrice] = useState(false); // 상태를 여기로 이동
+  const [isHovering, setIsHovering] = useState(false); // 마우스 호버 상태
+  const { data: starredData } = useGetStar();
+  const starredCompanyIds = starredData?.map(item => item.companyResponseDto.companyId) || [];
+
+  // 해당 companyId가 이미 존재하는지 확인하고, isFavorited의 초기값을 설정합니다.
+  const [isFavorited, setIsFavorited] = useState(starredCompanyIds.includes(company.companyId));
+
+  // usePostStar 및 useDeleteStar 훅 사용
+  const postMutation = usePostStar();
+  const deleteMutation = useDeleteStar();
+
+  const toggleFavorite = () => {
+    // 현재 isFavorited 상태에 따라 요청을 결정합니다.
+    if (isFavorited) {
+      deleteMutation.mutate(company.companyId);
+    } else {
+      postMutation.mutate(company.companyId);
+    }
+    setIsFavorited(!isFavorited);
+  };
+
+
 
   // 🔴 회계 단위 추가
   const price = parseInt(company.stockPrice).toLocaleString();
@@ -55,11 +83,19 @@ const StockItem: React.FC<StockItemProps> = ({ company }) => {
 
   return (
     <StockItemWrapper
-      onMouseEnter={() => setShowChangePrice(true)} // StockItemWrapper에 이벤트 리스너 적용
-      onMouseLeave={() => setShowChangePrice(false)}
+      onMouseEnter={() => {
+        setShowChangePrice(true);
+        setIsHovering(true);
+      }}
+      onMouseLeave={() => {
+        setShowChangePrice(false);
+        setIsHovering(false);
+      }}
     >
       <LogoContainer>
-        <Logo src={companyLogo} alt="stock logo" />
+        <Logo src={companyLogo} alt="stock logo" opacity={isHovering ? 0 : 1} />
+        <FavoriteStar onClick={toggleFavorite} opacity={isHovering && !isFavorited ? 1 : 0} />
+        <FavoriteStarFilled onClick={toggleFavorite} opacity={isHovering && isFavorited ? 1 : 0} />
       </LogoContainer>
       <StockInfo>
         <StockName>{company.korName}</StockName>
@@ -107,19 +143,39 @@ const StockItemWrapper = styled.div`
 // 🔴 로고 컨테이너 + 로고 크기
 const LogoContainer = styled.div`
   height: 100%;
+  width: 48px; // 아이콘의 너비와 margin-left, margin-right의 합계를 기준으로 설정
   display: flex;
   justify-content: center;
   align-items: center;
+  position: relative;
 `;
 
-const Logo = styled.img`
+const Logo = styled.img<{ opacity: number }>`
   border-radius: 50%;
   width: 28px;
   height: 28px;
   margin-left: 10px;
   margin-right: 10px;
+  position: absolute;
+  opacity: ${(props) => props.opacity};
+`;
+
+const FavoriteStar = styled.div<{ opacity: number }>`
+  position: absolute;
+  width: 28px;
+  height: 28px;
+  background: url(${star_icon}) no-repeat center;
+  background-size: contain;
+  cursor: pointer;
+  opacity: ${(props) => props.opacity};
+`;
+
+const FavoriteStarFilled = styled(FavoriteStar)<{ opacity: number }>`
+  background: url(${star_filled_icon}) no-repeat center;
+  background-size: contain; // 👈 이 부분도 추가
 `;
 
+
 // 🔴 font 사이즈
 const StockInfo = styled.div`
   height: 100%;
@@ -167,4 +223,6 @@ const StockChange = styled.span<{ change: string }>`
   font-size: 13px;
 `;
 
+
+
 export default StockItem;

client/src/components/HoldingList/Header.tsx

@@ -73,6 +73,7 @@ const HeaderText = styled.span`
 `;
 
 const SlideMenu = styled.div`
+  z-index:30;
   position: absolute;
   top: 100%;
   left: 0;

client/src/components/HoldingList/StockItem.tsx

@@ -2,6 +2,13 @@ import React, { useState } from "react";
 import styled from "styled-components";
 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 usePostStar from "../../hooks/stars/usePoststars";
+import useDeleteStar from "../../hooks/stars/useDeletestars";
+import useGetStar from "../../hooks/stars/useGetstars";
+
 import kia from '../../asset/logos/기아.svg';
 import dy from '../../asset/logos/디와이.jpeg';
 import logosamsung from '../../asset/logos/삼성전자.svg';
@@ -55,7 +62,7 @@ const StockItem: React.FC<StockItemProps> = ({ companyData, stockData }) => {
   const formattedPercentage = parseFloat(percentage.toFixed(2));
 
     // 이미 import된 로고들을 바탕으로 logos 객체 생성
-    const logos: { [key: string]: string } = {
+  const logos: { [key: string]: string } = {
       '삼성전자': logosamsung,
       'POSCO홀딩스': posco,
       '셀트리온': celltrion,
@@ -71,19 +78,47 @@ const StockItem: React.FC<StockItemProps> = ({ companyData, stockData }) => {
       'LG전자': LGelec,
       '기아': kia,
       };
-       // 그리고 나서, 이 `logos` 객체를 사용하여 기업명에 따라 적절한 로고를 선택할 수 있습니다.
-       const companyLogo = company ? logos[company.korName] || logo : logo; // 기본 로고를 대체로 사용
+  // 그리고 나서, 이 `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) || [];
 
+  // 해당 companyId가 이미 존재하는지 확인하고, isFavorited의 초기값을 설정합니다.
+  const [isFavorited, setIsFavorited] = useState(starredCompanyIds.includes(stockData.companyId));
+
+  // usePostStar 및 useDeleteStar 훅 사용
+  const postMutation = usePostStar();
+  const deleteMutation = useDeleteStar();
+
+  const toggleFavorite = () => {
+    // 현재 isFavorited 상태에 따라 요청을 결정합니다.
+    if (isFavorited) {
+      deleteMutation.mutate(stockData.companyId);
+    } else {
+      postMutation.mutate(stockData.companyId);
+    }
+    setIsFavorited(!isFavorited);
+  };
 
   return (
     <>
       <ItemContainer
-        onMouseEnter={() => setShowChangePrice(true)} // Mouse event handlers
-        onMouseLeave={() => setShowChangePrice(false)}
+        onMouseEnter={() => {
+          setShowChangePrice(true);
+          setIsHovering(true);
+        }}
+        onMouseLeave={() => {
+          setShowChangePrice(false);
+          setIsHovering(false);
+        }}
       >
         <LogoContainer>
-          <Logo src={companyLogo} alt="stock logo" />
+          <Logo src={companyLogo} alt="stock logo" opacity={isHovering ? 0 : 1} />
+          <FavoriteStar onClick={toggleFavorite} opacity={isHovering && !isFavorited ? 1 : 0} />
+          <FavoriteStarFilled onClick={toggleFavorite} opacity={isHovering && isFavorited ? 1 : 0} />
         </LogoContainer>
         <StockInfo>
           <StockName>{korName}</StockName>
@@ -141,14 +176,35 @@ const LogoContainer = styled.div`
   /* padding-right: 5px/; */
 `;
 
-const Logo = styled.img`
+const Logo = styled.img<{ opacity: number }>`
   border-radius: 50%;
   width: 28px;
   height: 28px;
-  /* margin-left: 10px; */
-  /* margin-right: 5px; */
+  position: absolute;
+  opacity: ${(props) => props.opacity};
 `;
 
+const FavoriteStar = styled.div<{ opacity: number }>`
+  position: absolute;
+  width: 28px;
+  height: 28px;
+  background: url(${star_icon}) no-repeat center;
+  background-size: contain;
+  cursor: pointer;
+  opacity: ${(props) => props.opacity};
+`;
+
+const FavoriteStarFilled = styled(FavoriteStar)<{ opacity: number }>`
+  background: url(${star_filled_icon}) no-repeat center;
+  background-size: contain;
+`;
+
+
+
+
+
+
+
 const StockInfo = styled.div`
   flex: 5 0 0;
   height: 100%;
@@ -252,19 +308,7 @@ const DetailData = styled.span`
   font-size: 14px; // Setting standardized font size for all data
 `;
 
-// const getColorByValue = (value: string) => {
-//   if (value.startsWith("")) return "#ed2926";
-//   if (value.startsWith("-")) return "#2679ed";
-//   return "black";
-// };
-
 const ColoredDetailData = styled.span<{ priceChangeAmount: number }>`
   color: ${(props) => (props.priceChangeAmount > 0 ? "#e22926" : "#2679ed")};
   font-size: 14px; 
 `;
-
-// const ThickDivider = styled.div`
-//   height: 3px;
-//   background-color: #aaa;
-//   margin: 8px 0;
-// `;

client/src/components/watchlist/Header.tsx

@@ -70,6 +70,7 @@ const HeaderText = styled.span`
   font-size: 18px;
 `;
 const SlideMenu = styled.div`
+  z-index:30;
   position: absolute;
   top: 100%;
   left: 0;