From 41b6e3baa7231521ae16a3f575130ee4861fbc73 Mon Sep 17 00:00:00 2001 From: novice1993 Date: Tue, 19 Sep 2023 16:28:30 +0900 Subject: [PATCH] =?UTF-8?q?[Add]=20=EC=84=9C=EB=B2=84=20=ED=86=B5=EC=8B=A0?= =?UTF-8?q?=20=EC=98=A4=EB=A5=98=20=EB=B0=9C=EC=83=9D=20=EC=8B=9C=20?= =?UTF-8?q?=EB=A0=8C=EB=8D=94=EB=A7=81=20=ED=99=94=EB=A9=B4=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84=20=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 로그인한 유저의 Cash 값이 없을 경우 렌더링 되는 창 설정 Issues #122 --- client/package-lock.json | 10 ++++++++++ client/package.json | 1 + .../components/CentralChart/CompareList.tsx | 2 +- client/src/components/Signups/Guide.tsx | 18 +++++++++--------- .../src/components/StockOrderSection/Index.tsx | 6 +++++- 5 files changed, 26 insertions(+), 11 deletions(-) diff --git a/client/package-lock.json b/client/package-lock.json index e93f77da..5a82f060 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -22,6 +22,7 @@ "react-query": "^3.39.3", "react-redux": "^8.1.2", "react-router-dom": "^6.15.0", + "react-spinners": "^0.13.8", "react-toastify": "^9.1.3", "redux-persist": "^6.0.0", "styled-components": "^6.0.7" @@ -4858,6 +4859,15 @@ "react-dom": ">=16.8" } }, + "node_modules/react-spinners": { + "version": "0.13.8", + "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.8.tgz", + "integrity": "sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==", + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-toastify": { "version": "9.1.3", "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-9.1.3.tgz", diff --git a/client/package.json b/client/package.json index cbdd69ca..6db709ec 100644 --- a/client/package.json +++ b/client/package.json @@ -24,6 +24,7 @@ "react-query": "^3.39.3", "react-redux": "^8.1.2", "react-router-dom": "^6.15.0", + "react-spinners": "^0.13.8", "react-toastify": "^9.1.3", "redux-persist": "^6.0.0", "styled-components": "^6.0.7" diff --git a/client/src/components/CentralChart/CompareList.tsx b/client/src/components/CentralChart/CompareList.tsx index 7ab0fb71..d8db7e47 100644 --- a/client/src/components/CentralChart/CompareList.tsx +++ b/client/src/components/CentralChart/CompareList.tsx @@ -27,7 +27,7 @@ interface OwnProps { const Contianer = styled.div` &:hover { - color: black; + color: #19488a; transition: color 0.3s ease; cursor: pointer; } diff --git a/client/src/components/Signups/Guide.tsx b/client/src/components/Signups/Guide.tsx index 5dad9ec9..fd84bf61 100644 --- a/client/src/components/Signups/Guide.tsx +++ b/client/src/components/Signups/Guide.tsx @@ -3,18 +3,17 @@ import styled from "styled-components"; const STRINGS = { GUIDE_TITLE: "StockHolm 가이드", - LOGIN_GUIDE: "로그인을 하면 다양한 기능을 활용할 수 있습니다.", - CASH_GUIDE: "프로필 버튼 - 현금 탭을 으로 이동하면 현금을 충전할 수 있습니다.", + LOGIN_GUIDE: "☑️ 로그인을 하면 다양한 기능을 활용할 수 있습니다", + CASH_GUIDE: "☑️ 현금은 프로필 현금 충천 탭에서 충전할 수 있습니다", }; - const GuideModal: React.FC<{ onClose: () => void }> = ({ onClose }) => { const handleKeyDown = (event: React.KeyboardEvent) => { - if (event.key === 'Enter') { + if (event.key === "Enter") { onClose(); } }; - + return ( @@ -59,7 +58,7 @@ const ModalContainer = styled.div` const Title = styled.h2` margin-bottom: 20px; font-size: 1.6rem; - font-weight: 400; + font-weight: 550; `; const CloseButton = styled.button` @@ -74,9 +73,10 @@ const CloseButton = styled.button` `; const Content = styled.p` - margin: 15px 0; // 간격 조정 - font-size: 1.1rem; // 폰트 크기 증가 - line-height: 1.5; + margin: 15px; // 간격 조정 + font-size: 0.95rem; // 폰트 크기 증가 + font-weight: 500; + line-height: 70%; color: #555; // 색상 변경 text-align: center; // 텍스트 중앙 정렬 `; diff --git a/client/src/components/StockOrderSection/Index.tsx b/client/src/components/StockOrderSection/Index.tsx index 8969a40d..ee2e99ec 100644 --- a/client/src/components/StockOrderSection/Index.tsx +++ b/client/src/components/StockOrderSection/Index.tsx @@ -53,7 +53,7 @@ const StockOrderSection = () => { // fetching 데이터 loading, error 여부 const isLoading = stockInfoLoading || stockPriceLoading || cashLoading || orderRecordLoading || holdingStockLoading || compnayListLoading; - const isError = stockInfoError || stockPriceError || cashError || orderRecordError || holdingStockError || companyListError; + const isError = stockInfoError || stockPriceError || orderRecordError || holdingStockError || companyListError; // 1) 데이터 로딩 중 if (isLoading) { @@ -85,6 +85,10 @@ const StockOrderSection = () => { ); } + if (cashError) { + return

현금충전 필요

; + } + // 3) 데이터 받아오기 성공 const corpName = stockInfo.korName; const stockCode = stockInfo.code;