Skip to content

Commit

Permalink
Merge branch 'dev-client' into dev-client#70/profile
Browse files Browse the repository at this point in the history
  • Loading branch information
@sirloinbh
sirloinbh authored Sep 12, 2023
2 parents 910f702 + 1804486 commit 29f9245
Show file tree
Hide file tree
Showing 7 changed files with 101 additions and 64 deletions.
40 changes: 21 additions & 19 deletions client/src/components/MarketComponents/MarketKospiChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)"
Expand All @@ -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: {
Expand Down
10 changes: 6 additions & 4 deletions client/src/components/StockOrderSection/PriceSetting.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,9 @@ const PriceSetting = (props: OwnProps) => {
const [priceChangeTimer, setPriceChangeTimer] = useState<NodeJS.Timeout | null>(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];
Expand All @@ -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인 경우 제거

// 거래 가능여부 판별 함수
Expand Down
32 changes: 21 additions & 11 deletions client/src/components/StockOrderSection/StockPrice.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}

// 전날 종가대비 매도/매수호가 변동률
Expand Down
19 changes: 2 additions & 17 deletions client/src/components/StockOrderSection/StockPriceList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}`; // 매수 호가
Expand All @@ -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];
Expand Down
6 changes: 0 additions & 6 deletions client/src/components/communityComponents/Comments.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,12 +48,6 @@ const Comments = ({ postId }: { postId: number }) => {
setVisibleComments(close ? 1 : commentData.length);
};

//코드 중복
// const CommentText = {
// write: "작성",
// replyCount: `댓글${commentData.length}개 모두보기`,
// };

return (
<CommentContainer>
<div>
Expand Down
20 changes: 20 additions & 0 deletions client/src/models/stockInfoProps.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
38 changes: 31 additions & 7 deletions client/src/page/TabPages/TabContainerPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand All @@ -14,23 +19,42 @@ export const TabContainerPage = () => {

return (
<TabContainerStyle>
<style>@import url('https://fonts.googleapis.com/css2?family=Jua&family=Noto+Sans+KR:wght@500&display=swap');</style>
<style>
@import
url('https://fonts.googleapis.com/css2?family=Jua&family=Noto+Sans+KR:wght@500&display=swap');
</style>

<div>
<TabNavArea>
<Nav to="/" onClick={() => handleClickActiveTab(1)} className={`tab ${activeTab === 1 ? "active-tab" : "inactive-tab"}`}>
<Nav
to="/"
onClick={() => handleClickActiveTab(1)}
className={`tab ${activeTab === 1 ? "active-tab" : "inactive-tab"}`}
>
<MarketImages />
{TabContainerText.marketInfo}
</Nav>
<Nav to="/stockitems" onClick={() => handleClickActiveTab(2)} className={`tab ${activeTab === 2 ? "active-tab" : "inactive-tab"}`}>
<Nav
to="/stockitems"
onClick={() => handleClickActiveTab(2)}
className={`tab ${activeTab === 2 ? "active-tab" : "inactive-tab"}`}
>
<InfoImages />
{TabContainerText.StockInfo}
</Nav>
<Nav to="/community" onClick={() => handleClickActiveTab(3)} className={`tab ${activeTab === 3 ? "active-tab" : "inactive-tab"}`}>
<Nav
to="/community"
onClick={() => handleClickActiveTab(3)}
className={`tab ${activeTab === 3 ? "active-tab" : "inactive-tab"}`}
>
<CommunityImages />
{TabContainerText.community}
</Nav>
<Nav to="/status" onClick={() => handleClickActiveTab(4)} className={`tab ${activeTab === 4 ? "active-tab" : "inactive-tab"}`}>
<Nav
to="/status"
onClick={() => handleClickActiveTab(4)}
className={`tab ${activeTab === 4 ? "active-tab" : "inactive-tab"}`}
>
<InvestImage />
{TabContainerText.myPortfolio}
</Nav>
Expand Down

0 comments on commit 29f9245

Please sign in to comment.