[Feat]관심종목 재구현

로그아웃시 기능불가 검색창 컴포넌트를 삽입시켜서 검색한 종목을 리스트에 추가 리스트를 스택형태로 구현하여 이미 검색한 종목을 리스트에 저장 검색 후 중앙 차트 변경 Issues #19
codestates-seb · Sep 15, 2023 · 532ceb8 · 532ceb8
1 parent 558490f
commit 532ceb8
Show file tree

Hide file tree

Showing 6 changed files with 172 additions and 54 deletions.
diff --git a/client/src/components/EntireList/EntireList.tsx b/client/src/components/EntireList/EntireList.tsx
@@ -4,7 +4,7 @@ import Header from './Header';
 import StockItem from './StockItem';
 import useCompanyData from '../../hooks/useCompanyData';
 
-const WatchList: React.FC<WatchListProps> = ({ currentListType, onChangeListType }) => {
+const EntireList: React.FC<EntireListProps> = ({ currentListType, onChangeListType }) => {
   const [isMenuOpen, setMenuOpen] = useState(false);
   const [showChangePrice, setShowChangePrice] = useState(false);
 
@@ -46,7 +46,7 @@ const WatchList: React.FC<WatchListProps> = ({ currentListType, onChangeListType
 };
 
 // Props와 상태에 대한 타입 정의
-type WatchListProps = {
+type EntireListProps = {
   currentListType: '전체종목' | '관심종목' | '보유종목';
   onChangeListType: (type: '전체종목' | '관심종목' | '보유종목') => void;
 };
@@ -88,9 +88,9 @@ text-align: center;
 color: red; // 수익금이 플러스일 경우 초록색으로 표시
 `;
 const StockList = styled.div`
-  width: 90%;
-  max-height: 800px; /* 스크롤이 발생할 최대 높이를 지정하세요 */
+  width: 100%;
+  max-height: 740px; /* 스크롤이 발생할 최대 높이를 지정하세요 */
   overflow-y: auto; /* 세로 스크롤을 활성화합니다 */
 `;
 
-export default WatchList;
+export default EntireList;
diff --git a/client/src/components/EntireList/Header.tsx b/client/src/components/EntireList/Header.tsx
@@ -42,6 +42,7 @@ const HeaderWrapper = styled.div`
 
 const Icon = styled.img`
   margin-top: 9.5px;
+  margin-left: 10px;
   width: 24px;
   height: 24px;
   cursor: pointer;

diff --git a/client/src/components/HoldingList/Holdings.tsx b/client/src/components/HoldingList/Holdings.tsx
@@ -29,7 +29,7 @@ const Holdings: React.FC<holdingsProps> = ({ currentListType, onChangeListType }
         {isMenuOpen && (
           <SlideMenu>
             <MenuItem onClick={() => { onChangeListType('관심종목'); setMenuOpen(false); }}>관심종목</MenuItem>
-            <MenuItem onClick={() => { onChangeListType('보유종목'); setMenuOpen(false); }}>투자종목</MenuItem>
+            <MenuItem onClick={() => { onChangeListType('보유종목'); setMenuOpen(false); }}>보유종목</MenuItem>
             <MenuItem onClick={() => { onChangeListType('전체종목'); setMenuOpen(false); }}>전체종목</MenuItem>
           </SlideMenu>
         )}

diff --git a/client/src/components/watchlist/StockSearchComponent.tsx b/client/src/components/watchlist/StockSearchComponent.tsx
@@ -0,0 +1,97 @@
+import React, { useState } from 'react';
+import { useDispatch } from "react-redux";
+import styled from "styled-components";
+import { changeCompanyId } from "../../reducer/CompanyId-Reducer";
+import useGetCompanyList from "../../hooks/useGetCompanyList";
+
+const stockSearch = "종목 검색";
+const search = "검색";
+const noExistCompany = "noExistCompany";
+const existCompany = "existCompany";
+
+const StockSearchComponent: React.FC = () => {
+  const dispatch = useDispatch();
+  const { companyList } = useGetCompanyList();
+  const [searchWord, setSearchWord] = useState("");
+
+  const handleChangeSearchWord = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchWord(e.target.value);
+  };
+
+  const handleSearchCompany = () => {
+    let searchResult: string = noExistCompany;
+
+    companyList.forEach((company: CompanyProps) => {
+      if (company.korName === searchWord) {
+        searchResult = existCompany;
+        dispatch(changeCompanyId(company.companyId));
+      }
+    });
+
+    if (searchResult === noExistCompany) {
+      dispatch(changeCompanyId(-1));
+    }
+  };
+
+  const handlePressEnterToSearch = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.code === "Enter" && e.nativeEvent.isComposing === false) {
+      handleSearchCompany();
+      setSearchWord("");
+    }
+  };
+
+  return (
+    <SearchContainer>
+      <StyledSearchInput 
+        value={searchWord}
+        onChange={handleChangeSearchWord} 
+        onKeyDown={handlePressEnterToSearch} 
+        placeholder={stockSearch}
+      />
+      <StyledSearchButton onClick={handleSearchCompany}>{search}</StyledSearchButton>
+    </SearchContainer>
+  );
+};
+
+export default StockSearchComponent;
+
+interface CompanyProps {
+    companyId: number;
+    code: string;
+    korName: string;
+    stockAsBiResponseDto: null;
+    stockInfResponseDto: null;
+}
+
+// 스타일 정의
+
+const SearchContainer = styled.div`
+  display: flex;
+  align-items: center;
+  flex-grow: 0.7;
+`;
+
+const StyledSearchInput = styled.input.attrs({
+  type: "text",
+  placeholder: "검색...",
+})`
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  flex: 1;
+`;
+
+const StyledSearchButton = styled.button`
+  background-color: #fff;
+  color: #2f4f4f;
+  border: 1px solid #2f4f4f;
+  padding: 0.5rem 1rem;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+  &:hover {
+    background-color: #f2f2f2;
+  }
+  margin-left: 0.5rem;
+`;
diff --git a/client/src/components/watchlist/WatchList.tsx b/client/src/components/watchlist/WatchList.tsx
@@ -1,19 +1,40 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
+import StockSearchComponent from './StockSearchComponent';
 import Header from './Header';
 import StockItem from './StockItem';
 import useCompanyData from '../../hooks/useCompanyData';
+import { useSelector } from 'react-redux';
+import { RootState } from '../../store/config.ts';  // Redux store의 RootState를 import해야 합니다.
 
 const WatchList: React.FC<WatchListProps> = ({ currentListType, onChangeListType }) => {
   const [isMenuOpen, setMenuOpen] = useState(false);
   const [showChangePrice, setShowChangePrice] = useState(false);
 
+  const loginStatus = useSelector((state: RootState) => state.login);
+
+
   // useCompanyData 훅 사용하여 데이터 가져오기
   const { data: companies, isLoading, isError } = useCompanyData(1, 14);
 
   // 'companies'가 'undefined'인 경우를 처리하기 위해 빈 배열로 초기화
   const companiesList = companies || [];
 
+
+    // 이미 검색된 회사 ID들을 저장하는 스택 형태의 상태
+  const [searchedCompanyIds, setSearchedCompanyIds] = useState<number[]>([]);
+
+  // Redux store에서 선택된 회사 ID 가져오기
+  const selectedCompanyId = useSelector((state: RootState) => state.companyId);
+
+  // 새로운 회사 ID가 검색될 때마다 스택에 추가
+  useEffect(() => {
+    if (selectedCompanyId !== -1 && !searchedCompanyIds.includes(selectedCompanyId)) {
+      setSearchedCompanyIds(prevIds => [...prevIds, selectedCompanyId]);
+    }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedCompanyId]);
+
   return (
     <WatchListContainer>
       <Header
@@ -23,24 +44,29 @@ const WatchList: React.FC<WatchListProps> = ({ currentListType, onChangeListType
         setMenuOpen={setMenuOpen}
       />
       <Divider1 />
-      <EvaluationProfit>평가 수익금: +5,000,000원</EvaluationProfit> {/* 임의의 평가 수익금 */}
+      <StockSearchComponent />
       <Divider2 />
       <StockList>
-        {isLoading ? (
-          <div>Loading...</div>
-        ) : isError ? (
-          <div>Error fetching data</div>
-        ) : (
-          companiesList.map((company) => (
-            <StockItem
-              key={company.companyId}
-              company={company}
-              setShowChangePrice={setShowChangePrice}
-              showChangePrice={showChangePrice}
-            />
-          ))
-        )}
-      </StockList>
+  {isLoading ? (
+    <div>Loading...</div>
+  ) : isError ? (
+    <div>Error fetching data</div>
+  ) : loginStatus === 1 ? (
+    companiesList
+      .filter(company => searchedCompanyIds.includes(company.companyId))
+      .map((company) => (
+        <StockItem
+          key={company.companyId}
+          company={company}
+          setShowChangePrice={setShowChangePrice}
+          showChangePrice={showChangePrice}
+        />
+      ))
+  ) : (
+    <div>로그인이 필요합니다.</div>
+  )}
+</StockList>
+
     </WatchListContainer>
   );
 };
@@ -59,38 +85,29 @@ const WatchListContainer = styled.div`
 `;
 
 const Divider1 = styled.div`
-margin:0px;
-padding:0px;
-width: 100%;
-height: 10px;
-display: flex;
-flex-direction: row;
-border-bottom: 1px solid #2f4f4f;
+  margin:0px;
+  padding:0px;
+  width: 100%;
+  height: 10px;
+  display: flex;
+  flex-direction: row;
+  border-bottom: 1px solid #2f4f4f;
 `;
 
 const Divider2 = styled.div`
-margin:0px;
-padding:0px;
-width: 100%;
-height: 4.5px;
-display: flex;
-flex-direction: row;
-border-bottom: 1px solid #2f4f4f;
+  margin:0px;
+  padding:0px;
+  width: 100%;
+  height: 4.5px;
+  display: flex;
+  flex-direction: row;
+  border-bottom: 1px solid #2f4f4f;
 `;
 
-
-
-const EvaluationProfit = styled.div`
-font-size: 16px;
-font-weight: bold;
-margin: 8px 0;
-text-align: center;
-color: red; // 수익금이 플러스일 경우 초록색으로 표시
-`;
 const StockList = styled.div`
   width: 90%;
   max-height: 800px; /* 스크롤이 발생할 최대 높이를 지정하세요 */
   overflow-y: auto; /* 세로 스크롤을 활성화합니다 */
 `;
 
-export default WatchList;
+export default WatchList;
diff --git a/client/src/page/MainPage.tsx b/client/src/page/MainPage.tsx
@@ -10,8 +10,9 @@ import EmailSignupModal from "../components/Signups/EmailSignup";
 import EmailVerificationModal from "../components/Signups/EmailCertify";
 import PasswordSettingModal from "../components/Signups/Password";
 import CentralChart from "../components/CentralChart/Index";
-import WatchList from "../components/EntireList/EntireList";
-import Holdings from "../components/HoldingList/Holdings"; // Assuming you have a Holdings component
+import EntireList from "../components/EntireList/EntireList";
+import HoldingList from "../components/HoldingList/HoldingList"; 
+import WatchList from "../components/WatchList/WatchList"; // Assuming you have a Holdings component
 import CompareChartSection from "../components/CompareChartSection/Index";
 import StockOrderSection from "../components/StockOrderSection/Index";
 import Welcome from "../components/Signups/Welcome";
@@ -141,11 +142,13 @@ const MainPage = () => {
         <CompareChartSection />
         {!expandScreen.left && (
            <LeftSection>
-           {selectedMenu === "전체종목" ? (
-             <WatchList key="watchlist" currentListType={selectedMenu} onChangeListType={handleMenuChange} />
-           ) : (
-             <Holdings currentListType={selectedMenu} onChangeListType={handleMenuChange} />
-           )}
+            {selectedMenu === "전체종목" ? (
+              <EntireList key="entirelist" currentListType={selectedMenu} onChangeListType={handleMenuChange} />
+            ) : selectedMenu === "보유종목" ? (
+              <HoldingList key="holdinglist" currentListType={selectedMenu} onChangeListType={handleMenuChange} />
+            ) : (
+              <WatchList key="watchlist" currentListType={selectedMenu} onChangeListType={handleMenuChange} />
+            )}
          </LeftSection>
         )}
         <CentralChart />