[Design] UX 개선 위한 디자인 일부 수정

- UX 제고 위한 디자인 일부 수정 Issues #122
codestates-seb · Sep 19, 2023 · 7eeaf31 · 7eeaf31
1 parent ac803c5
commit 7eeaf31
Show file tree

Hide file tree

Showing 11 changed files with 191 additions and 150 deletions.
diff --git a/client/src/components/CentralChart/CompareChartBtn.tsx b/client/src/components/CentralChart/CompareChartBtn.tsx
@@ -23,7 +23,7 @@ const CompareChartBtn = () => {
     <Container>
       <div className="compareButtonContainer">
         <Icon src={IconImg} />
-        <div className="compareButton" onMouseOver={handleOnCompareList}>
+        <div className="compareButton" onMouseOver={handleOnCompareList} onMouseLeave={handleOffCompareList}>
           {buttonText}
         </div>
       </div>
@@ -88,7 +88,7 @@ const CompareContainer = styled.div`
 const StockList = styled.div`
   position: absolute;
   right: 0;
-  top: 24px;
+  top: 20px;
 
   display: flex;
   flex-direction: column;

diff --git a/client/src/components/CentralChartMenu/ExpandScreenBtn.tsx b/client/src/components/CentralChartMenu/ExpandScreenBtn.tsx
@@ -1,14 +1,38 @@
-import { useDispatch } from "react-redux";
+import { useState } from "react";
+import { useSelector, useDispatch } from "react-redux";
 import { styled } from "styled-components";
 import { changeLeftScreen, changeRightScreen } from "../../reducer/ExpandScreen-Reducer";
-
-const expandLeft: string = "<";
-const expandRight: string = ">";
+import { StateProps } from "../../models/stateProps";
 
 const ExpandScreenBtn = (props: OwnProps) => {
   const { direction } = props;
 
+  const expandState = useSelector((state: StateProps) => state.expandScreen);
+  const leftExpandState = expandState.left;
+  const rightExpandState = expandState.right;
+
+  const expandLeft: string = leftExpandState ? "축소" : "확장";
+  const expandRight: string = rightExpandState ? "축소" : "확장";
+
   const dispatch = useDispatch();
+  const [leftBtnHover, setLetfBtnHover] = useState(false);
+  const [rightBtnHover, setRightBtnHover] = useState(false);
+
+  const handleLeftBtnWide = () => {
+    setLetfBtnHover(true);
+  };
+
+  const handleLeftBtnNarrow = () => {
+    setLetfBtnHover(false);
+  };
+
+  const handleRightBtnWide = () => {
+    setRightBtnHover(true);
+  };
+
+  const handleRightBtnNarrow = () => {
+    setRightBtnHover(false);
+  };
 
   const handleChangeLeftScreen = () => {
     dispatch(changeLeftScreen());
@@ -20,16 +44,16 @@ const ExpandScreenBtn = (props: OwnProps) => {
 
   if (direction === "left") {
     return (
-      <Button direction="left" onClick={handleChangeLeftScreen}>
-        {expandLeft}
+      <Button direction="left" buttonHover={leftBtnHover} onClick={handleChangeLeftScreen} onMouseOver={handleLeftBtnWide} onMouseLeave={handleLeftBtnNarrow}>
+        <div className="text">{expandLeft}</div>
       </Button>
     );
   }
 
   if (direction === "right") {
     return (
-      <Button direction="right" onClick={handleChangeRightScreen}>
-        {expandRight}
+      <Button direction="right" buttonHover={rightBtnHover} onClick={handleChangeRightScreen} onMouseOver={handleRightBtnWide} onMouseLeave={handleRightBtnNarrow}>
+        <div className="text">{expandRight}</div>
       </Button>
     );
   }
@@ -40,17 +64,30 @@ export default ExpandScreenBtn;
 // type 정의
 interface OwnProps {
   direction: string;
+  buttonHover: boolean;
 }
 
 // component 생성
 const Button = styled.div<OwnProps>`
-  width: 43px;
+  width: ${(props) => (props.buttonHover ? "46px" : "8px")};
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
-  color: black;
-  font-size: 22px;
-  border-right: ${(props) => props.direction === "left" && "1px solid black"};
-  border-left: ${(props) => props.direction === "right" && "1px solid black"};
+  cursor: pointer;
+  font-weight: 500;
+  background-color: #dce9fc;
+  border-right: ${(props) => props.direction === "left" && props.buttonHover && "1px solid #4479c2"};
+  border-left: ${(props) => props.direction === "right" && props.buttonHover && "1px solid #4479c2"};
+
+  &:hover {
+    background-color: #a3c6fb;
+    transition: background-color 0.5s ease, width 0.5s ease;
+  }
+
+  .text {
+    font-size: ${(props) => (props.buttonHover ? "15px" : "1px")};
+    color: ${(props) => (props.buttonHover ? "black" : "#dce9fc")};
+    transition: color 1s ease, font-size 1s ease;
+  }
 `;
diff --git a/client/src/components/CentralChartMenu/StockOrderBtn.tsx b/client/src/components/CentralChartMenu/StockOrderBtn.tsx
@@ -56,4 +56,10 @@ const Button = styled.div<OwnProps>`
 
   padding-top: 2px;
   border-radius: 0.2rem;
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${(props) => (props.type === "buying" ? "#f7c2bd" : "#b1cdf7")};
+    transition: background-color 0.5s ease;
+  }
 `;
diff --git a/client/src/components/CentralChartMenu/StockOverview.tsx b/client/src/components/CentralChartMenu/StockOverview.tsx
@@ -169,7 +169,7 @@ const TransactionVolume = styled.div`
   white-space: nowrap;
   min-width: min-content;
   font-size: 14px;
-  color: #2f4f4f;
+  color: #4e4d4d;
 
   & span {
     color: #999999;

diff --git a/client/src/components/EntireList/StockItem.tsx b/client/src/components/EntireList/StockItem.tsx
@@ -2,42 +2,42 @@ import React, { useState } from "react";
 import styled from "styled-components";
 import logo from "../../asset/images/StockHolmImage.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 StockItem: React.FC<StockItemProps> = ({ company }) => {
   const isPositiveChange = parseFloat(company.stockChangeRate) > 0;
 
   // 이미 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; // 기본 로고를 대체로 사용
 
   // 🔴 색깔 통일 (그냥 깔끔하게)
@@ -101,6 +101,11 @@ const StockItemWrapper = styled.div`
   width: 100%;
   height: 57px;
   background-color: transparent;
+
+  &:hover {
+    background-color: #cee0ff;
+    transition: background-color 0.5s ease;
+  }
   cursor: pointer;
 `;
 

diff --git a/client/src/components/Headers/LoginHeader.tsx b/client/src/components/Headers/LoginHeader.tsx
@@ -151,8 +151,8 @@ const ProfileButton = styled.button`
   justify-content: center;
   align-items: center;
 
-  border-radius: 50%;
-  margin-right: 0.75rem;
+  border-radius: 0.25rem;
+  margin-right: 0.65rem;
   margin-top: 0.1rem;
 
   background-color: #274949;

diff --git a/client/src/components/HoldingList/StockItem.tsx b/client/src/components/HoldingList/StockItem.tsx
@@ -2,20 +2,20 @@ import React, { useState } from "react";
 import styled from "styled-components";
 import logo from "../../asset/images/StockHolmImage.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";
 
 export type StockItemProps = {
   stockData: {
@@ -54,30 +54,28 @@ const StockItem: React.FC<StockItemProps> = ({ companyData, stockData }) => {
   // Format percentage to two decimal places
   const formattedPercentage = parseFloat(percentage.toFixed(2));
 
-    // 이미 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,
-      };
-       // 그리고 나서, 이 `logos` 객체를 사용하여 기업명에 따라 적절한 로고를 선택할 수 있습니다.
-       const companyLogo = company ? logos[company.korName] || logo : logo; // 기본 로고를 대체로 사용
-
-
+  // 이미 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,
+  };
+  // 그리고 나서, 이 `logos` 객체를 사용하여 기업명에 따라 적절한 로고를 선택할 수 있습니다.
+  const companyLogo = company ? logos[company.korName] || logo : logo; // 기본 로고를 대체로 사용
 
   return (
-    <>
+    <EntireContainer>
       <ItemContainer
         onMouseEnter={() => setShowChangePrice(true)} // Mouse event handlers
         onMouseLeave={() => setShowChangePrice(false)}
@@ -102,25 +100,30 @@ const StockItem: React.FC<StockItemProps> = ({ companyData, stockData }) => {
           <DetailTitle>보유</DetailTitle>
         </DetailSection01>
         <DetailSection02>
-          <ColoredDetailData priceChangeAmount={priceChangeAmount}>
-            {stockReturn.toLocaleString()} 원
-          </ColoredDetailData>
+          <ColoredDetailData priceChangeAmount={priceChangeAmount}>{stockReturn.toLocaleString()} 원</ColoredDetailData>
           <DetailData>{totalPrice.toLocaleString()} 원</DetailData>
         </DetailSection02>
         <DetailSection03>
-          <ColoredDetailData priceChangeAmount={priceChangeAmount}>
-            {formattedPercentage}%
-          </ColoredDetailData>
+          <ColoredDetailData priceChangeAmount={priceChangeAmount}>{formattedPercentage}%</ColoredDetailData>
           <DetailTitle>{totalStocksHeld}주</DetailTitle>
         </DetailSection03>
       </StockDetails>
       {/* <ThickDivider /> */}
-    </>
+    </EntireContainer>
   );
 };
 
 export default StockItem;
 
+const EntireContainer = styled.div`
+  &:hover {
+    background-color: #d9e6ff;
+    transition: background-color 0.5s ease;
+
+    cursor: pointer;
+  }
+`;
+
 const ItemContainer = styled.div`
   display: flex;
   align-items: center;
@@ -260,7 +263,7 @@ const DetailData = styled.span`
 
 const ColoredDetailData = styled.span<{ priceChangeAmount: number }>`
   color: ${(props) => (props.priceChangeAmount > 0 ? "#e22926" : "#2679ed")};
-  font-size: 14px; 
+  font-size: 14px;
 `;
 
 // const ThickDivider = styled.div`

diff --git a/client/src/components/StockOrderSection/OrderDecisionBtn.tsx b/client/src/components/StockOrderSection/OrderDecisionBtn.tsx
@@ -108,4 +108,10 @@ const OrderBtn = styled.button<OrderTypeProps>`
   transition: background-color 0.5s;
   color: #ffffff;
   font-weight: 400;
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${(props) => (props.ordertype ? "#034baf" : "#c20d09")};
+    transition: background-color 0.5s ease;
+  }
 `;