diff --git a/client/src/components/MarketComponents/MarketKospiChart.tsx b/client/src/components/MarketComponents/MarketKospiChart.tsx index c49103db..5cd7e341 100644 --- a/client/src/components/MarketComponents/MarketKospiChart.tsx +++ b/client/src/components/MarketComponents/MarketKospiChart.tsx @@ -77,7 +77,7 @@ const MarketkospiChart = () => { symbol: "none", sampling: "lttb", itemStyle: { - color: function (params) { + color: function (params: any) { // 주식 상승이면 빨간색, 하락이면 파란색 반환 return params.data[1] >= params.data[0] ? "rgb(255, 0, 0)" @@ -97,26 +97,28 @@ const MarketkospiChart = () => { ]), }, - data: kospiData.map((item, index, array) => { - const currentPrice = parseFloat(item.bstp_nmix_oprc); - const previousPrice = - index > 0 - ? parseFloat(array[index - 1].bstp_nmix_oprc) - : currentPrice; + data: kospiData.map( + (item: KospiProps, index: number, array: KospiProps[]) => { + const currentPrice = parseFloat(item.bstp_nmix_oprc); + const previousPrice = + index > 0 + ? parseFloat(array[index - 1].bstp_nmix_oprc) + : currentPrice; - // 현재 가격과 이전 가격을 비교하여 색상 설정 - const color = - currentPrice > previousPrice - ? "rgb(255, 0, 0)" - : "rgb(0, 0, 255)"; + // 현재 가격과 이전 가격을 비교하여 색상 설정 + const color = + currentPrice > previousPrice + ? "rgb(255, 0, 0)" + : "rgb(0, 0, 255)"; - return { - value: currentPrice, - itemStyle: { - color: color, - }, - }; - }), + return { + value: currentPrice, + itemStyle: { + color: color, + }, + }; + } + ), }, ], grid: { diff --git a/client/src/components/StockOrderSection/PriceSetting.tsx b/client/src/components/StockOrderSection/PriceSetting.tsx index de61e944..512ade6e 100644 --- a/client/src/components/StockOrderSection/PriceSetting.tsx +++ b/client/src/components/StockOrderSection/PriceSetting.tsx @@ -18,8 +18,9 @@ const PriceSetting = (props: OwnProps) => { const [priceChangeTimer, setPriceChangeTimer] = useState(null); // 초기 설정값 및 가격 변동폭 설정 - const { askp1, askp2, askp3, askp4, askp5 } = stockInfo; - const sellingPrice = [parseInt(askp1), parseInt(askp2), parseInt(askp3), parseInt(askp4), parseInt(askp5)]; + const { askp1, askp2, askp3, askp4, askp5, askp6, askp7, askp8, askp9, askp10 } = stockInfo; + const sellingInfo = [askp1, askp2, askp3, askp4, askp5, askp6, askp7, askp8, askp9, askp10]; + const sellingPrice = sellingInfo.map((price) => parseInt(price)); const existSellingPrice = sellingPrice.filter((price) => price !== 0); // price 0인 경우 제거 const defaultPrice = existSellingPrice[0]; const priceInterval = existSellingPrice[1] - existSellingPrice[0]; @@ -28,8 +29,9 @@ const PriceSetting = (props: OwnProps) => { const orderType = useSelector((state: StateProps) => state.stockOrderType); const [orderPossibility, setOrderPossibility] = useState(true); - const { bidp1, bidp2, bidp3, bidp4, bidp5 } = stockInfo; - const buyingPrice = [parseInt(bidp1), parseInt(bidp2), parseInt(bidp3), parseInt(bidp4), parseInt(bidp5)]; + const { bidp1, bidp2, bidp3, bidp4, bidp5, bidp6, bidp7, bidp8, bidp9, bidp10 } = stockInfo; + const buyingInfo = [bidp1, bidp2, bidp3, bidp4, bidp5, bidp6, bidp7, bidp8, bidp9, bidp10]; + const buyingPrice = buyingInfo.map((price) => parseInt(price)); const existBuyingPrice = buyingPrice.filter((price) => price !== 0); // price 0인 경우 제거 // 거래 가능여부 판별 함수 diff --git a/client/src/components/StockOrderSection/StockPrice.tsx b/client/src/components/StockOrderSection/StockPrice.tsx index 4a38b43d..cb76ca35 100644 --- a/client/src/components/StockOrderSection/StockPrice.tsx +++ b/client/src/components/StockOrderSection/StockPrice.tsx @@ -40,32 +40,42 @@ const StockPrice = (props: StockPriceProps) => { return; } - // 전날 종가 데이터 -> 1) 화~토 : 전날 종가로 설정 2) 공휴일/월요일 : 맨 마지막 종가로 설정 (전날 데이터 없음) - let previousDayStockClosingPrice: number; + // 전날 종가 데이터 계산 -> 1) 화~토 : 바로 전날 2) 월요일 및 공휴일 : 영업일 기준 전날 + let previousDayStockClosingPrice: number = 0; const today = new Date(); const getToday = today.getDay(); const daysOfWeek = ["일", "월", "화", "수", "목", "금", "토"]; + const nowInKoreanTime = new Date(today.getTime() + 9 * 60 * 60 * 1000); // 날짜 계산 -> UTC 시간에 9시간 더해서 한국 시간대로 변환 const nonBusinessDay = isHoliday(today, { include: { sunday: true } }); // 일요일, 공휴일 (임시 공휴일 포함) 체크 const isMonday = daysOfWeek[getToday] === "월"; // 월요일인지 체크 if (nonBusinessDay || isMonday) { - previousDayStockClosingPrice = stockPrice[stockPrice.length - 1].stck_prpr; + const standardDay = new Date(nowInKoreanTime); + const todayYymmdd = standardDay.toISOString().slice(0, 10); + + const yesterdayStockInfo = stockPrice.filter((stockInfo: StockProps) => { + const dayInfo = stockInfo.stockTradeTime.slice(0, 10); + return dayInfo !== todayYymmdd && stockInfo; + }); + + if (yesterdayStockInfo.length !== 0) { + previousDayStockClosingPrice = parseInt(yesterdayStockInfo[yesterdayStockInfo.length - 1].stck_prpr); + } } else { - const nowInKoreanTime = new Date(today.getTime() + 9 * 60 * 60 * 1000); // UTC 시간에 9시간 더해서 한국 시간대로 변환 - const yesterday = new Date(nowInKoreanTime); - yesterday.setDate(nowInKoreanTime.getDate() - 1); - const yesterdayYymmdd = yesterday.toISOString().slice(0, 10); + const standardDay = new Date(nowInKoreanTime); + standardDay.setDate(nowInKoreanTime.getDate() - 1); + const yesterdayYymmdd = standardDay.toISOString().slice(0, 10); const yesterdayStockInfo = stockPrice.filter((stockInfo: StockProps) => { const dayInfo = stockInfo.stockTradeTime.slice(0, 10); - if (dayInfo === yesterdayYymmdd) { - return stockInfo; - } + return dayInfo === yesterdayYymmdd && stockInfo; }); - previousDayStockClosingPrice = parseInt(yesterdayStockInfo[yesterdayStockInfo.length - 1].stck_prpr); + if (yesterdayStockInfo.length !== 0) { + previousDayStockClosingPrice = parseInt(yesterdayStockInfo[yesterdayStockInfo.length - 1].stck_prpr); + } } // 전날 종가대비 매도/매수호가 변동률 diff --git a/client/src/components/StockOrderSection/StockPriceList.tsx b/client/src/components/StockOrderSection/StockPriceList.tsx index 9221e55b..57844603 100644 --- a/client/src/components/StockOrderSection/StockPriceList.tsx +++ b/client/src/components/StockOrderSection/StockPriceList.tsx @@ -23,7 +23,7 @@ const StockPriceList = () => { const sellingPrice: PriceProps[] = []; const buyingPrice: PriceProps[] = []; - for (let i = 1; i < 6; i++) { + for (let i = 1; i < 11; i++) { const sellingPriceProp = `askp${i}`; // 매도 호가 const sellingVolumeProp = `askp_rsqn${i}`; // 해당 매도호가 거래량 const buyingPriceProp = `bidp${i}`; // 매수 호가 @@ -43,24 +43,9 @@ const StockPriceList = () => { buyingPrice.push(buyingInfo); } - /* - 🔴 삭제 예정인 코드 - [문제점] 주가 리스트 개수가 너무 적음 (매도호가 5개 + 매수호가 5개 = 총 10개) → UX를 저해하는 요소로 판단되어, 더미데이터를 추가 (매도/매수 각각 5개씩) - [해결방안] 1) fetching 해온 데이터 중 가격 0인 데이터 제외 (한국투자증권 API에서 간혹 보내는 경우 있음) → 호가 간격 계산 후, 더미 데이터 추가 (거래량은 0으로 설정) - */ + // price 0인 경우 제외 const existSellingPrice = sellingPrice.filter((selling) => selling.price !== 0); const existBuyingPrice = buyingPrice.filter((buyingPrice) => buyingPrice.price !== 0); - // const priceInterval: number = existSellingPrice[existSellingPrice.length - 1].price - existBuyingPrice[0].price; - - // for (let i = 0; existSellingPrice.length < 10; i++) { - // const dummySellingData = { price: existSellingPrice[0].price + priceInterval, volume: 0 }; - // existSellingPrice.unshift(dummySellingData); - // } - - // for (let i = 0; existBuyingPrice.length < 10; i++) { - // const dummyBuyingData = { price: existBuyingPrice[existBuyingPrice.length - 1].price - priceInterval, volume: 0 }; - // existBuyingPrice.push(dummyBuyingData); - // } // 1) 매도/매수호가 종합 2) 매수/매도호가 거래량 종합 const sellingAndBuyingPrice = [...existSellingPrice, ...existBuyingPrice]; diff --git a/client/src/components/communityComponents/Comments.tsx b/client/src/components/communityComponents/Comments.tsx index eb2276db..1e290ba1 100644 --- a/client/src/components/communityComponents/Comments.tsx +++ b/client/src/components/communityComponents/Comments.tsx @@ -48,12 +48,6 @@ const Comments = ({ postId }: { postId: number }) => { setVisibleComments(close ? 1 : commentData.length); }; - //코드 중복 - // const CommentText = { - // write: "작성", - // replyCount: `댓글${commentData.length}개 모두보기`, - // }; - return (
diff --git a/client/src/models/stockInfoProps.ts b/client/src/models/stockInfoProps.ts index 070a81f6..be66de8f 100644 --- a/client/src/models/stockInfoProps.ts +++ b/client/src/models/stockInfoProps.ts @@ -6,21 +6,41 @@ export interface StockInfoProps { askp3: string; askp4: string; askp5: string; + askp6: string; + askp7: string; + askp8: string; + askp9: string; + askp10: string; askp_rsqn1: string; askp_rsqn2: string; askp_rsqn3: string; askp_rsqn4: string; askp_rsqn5: string; + askp_rsqn6: string; + askp_rsqn7: string; + askp_rsqn8: string; + askp_rsqn9: string; + askp_rsqn10: string; bidp1: string; bidp2: string; bidp3: string; bidp4: string; bidp5: string; + bidp6: string; + bidp7: string; + bidp8: string; + bidp9: string; + bidp10: string; bidp_rsqn1: string; bidp_rsqn2: string; bidp_rsqn3: string; bidp_rsqn4: string; bidp_rsqn5: string; + bidp_rsqn6: string; + bidp_rsqn7: string; + bidp_rsqn8: string; + bidp_rsqn9: string; + bidp_rsqn10: string; } // export interface StockInfoprops { diff --git a/client/src/page/TabPages/TabContainerPage.tsx b/client/src/page/TabPages/TabContainerPage.tsx index f44fcddc..cbcb8d5d 100644 --- a/client/src/page/TabPages/TabContainerPage.tsx +++ b/client/src/page/TabPages/TabContainerPage.tsx @@ -2,10 +2,15 @@ import MarketInfo from "./MarketInfoPage"; import { Routes, Route, Link } from "react-router-dom"; import styled from "styled-components"; import { DetailStockInformation } from "../../components/stockListComponents/DetailStockInformation"; -import { Community } from "./CommunityPage"; +import { Community } from "./communityPage"; import { Status } from "../../components/statusComponents"; import { useState } from "react"; -import { MarketImages, InfoImages, CommunityImages, InvestImage } from "../../components/communityComponents/IconComponent/Icon"; +import { + MarketImages, + InfoImages, + CommunityImages, + InvestImage, +} from "../../components/communityComponents/IconComponent/Icon"; export const TabContainerPage = () => { const [activeTab, setActiveTab] = useState(1); const handleClickActiveTab = (number: number) => { @@ -14,23 +19,42 @@ export const TabContainerPage = () => { return ( - +
-