diff --git a/client/src/components/EntireList/EntireList.tsx b/client/src/components/EntireList/EntireList.tsx index 74e0fc27..6ea208f5 100644 --- a/client/src/components/EntireList/EntireList.tsx +++ b/client/src/components/EntireList/EntireList.tsx @@ -1,9 +1,9 @@ -import React, { useState } from 'react'; -import styled from 'styled-components'; -import Header from './Header'; -import StockItem from './StockItem'; -import useCompanyData from '../../hooks/useCompanyData'; -import { useGetCash } from '../../hooks/useCash'; // 훅 가져오기 +import React, { useState } from "react"; +import styled from "styled-components"; +import Header from "./Header"; +import StockItem from "./StockItem"; +import useCompanyData from "../../hooks/useCompanyData"; +import { useGetCash } from "../../hooks/useCash"; // 훅 가져오기 const EntireList: React.FC = ({ currentListType, onChangeListType }) => { const [isMenuOpen, setMenuOpen] = useState(false); @@ -15,37 +15,19 @@ const EntireList: React.FC = ({ currentListType, onChangeListTy // 'companies'가 'undefined'인 경우를 처리하기 위해 빈 배열로 초기화 const companiesList = companies || []; - // 현금 보유량 가져오기 - const moneyId = localStorage.getItem('moneyId'); - const { data: cashData } = useGetCash(moneyId); - const holdingsAmount = cashData?.data?.money || "0"; + // 현금 보유량 가져오기 + const moneyId = localStorage.getItem("moneyId"); + const { data: cashData } = useGetCash(moneyId); + const holdingsAmount = cashData?.data?.money || "0"; return ( -
+
현금 보유량: {holdingsAmount}원 {/* 현금 보유량 표시 */} - {isLoading ? ( -
Loading...
- ) : isError ? ( -
Error fetching data
- ) : ( - companiesList.map((company) => ( - - )) - )} + {isLoading ?
Loading...
: isError ?
Error fetching data
: companiesList.map((company) => )}
); @@ -53,50 +35,54 @@ const EntireList: React.FC = ({ currentListType, onChangeListTy // Props와 상태에 대한 타입 정의 type EntireListProps = { - currentListType: '전체종목' | '관심종목' | '보유종목'; - onChangeListType: (type: '전체종목' | '관심종목' | '보유종목') => void; + currentListType: "전체종목" | "관심종목" | "보유종목"; + onChangeListType: (type: "전체종목" | "관심종목" | "보유종목") => void; }; // WatchList 컴포넌트에 대한 스타일드 컴포넌트 정의 const WatchListContainer = styled.div` + height: calc(100vh - 53px); display: flex; flex-direction: column; align-items: flex-start; `; 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 HoldingsAmount = styled.div` font-size: 16px; font-weight: bold; - margin: 8px 12px ; + margin: 8px 12px; text-align: center; - color: darkslategray // 현금 보유량을 파란색으로 표시 + 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; + margin: 0px; + padding: 0px; + width: 100%; + height: 4.5px; + display: flex; + flex-direction: row; + border-bottom: 1px solid #2f4f4f; `; const StockList = styled.div` width: 100%; - max-height: 740px; /* 스크롤이 발생할 최대 높이를 지정하세요 */ + height: 100%; overflow-y: auto; /* 세로 스크롤을 활성화합니다 */ + + &::-webkit-scrollbar { + display: none; + } `; export default EntireList;