Skip to content

Commit

Permalink
Merge pull request #135 from codestates-seb/dev-client#10/marketTab
Browse files Browse the repository at this point in the history 
[FE]종목정보 부분 디자인 구성
  • Loading branch information
@sinjw
sinjw authored Sep 19, 2023
2 parents d32efe3 + 0b0cd74 commit 38b6f2a
Show file tree
Hide file tree
Showing 12 changed files with 1,712 additions and 296 deletions.
4 changes: 0 additions & 4 deletions client/src/components/MarketComponents/MarketIssue.tsx
View file

This file was deleted.

30 changes: 9 additions & 21 deletions client/src/components/MarketComponents/MarketKospiChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,26 +51,16 @@ const MarketkospiChart = () => {
yAxis: [
{
type: "value",
boundaryGap: [10, '10%'],
position: "left",
interval: 200,
boundaryGap: [0, "10%"],
position: "right",
interval: 100,
min: 2000,
splitLine: {
show: true,
},
},
],
dataZoom: [
{
type: "inside",
start: 0,
end: 100,
},
{
start: 0,
end: 10,
},
],

series: [
{
name: "코스피 지수",
Expand All @@ -93,7 +83,7 @@ const MarketkospiChart = () => {
},
{
offset: 1,
color: 'white',
color: "white",
},
]),
},
Expand All @@ -108,9 +98,7 @@ const MarketkospiChart = () => {

// 현재 가격과 이전 가격을 비교하여 색상 설정
const color =
currentPrice > previousPrice
? "#f87369"
: "#5a99f8";
currentPrice > previousPrice ? "#f87369" : "#5a99f8";

return {
value: currentPrice,
Expand All @@ -123,10 +111,10 @@ const MarketkospiChart = () => {
},
],
grid: {
left: "15%",
right: "10%",
left: "5%",
right: "15%",
top: "20%",
bottom: "20%",
bottom: "10%",
},
});
}
Expand Down
140 changes: 87 additions & 53 deletions client/src/components/MarketComponents/MarketStockList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,45 +5,53 @@ import { useDispatch } from "react-redux";
import { changeCompanyId } from "../../reducer/CompanyId-Reducer";
import logo from "../../asset/images/StockHolmImage.png";

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';

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";
interface StockInfo {
korName: string;
companyId: string;
stockInfResponseDto: {
stck_prpr: string;
prdy_ctrt: string;
acml_vol: string;
};
code: string;
}
const MarketServerUrl =
"http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/companies";


const MarketStockList: React.FC = () => {
const [marketStockList, setMarketStockList] = useState<StockInfo[]>([]);
const [isLoading, setIsLoading] = useState(true);
const [selectedSort, setSelectedSort] = useState<string | null>(null);

const logos: { [key: string]: string } = {
'삼성전자': logosamsung,
'POSCO홀딩스': posco,
'셀트리온': celltrion,
'에코프로': ecopro,
'에코프로비엠': ecoproBM,
'디와이': dy,
'쿠쿠홀딩스': kuckoo,
'카카오뱅크': kakaoBank,
'한세엠케이': hanse,
'KG케미칼': KG,
'LG화학': LGchem,
'현대차': hyundai,
'LG전자': LGelec,
'기아': kia,
삼성전자: logosamsung,
POSCO홀딩스: posco,
셀트리온: celltrion,
에코프로: ecopro,
에코프로비엠: ecoproBM,
디와이: dy,
쿠쿠홀딩스: kuckoo,
카카오뱅크: kakaoBank,
한세엠케이: hanse,
KG케미칼: KG,
LG화학: LGchem,
현대차: hyundai,
LG전자: LGelec,
기아: kia,
};

const numberWithCommas = (x: number): string => {
Expand All @@ -62,7 +70,6 @@ const MarketStockList: React.FC = () => {
setIsLoading(false);
} catch (error) {
console.error("데이터 가져오기 중 오류 발생:", error);
setIsLoading(false);
}
};

Expand All @@ -75,21 +82,33 @@ const MarketStockList: React.FC = () => {

const SortPrice = () => {
const sortedList = [...marketStockList];
sortedList.sort((a, b) => parseFloat(b.stockInfResponseDto.stck_prpr) - parseFloat(a.stockInfResponseDto.stck_prpr));
sortedList.sort(
(a, b) =>
parseFloat(b.stockInfResponseDto.stck_prpr) -
parseFloat(a.stockInfResponseDto.stck_prpr)
);
setMarketStockList(sortedList);
setSelectedSort("price");
};

const SortRate = () => {
const sortedList = [...marketStockList];
sortedList.sort((a, b) => parseFloat(b.stockInfResponseDto.prdy_ctrt) - parseFloat(a.stockInfResponseDto.prdy_ctrt));
sortedList.sort(
(a, b) =>
parseFloat(b.stockInfResponseDto.prdy_ctrt) -
parseFloat(a.stockInfResponseDto.prdy_ctrt)
);
setMarketStockList(sortedList);
setSelectedSort("rate");
};

const SortTrade = () => {
const sortedList = [...marketStockList];
sortedList.sort((a, b) => parseFloat(b.stockInfResponseDto.acml_vol) - parseFloat(a.stockInfResponseDto.acml_vol));
sortedList.sort(
(a, b) =>
parseFloat(b.stockInfResponseDto.acml_vol) -
parseFloat(a.stockInfResponseDto.acml_vol)
);
setMarketStockList(sortedList);
setSelectedSort("trade");
};
Expand All @@ -102,13 +121,19 @@ const MarketStockList: React.FC = () => {
<StockListDetail onClick={SortName} selected={selectedSort === "name"}>
{MarketStockLists.stockName}
</StockListDetail>
<StockListDetail onClick={SortPrice} selected={selectedSort === "price"}>
<StockListDetail
onClick={SortPrice}
selected={selectedSort === "price"}
>
{MarketStockLists.stockPrice}
</StockListDetail>
<StockListDetail onClick={SortRate} selected={selectedSort === "rate"}>
{MarketStockLists.stockRate}
</StockListDetail>
<StockListDetail onClick={SortTrade} selected={selectedSort === "trade"}>
<StockListDetail
onClick={SortTrade}
selected={selectedSort === "trade"}
>
{MarketStockLists.stockTrade}
</StockListDetail>
</StockListTitle>
Expand All @@ -126,7 +151,9 @@ const MarketStockList: React.FC = () => {

return (
<div key={index}>
<StockListInfo onClick={() => dispatch(changeCompanyId(el.companyId))}>
<StockListInfo
onClick={() => dispatch(changeCompanyId(el.companyId))}
>
{isLoading === true ? (
<div>{MarketStockLists.isLoading}</div>
) : (
Expand All @@ -139,11 +166,28 @@ const MarketStockList: React.FC = () => {
</StockNameWrapper>
<StockDetailWrapper>
<StockDetail>
<StockDetailItem key={el.stockInfResponseDto.stck_prpr}>{numberWithCommas(parseFloat(el.stockInfResponseDto.stck_prpr))}</StockDetailItem>
<StockDetailItem key={el.stockInfResponseDto.prdy_ctrt} variation={parseFloat(el.stockInfResponseDto.prdy_ctrt) > 0 ? "positive" : parseFloat(el.stockInfResponseDto.prdy_ctrt) < 0 ? "negative" : "neutral"}>
<StockDetailItem key={el.stockInfResponseDto.stck_prpr}>
{numberWithCommas(
parseFloat(el.stockInfResponseDto.stck_prpr)
)}
</StockDetailItem>
<StockDetailItem
key={el.stockInfResponseDto.prdy_ctrt}
variation={
parseFloat(el.stockInfResponseDto.prdy_ctrt) > 0
? "positive"
: parseFloat(el.stockInfResponseDto.prdy_ctrt) < 0
? "negative"
: "neutral"
}
>
{el.stockInfResponseDto.prdy_ctrt}
</StockDetailItem>
<StockDetailItem key={el.stockInfResponseDto.acml_vol}>{numberWithCommas(parseFloat(el.stockInfResponseDto.acml_vol))}</StockDetailItem>
<StockDetailItem key={el.stockInfResponseDto.acml_vol}>
{numberWithCommas(
parseFloat(el.stockInfResponseDto.acml_vol)
)}
</StockDetailItem>
</StockDetail>
</StockDetailWrapper>
</>
Expand All @@ -167,18 +211,6 @@ const MarketStockLists = {
isLoading: "isLoading...",
};

type StockInfo = {
companyId: number;
code: string;
korName: string;
stockInfResponseDto: {
stck_prpr: string;
prdy_ctrt: string;
acml_vol: string;
};
};


const StockListContainer = styled.div`
max-height: 285px;
Expand Down Expand Up @@ -337,7 +369,9 @@ const StockDetail = styled.div`
align-items: center;
`;

const StockDetailItem = styled.div<{ variation?: "positive" | "neutral" | "negative" }>`
const StockDetailItem = styled.div<{
variation?: "positive" | "neutral" | "negative";
}>`
flex: 1;
text-align: right;
color: ${({ variation }) => {
Expand Down
Loading

0 comments on commit 38b6f2a

Please sign in to comment.