From 9981be13acddcbea6015d57ad99a0660e63f1594 Mon Sep 17 00:00:00 2001 From: novice1993 Date: Sun, 24 Sep 2023 02:47:15 +0900 Subject: [PATCH] =?UTF-8?q?[Add]=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81=20?= =?UTF-8?q?=EC=98=88=EC=8B=9C=20=EC=BD=94=EB=93=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 리팩토링 예시 코드 작성 Issues #122 --- .../src/components/EntireList/EntireList.tsx | 22 +- .../components/HoldingList/HoldingList.tsx | 22 +- .../HoldingList/LoginRequestIndicator.tsx | 15 +- .../LeftStockListSection/EntireList.tsx | 91 ---- .../LeftStockListSection/HoldingList.tsx | 139 ------ .../components/LeftStockListSection/Index.tsx | 6 +- .../LoginRequestIndicator.tsx | 46 -- .../LeftStockListSection/StockItem.tsx | 420 ------------------ client/src/components/watchlist/WatchList.tsx | 22 +- 9 files changed, 17 insertions(+), 766 deletions(-) delete mode 100644 client/src/components/LeftStockListSection/EntireList.tsx delete mode 100644 client/src/components/LeftStockListSection/HoldingList.tsx delete mode 100644 client/src/components/LeftStockListSection/LoginRequestIndicator.tsx delete mode 100644 client/src/components/LeftStockListSection/StockItem.tsx diff --git a/client/src/components/EntireList/EntireList.tsx b/client/src/components/EntireList/EntireList.tsx index 0fcf056..4f3c979 100644 --- a/client/src/components/EntireList/EntireList.tsx +++ b/client/src/components/EntireList/EntireList.tsx @@ -1,6 +1,5 @@ import React, { useState, useEffect } from "react"; import styled from "styled-components"; -import Header from "./Header"; import StockItem from "./StockItem"; import useCompanyData from "../../hooks/useCompanyData"; import { useSelector } from "react-redux"; // 👈 추가 @@ -23,8 +22,7 @@ import useGetCash from "../../hooks/useGetCash"; const holdingAmountText = "보유 현금"; const amountUnit = "원"; -const EntireList: React.FC = ({ currentListType, onChangeListType }) => { - const [isMenuOpen, setMenuOpen] = useState(false); +const EntireList = () => { const [showChangePrice, setShowChangePrice] = useState(false); // useCompanyData 훅 사용하여 데이터 가져오기 @@ -52,9 +50,6 @@ const EntireList: React.FC = ({ currentListType, onChangeListTy return ( - -
- {/* */} {/* {isLogin == 0 ? (로그인이 필요한 서비스 입니다.) : (현금 보유량: {holdingsAmount}원)} */} @@ -79,27 +74,14 @@ const EntireList: React.FC = ({ currentListType, onChangeListTy export default EntireList; -// Props와 상태에 대한 타입 정의 -type EntireListProps = { - currentListType: "전체종목" | "관심종목" | "보유종목"; - onChangeListType: (type: "전체종목" | "관심종목" | "보유종목") => void; -}; - // WatchList 컴포넌트에 대한 스타일드 컴포넌트 정의 const WatchListContainer = styled.div` - height: calc(100vh - 53px); + height: calc(100vh - 95px); display: flex; flex-direction: column; align-items: flex-start; `; -const Header1Container = styled.div` - // 🔴 - width: 100%; - height: 48px; - display: flex; -`; - const Header2Container = styled.div<{ isLogin: number }>` // 🔴 width: 100%; diff --git a/client/src/components/HoldingList/HoldingList.tsx b/client/src/components/HoldingList/HoldingList.tsx index 18d03ea..f46b0d6 100644 --- a/client/src/components/HoldingList/HoldingList.tsx +++ b/client/src/components/HoldingList/HoldingList.tsx @@ -1,6 +1,5 @@ import React, { useState } from "react"; import styled from "styled-components"; -import Header from "./Header"; import StockItem from "./StockItem"; import useGetStockHolds from "../../hooks/useGetStockholds"; import { StockItemProps } from "./StockItem"; @@ -13,8 +12,7 @@ import { useSelector } from "react-redux"; const evalutationProfitText = "평가 수익금"; const profitUnit = "원"; -const HoldingList: React.FC = ({ currentListType, onChangeListType }) => { - const [isMenuOpen, setMenuOpen] = useState(false); +const HoldingList = () => { const [showChangePrice, setShowChangePrice] = useState(false); const { stockHolds, stockHoldsLoading: isLoading, stockHoldsError: isError } = useGetStockHolds(); @@ -39,9 +37,6 @@ const HoldingList: React.FC = ({ currentListType, onChangeListTy return ( - -
- {/* */} @@ -75,27 +70,14 @@ const HoldingList: React.FC = ({ currentListType, onChangeListTy export default HoldingList; -type WatchListProps = { - currentListType: "전체종목" | "관심종목" | "보유종목"; - onChangeListType: (type: "전체종목" | "관심종목" | "보유종목") => void; - openOAuthModal: () => void; -}; - const WatchListContainer = styled.div` width: 100%; - height: calc(100vh - 53px); + height: calc(100vh - 95px); display: flex; flex-direction: column; align-items: flex-start; `; -const Header1Container = styled.div` - width: 100%; - height: 48px; - display: flex; - border-bottom: 1px solid black; -`; - const Header2Container = styled.div` width: 100%; height: 43.5px; diff --git a/client/src/components/HoldingList/LoginRequestIndicator.tsx b/client/src/components/HoldingList/LoginRequestIndicator.tsx index 83edfff..f95e903 100644 --- a/client/src/components/HoldingList/LoginRequestIndicator.tsx +++ b/client/src/components/HoldingList/LoginRequestIndicator.tsx @@ -3,16 +3,13 @@ import React from "react"; import styled from "styled-components"; - -interface LoginRequestIndicatorProps { - openOAuthModal: () => void; -} - -const LoginRequestIndicator: React.FC = ({ openOAuthModal }) => { +const LoginRequestIndicator = () => { return (
로그인이 필요한 서비스입니다.
- + ); }; @@ -39,8 +36,8 @@ const LoginRequestContainer = styled.div` background-color: #2f4f4f; border: none; border-radius: 0.3rem; - cursor: pointer; + cursor: pointer; } `; -export default LoginRequestIndicator; \ No newline at end of file +export default LoginRequestIndicator; diff --git a/client/src/components/LeftStockListSection/EntireList.tsx b/client/src/components/LeftStockListSection/EntireList.tsx deleted file mode 100644 index 301ef0d..0000000 --- a/client/src/components/LeftStockListSection/EntireList.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import { useState, useEffect } from "react"; -import styled from "styled-components"; -import StockItem from "./StockItem"; -import useCompanyData from "../../hooks/useCompanyData"; -import { useSelector } from "react-redux"; // 👈 추가 -import { StateProps } from "../../models/stateProps"; // 👈 추가 -import useGetCash from "../../hooks/useGetCash"; - -const holdingAmountText = "보유 현금"; -const amountUnit = "원"; - -const EntireList = () => { - const { data: companies, isLoading, isError } = useCompanyData(1, 14); - const { cashData: holdingsAmount } = useGetCash(); - const companiesList = companies || []; - - const [showChangePrice, setShowChangePrice] = useState(false); - const [holdingCash, setHoldingCash] = useState(""); - const isLogin = useSelector((state: StateProps) => state.login); - - useEffect(() => { - if (holdingsAmount) { - const holdingCash = holdingsAmount.toLocaleString(); - setHoldingCash(holdingCash); - } - }, [holdingsAmount]); - - return ( - - {isLogin === 1 && ( - - -
{holdingAmountText}
-
- {holdingCash} {amountUnit} -
- - - )} - - {isLoading ?
: isError ?
Error fetching data
: companiesList.map((company) => )} - - - ); -}; - -export default EntireList; - -const Container = styled.div` - height: calc(100vh - 95px); - display: flex; - flex-direction: column; - align-items: flex-start; -`; - -const Header2Container = styled.div<{ isLogin: number }>` - width: 100%; - height: ${(props) => (props.isLogin === 0 ? "0px" : "43.5px")}; - display: flex; - justify-content: center; - align-items: center; - - border-bottom: ${(props) => (props.isLogin === 0 ? "" : "1px solid black")}; -`; - -const HoldingsAmount = styled.div<{ isLogin: number }>` - width: 100%; - height: 100%; - display: ${(props) => (props.isLogin === 0 ? "none" : "flex")}; - flex-direction: row; - padding-left: 14px; - align-items: center; - gap: 6.5px; - font-size: 0.95em; - font-weight: 570; - color: black; - - .amount { - color: #2f4f4f; - } -`; - -const StockList = styled.div` - height: 100%; - width: 100%; - overflow-y: auto; /* 세로 스크롤을 활성화합니다 */ - - &::-webkit-scrollbar { - display: none; - } -`; diff --git a/client/src/components/LeftStockListSection/HoldingList.tsx b/client/src/components/LeftStockListSection/HoldingList.tsx deleted file mode 100644 index dc69f3b..0000000 --- a/client/src/components/LeftStockListSection/HoldingList.tsx +++ /dev/null @@ -1,139 +0,0 @@ -import React, { useState } from "react"; -import styled from "styled-components"; -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 = "평가 수익금"; -const profitUnit = "원"; - -const HoldingList = () => { - const [showChangePrice, setShowChangePrice] = useState(false); - - const { stockHolds, stockHoldsLoading: isLoading, stockHoldsError: isError } = useGetStockHolds(); - const { data: companyData, isLoading: isCompanyDataLoading, isError: isCompanyDataError } = useCompanyData(1, 14); - - // 모든 stockReturn의 합을 계산합니다. - let totalEvaluationProfit = 0; - - if (Array.isArray(stockHolds) && stockHolds.length > 0) { - totalEvaluationProfit = stockHolds.reduce((sum: number, stockHold: StockItemProps["stockData"]) => sum + stockHold.stockReturn, 0); - } - - const isLogin = useSelector((state: RootState) => state.login); // 로그인 상태 가져오기 - - // OAuth 모달을 열기 위한 함수 - const openOAuthModal = () => { - // OAuth 로그인 모달을 열기 위한 로직 - }; - - return ( - - - -
{evalutationProfitText}
-
- {totalEvaluationProfit.toLocaleString()} {profitUnit} -
- - - - {isLogin === 0 ? ( - - ) : isLoading || isCompanyDataLoading ? ( -
- ) : isError || isCompanyDataError ? ( -
Error fetching data
- ) : ( - Array.isArray(stockHolds) && - stockHolds.length > 0 && - stockHolds.map((stockHold: StockItemProps["stockData"]) => { - const matchedCompany = companyData ? companyData.find((company) => company.companyId === stockHold.companyId) : undefined; - - return matchedCompany ? : null; - }) - )} - - - ); -}; - -export default HoldingList; - -type StockItemProps = { - stockData: { - stockHoldId: number; - memberId: number; - companyId: number; - companyKorName: string; - stockCount: number; - totalPrice: number; - percentage: number; - stockReturn: number; - reserveSellStockCount: number; - }; - companyData?: { - companyId: number; - code: string; - korName: string; - stockPrice: string; - stockChangeAmount: string; - stockChangeRate: string; - }; - setShowChangePrice: (value: boolean) => void; - showChangePrice: boolean; -}; - -const WatchListContainer = styled.div` - width: 100%; - height: calc(100vh - 53px); - display: flex; - flex-direction: column; - align-items: flex-start; -`; - -const Header2Container = styled.div` - width: 100%; - height: 43.5px; - display: flex; - justify-content: center; - align-items: center; -`; - -const EvaluationProfit = styled.div<{ profit: number }>` - width: 100%; - height: 100%; - display: flex; - flex-direction: row; - align-items: center; - font-size: 0.95em; - font-weight: 570; - gap: 6.5px; - padding-left: 14px; - text-align: "center"; - color: ${(props) => (props.profit === 0 ? "#000" : props.profit > 0 ? "#e22926" : "#2679ed")}; - border-bottom: 1px solid black; - - .profitText { - color: black; - } - - .profit { - color: #2f4f4f; - } -`; - -const StockList = styled.div` - height: 100%; - width: 100%; - overflow-y: auto; /* 세로 스크롤을 활성화합니다 */ - - &::-webkit-scrollbar { - display: none; - } -`; diff --git a/client/src/components/LeftStockListSection/Index.tsx b/client/src/components/LeftStockListSection/Index.tsx index 58b1f6f..e83a7d6 100644 --- a/client/src/components/LeftStockListSection/Index.tsx +++ b/client/src/components/LeftStockListSection/Index.tsx @@ -2,8 +2,9 @@ import { useSelector } from "react-redux"; import { styled } from "styled-components"; import { StateProps } from "../../models/stateProps"; import Header from "./Header"; -import EntireList from "./EntireList"; -import HoldingList from "./HoldingList"; +import EntireList from "../EntireList/EntireList"; +import WatchList from "../watchlist/WatchList"; +import HoldingList from "../HoldingList/HoldingList"; const LeftStockListSection = () => { const stockListType = useSelector((state: StateProps) => state.leftStockListType); @@ -12,6 +13,7 @@ const LeftStockListSection = () => {
{stockListType === 0 && } + {stockListType === 1 && } {stockListType === 2 && } ); diff --git a/client/src/components/LeftStockListSection/LoginRequestIndicator.tsx b/client/src/components/LeftStockListSection/LoginRequestIndicator.tsx deleted file mode 100644 index 83edfff..0000000 --- a/client/src/components/LeftStockListSection/LoginRequestIndicator.tsx +++ /dev/null @@ -1,46 +0,0 @@ -// LoginRequestIndicator.tsx - -import React from "react"; -import styled from "styled-components"; - - -interface LoginRequestIndicatorProps { - openOAuthModal: () => void; -} - -const LoginRequestIndicator: React.FC = ({ openOAuthModal }) => { - return ( - -
로그인이 필요한 서비스입니다.
- - - ); -}; - -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; \ No newline at end of file diff --git a/client/src/components/LeftStockListSection/StockItem.tsx b/client/src/components/LeftStockListSection/StockItem.tsx deleted file mode 100644 index a35f4c3..0000000 --- a/client/src/components/LeftStockListSection/StockItem.tsx +++ /dev/null @@ -1,420 +0,0 @@ -import React, { useState } from "react"; -import styled from "styled-components"; - -import { useDispatch, useSelector } from "react-redux"; -import { changeCompanyId } from "../../reducer/CompanyId-Reducer"; - -import star_icon from "../../asset/icon/star_icon.png"; -import star_filled_icon from "../../asset/icon/star_filled_icon.png"; - -import usePostStar from "../../hooks/stars/usePoststars"; -import useDeleteStar from "../../hooks/stars/useDeletestars"; -import useGetStar from "../../hooks/stars/useGetstars"; - -import { dummyLogo } from "../../dummy/dummyLogo"; -import { StateProps } from "../../models/stateProps"; - -import kia from "../../asset/logos/기아.svg"; -import dy from "../../asset/logos/디와이.jpeg"; -import logosamsung from "../../asset/logos/삼성전자.svg"; -import celltrion from "../../asset/logos/셀트리온.svg"; -import ecopro from "../../asset/logos/에코프로.jpeg"; -import ecoproBM from "../../asset/logos/에코프로비엠.svg"; -import kakaoBank from "../../asset/logos/카카오뱅크.svg"; -import kuckoo from "../../asset/logos/쿠쿠홀딩스.jpeg"; -import hanse from "../../asset/logos/한세엠케이.jpeg"; -import hyundai from "../../asset/logos/현대차.svg"; -import KG from "../../asset/logos/KG케미칼.png"; -import LGelec from "../../asset/logos/LG전자.svg"; -import LGchem from "../../asset/logos/LG화학.svg"; -import posco from "../../asset/logos/POSCO홀딩스.svg"; - -const StockItem: React.FC = ({ company, stockData, companyData }) => { - const stockListType = useSelector((state: StateProps) => state.leftStockListType); - - // 전체종목 관련 코드 - const dispatch = useDispatch(); - const [showChangePrice, setShowChangePrice] = useState(false); // 상태를 여기로 이동 - const [isHovering, setIsHovering] = useState(false); // 마우스 호버 상태 - const { data: starredData } = useGetStar(); - const starredCompanyIds = starredData?.map((item) => item.companyResponseDto.companyId) || []; - const [isFavorited, setIsFavorited] = useState(starredCompanyIds.includes(company.companyId)); - const postMutation = usePostStar(); - const deleteMutation = useDeleteStar(); - - if (stockListType === 0) { - const isPositiveChange = parseFloat(company.stockChangeRate) > 0; - - const companyLogo = dummyLogo[company.companyId]; - - const priceColor1 = isPositiveChange ? "#e22926" : "#2679ed"; - const priceColor2 = isPositiveChange ? "#e22926" : "#2679ed"; - - const toggleFavorite: React.MouseEventHandler = (e) => { - e.stopPropagation(); - - if (isFavorited) { - deleteMutation.mutate(company.companyId); - } else { - postMutation.mutate(company.companyId); - } - setIsFavorited(!isFavorited); - }; - - const handleItemClick = () => { - dispatch(changeCompanyId(company.companyId)); - }; - - const price = parseInt(company.stockPrice).toLocaleString(); - const changeAmout = parseInt(company.stockChangeAmount).toLocaleString(); - const priceUnit = "원"; - - return ( - { - setShowChangePrice(true); - setIsHovering(true); - }} - onMouseLeave={() => { - setShowChangePrice(false); - setIsHovering(false); - }} - > - - - - - - - {company.korName} - {company.code} - - - - {price} {priceUnit} - - {showChangePrice ? `${changeAmout} ${priceUnit}` : `${company.stockChangeRate}%`} - - - ); - } - - // 보유종목 관련 코드 - - if (stockListType === 2) { - const { stockCount, reserveSellStockCount, totalPrice, percentage, stockReturn } = stockData; - const totalStocksHeld = stockCount + reserveSellStockCount; - const company = companyData ? companyData : undefined; - - const { code = "", korName = "", stockPrice = "", stockChangeAmount = "", stockChangeRate = "" } = company || {}; - const price = parseInt(stockPrice); - const priceChangeAmount = parseInt(stockChangeAmount); - - // Format percentage to two decimal places - const formattedPercentage = parseFloat(percentage.toFixed(2)); - // 이미 import된 로고들을 바탕으로 logos 객체 생성 - const logos: { [key: string]: string } = { - 삼성전자: logosamsung, - POSCO홀딩스: posco, - 셀트리온: celltrion, - 에코프로: ecopro, - 에코프로비엠: ecoproBM, - 디와이: dy, - 쿠쿠홀딩스: kuckoo, - 카카오뱅크: kakaoBank, - 한세엠케이: hanse, - KG케미칼: KG, - LG화학: LGchem, - 현대차: hyundai, - LG전자: LGelec, - 기아: kia, - }; - // 그리고 나서, 이 `logos` 객체를 사용하여 기업명에 따라 적절한 로고를 선택할 수 있습니다. - const companyLogo = company ? logos[company.korName] || logo : logo; // 기본 로고를 대체로 사용 - - const starredCompanyIds = starredData?.map((item) => item.companyResponseDto.companyId) || []; - - const handleItemClick = () => { - dispatch(changeCompanyId(stockData.companyId)); - }; - - const toggleFavorite: React.MouseEventHandler = (e) => { - e.stopPropagation(); - - if (isFavorited) { - deleteMutation.mutate(stockData.companyId); - } else { - postMutation.mutate(stockData.companyId); - } - setIsFavorited(!isFavorited); - }; - - return ( - - { - setShowChangePrice(true); - setIsHovering(true); - }} - onMouseLeave={() => { - setShowChangePrice(false); - setIsHovering(false); - }} - > - - - - - - - {korName} - {code} - - - {price.toLocaleString()} 원 - setShowChangePrice(true)} onMouseLeave={() => setShowChangePrice(false)}> - {showChangePrice ? `${priceChangeAmount.toLocaleString()} 원` : `${stockChangeRate}%`} - - - - - - 수익 - 보유 - - - {stockReturn.toLocaleString()} 원 - {totalPrice.toLocaleString()} 원 - - - {formattedPercentage}% - {totalStocksHeld}주 - - - {/* */} - - ); - } -}; - -export default StockItem; - -type NewCompanyData = { - companyId: number; - code: string; - korName: string; - stockPrice: string; - stockChangeAmount: string; - stockChangeRate: string; -}; - -type StockItemProps = { - company: NewCompanyData; - setShowChangePrice: React.Dispatch>; - showChangePrice: boolean; - stockData?: stockData; - companyData?: companyData; -}; - -interface stockData { - stockHoldId: number; - memberId: number; - companyId: number; - companyKorName: string; - stockCount: number; - totalPrice: number; - percentage: number; - stockReturn: number; - reserveSellStockCount: number; -} - -interface companyData { - companyId: number; - code: string; - korName: string; - stockPrice: string; - stockChangeAmount: string; - stockChangeRate: string; -} - -// 🔴 높이 px로 고정 -const StockItemWrapper = styled.div` - display: flex; - flex-direction: row; /* 수평으로 정렬 */ - justify-content: flex-start; /* 왼쪽 정렬 */ - align-items: flex-start; /* 위로 정렬 */ - padding: 8px 0; - border-bottom: 1px solid #e0e0e0; - width: 100%; - height: 57px; - background-color: transparent; - - &:hover { - background-color: #cee0ff; - transition: background-color 0.5s ease; - } - cursor: pointer; -`; - -// 🔴 로고 컨테이너 + 로고 크기 -const LogoContainer = styled.div` - height: 100%; - width: 48px; // 아이콘의 너비와 margin-left, margin-right의 합계를 기준으로 설정 - display: flex; - justify-content: center; - align-items: center; - position: relative; -`; - -const Logo = styled.img<{ opacity: number }>` - border-radius: 50%; - width: 28px; - height: 28px; - margin-left: 10px; - margin-right: 10px; - position: absolute; - opacity: ${(props) => props.opacity}; -`; - -const FavoriteStar = styled.div<{ opacity: number }>` - position: absolute; - width: 28px; - height: 28px; - background: url(${star_icon}) no-repeat center; - background-size: contain; - cursor: pointer; - opacity: ${(props) => props.opacity}; -`; - -const FavoriteStarFilled = styled(FavoriteStar)<{ opacity: number }>` - background: url(${star_filled_icon}) no-repeat center; - background-size: contain; // 👈 이 부분도 추가 -`; - -// 🔴 font 사이즈 -const StockInfo = styled.div` - height: 100%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: flex-start; - padding-top: 3px; - margin-right: 16px; -`; - -const StockName = styled.span` - font-size: 15px; - font-weight: 400; -`; - -const StockCode = styled.span` - /* color: gray; */ - /* color: #2f4f4f; */ - color: darkgray; - font-weight: 400; - font-size: 13px; -`; - -const StockPriceSection = styled.div` - height: 100%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: flex-end; - padding-top: 3px; - margin-left: auto; /* 자동으로 왼쪽 여백 추가 */ - margin-right: 10px; -`; - -const StockPrice = styled.span<{ change: string }>` - font-size: 15px; - color: ${(props) => props.change}; -`; - -const StockChange = styled.span<{ change: string }>` - color: ${(props) => props.change}; - cursor: pointer; - - font-size: 13px; -`; - -// 보유종목 관련 - -const EntireContainer = styled.div` - &:hover { - background-color: #d9e6ff; - transition: background-color 0.5s ease; - - cursor: pointer; - } -`; - -const ItemContainer = styled.div` - display: flex; - align-items: center; - /* gap: 8px; */ - width: 100%; - padding: 12px 0; - border-bottom: 1px solid #e0e0e0; // Holdings에서의 스타일 추가 -`; - -const StockDetails = styled.div` - display: flex; - /* justify-content: space-between; */ - /* gap: 15px; */ - /* padding: 8px 0; */ - align-items: center; - padding-top: 11px; - padding-bottom: 11px; - border-bottom: 1px solid darkgray; - width: 100%; -`; - -const DetailSection01 = styled.div` - flex: 1.4 0 0; - display: flex; - flex-direction: column; - align-items: flex-start; - padding-left: 12px; - gap: 2px; - /* padding-right: 10px; */ -`; - -const DetailSection02 = styled.div` - flex: 4 0 0; - display: flex; - flex-direction: column; - align-items: flex-start; - /* align-items: center; */ - justify-content: center; - gap: 2px; - padding-left: 3px; - /* padding-right: 10px; */ -`; - -const DetailSection03 = styled.div` - flex: 4 0 0; - display: flex; - flex-direction: column; - align-items: flex-end; - gap: 2px; - padding-left: 10px; - padding-right: 12px; -`; - -const DetailTitle = styled.span` - font-weight: light; - /* font-weight: 420; */ - font-size: 14px; -`; - -const DetailData = styled.span` - font-size: 14px; // Setting standardized font size for all data -`; - -const ColoredDetailData = styled.span<{ priceChangeAmount: number }>` - color: ${(props) => (props.priceChangeAmount > 0 ? "#e22926" : "#2679ed")}; - font-size: 14px; -`; diff --git a/client/src/components/watchlist/WatchList.tsx b/client/src/components/watchlist/WatchList.tsx index 1ae886a..4f54040 100644 --- a/client/src/components/watchlist/WatchList.tsx +++ b/client/src/components/watchlist/WatchList.tsx @@ -1,7 +1,6 @@ import React, { useState, useEffect } from "react"; import styled from "styled-components"; import StockSearchComponent from "./StockSearchComponent.tsx"; -import Header from "./Header.tsx"; import StockItem from "./StockItem.tsx"; import useCompanyData from "../../hooks/useCompanyData"; import useGetStars from "../../hooks/stars/useGetstars.ts"; // useGetStars 훅의 경로를 지정해주세요. @@ -9,8 +8,7 @@ import { useSelector } from "react-redux"; import { RootState } from "../../store/config.ts"; import LoginRequestIndicator from "../HoldingList/LoginRequestIndicator.tsx"; -const WatchList: React.FC = ({ currentListType, onChangeListType, openOAuthModal }) => { - const [isMenuOpen, setMenuOpen] = useState(false); +const WatchList = () => { const loginStatus = useSelector((state: RootState) => state.login); const { data: companies, isLoading, isError } = useCompanyData(1, 14); @@ -33,9 +31,6 @@ const WatchList: React.FC = ({ currentListType, onChangeListType }; return ( - -
- @@ -49,32 +44,21 @@ const WatchList: React.FC = ({ currentListType, onChangeListType ) : loginStatus === 1 ? ( companiesList.filter((company) => starredCompanyIds.includes(company.companyId)).map((company) => ) ) : ( - + )} ); }; -type WatchListProps = { - currentListType: "전체종목" | "관심종목" | "보유종목"; - onChangeListType: (type: "전체종목" | "관심종목" | "보유종목") => void; - openOAuthModal: () => void; // Add this line -}; - const WatchListContainer = styled.div` width: 247px; - height: calc(100vh - 53px); + height: calc(100vh - 95px); display: flex; flex-direction: column; align-items: flex-start; `; -const Header1Container = styled.div` - height: 48px; - display: flex; -`; - const Header2Container = styled.div` height: 43.5px; display: flex;