diff --git a/client/src/components/CentralChart/Index.tsx b/client/src/components/CentralChart/Index.tsx index f7e4983..212f977 100644 --- a/client/src/components/CentralChart/Index.tsx +++ b/client/src/components/CentralChart/Index.tsx @@ -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 ( + +
+ +
{loadingText}
+
+ + ); + } + + if (stockPriceError || stockInfoError) { + return {errorText}; + } + return ( @@ -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)``; diff --git a/client/src/components/CentralChart/StockChart.tsx b/client/src/components/CentralChart/StockChart.tsx index f05b170..6a94fd6 100644 --- a/client/src/components/CentralChart/StockChart.tsx +++ b/client/src/components/CentralChart/StockChart.tsx @@ -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 {loadingText}; - } - - if (stockPriceError) { - return {errorText}; - } - return ( @@ -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)``; diff --git a/client/src/components/CentralChartMenu/Index.tsx b/client/src/components/CentralChartMenu/Index.tsx index 2462078..5cb3178 100644 --- a/client/src/components/CentralChartMenu/Index.tsx +++ b/client/src/components/CentralChartMenu/Index.tsx @@ -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

에러 발생

; - } - return (
diff --git a/client/src/components/MarketComponents/MarketStockList.tsx b/client/src/components/MarketComponents/MarketStockList.tsx index 5080db5..10c2b03 100644 --- a/client/src/components/MarketComponents/MarketStockList.tsx +++ b/client/src/components/MarketComponents/MarketStockList.tsx @@ -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"; @@ -104,61 +105,63 @@ const MarketStockList: React.FC = () => { return ( - - - {MarketStockLists.stockName} - - - {MarketStockLists.stockPrice} - - - {MarketStockLists.stockRate} - - - {MarketStockLists.stockTrade} - - - - 순위 - 종목명 - 현재가(원) - 변동률(%) - 거래량(주) - - - - {marketStockList.slice(0, 10).map((el, index) => { - const companyLogo = logos[el.korName] || logo; - - return ( -
- dispatch(changeCompanyId(el.companyId))}> - {isLoading === true ? ( -
{MarketStockLists.isLoading}
- ) : ( - <> - - - - {el.korName} - {el.code} - - - - {numberWithCommas(parseFloat(el.stockInfResponseDto.stck_prpr))} - 0 ? "positive" : parseFloat(el.stockInfResponseDto.prdy_ctrt) < 0 ? "negative" : "neutral"}> - {el.stockInfResponseDto.prdy_ctrt} - - {numberWithCommas(parseFloat(el.stockInfResponseDto.acml_vol))} - - - - )} - -
- ); - })} - + + + + {MarketStockLists.stockName} + + + {MarketStockLists.stockPrice} + + + {MarketStockLists.stockRate} + + + {MarketStockLists.stockTrade} + + + + 순위 + 종목명 + 현재가(원) + 변동률(%) + 거래량(주) + + + + {marketStockList.slice(0, 10).map((el, index) => { + const companyLogo = logos[el.korName] || logo; + + return ( +
+ dispatch(changeCompanyId(el.companyId))}> + {isLoading === true ? ( +
{MarketStockLists.isLoading}
+ ) : ( + <> + + + + {el.korName} + {el.code} + + + + {numberWithCommas(parseFloat(el.stockInfResponseDto.stck_prpr))} + 0 ? "positive" : parseFloat(el.stockInfResponseDto.prdy_ctrt) < 0 ? "negative" : "neutral"}> + {el.stockInfResponseDto.prdy_ctrt} + + {numberWithCommas(parseFloat(el.stockInfResponseDto.acml_vol))} + + + + )} + +
+ ); + })} + + ); }; diff --git a/client/src/components/MarketComponents/index.tsx b/client/src/components/MarketComponents/index.tsx index 1699785..90d3b97 100644 --- a/client/src/components/MarketComponents/index.tsx +++ b/client/src/components/MarketComponents/index.tsx @@ -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"; @@ -10,30 +11,32 @@ import MarketkospiChart from "./MarketKospiChart"; const MarketSummary: React.FC = () => { return ( - {SummaryText.now} - - - - - {SummaryText.liveNews} - - - Naver Logo {SummaryText.naverNews} - - - Daum Logo {SummaryText.daumNews} - - - Chosun Ilbo Logo {SummaryText.chosunNews} - - - Donga Ilbo Logo {SummaryText.dongaNews} - - - JTBC Logo {SummaryText.jtbcNews} - - - + + {SummaryText.now} + + + + + {SummaryText.liveNews} + + + Naver Logo {SummaryText.naverNews} + + + Daum Logo {SummaryText.daumNews} + + + Chosun Ilbo Logo {SummaryText.chosunNews} + + + Donga Ilbo Logo {SummaryText.dongaNews} + + + JTBC Logo {SummaryText.jtbcNews} + + + + ); }; diff --git a/client/src/components/Profile/CashModal.tsx b/client/src/components/Profile/CashModal.tsx index 5912600..a81b80b 100644 --- a/client/src/components/Profile/CashModal.tsx +++ b/client/src/components/Profile/CashModal.tsx @@ -87,7 +87,7 @@ const CashModal: React.FC<{ onClose: () => void }> = ({ onClose }) => { return ( - + × {titleText} diff --git a/client/src/components/Profile/memberInfoModal.tsx b/client/src/components/Profile/memberInfoModal.tsx index ababce3..d609138 100644 --- a/client/src/components/Profile/memberInfoModal.tsx +++ b/client/src/components/Profile/memberInfoModal.tsx @@ -25,7 +25,7 @@ const MemberInfoModal: React.FC = ({ onClose }) => { return ( - + × {titleText} diff --git a/client/src/components/Profile/memberWithdrawalModal.tsx b/client/src/components/Profile/memberWithdrawalModal.tsx index 495e425..5d6d585 100644 --- a/client/src/components/Profile/memberWithdrawalModal.tsx +++ b/client/src/components/Profile/memberWithdrawalModal.tsx @@ -30,7 +30,7 @@ const MemberWithdrawalModal: React.FC = ({ onClose, return ( - + × {withdrawalTitle} diff --git a/client/src/components/StockOrderSection/Index.tsx b/client/src/components/StockOrderSection/Index.tsx index 09dbed8..3f019d5 100644 --- a/client/src/components/StockOrderSection/Index.tsx +++ b/client/src/components/StockOrderSection/Index.tsx @@ -1,5 +1,6 @@ import { useSelector, useDispatch } from "react-redux"; import { styled } from "styled-components"; +import { CircleLoader } from "react-spinners"; import useGetStockInfo from "../../hooks/useGetStockInfo"; import useGetStockData from "../../hooks/useGetStockData"; import useGetCash from "../../hooks/useGetCash"; @@ -13,6 +14,7 @@ import StockOrder from "./StockOrder"; import OrderResult from "./OrderResult"; import WaitOrderIndicator from "./WaitOrderIndicator"; +const loadingText: string = "로딩 중..."; const errorMessage: string = "정보를 불러올 수 없습니다"; const errorButtonText: string = "닫기"; const loginRequiredText: string = "로그인이 필요한 서비스입니다"; @@ -39,16 +41,29 @@ const StockOrderSection: React.FC = (props) => { const isLoading = stockInfoLoading || stockPriceLoading || cashLoading || orderRecordLoading || holdingStockLoading || compnayListLoading; const isError = stockInfoError || stockPriceError || orderRecordError || holdingStockError || companyListError; - // 1) 데이터 로딩 중 - if (isLoading) { - return ; - } - // 주식주문 창 닫기 const handleStockOrderClose = () => { dispatch(stockOrderClose()); }; + // 1) 데이터 로딩 중 + if (isLoading) { + return ( + + +

{upperbarTitle}

+ + +
+ +
{loadingText}
+
+ + ); + } + // 2) 데이터 받아오기 실패 or 성공했으나 빈 데이터일 때 if (isError || stockPrice.length === 0) { return ( @@ -170,6 +185,19 @@ const Container = styled.aside<{ orderSet: boolean }>` box-shadow: -1px 0px 10px darkgray; background-color: #ffffff; + .loading { + height: 85%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + .loadingText { + margin-top: 20px; + color: #9999; + } + } + .mainContent { height: 100%; } diff --git a/client/src/components/communityComponents/index.tsx b/client/src/components/communityComponents/index.tsx index 1f0f318..039b8c5 100644 --- a/client/src/components/communityComponents/index.tsx +++ b/client/src/components/communityComponents/index.tsx @@ -1,5 +1,6 @@ import { useState, useEffect } from "react"; import styled from "styled-components"; +import { motion } from "framer-motion"; import Comments from "./Comments"; import { DotIcon } from "./IconComponent/Icon"; import { toast } from "react-toastify"; @@ -153,56 +154,58 @@ const TimeLineComponent = () => { }; return ( - - {openDropDown === false && } - {openDropDown === true && ( - <> - - - - Submit - Cancel - - - )} - - - {boardData.length === 0 ? ( - {timeLineText.notYetWriting} - ) : ( - boardData - .slice() - .reverse() - .map((el: BoardData) => ( - - -
handleDotOpen(el.boardId)}> - -
- {dotMenuOpenMap[el.boardId] && handleDeleteClick(el.boardId)}>{timeLineText.delete}} - - - - {el.member} -
{getTimeAgoString(el.createdAt)}
- - - {expandedPosts.includes(el.boardId) ? ( - el.content - ) : ( - <> - {el.content.length > 50 ? el.content.substring(0, 50) + "..." : el.content} -
- {el.content.length > 50 &&
toggleExpandPost(el.boardId)}>더 보기
} - - )} - - - - )) + + + {openDropDown === false && } + {openDropDown === true && ( + <> + + + + Submit + Cancel + + )} - - + + + {boardData.length === 0 ? ( + {timeLineText.notYetWriting} + ) : ( + boardData + .slice() + .reverse() + .map((el: BoardData) => ( + + +
handleDotOpen(el.boardId)}> + +
+ {dotMenuOpenMap[el.boardId] && handleDeleteClick(el.boardId)}>{timeLineText.delete}} + + + + {el.member} +
{getTimeAgoString(el.createdAt)}
+ + + {expandedPosts.includes(el.boardId) ? ( + el.content + ) : ( + <> + {el.content.length > 50 ? el.content.substring(0, 50) + "..." : el.content} +
+ {el.content.length > 50 &&
toggleExpandPost(el.boardId)}>더 보기
} + + )} + + + + )) + )} + + + ); }; diff --git a/client/src/components/stockinfoComponents/StockInfoDummyData.tsx b/client/src/components/stockinfoComponents/StockInfoDummyData.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/client/src/components/stockinfoComponents/index.tsx b/client/src/components/stockinfoComponents/index.tsx index 4104626..a6c599c 100644 --- a/client/src/components/stockinfoComponents/index.tsx +++ b/client/src/components/stockinfoComponents/index.tsx @@ -1,4 +1,5 @@ import styled from "styled-components"; +import { motion } from "framer-motion"; import { useState } from "react"; import { useSelector } from "react-redux"; import { RootState } from "../../store/config"; @@ -446,120 +447,118 @@ const DetailStockInformation: React.FC = () => { return ( - {matchingCompany ? ( - - -
- -
+ + {matchingCompany ? ( + + +
+ +
- -
  • {matchingCompany.company.companyName}
    • -
  • {matchingCompany.company.companyKospi}
    • -     -     - - {moreView === true ? ( - -
  • {matchingCompany.company.companySkill.sk1}
    • -
  • {matchingCompany.company.companySkill.sk2}
    • -
  • {matchingCompany.company.companySkill.sk3}
    • -
  • {matchingCompany.company.companySkill.sk4}
    • -
  • {matchingCompany.company.companySkill.sk5}
    • -
  • {matchingCompany.company.companySkill.sk6}
    • - {DetailStockText.moreView} -     - ) : ( - -
  • {matchingCompany.company.companySkill.sk1}
    • -
  • {matchingCompany.company.companySkill.sk2}
    • - {DetailStockText.moreView} -     - )} -     - -
      -
    • -
      {DetailStockText.companyValue}
      -
      • -
    • -
      {matchingCompany.company.companyValue}
      -
      • -
    -
      -
    • -
      {DetailStockText.companyRanking}
      -
      • -
    • {matchingCompany.company.companyRank}
      • -
    -
      -
    • -
      {DetailStockText.stock}
      -
      • -
    • {matchingCompany.company.companyStock}
      • -
    -
      -
    • -
      {DetailStockText.indust}
      -
      • -
    • {matchingCompany.company.compnayIndustrial}
      • -
    -
      -
    • -
      {DetailStockText.detailIndust}
      -
      • -
    • {matchingCompany.company.companyIndustDetail}
      • -
    -     - - - {moreView2 === true ? ( + +
  • {matchingCompany.company.companyName}
    • +
  • {matchingCompany.company.companyKospi}
    • +     +     + + {moreView === true ? ( + +
  • {matchingCompany.company.companySkill.sk1}
    • +
  • {matchingCompany.company.companySkill.sk2}
    • +
  • {matchingCompany.company.companySkill.sk3}
    • +
  • {matchingCompany.company.companySkill.sk4}
    • +
  • {matchingCompany.company.companySkill.sk5}
    • +
  • {matchingCompany.company.companySkill.sk6}
    • + {DetailStockText.moreView} +     + ) : ( + +
  • {matchingCompany.company.companySkill.sk1}
    • +
  • {matchingCompany.company.companySkill.sk2}
    • + {DetailStockText.moreView} +     + )} +     +
    • -
      {DetailStockText.companyEx}
      +
      {DetailStockText.companyValue}
      • -
    • {matchingCompany.company.companyExample}
      • -
    • {matchingCompany.company.companyExample2}
      • -
    • {matchingCompany.company.companyExample3}
      • -
    • {matchingCompany.company.companyExample4}
      • - - {moreView2 ? DetailStockText.lessView : DetailStockText.moreView} - +
    • +
      {matchingCompany.company.companyValue}
      +
      • +
    +
      +
    • +
      {DetailStockText.companyRanking}
      +
      • +
    • {matchingCompany.company.companyRank}
      • +
    +
      +
    • +
      {DetailStockText.stock}
      +
      • +
    • {matchingCompany.company.companyStock}
    - ) : (
    • -
      {DetailStockText.companyEx}
      +
      {DetailStockText.indust}
      • -
    • {matchingCompany.company.companyExample}
      • - - {moreView2 ? DetailStockText.lessView : DetailStockText.moreView} - +
    • {matchingCompany.company.compnayIndustrial}
    - )} - - - -
      -
    • -
      {DetailStockText.totalRatio}
      -
      • -
    • {matchingCompany.company.companyAsset.total}
      • -
    - -     -     - ) : ( -
    {DetailStockText.plzPickTheStock}
    - )} +
      +
    • +
      {DetailStockText.detailIndust}
      +
      • +
    • {matchingCompany.company.companyIndustDetail}
      • +
    + + + + {moreView2 === true ? ( +
      +
    • +
      {DetailStockText.companyEx}
      +
      • +
    • {matchingCompany.company.companyExample}
      • +
    • {matchingCompany.company.companyExample2}
      • +
    • {matchingCompany.company.companyExample3}
      • +
    • {matchingCompany.company.companyExample4}
      • + + {moreView2 ? DetailStockText.lessView : DetailStockText.moreView} + +
    + ) : ( +
      +
    • +
      {DetailStockText.companyEx}
      +
      • +
    • {matchingCompany.company.companyExample}
      • + + {moreView2 ? DetailStockText.lessView : DetailStockText.moreView} + +
    + )} +     + + +
      +
    • +
      {DetailStockText.totalRatio}
      +
      • +
    • {matchingCompany.company.companyAsset.total}
      • +
    + +     + + ) : ( +
    {DetailStockText.plzPickTheStock}
    + )} +     ); }; -//companyAsset: { -// total: "자산총계" + "4,480,005.60" + "억", -//lentRatio: "19.87" + "%", -// assetRatio: "80.13" + "%", -//} + export default DetailStockInformation; const DetailStockText = { plzPickTheStock: "종목을 선택 해 주세요", diff --git a/client/src/components/watchlist/WatchList.tsx b/client/src/components/watchlist/WatchList.tsx index 14838a2..01d9076 100644 --- a/client/src/components/watchlist/WatchList.tsx +++ b/client/src/components/watchlist/WatchList.tsx @@ -45,7 +45,7 @@ const WatchList: React.FC = ({ currentListType, onChangeListType {isLoading ? ( -
    Loading...
    +
    ) : isError ? (
    Error fetching data
    ) : loginStatus === 1 ? (