From 2de0a2cf737e0fb54502242342a67e4ca7edb8e2 Mon Sep 17 00:00:00 2001 From: Seo San Date: Thu, 21 Nov 2024 14:23:32 +0900 Subject: [PATCH 1/5] =?UTF-8?q?=E2=9C=A8=20feat:=20=EB=9E=AD=ED=82=B9=20?= =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EA=B5=AC=ED=98=84=20#13?= =?UTF-8?q?2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FE/src/components/Rank/Nav.tsx | 16 +++++++++++ FE/src/components/Rank/RankCard.tsx | 42 +++++++++++++++++++++++++++++ FE/src/components/Rank/RankList.tsx | 38 ++++++++++++++++++++++++++ FE/src/components/Rank/RankType.ts | 4 +++ FE/src/page/Rank.tsx | 40 +++++++++++++++++++++++++-- 5 files changed, 138 insertions(+), 2 deletions(-) create mode 100644 FE/src/components/Rank/Nav.tsx create mode 100644 FE/src/components/Rank/RankCard.tsx create mode 100644 FE/src/components/Rank/RankList.tsx create mode 100644 FE/src/components/Rank/RankType.ts diff --git a/FE/src/components/Rank/Nav.tsx b/FE/src/components/Rank/Nav.tsx new file mode 100644 index 00000000..67138e12 --- /dev/null +++ b/FE/src/components/Rank/Nav.tsx @@ -0,0 +1,16 @@ +const RankingCategory: string[] = ['일간']; + +export default function Nav() { + return ( +
+ {RankingCategory.map((category) => ( + + ))} +
+ ); +} diff --git a/FE/src/components/Rank/RankCard.tsx b/FE/src/components/Rank/RankCard.tsx new file mode 100644 index 00000000..b2ac264b --- /dev/null +++ b/FE/src/components/Rank/RankCard.tsx @@ -0,0 +1,42 @@ +import { TmpDataType } from './RankType.ts'; + +type Props = { + item: TmpDataType; + ranking: number; + type: '수익률순' | '자산순'; +}; +export default function RankCard({ item, ranking, type }: Props) { + return ( +
+
+
+ {ranking + 1} +
+ {item.nickname} +
+
+ + {type === '수익률순' + ? `${item.value}%` + : new Intl.NumberFormat('ko-KR', { + notation: 'compact', + maximumFractionDigits: 1, + }).format(item.value) + '원'} + +
+
+ ); +} diff --git a/FE/src/components/Rank/RankList.tsx b/FE/src/components/Rank/RankList.tsx new file mode 100644 index 00000000..dc35d566 --- /dev/null +++ b/FE/src/components/Rank/RankList.tsx @@ -0,0 +1,38 @@ +import { TmpDataType } from './RankType.ts'; +import RankCard from './RankCard.tsx'; + +type Props = { + title: '수익률순' | '자산순'; + data: TmpDataType[]; +}; +export default function RankList({ title, data }: Props) { + return ( +
+
+
+

{title}

+
+ +
+ {data.map((item, index) => ( + + ))} +
+
+
+
+

{`내 ${title} 순위`}

+
+ +
+ +
+
+
+ ); +} diff --git a/FE/src/components/Rank/RankType.ts b/FE/src/components/Rank/RankType.ts new file mode 100644 index 00000000..bba826fa --- /dev/null +++ b/FE/src/components/Rank/RankType.ts @@ -0,0 +1,4 @@ +export type TmpDataType = { + nickname: string; + value: number; +}; diff --git a/FE/src/page/Rank.tsx b/FE/src/page/Rank.tsx index 4406032d..4da21abe 100644 --- a/FE/src/page/Rank.tsx +++ b/FE/src/page/Rank.tsx @@ -1,7 +1,43 @@ +import Nav from 'components/Rank/Nav.tsx'; +import RankList from '../components/Rank/RankList.tsx'; + +const dummyOne = [ + { nickname: 'MasterInvestor', value: 28.5 }, + { nickname: 'StockExpert', value: 22.3 }, + { nickname: 'SuperTrader', value: 19.8 }, + { nickname: 'WallStreetWolf', value: 17.2 }, + { nickname: 'WealthKing', value: 15.9 }, + { nickname: 'LuckyInvestor', value: 14.1 }, + { nickname: 'RichMaker', value: 12.8 }, + { nickname: 'InvestmentGuru', value: 11.5 }, + { nickname: 'MarketAnalyst', value: 10.2 }, + { nickname: 'FutureAsset', value: 9.7 }, +]; + +const dummyTwo = [ + { nickname: 'MasterInvestor', value: 15800000000 }, + { nickname: 'StockExpert', value: 9200000000 }, + { nickname: 'SuperTrader', value: 7500000000 }, + { nickname: 'WallStreetWolf', value: 6300000000 }, + { nickname: 'WealthKing', value: 4800000000 }, + { nickname: 'LuckyInvestor', value: 3200000000 }, + { nickname: 'RichMaker', value: 2500000000 }, + { nickname: 'InvestmentGuru', value: 1800000000 }, + { nickname: 'MarketAnalyst', value: 1200000000 }, + { nickname: 'FutureAsset', value: 950000000 }, +]; + export default function Rank() { return ( -
-

Ranking

+
+
+
+ +
+ + +
); } From d572d2557048171826ba09ccd2baf85256166df2 Mon Sep 17 00:00:00 2001 From: Seo San Date: Thu, 21 Nov 2024 14:56:10 +0900 Subject: [PATCH 2/5] =?UTF-8?q?=E2=9C=A8=20feat:=20=EC=A0=84=EC=B2=B4=20?= =?UTF-8?q?=EB=86=92=EC=9D=B4=20=EC=88=98=EC=A0=95=20#132=20=EC=A0=84?= =?UTF-8?q?=EC=B2=B4=20=EB=86=92=EC=9D=B4=EB=A5=BC=20=EC=88=98=EC=A0=95?= =?UTF-8?q?=ED=95=98=EC=97=AC=20=ED=95=9C=20=ED=99=94=EB=A9=B4=EC=97=90?= =?UTF-8?q?=EC=84=9C=20=EB=B3=B4=EC=9D=BC=20=EC=88=98=20=EC=9E=88=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=EC=88=98=EC=A0=95.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FE/src/components/Rank/RankList.tsx | 12 ++++++------ FE/src/page/Rank.tsx | 6 +++--- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/FE/src/components/Rank/RankList.tsx b/FE/src/components/Rank/RankList.tsx index dc35d566..06ceecb4 100644 --- a/FE/src/components/Rank/RankList.tsx +++ b/FE/src/components/Rank/RankList.tsx @@ -8,12 +8,12 @@ type Props = { export default function RankList({ title, data }: Props) { return (
-
-
+
+

{title}

-
+
{data.map((item, index) => (
-
-
+
+

{`내 ${title} 순위`}

-
+
diff --git a/FE/src/page/Rank.tsx b/FE/src/page/Rank.tsx index 4da21abe..1ef0604b 100644 --- a/FE/src/page/Rank.tsx +++ b/FE/src/page/Rank.tsx @@ -29,12 +29,12 @@ const dummyTwo = [ export default function Rank() { return ( -
-
+
+
-
+
From 306415f10037f2d0a7bb39bdb53f29da8f943184 Mon Sep 17 00:00:00 2001 From: Seo San Date: Thu, 21 Nov 2024 15:39:57 +0900 Subject: [PATCH 3/5] =?UTF-8?q?=E2=9C=A8=20feat:=20=EB=A7=88=EC=9A=B0?= =?UTF-8?q?=EC=8A=A4=20=EC=9C=84=EC=B9=98=EC=97=90=20=EB=94=B0=EB=A5=B8=20?= =?UTF-8?q?=EA=B2=A9=EC=9E=90=20=EC=83=9D=EC=84=B1=20#123?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FE/src/components/StocksDetail/Chart.tsx | 51 +++++++++++---- FE/src/utils/chart/drawMouseGrid.ts | 81 ++++++++++++++++++++++++ 2 files changed, 121 insertions(+), 11 deletions(-) create mode 100644 FE/src/utils/chart/drawMouseGrid.ts diff --git a/FE/src/components/StocksDetail/Chart.tsx b/FE/src/components/StocksDetail/Chart.tsx index b14a28d8..51f6aae7 100644 --- a/FE/src/components/StocksDetail/Chart.tsx +++ b/FE/src/components/StocksDetail/Chart.tsx @@ -14,6 +14,7 @@ import { drawXAxis } from 'utils/chart/drawXAxis.ts'; import { drawUpperYAxis } from 'utils/chart/drawUpperYAxis.ts'; import { drawLowerYAxis } from 'utils/chart/drawLowerYAxis.ts'; import { drawChartGrid } from 'utils/chart/drawChartGrid.ts'; +import { drawMouseGrid } from '../../utils/chart/drawMouseGrid.ts'; const categories: { label: string; value: TiemCategory }[] = [ { label: '일', value: 'D' }, @@ -33,6 +34,11 @@ type StocksDeatailChartProps = { code: string; }; +export type MousePositionType = { + x: number; + y: number; +}; + export default function Chart({ code }: StocksDeatailChartProps) { const containerRef = useRef(null); const upperChartCanvasRef = useRef(null); @@ -52,6 +58,10 @@ export default function Chart({ code }: StocksDeatailChartProps) { const [isDragging, setIsDragging] = useState(false); const [upperLabelNum, setUpperLabelNum] = useState(3); const [lowerLabelNum, setLowerLabelNum] = useState(3); + const [mousePosition, setMousePosition] = useState({ + x: 0, + y: 0, + }); const { data, isLoading } = useQuery( ['stocksChartData', code, timeCategory], @@ -105,16 +115,14 @@ export default function Chart({ code }: StocksDeatailChartProps) { setIsDragging(false); }, []); - // const getCanvasMousePosition = (e: MouseEvent) => { - // if (!containerRef.current) return; - // const rect = containerRef.current.getBoundingClientRect(); - // const tmp = { - // x:e.clientX - rect.left, - // y: e.clientY - rect.top, - // }; - // console.log(tmp); - // return tmp; - // }; + const getCanvasMousePosition = (e: MouseEvent) => { + if (!containerRef.current) return; + const rect = containerRef.current.getBoundingClientRect(); + setMousePosition({ + x: (e.clientX - rect.left) * 2, + y: (e.clientY - rect.top) * 2, + }); + }; useEffect(() => { if (isDragging) { @@ -147,6 +155,7 @@ export default function Chart({ code }: StocksDeatailChartProps) { lowerChartYCanvas: HTMLCanvasElement, chartXCanvas: HTMLCanvasElement, chartData: StockChartUnit[], + mousePosition: MousePositionType, ) => { const UpperChartCtx = upperChartCanvas.getContext('2d'); const LowerChartCtx = lowerChartCanvas.getContext('2d'); @@ -232,6 +241,24 @@ export default function Chart({ code }: StocksDeatailChartProps) { chartXCanvas.height, padding, ); + + if ( + mousePosition.x > padding.left && + mousePosition.x < upperChartCanvas.width && + mousePosition.y > padding.top && + mousePosition.y < upperChartCanvas.height + lowerChartCanvas.height + ) { + drawMouseGrid( + UpperChartCtx, + upperChartCanvas.width - padding.left - padding.right, + upperChartCanvas.height - padding.top - padding.bottom, + LowerChartCtx, + lowerChartCanvas.width - padding.left - padding.right, + lowerChartCanvas.height - padding.top - padding.bottom, + padding, + mousePosition, + ); + } }, [ padding, @@ -295,6 +322,7 @@ export default function Chart({ code }: StocksDeatailChartProps) { lowerChartY.current, chartX.current, data, + mousePosition, ); }, [ timeCategory, @@ -303,6 +331,7 @@ export default function Chart({ code }: StocksDeatailChartProps) { setCanvasSize, renderChart, charSizeConfig, + mousePosition, ]); return ( @@ -324,7 +353,7 @@ export default function Chart({ code }: StocksDeatailChartProps) {
{/* Upper 차트 영역 */}
diff --git a/FE/src/utils/chart/drawMouseGrid.ts b/FE/src/utils/chart/drawMouseGrid.ts new file mode 100644 index 00000000..01d55441 --- /dev/null +++ b/FE/src/utils/chart/drawMouseGrid.ts @@ -0,0 +1,81 @@ +import { Padding } from 'types.ts'; +import { MousePositionType } from 'components/StocksDetail/Chart.tsx'; + +export const drawMouseGrid = ( + upperChartCtx: CanvasRenderingContext2D, + upperChartWidth: number, + upperChartHeight: number, + lowerChartCtx: CanvasRenderingContext2D, + lowerChartWidth: number, + lowerChartHeight: number, + padding: Padding, + mousePosition: MousePositionType, +) => { + if ( + mousePosition.x > 0 && + mousePosition.x < upperChartWidth + padding.left + padding.right + ) { + upperChartCtx.beginPath(); + upperChartCtx.setLineDash([10, 10]); + upperChartCtx.moveTo(mousePosition.x, padding.top); + upperChartCtx.lineTo( + mousePosition.x, + padding.top + upperChartHeight + padding.bottom, + ); + + upperChartCtx.strokeStyle = '#6E8091'; + upperChartCtx.lineWidth = 1; + upperChartCtx.stroke(); + + lowerChartCtx.beginPath(); + lowerChartCtx.setLineDash([10, 10]); + lowerChartCtx.moveTo(mousePosition.x, 0); + lowerChartCtx.lineTo(mousePosition.x, upperChartHeight + padding.bottom); + + lowerChartCtx.strokeStyle = '#6E8091'; + lowerChartCtx.lineWidth = 1; + lowerChartCtx.stroke(); + } + + if ( + mousePosition.y > 0 && + mousePosition.y < upperChartHeight + padding.top + padding.bottom + ) { + upperChartCtx.beginPath(); + upperChartCtx.moveTo(0, mousePosition.y); + upperChartCtx.lineTo( + upperChartWidth + padding.left + padding.right, + mousePosition.y, + ); + + upperChartCtx.strokeStyle = '#6E8091'; + upperChartCtx.lineWidth = 1; + upperChartCtx.stroke(); + } + + if ( + mousePosition.y > upperChartHeight + padding.top + padding.bottom && + mousePosition.y < + upperChartHeight + + padding.top + + padding.bottom + + lowerChartHeight + + padding.top + + padding.bottom + ) { + lowerChartCtx.beginPath(); + lowerChartCtx.moveTo( + 0, + mousePosition.y - (upperChartHeight + padding.top + padding.bottom), + ); + lowerChartCtx.lineTo( + lowerChartWidth + padding.left + padding.right, + mousePosition.y - + (upperChartHeight + padding.top + padding.bottom + padding.bottom), + ); + + lowerChartCtx.strokeStyle = '#6E8091'; + lowerChartCtx.lineWidth = 1; + lowerChartCtx.stroke(); + } +}; From 9f20bc66d64f4315ef5a7164b1597ea4090c7058 Mon Sep 17 00:00:00 2001 From: Seo San Date: Thu, 21 Nov 2024 16:48:01 +0900 Subject: [PATCH 4/5] =?UTF-8?q?=E2=9C=A8=20feat:=20dummy=EB=8D=B0=EC=9D=B4?= =?UTF-8?q?=ED=84=B0=EB=A5=BC=20=EC=9D=B4=EC=9A=A9=ED=95=B4=20=EC=B6=9C?= =?UTF-8?q?=EB=A0=A5=20=ED=99=95=EC=9D=B8.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FE/src/components/Rank/RankCard.tsx | 18 ++-- FE/src/components/Rank/RankList.tsx | 30 ++++--- FE/src/components/Rank/bummyData.ts | 133 ++++++++++++++++++++++++++++ FE/src/page/Rank.tsx | 39 +++----- FE/src/service/getRanking.ts | 7 ++ 5 files changed, 182 insertions(+), 45 deletions(-) create mode 100644 FE/src/components/Rank/bummyData.ts create mode 100644 FE/src/service/getRanking.ts diff --git a/FE/src/components/Rank/RankCard.tsx b/FE/src/components/Rank/RankCard.tsx index b2ac264b..8c25a4f9 100644 --- a/FE/src/components/Rank/RankCard.tsx +++ b/FE/src/components/Rank/RankCard.tsx @@ -1,14 +1,20 @@ -import { TmpDataType } from './RankType.ts'; +import { AssetRankItemType, ProfitRankItemType } from './bummyData.ts'; type Props = { - item: TmpDataType; + item: ProfitRankItemType | AssetRankItemType; ranking: number; type: '수익률순' | '자산순'; }; + export default function RankCard({ item, ranking, type }: Props) { + const isProfitRankItem = ( + item: ProfitRankItemType | AssetRankItemType, + ): item is ProfitRankItemType => { + return 'profitRate' in item; + }; + return (
@@ -30,11 +36,13 @@ export default function RankCard({ item, ranking, type }: Props) {
{type === '수익률순' - ? `${item.value}%` + ? isProfitRankItem(item) + ? `${item.profitRate}%` + : '0%' : new Intl.NumberFormat('ko-KR', { notation: 'compact', maximumFractionDigits: 1, - }).format(item.value) + '원'} + }).format((item as AssetRankItemType).totalAsset) + '원'}
diff --git a/FE/src/components/Rank/RankList.tsx b/FE/src/components/Rank/RankList.tsx index 06ceecb4..3a09fe35 100644 --- a/FE/src/components/Rank/RankList.tsx +++ b/FE/src/components/Rank/RankList.tsx @@ -1,11 +1,15 @@ -import { TmpDataType } from './RankType.ts'; -import RankCard from './RankCard.tsx'; +import RankCard from './RankCard'; +import useAuthStore from '../../store/authStore.ts'; +import { AssetRankingType, ProfitRankingType } from './bummyData.ts'; type Props = { title: '수익률순' | '자산순'; - data: TmpDataType[]; + data: ProfitRankingType | AssetRankingType; }; + export default function RankList({ title, data }: Props) { + const { topRank, userRank } = data; + const { isLogin } = useAuthStore(); return (
@@ -14,9 +18,9 @@ export default function RankList({ title, data }: Props) {
- {data.map((item, index) => ( + {topRank.map((item, index) => (
-
-
-

{`내 ${title} 순위`}

-
+ {!isLogin && userRank !== null && typeof userRank.rank === 'number' ? ( +
+
+

{`내 ${title} 순위`}

+
-
- +
+ +
-
+ ) : null}
); } diff --git a/FE/src/components/Rank/bummyData.ts b/FE/src/components/Rank/bummyData.ts new file mode 100644 index 00000000..acf27717 --- /dev/null +++ b/FE/src/components/Rank/bummyData.ts @@ -0,0 +1,133 @@ +// 타입 수정 +// 수익률 랭킹 타입 +export type ProfitRankItemType = { + nickname: string; + profitRate: number; + rank?: number; +}; + +// 수익률 랭킹 타입 +export type ProfitRankingType = { + topRank: ProfitRankItemType[]; + userRank: ProfitRankItemType; +}; + +// 자산 랭킹 타입 +export type AssetRankItemType = { + nickname: string; + totalAsset: number; + rank?: number; +}; + +// 자산 랭킹 타입 +export type AssetRankingType = { + topRank: AssetRankItemType[]; + userRank: AssetRankItemType; +}; + +export type RankDataType = { + profitRateRanking: ProfitRankingType; + assetRanking: AssetRankingType; +}; + +// 더미 데이터 +export const dummyRankData: RankDataType = { + profitRateRanking: { + topRank: [ + { + nickname: '투자의신', + profitRate: 356.72, + }, + { + nickname: '주식왕', + profitRate: 245.89, + }, + { + nickname: '워렌버핏', + profitRate: 198.45, + }, + { + nickname: '존버마스터', + profitRate: 156.23, + }, + { + nickname: '주린이탈출', + profitRate: 134.51, + }, + { + nickname: '테슬라홀더', + profitRate: 122.34, + }, + { + nickname: '배당투자자', + profitRate: 98.67, + }, + { + nickname: '단타치는무도가', + profitRate: 87.91, + }, + { + nickname: '가치투자자', + profitRate: 76.45, + }, + { + nickname: '코스피불독', + profitRate: 65.23, + }, + ], + userRank: { + nickname: '나의닉네임', + profitRate: 45.67, + rank: 23, // 23등으로 설정 + }, + }, + assetRanking: { + topRank: [ + { + nickname: '자산왕', + totalAsset: 15800000000, + }, + { + nickname: '억만장자', + totalAsset: 9200000000, + }, + { + nickname: '주식부자', + totalAsset: 7500000000, + }, + { + nickname: '연봉1억', + totalAsset: 6300000000, + }, + { + nickname: '월급쟁이탈출', + totalAsset: 4800000000, + }, + { + nickname: '부자될사람', + totalAsset: 3200000000, + }, + { + nickname: '재테크고수', + totalAsset: 2500000000, + }, + { + nickname: '천만원돌파', + totalAsset: 1800000000, + }, + { + nickname: '주식으로퇴사', + totalAsset: 1200000000, + }, + { + nickname: '투자의시작', + totalAsset: 950000000, + }, + ], + userRank: { + nickname: '나의닉네임', + totalAsset: 850000000, + rank: 15, // 15등으로 설정 + }, + }, +}; diff --git a/FE/src/page/Rank.tsx b/FE/src/page/Rank.tsx index 1ef0604b..6c13c715 100644 --- a/FE/src/page/Rank.tsx +++ b/FE/src/page/Rank.tsx @@ -1,33 +1,16 @@ import Nav from 'components/Rank/Nav.tsx'; import RankList from '../components/Rank/RankList.tsx'; - -const dummyOne = [ - { nickname: 'MasterInvestor', value: 28.5 }, - { nickname: 'StockExpert', value: 22.3 }, - { nickname: 'SuperTrader', value: 19.8 }, - { nickname: 'WallStreetWolf', value: 17.2 }, - { nickname: 'WealthKing', value: 15.9 }, - { nickname: 'LuckyInvestor', value: 14.1 }, - { nickname: 'RichMaker', value: 12.8 }, - { nickname: 'InvestmentGuru', value: 11.5 }, - { nickname: 'MarketAnalyst', value: 10.2 }, - { nickname: 'FutureAsset', value: 9.7 }, -]; - -const dummyTwo = [ - { nickname: 'MasterInvestor', value: 15800000000 }, - { nickname: 'StockExpert', value: 9200000000 }, - { nickname: 'SuperTrader', value: 7500000000 }, - { nickname: 'WallStreetWolf', value: 6300000000 }, - { nickname: 'WealthKing', value: 4800000000 }, - { nickname: 'LuckyInvestor', value: 3200000000 }, - { nickname: 'RichMaker', value: 2500000000 }, - { nickname: 'InvestmentGuru', value: 1800000000 }, - { nickname: 'MarketAnalyst', value: 1200000000 }, - { nickname: 'FutureAsset', value: 950000000 }, -]; +import { dummyRankData } from '../components/Rank/bummyData.ts'; export default function Rank() { + // const { data, isLoading } = useQuery({ + // queryKey: ['Rank'], + // queryFn: () => getRanking(), + // }); + // + // if (isLoading) return
Loading...
; + const data = dummyRankData; + return (
@@ -35,8 +18,8 @@ export default function Rank() {
- - + +
); diff --git a/FE/src/service/getRanking.ts b/FE/src/service/getRanking.ts new file mode 100644 index 00000000..2c5221d9 --- /dev/null +++ b/FE/src/service/getRanking.ts @@ -0,0 +1,7 @@ +export const getRanking = async () => { + const response = await fetch(`${import.meta.env.VITE_API_URL}/ranking`); + if (!response.ok) { + throw new Error('Network response was not ok'); + } + return response.json(); +}; From 006272f4220603ea099fb9020226113d5a954b60 Mon Sep 17 00:00:00 2001 From: Seo San Date: Thu, 21 Nov 2024 16:57:23 +0900 Subject: [PATCH 5/5] =?UTF-8?q?=F0=9F=94=A7=20fix:=20singlequote=EA=B4=80?= =?UTF-8?q?=EB=A0=A8=20lint=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FE/src/components/Rank/RankCard.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/FE/src/components/Rank/RankCard.tsx b/FE/src/components/Rank/RankCard.tsx index 8c25a4f9..3e74496f 100644 --- a/FE/src/components/Rank/RankCard.tsx +++ b/FE/src/components/Rank/RankCard.tsx @@ -15,7 +15,9 @@ export default function RankCard({ item, ranking, type }: Props) { return (