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

[FE] 왼쪽 컴포넌트에서 주식 클릭 시 companyId 변경Dev client#19/watch list

Author: sirloinbh

client/src/asset/icon/delete_icon.png

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

client/src/asset/icon/star_filled_icon.png

@@ -1,6 +1,16 @@
 import React, { useState } from "react";
 import styled from "styled-components";
+
+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 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 +57,32 @@ 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 dispatch = useDispatch();
+
+  const handleItemClick = () => {
+    dispatch(changeCompanyId(company.companyId));
+  };
 
   // 🔴 회계 단위 추가
   const price = parseInt(company.stockPrice).toLocaleString();
@@ -55,11 +91,20 @@ const StockItem: React.FC<StockItemProps> = ({ company }) => {
 
   return (
     <StockItemWrapper
-      onMouseEnter={() => setShowChangePrice(true)} // StockItemWrapper에 이벤트 리스너 적용
-      onMouseLeave={() => setShowChangePrice(false)}
+      onClick={handleItemClick} // 👈 클릭 이벤트 핸들러 추가
+      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>
@@ -112,19 +157,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%;
@@ -172,4 +237,6 @@ const StockChange = styled.span<{ change: string }>`
   font-size: 13px;
 `;
 
+
+
 export default StockItem;

client/src/asset/icon/star_icon.png

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