[Feat] 비교차트 기능 및 UI 구현 완료

- 종목간 차트비교 기능 및 UI 구현 완료 Issues #14
codestates-seb · Sep 18, 2023 · 8e25c69 · 8e25c69
1 parent c4e8332
commit 8e25c69
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 163 deletions.
diff --git a/client/src/components/CentralChart/CompareChartBtn.tsx b/client/src/components/CentralChart/CompareChartBtn.tsx
@@ -5,28 +5,30 @@ import useCompanyData from "../../hooks/useCompanyData";
 import CompareList from "./CompareList";
 import IconImg from "../../asset/CentralSectionMenu-compareChart.png";
 
-const buttonText: string = "비교차트";
+const buttonText: string = "비교종목";
 
 const CompareChartBtn = () => {
   const { data: companyList } = useCompanyData(1, 14);
   const [compare, setCompare] = useState(false);
 
-  const handleCompareChart = () => {
-    setCompare(!compare);
+  const handleOnCompareList = () => {
+    setCompare(true);
   };
 
-  // console.log(companyList);
+  const handleOffCompareList = () => {
+    setCompare(false);
+  };
 
   return (
     <Container>
       <div className="compareButtonContainer">
         <Icon src={IconImg} />
-        <div className="compareButton" onClick={handleCompareChart}>
+        <div className="compareButton" onMouseOver={handleOnCompareList}>
           {buttonText}
         </div>
       </div>
       {compare && (
-        <CompareContainer>
+        <CompareContainer onMouseOver={handleOnCompareList} onMouseLeave={handleOffCompareList}>
           <StockList>
             {companyList?.map((company) => {
               const corpName = company.korName;
@@ -79,20 +81,31 @@ const Icon = styled.img`
 `;
 
 const CompareContainer = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
+  position: relative;
   z-index: 1;
-  background-color: rgba(0, 0, 0, 0.5);
 `;
 
 const StockList = styled.div`
   position: absolute;
-  width: 100px;
-  height: 300px;
-  z-index: 2;
+  right: 0;
+  top: 24px;
 
-  background-color: white;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 147%;
+
+  width: 92px;
+  height: 260px;
+  padding: 5px;
+  border-radius: 0.4rem;
+  z-index: 2;
+  border: none;
+  color: #b7b5b5;
+  background-color: #bfdaf6e8;
+  opacity: 0.65;
 `;
diff --git a/client/src/components/CentralChart/CompareList.tsx b/client/src/components/CentralChart/CompareList.tsx
@@ -6,19 +6,13 @@ import { styled } from "styled-components";
 const CompareList = (props: OwnProps) => {
   const { corpName, compareCompanyId } = props;
 
-  //🔴 확인 직업
-  // const compareInfo = useSelector((state: StateProps) => state.compareChart);
-  // console.log(compareInfo);
-  //
-
   const dispatch = useDispatch();
   const currentCompanyid = useSelector((state: StateProps) => state.companyId);
 
   const handleSelectCompareStock = () => {
     if (currentCompanyid === compareCompanyId) {
       return;
     }
-
     dispatch(setCompareStock(compareCompanyId));
   };
 
@@ -31,4 +25,10 @@ interface OwnProps {
   compareCompanyId: number;
 }
 
-const Contianer = styled.div``;
+const Contianer = styled.div`
+  &:hover {
+    color: black;
+    transition: color 0.3s ease;
+    cursor: pointer;
+  }
+`;
diff --git a/client/src/components/CentralChartMenu/StockOverview.tsx b/client/src/components/CentralChartMenu/StockOverview.tsx
@@ -5,20 +5,20 @@ import { StateProps } from "../../models/stateProps";
 
 // dummyData
 import dummyLogo from "../../asset/CentralSectionMenu-dummyImg.png";
-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';
+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 marketType: string = "코스피";
 const volumeText: string = "거래량";
@@ -33,26 +33,26 @@ const StockOverview = () => {
 
   // 이미 import된 로고들을 바탕으로 logos 객체 생성
   const logos: LogoPaths = {
-      '삼성전자': logosamsung,
-      'POSCO홀딩스': posco,
-      '셀트리온': celltrion,
-      '에코프로': ecopro,
-      '에코프로비엠': ecoproBM,
-      '디와이': dy,
-      '쿠쿠홀딩스': kuckoo,
-      '카카오뱅크': kakaoBank,
-      '한세엠케이': hanse,
-      'KG케미칼': KG,
-      'LG화학': LGchem,
-      '현대차': hyundai,
-      'LG전자': LGelec,
-      '기아': kia,
-      };
-      // 그리고 나서, 이 `logos` 객체를 사용하여 기업명에 따라 적절한 로고를 선택할 수 있습니다.
-      const companyLogo = corpName ? logos[corpName] || dummyLogo : dummyLogo; 
-      if (!corpName) {
-        return null; // 혹은 다른 적절한 렌더링을 반환
-    }
+    삼성전자: logosamsung,
+    POSCO홀딩스: posco,
+    셀트리온: celltrion,
+    에코프로: ecopro,
+    에코프로비엠: ecoproBM,
+    디와이: dy,
+    쿠쿠홀딩스: kuckoo,
+    카카오뱅크: kakaoBank,
+    한세엠케이: hanse,
+    KG케미칼: KG,
+    LG화학: LGchem,
+    현대차: hyundai,
+    LG전자: LGelec,
+    기아: kia,
+  };
+  // 그리고 나서, 이 `logos` 객체를 사용하여 기업명에 따라 적절한 로고를 선택할 수 있습니다.
+  const companyLogo = corpName ? logos[corpName] || dummyLogo : dummyLogo;
+  if (!corpName) {
+    return null; // 혹은 다른 적절한 렌더링을 반환
+  }
 
   if (stockInfoLoading) {
     return <p>로딩 중 입니다</p>;
@@ -62,7 +62,6 @@ const StockOverview = () => {
     return <p>에러 발생</p>;
   }
 
-
   const stockCode = stockInfo.code;
   const stockPrice = parseInt(stockInfo.stockInfResponseDto.stck_prpr, 10).toLocaleString();
   const priceChageRate = parseFloat(stockInfo.stockInfResponseDto.prdy_ctrt);
@@ -77,7 +76,7 @@ const StockOverview = () => {
 
   return (
     <Container priceChangeRate={priceChageRate}>
-      <img className="CorpLogo" src={companyLogo} alt="stock logo"/>
+      <img className="CorpLogo" src={companyLogo} alt="stock logo" />
       <div className="CorpName">{corpName}</div>
       <div className="StockCode">
         {stockCode} <span>{marketType}</span>