Merge pull request #121 from codestates-seb/dev-client#19/watchList

[FE] 헤더, 왼쪽 섹션 디자인 수정 Dev client#19/watch list

client/package.json

@@ -25,6 +25,7 @@
     "react-redux": "^8.1.2",
     "react-router-dom": "^6.15.0",
     "react-toastify": "^9.1.3",
+    "redux-persist": "^6.0.0",
     "styled-components": "^6.0.7"
   },
   "devDependencies": {

client/src/components/EntireList/EntireList.tsx

@@ -4,8 +4,11 @@ import styled from 'styled-components';
 import Header from './Header';
 import StockItem from './StockItem';
 import useCompanyData from '../../hooks/useCompanyData';
-import { useSelector } from 'react-redux'; 
-import { RootState } from '../../store/config'; 
+import { useSelector } from 'react-redux'; // 👈 추가
+import { StateProps } from '../../models/stateProps'; // 👈 추가
+import useGetCash from '../../hooks/useGetCash'; 
+
+
 
 
 const EntireList: React.FC<EntireListProps> = ({ currentListType, onChangeListType }) => {
@@ -18,18 +21,23 @@ const EntireList: React.FC<EntireListProps> = ({ currentListType, onChangeListTy
   // 'companies'가 'undefined'인 경우를 처리하기 위해 빈 배열로 초기화
   const companiesList = companies || [];
 
-    // 현금 보유량 가져오기
-  // 현금 보유량 가져오기: Redux store에서 직접 가져옵니다.
-  const holdingsAmount = useSelector((state: RootState) => state.cash.money) || "0";
+  // 로그인 상태 가져오기
+  const isLogin = useSelector((state: StateProps) => state.login);
 
+  // useGetCash 훅을 사용하여 현금 보유량 가져오기
+  const { cashData: holdingsAmount } = useGetCash(); // 👈 useGetCash 훅을 사용하여 현금 보유량 데이터를 가져옵니다.
 
 
   return (
     <WatchListContainer>
-      <Header currentListType={currentListType} onChangeListType={onChangeListType} isMenuOpen={isMenuOpen} setMenuOpen={setMenuOpen} />
-      <Divider1 />
-      <HoldingsAmount>현금 보유량: {holdingsAmount}원</HoldingsAmount> {/* 현금 보유량 표시 */}
-      <Divider2 />
+      <Header1Container>
+        <Header currentListType={currentListType} onChangeListType={onChangeListType} isMenuOpen={isMenuOpen} setMenuOpen={setMenuOpen} />
+      </Header1Container>
+      <Divider />
+      <Header2Container>
+        {isLogin == 0 ? (<HoldingsAmount>로그인이 필요한 서비스 입니다.</HoldingsAmount>) : (<HoldingsAmount>현금 보유량: {holdingsAmount}원</HoldingsAmount>)}
+      </Header2Container>
+      <Divider />
       <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>
@@ -53,11 +61,21 @@ const WatchListContainer = styled.div`
   align-items: flex-start;
 `;
 
-const Divider1 = styled.div`
-  margin: 0px;
-  padding: 0px;
+const Header1Container =styled.div`
+  height: 48px;
+  display: flex;
+
+`;
+
+const Header2Container =styled.div`
+  height: 43.5px;
+  display: flex;
+  justify-content:center;
+  align-items: center;
+`;
+
+const Divider = styled.div`
   width: 100%;
-  height: 10px;
   display: flex;
   flex-direction: row;
   border-bottom: 1px solid #2f4f4f;
@@ -66,21 +84,10 @@ const Divider1 = styled.div`
 const HoldingsAmount = styled.div`
   font-size: 16px;
   font-weight: bold;
-  margin: 8px 12px;
-  text-align: center;
+  margin-left: 20px;
   color: darkslategray; // 현금 보유량을 파란색으로 표시
 `;
 
-const Divider2 = styled.div`
-  margin: 0px;
-  padding: 0px;
-  width: 100%;
-  height: 4.5px;
-  display: flex;
-  flex-direction: row;
-  border-bottom: 1px solid #2f4f4f;
-`;
-
 const StockList = styled.div`
   height: 100%;
   width: 100%;

client/src/components/EntireList/Header.tsx

@@ -17,7 +17,7 @@ const Header: React.FC<HeaderProps> = ({ currentListType, onChangeListType, isMe
       <HeaderText>{currentListType}</HeaderText>
       {isMenuOpen && (
         <SlideMenu>
-          <MenuItem onClick={() => { onChangeListType(ALL_LIST); setMenuOpen(false); }}>{ALL_LIST}</MenuItem>
+          <MenuItem1 onClick={() => { onChangeListType(ALL_LIST); setMenuOpen(false); }}>{ALL_LIST}</MenuItem1>
           <MenuItem onClick={() => { onChangeListType(INTEREST_LIST); setMenuOpen(false); }}>{INTEREST_LIST}</MenuItem>
           <MenuItem onClick={() => { onChangeListType(HOLDING_LIST); setMenuOpen(false); }}>{HOLDING_LIST}</MenuItem>
         </SlideMenu>
@@ -41,36 +41,50 @@ const HeaderWrapper = styled.div`
 `;
 
 const Icon = styled.img`
-  margin-top: 9.5px;
-  margin-left: 10px;
+  margin: 0px 10px 0px 10px;
   width: 24px;
   height: 24px;
   cursor: pointer;
-  margin-right: 10px;
+
+  &:hover {
+    background-color: #f2f2f2; 
+  }
 `;
 
 const HeaderText = styled.span`
-  margin-top: 9.5px;
+  margin-top: 2px;
   font-size: 18px;
 `;
 
 const SlideMenu = styled.div`
   position: absolute;
   top: 100%;
   left: 0;
-  width: 248px;
+  width: 247px;
   background-color: #f7f7f7;
-  border: 1px solid #e0e0e0; /* 밑에 가로줄 추가 */
+  border-top: 1px solid black; 
+  border-right: 1px solid black; 
+  border-left: 1px solid black; 
   display: flex;
   flex-direction: column;
 `;
 
 const MenuItem = styled.button`
-  padding: 8px 16px;
+  height: 40px;
+  padding: 8px 44px;
   border: none;
-  background-color: transparent;
+  background-color: white;
   cursor: pointer;
   text-align: left;
+  border-bottom:1px solid black;
+  font-size: 17px;
+
+  &:hover {
+    background-color: #f2f2f2; 
+  }
+`;
+const MenuItem1 = styled(MenuItem)`
+  border-left: 4px solid darkslategray; 
 `;
 
 export default Header;