diff --git a/client/src/components/CentralChart/CompareChartBtn.tsx b/client/src/components/CentralChart/CompareChartBtn.tsx index d45ceb2..e638121 100644 --- a/client/src/components/CentralChart/CompareChartBtn.tsx +++ b/client/src/components/CentralChart/CompareChartBtn.tsx @@ -23,7 +23,7 @@ const CompareChartBtn = () => {
-
+
{buttonText}
@@ -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 index fcd7838..1ad92e1 100644 --- 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 ( - ); } if (direction === "right") { return ( - ); } @@ -40,17 +64,30 @@ export default ExpandScreenBtn; // type 정의 interface OwnProps { direction: string; + buttonHover: boolean; } // component 생성 const Button = styled.div` - 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 index e2df5c5..287e664 100644 --- a/client/src/components/CentralChartMenu/StockOrderBtn.tsx +++ b/client/src/components/CentralChartMenu/StockOrderBtn.tsx @@ -56,4 +56,10 @@ const Button = styled.div` 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 index b4d5aac..15f0123 100644 --- 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/Header.tsx b/client/src/components/EntireList/Header.tsx index 98c3f99..b542631 100644 --- a/client/src/components/EntireList/Header.tsx +++ b/client/src/components/EntireList/Header.tsx @@ -106,7 +106,7 @@ const MenuItem = styled.button` } `; const MenuItem1 = styled(MenuItem)` - border-left: 4px solid darkslategray; + border-left: 4px solid #4479c2; `; export default Header; diff --git a/client/src/components/EntireList/StockItem.tsx b/client/src/components/EntireList/StockItem.tsx index ebd1f0b..fc29250 100644 --- a/client/src/components/EntireList/StockItem.tsx +++ b/client/src/components/EntireList/StockItem.tsx @@ -12,42 +12,42 @@ 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'; -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 = ({ 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; // 기본 로고를 대체로 사용 // 🔴 색깔 통일 (그냥 깔끔하게) @@ -146,6 +146,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 index afdcdb9..373ceb8 100644 --- 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/Header.tsx b/client/src/components/HoldingList/Header.tsx index 472be2f..0e60be2 100644 --- a/client/src/components/HoldingList/Header.tsx +++ b/client/src/components/HoldingList/Header.tsx @@ -104,5 +104,5 @@ const MenuItem = styled.button` } `; const MenuItem1 = styled(MenuItem)` - border-left: 4px solid darkslategray; + border-left: 4px solid #4479c2; `; diff --git a/client/src/components/HoldingList/StockItem.tsx b/client/src/components/HoldingList/StockItem.tsx index 4430366..268b995 100644 --- a/client/src/components/HoldingList/StockItem.tsx +++ b/client/src/components/HoldingList/StockItem.tsx @@ -11,20 +11,20 @@ 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'; -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: { @@ -63,6 +63,7 @@ const StockItem: React.FC = ({ companyData, stockData }) => { // Format percentage to two decimal places const formattedPercentage = parseFloat(percentage.toFixed(2)); + // 이미 import된 로고들을 바탕으로 logos 객체 생성 const logos: { [key: string]: string } = { '삼성전자': logosamsung, @@ -113,8 +114,9 @@ const StockItem: React.FC = ({ companyData, stockData }) => { setIsFavorited(!isFavorited); }; + return ( - <> + { @@ -148,25 +150,30 @@ const StockItem: React.FC = ({ companyData, stockData }) => { 보유 - - {stockReturn.toLocaleString()} 원 - + {stockReturn.toLocaleString()} 원 {totalPrice.toLocaleString()} 원 - - {formattedPercentage}% - + {formattedPercentage}% {totalStocksHeld}주 {/* */} - + ); }; 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; @@ -321,5 +328,5 @@ const DetailData = styled.span` const ColoredDetailData = styled.span<{ priceChangeAmount: number }>` color: ${(props) => (props.priceChangeAmount > 0 ? "#e22926" : "#2679ed")}; - font-size: 14px; + font-size: 14px; `; diff --git a/client/src/components/StockOrderSection/OrderDecisionBtn.tsx b/client/src/components/StockOrderSection/OrderDecisionBtn.tsx index b1b9732..9474a28 100644 --- a/client/src/components/StockOrderSection/OrderDecisionBtn.tsx +++ b/client/src/components/StockOrderSection/OrderDecisionBtn.tsx @@ -108,4 +108,10 @@ const OrderBtn = styled.button` 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; + } `; diff --git a/client/src/components/communityComponents/index.tsx b/client/src/components/communityComponents/index.tsx index 27c4b9c..47bdcb1 100644 --- a/client/src/components/communityComponents/index.tsx +++ b/client/src/components/communityComponents/index.tsx @@ -235,8 +235,6 @@ const DropdownInput = styled.input` } `; -//글작성을위해 클릭시 드롭다운 열어주는 버튼 - const Button = styled.button` background-color: white; color: darkslategray; @@ -260,8 +258,6 @@ const Button = styled.button` } `; -//버튼 과 글영역 구분 - const DevideLine = styled.div` margin-bottom: 10px; position: relative; diff --git a/client/src/components/watchlist/Header.tsx b/client/src/components/watchlist/Header.tsx index ea2c10f..ead7f4e 100644 --- a/client/src/components/watchlist/Header.tsx +++ b/client/src/components/watchlist/Header.tsx @@ -98,5 +98,5 @@ const MenuItem = styled.button` } `; const MenuItem1 = styled(MenuItem)` - border-left: 4px solid darkslategray; + border-left: 4px solid #4479c2; `; diff --git a/client/src/page/MainPage.tsx b/client/src/page/MainPage.tsx index 493e8de..6dd7cb0 100644 --- a/client/src/page/MainPage.tsx +++ b/client/src/page/MainPage.tsx @@ -153,17 +153,15 @@ const MainPage = () => { const refreshToken = urlParams.get("refresh_token"); if (accessToken && refreshToken) { - localStorage.setItem("accessToken", `Bearer ${accessToken}`); - localStorage.setItem("refreshToken", refreshToken); - dispatch(setLoginState()); - // Remove access_token and refresh_token from the URL - urlParams.delete("access_token"); - urlParams.delete("refresh_token"); - window.history.replaceState({}, "", "?" + urlParams.toString()); - - window.location.reload(); - + localStorage.setItem("accessToken", `Bearer ${accessToken}`); + localStorage.setItem("refreshToken", refreshToken); + dispatch(setLoginState()); + // Remove access_token and refresh_token from the URL + urlParams.delete("access_token"); + urlParams.delete("refresh_token"); + window.history.replaceState({}, "", "?" + urlParams.toString()); + window.location.reload(); } }, [dispatch]); @@ -174,20 +172,18 @@ const MainPage = () => { {isLogin == 1 ? : }
- {!expandScreen.left && ( - - {selectedMenu === "전체종목" ? ( - - ) : selectedMenu === "관심종목" ? ( - - ) : selectedMenu === "보유종목" ? ( - - ) : null} - - )} + + {selectedMenu === "전체종목" ? ( + + ) : selectedMenu === "관심종목" ? ( + + ) : selectedMenu === "보유종목" ? ( + + ) : null} + - {!expandScreen.right && } +
{isOAuthModalOpen && ( ` + display: ${(props) => props.leftExpand && "none"}; min-width: 248px; height: 100%; border-right: 1px solid black; diff --git a/client/src/page/TabPages/TabContainerPage.tsx b/client/src/page/TabPages/TabContainerPage.tsx index a3a410c..4822a97 100644 --- a/client/src/page/TabPages/TabContainerPage.tsx +++ b/client/src/page/TabPages/TabContainerPage.tsx @@ -1,50 +1,36 @@ +import { useSelector } from "react-redux/es/hooks/useSelector"; +import { StateProps } from "../../models/stateProps"; import MarketInfo from "./MarketInfoPage"; import { Routes, Route, Link } from "react-router-dom"; import styled from "styled-components"; import DetailStockInformation from "../../components/stockinfoComponents/index"; import { Community } from "./communityPage"; import { useState } from "react"; -import { - MarketImages, - InfoImages, - CommunityImages, -} from "../../components/communityComponents/IconComponent/Icon"; +import { MarketImages, InfoImages, CommunityImages } from "../../components/communityComponents/IconComponent/Icon"; export const TabContainerPage = () => { const [activeTab, setActiveTab] = useState(1); const handleClickActiveTab = (number: number) => { setActiveTab(number); }; + const expandScreen = useSelector((state: StateProps) => state.expandScreen); + const rightScreen = expandScreen.right; + return ( - - + +
-