From 6584e35f7825aafa59fd8403e914ca505ef2e0a9 Mon Sep 17 00:00:00 2001 From: baegyeong Date: Mon, 18 Nov 2024 20:45:18 +0900 Subject: [PATCH 1/7] =?UTF-8?q?=E2=9C=A8=20feat:=20=EC=A3=BC=EC=8B=9D=20?= =?UTF-8?q?=EC=A7=80=EC=88=98=20=EC=A0=95=EB=B3=B4=EB=A5=BC=20=EB=82=98?= =?UTF-8?q?=ED=83=80=EB=82=B4=EB=8A=94=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../stocks/components/StockIndexCard.tsx | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 packages/frontend/src/pages/stocks/components/StockIndexCard.tsx diff --git a/packages/frontend/src/pages/stocks/components/StockIndexCard.tsx b/packages/frontend/src/pages/stocks/components/StockIndexCard.tsx new file mode 100644 index 00000000..66ff74c7 --- /dev/null +++ b/packages/frontend/src/pages/stocks/components/StockIndexCard.tsx @@ -0,0 +1,32 @@ +import { ReactNode } from 'react'; +import { cn } from '@/utils/cn'; + +interface StockIndexCardProps { + children: ReactNode; + price: number; + change: number; + changePercent: number; +} + +export const StockIndexCard = ({ + children, + price, + change, + changePercent, +}: StockIndexCardProps) => { + return ( +
+

{children}

+

{price}

+

= 0 ? 'text-red' : 'text-blue', + )} + > + {changePercent >= 0 ? '▲' : '▼'} + {change}({changePercent}) +

+
+ ); +}; From 4fc0a89a973956b1ba5d030e6f5d64ece139c5f3 Mon Sep 17 00:00:00 2001 From: baegyeong Date: Mon, 18 Nov 2024 20:45:51 +0900 Subject: [PATCH 2/7] =?UTF-8?q?=E2=9C=A8=20feat:=20=EC=A3=BC=EC=8B=9D=20?= =?UTF-8?q?=EC=A0=95=EB=B3=B4=EB=A5=BC=20=EB=82=98=ED=83=80=EB=82=B4?= =?UTF-8?q?=EB=8A=94=20=EC=B9=B4=EB=93=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pages/stocks/components/StockInfoCard.tsx | 47 +++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 packages/frontend/src/pages/stocks/components/StockInfoCard.tsx diff --git a/packages/frontend/src/pages/stocks/components/StockInfoCard.tsx b/packages/frontend/src/pages/stocks/components/StockInfoCard.tsx new file mode 100644 index 00000000..db2d3412 --- /dev/null +++ b/packages/frontend/src/pages/stocks/components/StockInfoCard.tsx @@ -0,0 +1,47 @@ +import { cn } from '@/utils/cn'; + +interface StockInfoCardProps { + name: string; + currentPrice: number; + changeRate: number; + changeRatePercent: number; + index: number; +} + +export const StockInfoCard = ({ + name, + currentPrice, + changeRate, + changeRatePercent, + index, +}: StockInfoCardProps) => { + return ( +
+

{name}

+
+ 등락률 + = 0 ? 'text-red' : 'text-blue', + )} + > + {changeRate >= 0 && '+'} + {changeRate.toLocaleString()}원 ({changeRatePercent} + %) + +
+
+ 현재가 + + {currentPrice.toLocaleString()} + +
+
+ ); +}; From 523f72547fdcdac2be9f32a8ed939e581e21aac2 Mon Sep 17 00:00:00 2001 From: baegyeong Date: Mon, 18 Nov 2024 20:46:16 +0900 Subject: [PATCH 3/7] =?UTF-8?q?=E2=9C=A8=20feat:=20=EC=A3=BC=EC=8B=9D=20?= =?UTF-8?q?=EC=88=9C=EC=9C=84=EB=A5=BC=20=EB=B3=B4=EC=97=AC=EC=A3=BC?= =?UTF-8?q?=EA=B8=B0=20=EC=9C=84=ED=95=9C=20=ED=85=8C=EC=9D=B4=EB=B8=94=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/pages/stocks/StockRankingTable.tsx | 65 +++++++++++++++++++ 1 file changed, 65 insertions(+) create mode 100644 packages/frontend/src/pages/stocks/StockRankingTable.tsx diff --git a/packages/frontend/src/pages/stocks/StockRankingTable.tsx b/packages/frontend/src/pages/stocks/StockRankingTable.tsx new file mode 100644 index 00000000..483870b9 --- /dev/null +++ b/packages/frontend/src/pages/stocks/StockRankingTable.tsx @@ -0,0 +1,65 @@ +import { Link } from 'react-router-dom'; +import DownArrow from '@/assets/down-arrow.svg?react'; +import stockData from '@/mocks/stock.json'; +import { cn } from '@/utils/cn'; + +export const StockRankingTable = () => { + return ( +
+ + + + + + + + + + + + + + + + + + + {stockData.data.map((stock, index) => { + return ( + + + + + + + + ); + })} + +
종목현재가 +

등락률

+ + 		거래대금거래량
+ {index + 1} + + {stock.name} + + {stock.currentPrice.toLocaleString()}원= 0 ? 'text-red' : 'text-blue', + )} + > + {stock.changeRate >= 0 && '+'} + {stock.changeRate.toLocaleString()}원 ( + {stock.changeRatePercent} + %) + {stock.tradingVolume.toLocaleString()}원{stock.tradingValue.toLocaleString()}주
+
+ ); +}; From ccd6e2ba2359f8247dc6d1c1dd235a5ef361966d Mon Sep 17 00:00:00 2001 From: baegyeong Date: Mon, 18 Nov 2024 20:47:02 +0900 Subject: [PATCH 4/7] =?UTF-8?q?=E2=9C=A8=20feat:=20=EC=A3=BC=EC=8B=9D=20?= =?UTF-8?q?=EB=A9=94=EC=9D=B8=ED=8E=98=EC=9D=B4=EC=A7=80=20UI=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/src/assets/down-arrow.svg | 3 + packages/frontend/src/mocks/market.json | 25 +++ packages/frontend/src/mocks/stock.json | 184 ++++++++++++++++++ packages/frontend/src/pages/stocks/Stocks.tsx | 72 +++++++ packages/frontend/src/pages/stocks/index.ts | 1 + 5 files changed, 285 insertions(+) create mode 100644 packages/frontend/src/assets/down-arrow.svg create mode 100644 packages/frontend/src/mocks/market.json create mode 100644 packages/frontend/src/mocks/stock.json create mode 100644 packages/frontend/src/pages/stocks/Stocks.tsx create mode 100644 packages/frontend/src/pages/stocks/index.ts diff --git a/packages/frontend/src/assets/down-arrow.svg b/packages/frontend/src/assets/down-arrow.svg new file mode 100644 index 00000000..a60f760d --- /dev/null +++ b/packages/frontend/src/assets/down-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/frontend/src/mocks/market.json b/packages/frontend/src/mocks/market.json new file mode 100644 index 00000000..4943c51f --- /dev/null +++ b/packages/frontend/src/mocks/market.json @@ -0,0 +1,25 @@ +{ + "data": [ + { + "name": "코스피", + "price": 2591.03, + "change": -26.77, + "changePercent": -1.0, + "trend": "down" + }, + { + "name": "코스닥", + "price": 738.49, + "change": 9.4, + "changePercent": 0.1, + "trend": "up" + }, + { + "name": "달러환율", + "price": 1382.2, + "change": -26.77, + "changePercent": -1.0, + "trend": "down" + } + ] +} diff --git a/packages/frontend/src/mocks/stock.json b/packages/frontend/src/mocks/stock.json new file mode 100644 index 00000000..9d2b7fc5 --- /dev/null +++ b/packages/frontend/src/mocks/stock.json @@ -0,0 +1,184 @@ +{ + "data": [ + { + "id": 1, + "name": "삼성전자", + "currentPrice": 82600, + "changeRate": 3200, + "changeRatePercent": 5.9, + "tradingVolume": 12850000, + "tradingValue": 1061410000000 + }, + { + "id": 2, + "name": "Alphabet Inc.", + "currentPrice": 2750.5, + "changeRate": -6500, + "changeRatePercent": 3.6, + "tradingVolume": 500000, + "tradingValue": 1377500000 + }, + { + "id": 3, + "name": "Amazon.com Inc.", + "currentPrice": 3400.1, + "changeRate": -1000, + "changeRatePercent": 2.5, + "tradingVolume": 300000, + "tradingValue": 1020300000 + }, + { + "id": 4, + "name": "애플", + "currentPrice": 145.3, + "changeRate": 2.5, + "changeRatePercent": 1.8, + "tradingVolume": 10000000, + "tradingValue": 1453000000 + }, + { + "id": 5, + "name": "테슬라", + "currentPrice": 680.4, + "changeRate": 15.2, + "changeRatePercent": 2.3, + "tradingVolume": 1200000, + "tradingValue": 816480000 + }, + { + "id": 6, + "name": "마이크로소프트", + "currentPrice": 300.1, + "changeRate": 4.0, + "changeRatePercent": 1.3, + "tradingVolume": 8000000, + "tradingValue": 2400800000 + }, + { + "id": 7, + "name": "페이스북", + "currentPrice": 345.8, + "changeRate": -10.5, + "changeRatePercent": -3.0, + "tradingVolume": 600000, + "tradingValue": 207480000 + }, + { + "id": 8, + "name": "넷플릭스", + "currentPrice": 525.4, + "changeRate": 20.6, + "changeRatePercent": 4.0, + "tradingVolume": 900000, + "tradingValue": 473860000 + }, + { + "id": 9, + "name": "IBM", + "currentPrice": 135.7, + "changeRate": -5.2, + "changeRatePercent": -3.7, + "tradingVolume": 200000, + "tradingValue": 27140000 + }, + { + "id": 10, + "name": "인텔", + "currentPrice": 55.5, + "changeRate": 1.0, + "changeRatePercent": 1.8, + "tradingVolume": 4000000, + "tradingValue": 222000000 + }, + { + "id": 11, + "name": "스타벅스", + "currentPrice": 95.0, + "changeRate": 1.5, + "changeRatePercent": 1.6, + "tradingVolume": 1500000, + "tradingValue": 142500000 + }, + { + "id": 12, + "name": "코카콜라", + "currentPrice": 60.2, + "changeRate": -0.3, + "changeRatePercent": -0.5, + "tradingVolume": 3000000, + "tradingValue": 180600000 + }, + { + "id": 13, + "name": "존슨앤드존슨", + "currentPrice": 165.0, + "changeRate": 3.0, + "changeRatePercent": 1.8, + "tradingVolume": 800000, + "tradingValue": 132000000 + }, + { + "id": 14, + "name": "월마트", + "currentPrice": 140.5, + "changeRate": 0.5, + "changeRatePercent": 0.4, + "tradingVolume": 2000000, + "tradingValue": 281000000 + }, + { + "id": 15, + "name": "디즈니", + "currentPrice": 175.0, + "changeRate": -2.0, + "changeRatePercent": -1.1, + "tradingVolume": 400000, + "tradingValue": 70000000 + }, + { + "id": 16, + "name": "NVIDIA", + "currentPrice": 220.3, + "changeRate": 6.0, + "changeRatePercent": 2.8, + "tradingVolume": 1500000, + "tradingValue": 330450000 + }, + { + "id": 17, + "name": "Qualcomm", + "currentPrice": 130.8, + "changeRate": 1.8, + "changeRatePercent": 1.4, + "tradingVolume": 900000, + "tradingValue": 117720000 + }, + { + "id": 18, + "name": "Adobe", + "currentPrice": 540.2, + "changeRate": 10.5, + "changeRatePercent": 2.0, + "tradingVolume": 300000, + "tradingValue": 162060000 + }, + { + "id": 19, + "name": "Salesforce", + "currentPrice": 270.0, + "changeRate": -3.0, + "changeRatePercent": -1.1, + "tradingVolume": 200000, + "tradingValue": 54000000 + }, + { + "id": 20, + "name": "PayPal", + "currentPrice": 90.5, + "changeRate": 2.0, + "changeRatePercent": 2.3, + "tradingVolume": 1000000, + "tradingValue": 90500000 + } + ] +} diff --git a/packages/frontend/src/pages/stocks/Stocks.tsx b/packages/frontend/src/pages/stocks/Stocks.tsx new file mode 100644 index 00000000..c3d98820 --- /dev/null +++ b/packages/frontend/src/pages/stocks/Stocks.tsx @@ -0,0 +1,72 @@ +import { StockIndexCard } from './components/StockIndexCard'; +import { StockInfoCard } from './components/StockInfoCard'; +import { StockRankingTable } from './StockRankingTable'; +import marketData from '@/mocks/market.json'; +import stockData from '@/mocks/stock.json'; + +const TOP_VIEW = 5; + +export const Stocks = () => { + const kospi = marketData.data.filter((value) => value.name === '코스피')[0]; + const kosdaq = marketData.data.filter((value) => value.name === '코스닥')[0]; + const rateOfExchange = marketData.data.filter( + (value) => value.name === '달러환율', + )[0]; + + return ( +
+

오늘의 투자

+
+

+ 지금 시장, 이렇게 움직이고 있어요. +

+
+ + 코스피 + + + 코스닥 + + + 달러환율 + +
+
+
+

+ 이 종목은 어떠신가요? +

+
+ {stockData.data.slice(0, TOP_VIEW).map((stock, index) => ( + + ))} +
+
+
+

+ 지금 가장 활발한 종목이에요. +

+ +
+
+ ); +}; diff --git a/packages/frontend/src/pages/stocks/index.ts b/packages/frontend/src/pages/stocks/index.ts new file mode 100644 index 00000000..46525b4e --- /dev/null +++ b/packages/frontend/src/pages/stocks/index.ts @@ -0,0 +1 @@ +export * from './Stocks'; From ae164124002296001028bfbc539fd7824093be28 Mon Sep 17 00:00:00 2001 From: baegyeong Date: Mon, 18 Nov 2024 20:47:26 +0900 Subject: [PATCH 5/7] =?UTF-8?q?=F0=9F=90=9B=20fix:=20layout=20padding=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/src/components/layouts/Layout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/frontend/src/components/layouts/Layout.tsx b/packages/frontend/src/components/layouts/Layout.tsx index ad7fb7e8..2d679229 100644 --- a/packages/frontend/src/components/layouts/Layout.tsx +++ b/packages/frontend/src/components/layouts/Layout.tsx @@ -5,7 +5,7 @@ export const Layout = () => { return (
-
+
From 4f60f9b79c30d19b865d13d21ebbc3f0220646c1 Mon Sep 17 00:00:00 2001 From: baegyeong Date: Mon, 18 Nov 2024 20:47:44 +0900 Subject: [PATCH 6/7] =?UTF-8?q?=E2=9C=A8=20feat:=20=EC=A3=BC=EC=8B=9D=20?= =?UTF-8?q?=EB=A9=94=EC=9D=B8=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=9D=BC?= =?UTF-8?q?=EC=9A=B0=ED=84=B0=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/src/routes/index.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/frontend/src/routes/index.tsx b/packages/frontend/src/routes/index.tsx index 2a08323b..e49f80a4 100644 --- a/packages/frontend/src/routes/index.tsx +++ b/packages/frontend/src/routes/index.tsx @@ -3,6 +3,7 @@ import { Layout } from '@/components/layouts'; import { Home } from '@/pages/home'; import { MyPage } from '@/pages/my-page'; import { StockDetail } from '@/pages/stock-detail'; +import { Stocks } from '@/pages/stocks'; export const router = createBrowserRouter([ { @@ -13,8 +14,11 @@ export const router = createBrowserRouter([ element: , }, { - // TODO: 주식 메인페이지 만들어지면 path 바꿀것 path: '/stocks', + element: , + }, + { + path: 'stocks/:id', element: , }, { From ea31cb82b9f934440b291c5d7be046cef4797c5e Mon Sep 17 00:00:00 2001 From: baegyeong Date: Mon, 18 Nov 2024 20:54:47 +0900 Subject: [PATCH 7/7] =?UTF-8?q?=F0=9F=90=9B=20fix:=20return=20=ED=82=A4?= =?UTF-8?q?=EC=9B=8C=EB=93=9C=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/pages/stocks/StockRankingTable.tsx | 55 +++++++++---------- 1 file changed, 25 insertions(+), 30 deletions(-) diff --git a/packages/frontend/src/pages/stocks/StockRankingTable.tsx b/packages/frontend/src/pages/stocks/StockRankingTable.tsx index 483870b9..73856127 100644 --- a/packages/frontend/src/pages/stocks/StockRankingTable.tsx +++ b/packages/frontend/src/pages/stocks/StockRankingTable.tsx @@ -27,37 +27,32 @@ export const StockRankingTable = () => { - {stockData.data.map((stock, index) => { - return ( - - - {index + 1} - - {stock.name} - - - {stock.currentPrice.toLocaleString()}원 - = 0 ? 'text-red' : 'text-blue', - )} + {stockData.data.map((stock, index) => ( + + + {index + 1} + - {stock.changeRate >= 0 && '+'} - {stock.changeRate.toLocaleString()}원 ( - {stock.changeRatePercent} - %) - - {stock.tradingVolume.toLocaleString()}원 - {stock.tradingValue.toLocaleString()}주 - - ); - })} + {stock.name} + + + {stock.currentPrice.toLocaleString()}원 + = 0 ? 'text-red' : 'text-blue')} + > + {stock.changeRate >= 0 && '+'} + {stock.changeRate.toLocaleString()}원 ({stock.changeRatePercent} + %) + + {stock.tradingVolume.toLocaleString()}원 + {stock.tradingValue.toLocaleString()}주 + + ))}