[Feat]서비스 디테일

로그인이 필요한 서비스입니다 페이지 연결 현금 충전이 필요한 서비스입니다 페이지 연결 현금 충전 메시지 작성 Issues #15
codestates-seb · Sep 19, 2023 · 4fc294c · 4fc294c
1 parent b042676
commit 4fc294c
Show file tree

Hide file tree

Showing 6 changed files with 148 additions and 32 deletions.
diff --git a/client/src/components/HoldingList/HoldingList.tsx b/client/src/components/HoldingList/HoldingList.tsx
@@ -5,6 +5,9 @@ import StockItem from "./StockItem";
 import useGetStockHolds from "../../hooks/useGetStockholds";
 import { StockItemProps } from "./StockItem";
 import useCompanyData from "../../hooks/useCompanyData";
+import LoginRequestIndicator from "./LoginRequestIndicator"; 
+import { RootState } from "../../store/config"; 
+import { useSelector } from "react-redux";
 
 // 🔴
 const evalutationProfitText = "평가 수익금";
@@ -20,9 +23,19 @@ const HoldingList: React.FC<WatchListProps> = ({ currentListType, onChangeListTy
   // 모든 stockReturn의 합을 계산합니다.
   let totalEvaluationProfit = 0;
 
-  if (stockHolds) {
-    totalEvaluationProfit = stockHolds.reduce((sum: number, stockHold: StockItemProps["stockData"]) => sum + stockHold.stockReturn, 0);
-  }
+if (Array.isArray(stockHolds) && stockHolds.length > 0) {
+  totalEvaluationProfit = stockHolds.reduce((sum: number, stockHold: StockItemProps["stockData"]) => sum + stockHold.stockReturn, 0);
+}
+
+  // if (stockHolds) {
+  //   totalEvaluationProfit = stockHolds.reduce((sum: number, stockHold: StockItemProps["stockData"]) => sum + stockHold.stockReturn, 0);
+  // }
+    const isLogin = useSelector((state: RootState) => state.login); // 로그인 상태 가져오기
+
+    // OAuth 모달을 열기 위한 함수
+    const openOAuthModal = () => {
+      // OAuth 로그인 모달을 열기 위한 로직
+    };
 
   return (
     <WatchListContainer>
@@ -40,27 +53,39 @@ const HoldingList: React.FC<WatchListProps> = ({ currentListType, onChangeListTy
       </Header2Container>
       {/* <Divider /> */}
       <StockList>
-        {isLoading || isCompanyDataLoading ? (
-          <div>Loading...</div>
-        ) : isError || isCompanyDataError ? (
-          <div>Error fetching data</div>
-        ) : (
-          stockHolds.map((stockHold: StockItemProps["stockData"]) => {
-            const matchedCompany = companyData ? companyData.find((company) => company.companyId === stockHold.companyId) : undefined;
-
-            return matchedCompany ? <StockItem key={stockHold.companyId} stockData={stockHold} companyData={matchedCompany} setShowChangePrice={setShowChangePrice} showChangePrice={showChangePrice} /> : null;
-          })
-        )}
-      </StockList>
-    </WatchListContainer>
-  );
+    {isLogin === 0 ? (
+        <LoginRequestIndicator openOAuthModal={openOAuthModal} />
+    ) : isLoading || isCompanyDataLoading ? (
+        <div>Loading...</div>
+    ) : isError || isCompanyDataError ? (
+        <div>Error fetching data</div>
+    ) : (
+      (Array.isArray(stockHolds) && stockHolds.length > 0) && // 여기에 조건을 추가합니다
+      stockHolds.map((stockHold: StockItemProps["stockData"]) => {
+          const matchedCompany = companyData ? companyData.find((company) => company.companyId === stockHold.companyId) : undefined;
+
+          return matchedCompany ? (
+              <StockItem 
+                  key={stockHold.companyId} 
+                  stockData={stockHold} 
+                  companyData={matchedCompany} 
+                  setShowChangePrice={setShowChangePrice} 
+                  showChangePrice={showChangePrice} 
+              />
+          ) : null;
+      })
+  )}
+</StockList>
+</WatchListContainer>
+);
 };
 
 export default HoldingList;
 
 type WatchListProps = {
   currentListType: "전체종목" | "관심종목" | "보유종목";
   onChangeListType: (type: "전체종목" | "관심종목" | "보유종목") => void;
+  openOAuthModal: () => void;
 };
 
 const WatchListContainer = styled.div`

diff --git a/client/src/components/HoldingList/LoginRequestIndicator.tsx b/client/src/components/HoldingList/LoginRequestIndicator.tsx
@@ -0,0 +1,46 @@
+// LoginRequestIndicator.tsx
+
+import React from "react";
+import styled from "styled-components";
+
+
+interface LoginRequestIndicatorProps {
+  openOAuthModal: () => void;
+}
+
+const LoginRequestIndicator: React.FC<LoginRequestIndicatorProps> = ({ openOAuthModal }) => {
+  return (
+    <LoginRequestContainer>
+      <div className="Notification">로그인이 필요한 서비스입니다.</div>
+      <button className="LoginButton" onClick={openOAuthModal}>StockHolm 로그인</button>
+    </LoginRequestContainer>
+  );
+};
+
+const LoginRequestContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+
+  .Notification {
+    color: #999999;
+  }
+
+  .LoginButton {
+    width: 170px;
+    height: 32px;
+    font-size: 15px;
+    font-weight: 400;
+    color: white;
+    background-color: #2f4f4f;
+    border: none;
+    border-radius: 0.3rem;
+    cursor: pointer;  
+  }
+`;
+
+export default LoginRequestIndicator;
diff --git a/client/src/components/Profile/cashModal.tsx b/client/src/components/Profile/cashModal.tsx
@@ -18,6 +18,8 @@ const CashModal: React.FC<{ onClose: () => void }> = ({ onClose }) => {
     const resetButtonText = "현금 재생성";
     // const refreshButtonText ="새로고침";
 
+    const [errorMessage, setErrorMessage] = useState<string | null>(null); // 에러 메시지 상태 변수 추가
+
     const dispatch = useDispatch();
 
     // useGetCash 훅을 사용하여 현금 보유량 가져오기
@@ -57,6 +59,15 @@ const CashModal: React.FC<{ onClose: () => void }> = ({ onClose }) => {
         }
     };
 
+    const validateCashInput = (inputValue: string) => {
+        const numericValue = parseInt(inputValue.replace(/,/g, ''), 10);
+        if (isNaN(numericValue) || numericValue < 1000000 || numericValue > 500000000) {
+            setErrorMessage("100만에서 5억 사이의 수를 입력하세요");
+        } else {
+            setErrorMessage(null);
+        }
+    };
+
     const handleEnterPress = (event: React.KeyboardEvent<HTMLInputElement>, action: () => void) => {
         if (event.key === 'Enter') {
             action();
@@ -75,10 +86,14 @@ return (
                     <CashCreationInput
                         type="string"
                         value={initialAmount}
-                        onChange={e => setInitialAmount(e.target.value)}
+                        onChange={e => {
+                            setInitialAmount(e.target.value);
+                            validateCashInput(e.target.value);  // 입력 값 변경 시 유효성 검사
+                        }}
                         placeholder={cashCreationPlaceholder}
                         onKeyDown={(event) => handleEnterPress(event, handleCreateCash)}
                     />
+                    {errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>}
                     <CreateCashButton onClick={handleCreateCash}>{createCashButtonText}</CreateCashButton>
                 </div>
             )}
@@ -89,10 +104,14 @@ return (
                     <CashInput
                         type="string"
                         value={cashInput}
-                        onChange={e => setCashInput(e.target.value)}
+                        onChange={e => {
+                            setCashInput(e.target.value);
+                            validateCashInput(e.target.value);  // 입력 값 변경 시 유효성 검사
+                        }}
                         placeholder={cashInputPlaceholder}
                         onKeyDown={(event) => handleEnterPress(event, handleCashReset)}
                     />
+                    {errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>}
                     <ReceiveButton onClick={handleCashReset}>{resetButtonText}</ReceiveButton>
                 </div>
             )}
@@ -193,3 +212,10 @@ const Content = styled.p`
     color: #555;  // 색상 변경
     text-align: center;  // 텍스트 중앙 정렬
 `;
+
+// 에러 메시지 스타일링
+const ErrorMessage = styled.div`
+    color: red;
+    font-size: 0.8rem;
+    margin-top: 5px;
+`;
diff --git a/client/src/components/StockOrderSection/Index.tsx b/client/src/components/StockOrderSection/Index.tsx
@@ -40,7 +40,7 @@ import LGelec from "../../asset/logos/LG전자.svg";
 import LGchem from "../../asset/logos/LG화학.svg";
 import posco from "../../asset/logos/POSCO홀딩스.svg";
 
-const StockOrderSection = () => {
+const StockOrderSection: React.FC<StockOrderSectionProps> = (props) => {
   const dispatch = useDispatch();
   const isLogin = useSelector((state: StateProps) => state.login);
   const companyId = useSelector((state: StateProps) => state.companyId);
@@ -96,7 +96,7 @@ const StockOrderSection = () => {
             &#10005;
           </button>
         </UpperBar>
-        <MoneyReqireIndicator />
+        <MoneyReqireIndicator openProfileModal={props.openProfileModal} />
       </Container>
     );
   }
@@ -149,34 +149,49 @@ const StockOrderSection = () => {
           <WaitOrderIndicator />
         </div>
       ) : (
-        <LoginRequestIndicator />
+          <LoginRequestIndicator openOAuthModal={props.openOAuthModal} /> //props전달
       )}
     </Container>
   );
 };
 
 export default StockOrderSection;
 
+interface StockOrderSectionProps {
+  openOAuthModal: () => void;
+  openProfileModal: () => void;  // Add this line
+}
+
+
 // 미로그인 시 -> 로그인 요청 화면
-const LoginRequestIndicator = () => {
+//props 전달
+const LoginRequestIndicator: React.FC<LoginRequestIndicatorProps> = ({ openOAuthModal }) => {
   return (
     <LoginRequestContainer>
       <div className="Notification">{loginRequiredText}</div>
-      <button className="LoginButton">{loginBtnText}</button>
+      <button className="LoginButton" onClick={openOAuthModal}>{loginBtnText}</button>
     </LoginRequestContainer>
   );
 };
+interface LoginRequestIndicatorProps {
+  openOAuthModal: () => void;
+}
 
 // 현금 충전요청 화면
-const MoneyReqireIndicator = () => {
+//props 전달
+const MoneyReqireIndicator: React.FC<MoneyReqireIndicatorProps> = ({ openProfileModal }) => {
   return (
     <MoneyRequireContainer>
       <div className="Notification">{moneyRequireText}</div>
-      <button className="LoginButton">{moenyRequireBtnText}</button>
+      <button className="LoginButton" onClick={openProfileModal}>{moenyRequireBtnText}</button>
     </MoneyRequireContainer>
   );
 };
 
+interface MoneyReqireIndicatorProps {
+  openProfileModal: () => void;
+}
+
 // component 생성
 const Container = styled.aside<{ orderSet: boolean }>`
   position: fixed;
@@ -270,6 +285,7 @@ const LoginRequestContainer = styled.div`
     background-color: #2f4f4f;
     border: none;
     border-radius: 0.3rem;
+    cursor: pointer;  
   }
 `;
 

diff --git a/client/src/components/watchlist/WatchList.tsx b/client/src/components/watchlist/WatchList.tsx
@@ -7,8 +7,9 @@ import useCompanyData from "../../hooks/useCompanyData";
 import useGetStars from "../../hooks/stars/useGetstars.ts"; // useGetStars 훅의 경로를 지정해주세요.
 import { useSelector } from "react-redux";
 import { RootState } from "../../store/config.ts"; 
+import LoginRequestIndicator from "../HoldingList/LoginRequestIndicator.tsx"
 
-const WatchList: React.FC<WatchListProps> = ({ currentListType, onChangeListType }) => {
+const WatchList: React.FC<WatchListProps> = ({ currentListType, onChangeListType, openOAuthModal}) => {
   const [isMenuOpen, setMenuOpen] = useState(false);
   const loginStatus = useSelector((state: RootState) => state.login);
 
@@ -28,7 +29,7 @@ const WatchList: React.FC<WatchListProps> = ({ currentListType, onChangeListType
   useEffect(() => {
     console.log("Updated starredCompanyIds:", starredCompanyIds);  // 여기가 출력되는지 확인
   }, [starredCompanyIds]);
-  
+
   const handleCompanyDelete = (deletedCompanyId: number) => {
     console.log("Company ID to delete:", deletedCompanyId);  // 여기가 출력되는지 확인
     setStarredCompanyIds(prevState => prevState.filter(id => id !== deletedCompanyId));
@@ -51,7 +52,7 @@ const WatchList: React.FC<WatchListProps> = ({ currentListType, onChangeListType
         ) : loginStatus === 1 ? (
           companiesList.filter((company) => starredCompanyIds.includes(company.companyId)).map((company) => <StockItem key={company.companyId} company={company} onDelete={handleCompanyDelete} />)
         ) : (
-          <div>로그인이 필요합니다.</div>
+          <LoginRequestIndicator openOAuthModal={openOAuthModal} />
         )}
       </StockList>
     </WatchListContainer>
@@ -61,6 +62,7 @@ const WatchList: React.FC<WatchListProps> = ({ currentListType, onChangeListType
 type WatchListProps = {
   currentListType: "전체종목" | "관심종목" | "보유종목";
   onChangeListType: (type: "전체종목" | "관심종목" | "보유종목") => void;
+  openOAuthModal: () => void;  // Add this line
 };
 
 const WatchListContainer = styled.div`

diff --git a/client/src/page/MainPage.tsx b/client/src/page/MainPage.tsx
@@ -179,13 +179,14 @@ const MainPage = () => {
           {selectedMenu === "전체종목" ? (
             <EntireList currentListType={selectedMenu} onChangeListType={handleMenuChange} />
           ) : selectedMenu === "관심종목" ? (
-            <WatchList currentListType={selectedMenu} onChangeListType={handleMenuChange} />
+            <WatchList currentListType={selectedMenu} onChangeListType={handleMenuChange} openOAuthModal={openOAuthModal}/>
           ) : selectedMenu === "보유종목" ? (
-            <HoldingList currentListType={selectedMenu} onChangeListType={handleMenuChange} />
+              <HoldingList currentListType={selectedMenu} onChangeListType={handleMenuChange} openOAuthModal={openOAuthModal} />
           ) : null}
         </LeftSection>
         <CentralChart />
-        <StockOrderSection />
+        {/* props전달 */}
+        <StockOrderSection openOAuthModal={openOAuthModal} openProfileModal={openProfileModal} />
         <TabContainerPage></TabContainerPage>
       </Main>
       {isOAuthModalOpen && (