Skip to content

Commit

Permalink
[Refactor] 우측 컴포넌트 애니메이션 효과 및 로딩 인디케이터 적용
Browse files Browse the repository at this point in the history 
- 우측 컴포넌트 애니메이션 효과 및 로딩 인디케이터 적용

Issues #122
  • Loading branch information
@novice1993
novice1993 committed Oct 2, 2023
1 parent f1608c3 commit 2d37c90
Show file tree
Hide file tree
Showing 13 changed files with 329 additions and 281 deletions.
54 changes: 54 additions & 0 deletions client/src/components/CentralChart/Index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,35 @@
import { useSelector } from "react-redux";
import { StateProps } from "../../models/stateProps";
import useGetStockData from "../../hooks/useGetStockData";
import useGetStockInfo from "../../hooks/useGetStockInfo";
import { styled } from "styled-components";
import { PuffLoader } from "react-spinners";
import UpperMenuBar from "../CentralChartMenu/Index";
import StockChart from "./StockChart";

const loadingText = "로딩 중...";
const errorText = "화면을 불러올 수 없습니다";

const CentralChart = () => {
const companyId = useSelector((state: StateProps) => state.companyId);
const { stockInfoLoading, stockInfoError } = useGetStockInfo(companyId);
const { stockPriceLoading, stockPriceError } = useGetStockData(companyId);

if (stockPriceLoading || stockInfoLoading) {
return (
<LoadingContainer>
<div className="loading">
<PuffLoader color="#2679ed" />
<div className="loadingText">{loadingText}</div>
</div>
</LoadingContainer>
);
}

if (stockPriceError || stockInfoError) {
return <ErrorContainer>{errorText}</ErrorContainer>;
}

return (
<Container>
<UpperMenuBar />
Expand All @@ -21,3 +48,30 @@ const Container = styled.div`
display: flex;
flex-direction: column;
`;

const LoadingContainer = styled.div`
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
font-weight: 500;
color: #999999;
.loading {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.loadingText {
margin-top: 20px;
color: #9999;
}
}
`;

const ErrorContainer = styled(LoadingContainer)``;
28 changes: 0 additions & 28 deletions client/src/components/CentralChart/StockChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,27 +3,13 @@ import { styled } from "styled-components";
import EChartsReact from "echarts-for-react";
import { StateProps } from "../../models/stateProps";

import useGetStockData from "../../hooks/useGetStockData";
import useGetStockChart from "../../hooks/useGetStockChart";
import CompareChartBtn from "./CompareChartBtn";

const loadingText = "로딩 중 입니다...";
const errorText = "화면을 불러올 수 없습니다";

const StockChart = () => {
const companyId = useSelector((state: StateProps) => state.companyId);

const { stockPriceLoading, stockPriceError } = useGetStockData(companyId);
const { options, chartStyle } = useGetStockChart(companyId);

if (stockPriceLoading) {
return <LoadingContainer>{loadingText}</LoadingContainer>;
}

if (stockPriceError) {
return <ErrorContainer>{errorText}</ErrorContainer>;
}

return (
<Container>
<ChartContainer>
Expand Down Expand Up @@ -53,17 +39,3 @@ const ChartContainer = styled.div`
height: 100%;
z-index: 1;
`;

const LoadingContainer = styled.div`
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
font-weight: 500;
color: #999999;
`;

const ErrorContainer = styled(LoadingContainer)``;
14 changes: 0 additions & 14 deletions client/src/components/CentralChartMenu/Index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,9 @@
import { useSelector } from "react-redux";
import { styled } from "styled-components";
import useGetStockInfo from "../../hooks/useGetStockInfo";
import { StateProps } from "../../models/stateProps";
import ExpandScreenBtn from "./ExpandScreenBtn";
import StockOverview from "./StockOverview";
import StockOrderBtn from "./StockOrderBtn";

const UpperMenuBar = () => {
const companyId = useSelector((state: StateProps) => state.companyId);
const { stockInfoLoading, stockInfoError } = useGetStockInfo(companyId);

if (stockInfoLoading) {
return <></>;
}

if (stockInfoError) {
return <p>에러 발생</p>;
}

return (
<Container>
<div className="FirstLine">
Expand Down
113 changes: 58 additions & 55 deletions client/src/components/MarketComponents/MarketStockList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import axios from "axios";
import { useState, useEffect } from "react";
import styled from "styled-components";
import { motion } from "framer-motion";
import { useDispatch } from "react-redux";
import { changeCompanyId } from "../../reducer/CompanyId-Reducer";
import logo from "../../asset/icon/StockHolmImage.png";
Expand Down Expand Up @@ -104,61 +105,63 @@ const MarketStockList: React.FC = () => {

return (
<StockListContainer>
<StockListTitle>
<StockListDetail onClick={SortName} selected={selectedSort === "name"}>
{MarketStockLists.stockName}
</StockListDetail>
<StockListDetail onClick={SortPrice} selected={selectedSort === "price"}>
{MarketStockLists.stockPrice}
</StockListDetail>
<StockListDetail onClick={SortRate} selected={selectedSort === "rate"}>
{MarketStockLists.stockRate}
</StockListDetail>
<StockListDetail onClick={SortTrade} selected={selectedSort === "trade"}>
{MarketStockLists.stockTrade}
</StockListDetail>
</StockListTitle>
<StockListHeader>
<StockListHeaderItem1>순위</StockListHeaderItem1>
<StockListHeaderItem2>종목명</StockListHeaderItem2>
<StockListHeaderItem3>현재가(원)</StockListHeaderItem3>
<StockListHeaderItem4>변동률(%)</StockListHeaderItem4>
<StockListHeaderItem5>거래량(주)</StockListHeaderItem5>
</StockListHeader>

<StockInfoContainer>
{marketStockList.slice(0, 10).map((el, index) => {
const companyLogo = logos[el.korName] || logo;

return (
<div key={index}>
<StockListInfo onClick={() => dispatch(changeCompanyId(el.companyId))}>
{isLoading === true ? (
<div>{MarketStockLists.isLoading}</div>
) : (
<>
<RankingBadge rank={index + 1} />
<Logo src={companyLogo} alt="stock logo" />
<StockNameWrapper>
<StockName key={el.korName}>{el.korName}</StockName>
<StockCode key={el.code}>{el.code}</StockCode>
</StockNameWrapper>
<StockDetailWrapper>
<StockDetail>
<StockDetailItem key={el.stockInfResponseDto.stck_prpr}>{numberWithCommas(parseFloat(el.stockInfResponseDto.stck_prpr))}</StockDetailItem>
<StockDetailItem key={el.stockInfResponseDto.prdy_ctrt} variation={parseFloat(el.stockInfResponseDto.prdy_ctrt) > 0 ? "positive" : parseFloat(el.stockInfResponseDto.prdy_ctrt) < 0 ? "negative" : "neutral"}>
{el.stockInfResponseDto.prdy_ctrt}
</StockDetailItem>
<StockDetailItem key={el.stockInfResponseDto.acml_vol}>{numberWithCommas(parseFloat(el.stockInfResponseDto.acml_vol))}</StockDetailItem>
</StockDetail>
</StockDetailWrapper>
</>
)}
</StockListInfo>
</div>
);
})}
</StockInfoContainer>
<motion.div initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }}>
<StockListTitle>
<StockListDetail onClick={SortName} selected={selectedSort === "name"}>
{MarketStockLists.stockName}
</StockListDetail>
<StockListDetail onClick={SortPrice} selected={selectedSort === "price"}>
{MarketStockLists.stockPrice}
</StockListDetail>
<StockListDetail onClick={SortRate} selected={selectedSort === "rate"}>
{MarketStockLists.stockRate}
</StockListDetail>
<StockListDetail onClick={SortTrade} selected={selectedSort === "trade"}>
{MarketStockLists.stockTrade}
</StockListDetail>
</StockListTitle>
<StockListHeader>
<StockListHeaderItem1>순위</StockListHeaderItem1>
<StockListHeaderItem2>종목명</StockListHeaderItem2>
<StockListHeaderItem3>현재가(원)</StockListHeaderItem3>
<StockListHeaderItem4>변동률(%)</StockListHeaderItem4>
<StockListHeaderItem5>거래량(주)</StockListHeaderItem5>
</StockListHeader>

<StockInfoContainer>
{marketStockList.slice(0, 10).map((el, index) => {
const companyLogo = logos[el.korName] || logo;

return (
<div key={index}>
<StockListInfo onClick={() => dispatch(changeCompanyId(el.companyId))}>
{isLoading === true ? (
<div>{MarketStockLists.isLoading}</div>
) : (
<>
<RankingBadge rank={index + 1} />
<Logo src={companyLogo} alt="stock logo" />
<StockNameWrapper>
<StockName key={el.korName}>{el.korName}</StockName>
<StockCode key={el.code}>{el.code}</StockCode>
</StockNameWrapper>
<StockDetailWrapper>
<StockDetail>
<StockDetailItem key={el.stockInfResponseDto.stck_prpr}>{numberWithCommas(parseFloat(el.stockInfResponseDto.stck_prpr))}</StockDetailItem>
<StockDetailItem key={el.stockInfResponseDto.prdy_ctrt} variation={parseFloat(el.stockInfResponseDto.prdy_ctrt) > 0 ? "positive" : parseFloat(el.stockInfResponseDto.prdy_ctrt) < 0 ? "negative" : "neutral"}>
{el.stockInfResponseDto.prdy_ctrt}
</StockDetailItem>
<StockDetailItem key={el.stockInfResponseDto.acml_vol}>{numberWithCommas(parseFloat(el.stockInfResponseDto.acml_vol))}</StockDetailItem>
</StockDetail>
</StockDetailWrapper>
</>
)}
</StockListInfo>
</div>
);
})}
</StockInfoContainer>
</motion.div>
</StockListContainer>
);
};
Expand Down
51 changes: 27 additions & 24 deletions client/src/components/MarketComponents/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { motion } from "framer-motion";
import styled from "styled-components";
import naver_logo from "../../asset/logos/naver_logo.png";
import daum_logo from "../../asset/logos/daum_logo.png";
Expand All @@ -10,30 +11,32 @@ import MarketkospiChart from "./MarketKospiChart";
const MarketSummary: React.FC = () => {
return (
<Market>
<MarketH3>{SummaryText.now}</MarketH3>
<KospiContaienr>
<MarketkospiChart />
</KospiContaienr>
<News>
<MarketH3>{SummaryText.liveNews}</MarketH3>
<NewsCompany>
<A className="naver" href={NewsListLink.NaverNews} target="_blank">
<img src={naver_logo} alt="Naver Logo" /> {SummaryText.naverNews}
</A>
<A className="daum" href={NewsListLink.DaumNews} target="_blank">
<img src={daum_logo} alt="Daum Logo" /> {SummaryText.daumNews}
</A>
<A className="chosun" href={NewsListLink.chosunNews} target="_blank">
<img src={chosun_logo} alt="Chosun Ilbo Logo" /> {SummaryText.chosunNews}
</A>
<A className="donga" href={NewsListLink.dongaNews} target="_blank">
<img src={donga_logo} alt="Donga Ilbo Logo" /> {SummaryText.dongaNews}
</A>
<A className="jtbc" href={NewsListLink.jtbcNews} target="_blank">
<img src={jtbc_logo} alt="JTBC Logo" /> {SummaryText.jtbcNews}
</A>
</NewsCompany>
</News>
<motion.div initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }}>
<MarketH3>{SummaryText.now}</MarketH3>
<KospiContaienr>
<MarketkospiChart />
</KospiContaienr>
<News>
<MarketH3>{SummaryText.liveNews}</MarketH3>
<NewsCompany>
<A className="naver" href={NewsListLink.NaverNews} target="_blank">
<img src={naver_logo} alt="Naver Logo" /> {SummaryText.naverNews}
</A>
<A className="daum" href={NewsListLink.DaumNews} target="_blank">
<img src={daum_logo} alt="Daum Logo" /> {SummaryText.daumNews}
</A>
<A className="chosun" href={NewsListLink.chosunNews} target="_blank">
<img src={chosun_logo} alt="Chosun Ilbo Logo" /> {SummaryText.chosunNews}
</A>
<A className="donga" href={NewsListLink.dongaNews} target="_blank">
<img src={donga_logo} alt="Donga Ilbo Logo" /> {SummaryText.dongaNews}
</A>
<A className="jtbc" href={NewsListLink.jtbcNews} target="_blank">
<img src={jtbc_logo} alt="JTBC Logo" /> {SummaryText.jtbcNews}
</A>
</NewsCompany>
</News>
</motion.div>
</Market>
);
};
Expand Down
2 changes: 1 addition & 1 deletion client/src/components/Profile/CashModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ const CashModal: React.FC<{ onClose: () => void }> = ({ onClose }) => {

return (
<ModalBackground>
<motion.div initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }}>
<motion.div initial={{ opacity: 0.8, y: -20 }} animate={{ opacity: 1, y: 0 }}>
<ModalContainer>
<CloseButton onClick={onClose}>&times;</CloseButton>
<Title>{titleText}</Title>
Expand Down
2 changes: 1 addition & 1 deletion client/src/components/Profile/memberInfoModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const MemberInfoModal: React.FC<MemberInfoModalProps> = ({ onClose }) => {

return (
<ModalBackground>
<motion.div initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }}>
<motion.div initial={{ opacity: 0.8, y: -20 }} animate={{ opacity: 1, y: 0 }}>
<ModalContainer>
<CloseButton onClick={onClose}>&times;</CloseButton>
<Title>{titleText}</Title>
Expand Down
2 changes: 1 addition & 1 deletion client/src/components/Profile/memberWithdrawalModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const MemberWithdrawalModal: React.FC<MemberWithdrawalModalProps> = ({ onClose,

return (
<ModalBackground>
<motion.div initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }}>
<motion.div initial={{ opacity: 0.8, y: -20 }} animate={{ opacity: 1, y: 0 }}>
<ModalContainer>
<CloseButton onClick={onClose}>&times;</CloseButton>
<Title>{withdrawalTitle}</Title>
Expand Down
Loading

0 comments on commit 2d37c90

Please sign in to comment.