[Add] 서버 통신 오류 발생 시 렌더링 화면 구현 중

- 로그인한 유저의 Cash 값이 없을 경우 렌더링 되는 창 설정

Issues #122

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"

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;
   }

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<HTMLDivElement>) => {
-    if (event.key === 'Enter') {
+    if (event.key === "Enter") {
       onClose();
     }
   };
-  
+
   return (
     <ModalBackground onKeyDown={handleKeyDown} tabIndex={0}>
       <ModalContainer>
@@ -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; // 텍스트 중앙 정렬
 `;

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 <p>현금충전 필요</p>;
+  }
+
   // 3) 데이터 받아오기 성공
   const corpName = stockInfo.korName;
   const stockCode = stockInfo.code;