From 882276cf9c6ee19ee9f8d9ebe249dd048d927d82 Mon Sep 17 00:00:00 2001 From: Seo San Date: Mon, 25 Nov 2024 15:45:01 +0900 Subject: [PATCH 1/8] =?UTF-8?q?=E2=9C=A8=20feat:=20socket=20=EC=97=B0?= =?UTF-8?q?=EA=B2=B0=20=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/StocksDetail/PriceSection.tsx | 26 +++++++++++++++++++ FE/src/components/TopFive/TopFive.tsx | 1 + 2 files changed, 27 insertions(+) diff --git a/FE/src/components/StocksDetail/PriceSection.tsx b/FE/src/components/StocksDetail/PriceSection.tsx index 7e04ba8d..5b523215 100644 --- a/FE/src/components/StocksDetail/PriceSection.tsx +++ b/FE/src/components/StocksDetail/PriceSection.tsx @@ -34,6 +34,32 @@ export default function PriceSection() { [id, buttonFlag], ); + if (isLoading) return; + + // useEffect(() => { + // // 이벤트 리스너 등록 + // const handleTradeHistory = (chartData: PriceDataType) => { + // addData(chartData); + // }; + // + // // 소켓 이벤트 구독 + // socket.on(`trade-history/${id}`, handleTradeHistory); + // + // return () => { + // console.log('socket unSub!'); + // socket.off(`trade-history/${id}`, handleTradeHistory); + // + // fetch(`/api/stocks/trade-history/${id}/unsubscribe`, { + // method: 'GET', + // headers: { + // 'Content-Type': 'application/json', + // }, + // }).catch((error) => { + // console.error('Failed to unsubscribe:', error); + // }); + // }; + // }, [id, addData]); + useEffect(() => { if (!buttonFlag) return; const eventSource = createSSEConnection( diff --git a/FE/src/components/TopFive/TopFive.tsx b/FE/src/components/TopFive/TopFive.tsx index a56dec60..aef005b1 100644 --- a/FE/src/components/TopFive/TopFive.tsx +++ b/FE/src/components/TopFive/TopFive.tsx @@ -19,6 +19,7 @@ export default function TopFive() { queryKey: ['topfive', currentMarket], queryFn: () => getTopFiveStocks(paramsMap[currentMarket]), keepPreviousData: true, + staleTime: 1000, cacheTime: 30000, // refetchInterval: 1000, }); From 4add332573ea8d20d36845ca11748c702f3ff0d9 Mon Sep 17 00:00:00 2001 From: Seo San Date: Mon, 25 Nov 2024 16:09:46 +0900 Subject: [PATCH 2/8] =?UTF-8?q?=F0=9F=94=A7=20fix:=20useQuery=20=EC=97=90?= =?UTF-8?q?=EB=9F=AC=EC=B2=98=EB=A6=AC=20=EC=B6=94=EA=B0=80.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FE/src/components/StockIndex/index.tsx | 15 ++++++++------- FE/src/components/StocksDetail/PriceSection.tsx | 2 -- FE/src/service/getStockIndex.ts | 7 +++++++ 3 files changed, 15 insertions(+), 9 deletions(-) create mode 100644 FE/src/service/getStockIndex.ts diff --git a/FE/src/components/StockIndex/index.tsx b/FE/src/components/StockIndex/index.tsx index 133d04c7..6b0adb1e 100644 --- a/FE/src/components/StockIndex/index.tsx +++ b/FE/src/components/StockIndex/index.tsx @@ -1,21 +1,22 @@ import { Card } from './Card.tsx'; import { useQuery } from '@tanstack/react-query'; +import { getStockIndex } from '../../service/getStockIndex.ts'; export default function StockIndex() { - const { data, isLoading } = useQuery({ + const { data, isLoading, isError } = useQuery({ queryKey: ['StockIndex'], - queryFn: () => - fetch(`${import.meta.env.VITE_API_URL}/stocks/index`).then((res) => - res.json(), - ), + queryFn: () => getStockIndex(), + staleTime: 1000, + cacheTime: 60000, }); - if (isLoading) return; + if (isLoading) return
Loading...
; + if (isError) return
Error loading data
; const { KOSPI, KOSDAQ, KOSPI200, KSQ150 } = data; return ( -
+
diff --git a/FE/src/components/StocksDetail/PriceSection.tsx b/FE/src/components/StocksDetail/PriceSection.tsx index 5b523215..dd8436a2 100644 --- a/FE/src/components/StocksDetail/PriceSection.tsx +++ b/FE/src/components/StocksDetail/PriceSection.tsx @@ -34,8 +34,6 @@ export default function PriceSection() { [id, buttonFlag], ); - if (isLoading) return; - // useEffect(() => { // // 이벤트 리스너 등록 // const handleTradeHistory = (chartData: PriceDataType) => { diff --git a/FE/src/service/getStockIndex.ts b/FE/src/service/getStockIndex.ts new file mode 100644 index 00000000..e5f23d48 --- /dev/null +++ b/FE/src/service/getStockIndex.ts @@ -0,0 +1,7 @@ +export const getStockIndex = async () => { + const response = await fetch(`${import.meta.env.VITE_API_URL}/stocks/index`); + if (!response.ok) { + throw new Error('Network response was not ok'); + } + return response.json(); +}; From 937da869ad6742a7bfbe1d9153a86223a547e000 Mon Sep 17 00:00:00 2001 From: Seo San Date: Mon, 25 Nov 2024 16:28:49 +0900 Subject: [PATCH 3/8] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20=ED=97=A4?= =?UTF-8?q?=EB=8D=94=20=EB=B2=84=ED=8A=BC=20=ED=81=B4=EB=A6=AD=20=EA=B4=80?= =?UTF-8?q?=EB=A0=A8=20=EC=B5=9C=EC=A0=81=ED=99=94.=20=ED=97=A4=EB=8D=94?= =?UTF-8?q?=20=EB=B2=84=ED=8A=BC=EC=9D=84=20=ED=81=B4=EB=A6=AD=EC=8B=9C=20?= =?UTF-8?q?=EC=9D=B4=EB=AF=B8=20=ED=95=B4=EB=8B=B9=20=EC=9C=84=EC=B9=98?= =?UTF-8?q?=EC=97=90=20=EC=9E=88=EC=96=B4=EB=8F=84=20=ED=95=B4=EB=8B=B9=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=A0=84=EC=B2=B4=EA=B0=80=20?= =?UTF-8?q?=EB=8B=A4=EC=8B=9C=20=EB=A0=8C=EB=8D=94=EB=A7=81=EC=9D=B4=20?= =?UTF-8?q?=EB=90=98=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20=EB=B0=9C=EC=83=9D?= =?UTF-8?q?=ED=95=98=EC=97=AC=20=EB=A1=9C=EC=A7=81=20=EA=B0=9C=EC=84=A0.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FE/src/components/Header.tsx | 34 ++++++++++++++++++++++++++++++---- 1 file changed, 30 insertions(+), 4 deletions(-) diff --git a/FE/src/components/Header.tsx b/FE/src/components/Header.tsx index b027c866..3381cb00 100644 --- a/FE/src/components/Header.tsx +++ b/FE/src/components/Header.tsx @@ -1,4 +1,4 @@ -import { Link } from 'react-router-dom'; +import { Link, useLocation, useNavigate } from 'react-router-dom'; import useAuthStore from 'store/authStore'; import useLoginModalStore from 'store/useLoginModalStore'; import useSearchModalStore from '../store/useSearchModalStore.ts'; @@ -12,6 +12,8 @@ export default function Header() { const { isLogin, setIsLogin } = useAuthStore(); const { toggleSearchModal } = useSearchModalStore(); const { searchInput } = useSearchInputStore(); + const location = useLocation(); + const navigate = useNavigate(); useEffect(() => { const check = async () => { @@ -29,6 +31,13 @@ export default function Header() { }); }; + const handleLink = (to: string) => { + if (location.pathname === to) { + return; + } + navigate(to); + }; + return (
@@ -39,9 +48,26 @@ export default function Header() {
Date: Mon, 25 Nov 2024 17:24:41 +0900 Subject: [PATCH 4/8] =?UTF-8?q?=E2=9C=A8=20feat:=20=EB=89=B4=EC=8A=A4=20?= =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EA=B8=B0=EC=B4=88=20?= =?UTF-8?q?=EC=9E=91=EC=97=85=20#188=20=EB=89=B4=EC=8A=A4=20=EB=A0=88?= =?UTF-8?q?=EC=9D=B4=EC=95=84=EC=9B=83=EC=9D=84=20=EC=9C=84=ED=95=9C=20?= =?UTF-8?q?=EC=B4=88=EA=B8=B0=20=EC=9E=91=EC=97=85.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FE/src/components/News/CardWithImage.tsx | 3 +++ FE/src/components/News/CardWithoutImage.tsx | 3 +++ FE/src/components/News/Header.tsx | 7 +++++++ FE/src/components/News/News.tsx | 22 +++++++++++++++++++++ FE/src/page/Home.tsx | 2 ++ 5 files changed, 37 insertions(+) create mode 100644 FE/src/components/News/CardWithImage.tsx create mode 100644 FE/src/components/News/CardWithoutImage.tsx create mode 100644 FE/src/components/News/Header.tsx create mode 100644 FE/src/components/News/News.tsx diff --git a/FE/src/components/News/CardWithImage.tsx b/FE/src/components/News/CardWithImage.tsx new file mode 100644 index 00000000..3295e803 --- /dev/null +++ b/FE/src/components/News/CardWithImage.tsx @@ -0,0 +1,3 @@ +export default function CardWithImage() { + return
image
; +} diff --git a/FE/src/components/News/CardWithoutImage.tsx b/FE/src/components/News/CardWithoutImage.tsx new file mode 100644 index 00000000..db9ea5d2 --- /dev/null +++ b/FE/src/components/News/CardWithoutImage.tsx @@ -0,0 +1,3 @@ +export default function CardWithoutImage() { + return
No image
; +} diff --git a/FE/src/components/News/Header.tsx b/FE/src/components/News/Header.tsx new file mode 100644 index 00000000..7d3c7f67 --- /dev/null +++ b/FE/src/components/News/Header.tsx @@ -0,0 +1,7 @@ +export default function Header() { + return ( +
+
주요 뉴스
+
+ ); +} diff --git a/FE/src/components/News/News.tsx b/FE/src/components/News/News.tsx new file mode 100644 index 00000000..bfeb9125 --- /dev/null +++ b/FE/src/components/News/News.tsx @@ -0,0 +1,22 @@ +import Header from './Header.tsx'; +import CardWithImage from './CardWithImage.tsx'; +import CardWithoutImage from './CardWithoutImage.tsx'; + +export default function News() { + return ( +
+
+
    + +
+ +
    + +
+
+ ); +} diff --git a/FE/src/page/Home.tsx b/FE/src/page/Home.tsx index 3ae5da96..938d05f7 100644 --- a/FE/src/page/Home.tsx +++ b/FE/src/page/Home.tsx @@ -1,11 +1,13 @@ import TopFive from 'components/TopFive/TopFive'; import StockIndex from 'components/StockIndex/index.tsx'; +import News from '../components/News/News.tsx'; export default function Home() { return ( <> + ); } From ee0fb528722e0cf60893e3f940684f0a6c3b9541 Mon Sep 17 00:00:00 2001 From: Seo San Date: Mon, 25 Nov 2024 17:25:48 +0900 Subject: [PATCH 5/8] =?UTF-8?q?=F0=9F=94=A7=20fix:=20=EA=B2=80=EC=83=89=20?= =?UTF-8?q?=EA=B4=80=EB=A0=A8=20=EC=BA=90=EC=8B=B1=20=EC=B2=98=EB=A6=AC=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20#191?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FE/src/components/Search/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/FE/src/components/Search/index.tsx b/FE/src/components/Search/index.tsx index 0fc866c2..c271ef96 100644 --- a/FE/src/components/Search/index.tsx +++ b/FE/src/components/Search/index.tsx @@ -28,6 +28,8 @@ export default function SearchModal() { queryKey: ['search', debounceValue], queryFn: () => getSearchResults(debounceValue), enabled: !!debounceValue && !isDebouncing, + staleTime: 1000, + cacheTime: 1000 * 60, }); useEffect(() => { From a0b8e0f1dddd4b36060f31db07d1028fba297b94 Mon Sep 17 00:00:00 2001 From: Seo San Date: Mon, 25 Nov 2024 19:14:10 +0900 Subject: [PATCH 6/8] =?UTF-8?q?=E2=9C=A8=20feat:=20=EB=89=B4=EC=8A=A4=20?= =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=83=9D=EC=84=B1=20#18?= =?UTF-8?q?8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FE/src/components/News/CardWithImage.tsx | 33 ++++++++++++++- FE/src/components/News/CardWithoutImage.tsx | 11 ++++- FE/src/components/News/Header.tsx | 7 ---- FE/src/components/News/News.tsx | 21 ++++++---- FE/src/components/News/newsMockData.ts | 45 +++++++++++++++++++++ 5 files changed, 99 insertions(+), 18 deletions(-) delete mode 100644 FE/src/components/News/Header.tsx create mode 100644 FE/src/components/News/newsMockData.ts diff --git a/FE/src/components/News/CardWithImage.tsx b/FE/src/components/News/CardWithImage.tsx index 3295e803..ada1e378 100644 --- a/FE/src/components/News/CardWithImage.tsx +++ b/FE/src/components/News/CardWithImage.tsx @@ -1,3 +1,32 @@ -export default function CardWithImage() { - return
image
; +import { NewsMockDataType } from './newsMockData.ts'; + +type CardWithImageProps = { + data: NewsMockDataType; +}; +export default function CardWithImage({ data }: CardWithImageProps) { + return ( +
+ {/* 이미지 컨테이너 */} +
+ news thumbnail +
+ +
+ {/* 뉴스 제목 */} +

+ {data.title} +

+ + {/* 날짜와 출판사 */} +
+
{data.date}
+
{data.publisher}
+
+
+
+ ); } diff --git a/FE/src/components/News/CardWithoutImage.tsx b/FE/src/components/News/CardWithoutImage.tsx index db9ea5d2..8fa0501a 100644 --- a/FE/src/components/News/CardWithoutImage.tsx +++ b/FE/src/components/News/CardWithoutImage.tsx @@ -1,3 +1,12 @@ export default function CardWithoutImage() { - return
No image
; + return ( +
+ + [단독] 반도체 산업 신규 투자 확대...정부 지원책 발표 + + + 중앙일보 + +
+ ); } diff --git a/FE/src/components/News/Header.tsx b/FE/src/components/News/Header.tsx deleted file mode 100644 index 7d3c7f67..00000000 --- a/FE/src/components/News/Header.tsx +++ /dev/null @@ -1,7 +0,0 @@ -export default function Header() { - return ( -
-
주요 뉴스
-
- ); -} diff --git a/FE/src/components/News/News.tsx b/FE/src/components/News/News.tsx index bfeb9125..71b360a1 100644 --- a/FE/src/components/News/News.tsx +++ b/FE/src/components/News/News.tsx @@ -1,20 +1,25 @@ -import Header from './Header.tsx'; import CardWithImage from './CardWithImage.tsx'; import CardWithoutImage from './CardWithoutImage.tsx'; +import { newsMockData, NewsMockDataType } from './newsMockData.ts'; export default function News() { return (
-
-
    - +
    +
    주요 뉴스
    +
    +
      + {newsMockData.slice(0, 4).map((data: NewsMockDataType) => ( + + ))}
    -
      +
        + + +
diff --git a/FE/src/components/News/newsMockData.ts b/FE/src/components/News/newsMockData.ts new file mode 100644 index 00000000..8fbff356 --- /dev/null +++ b/FE/src/components/News/newsMockData.ts @@ -0,0 +1,45 @@ +export type NewsMockDataType = { + publisher: string; + img: string; + title: string; + date: string; + link: string; +}; + +export const newsMockData: NewsMockDataType[] = [ + { + publisher: '중앙일보', + img: 'https://s.pstatic.net/dthumb.phinf/?src=%22https%3A%2F%2Fs.pstatic.net%2Fstatic%2Fnewsstand%2F2024%2F1125%2Farticle_img%2Fnew_main%2F9152%2F071102_001.jpg%22&type=nf312_208&service=navermain', + title: '[단독] 반도체 산업 신규 투자 확대...정부 지원책 발표', + date: '11월 03일 18:55 직접 편집', + link: 'https://www.joongang.co.kr/article/25288962', + }, + { + publisher: '동아일보', + img: 'https://s.pstatic.net/dthumb.phinf/?src=%22https%3A%2F%2Fs.pstatic.net%2Fstatic%2Fnewsstand%2F2024%2F1125%2Farticle_img%2Fnew_main%2F9131%2F172557_001.jpg%22&type=nf312_208&service=navermain', + title: '청년 주거대책 발표...월세 지원 확대', + date: '11월 03일 18:39 직접 편집', + link: 'https://www.donga.com/news/article/all/20241103/123456', + }, + { + publisher: '한국경제', + img: 'https://s.pstatic.net/dthumb.phinf/?src=%22https%3A%2F%2Fs.pstatic.net%2Fstatic%2Fnewsstand%2F2024%2F1125%2Farticle_img%2Fnew_main%2F9029%2F175118_001.jpg%22&type=nf312_208&service=navermain', + title: '기준금리 동결 전망...시장 영향은?', + date: '11월 03일 17:50 직접 편집', + link: 'https://www.hankyung.com/article/2024110387654', + }, + { + publisher: '매일경제', + img: 'https://s.pstatic.net/dthumb.phinf/?src=%22https%3A%2F%2Fs.pstatic.net%2Fstatic%2Fnewsstand%2F2024%2F1125%2Farticle_img%2Fnew_main%2F9243%2F174551_001.jpg%22&type=nf312_208&service=navermain', + title: '글로벌 기업들의 韓 투자 러시...배경은?', + date: '11월 03일 17:30 직접 편집', + link: 'https://www.mk.co.kr/news/2024/11/123987', + }, + { + publisher: '한겨레', + img: 'https://s.pstatic.net/static/newsstand/2024/1103/article_img/9005/171525_001.jpg', + title: '환경부, 신재생에너지 정책 전면 개편 추진', + date: '11월 03일 17:15 직접 편집', + link: 'https://www.hani.co.kr/arti/20241103-654321', + }, +]; From 14925488a5e0ed22e53b2bf111ae3964c6ba35d7 Mon Sep 17 00:00:00 2001 From: Seo San Date: Mon, 25 Nov 2024 19:36:14 +0900 Subject: [PATCH 7/8] =?UTF-8?q?=F0=9F=94=A7=20fix:=20=EB=9E=AD=ED=82=B9=20?= =?UTF-8?q?=EA=B4=80=EB=A0=A8=20fetch=20=EC=9A=94=EC=B2=AD=EC=97=90=20?= =?UTF-8?q?=EC=BF=A0=ED=82=A4=20=ED=8F=AC=ED=95=A8=20=EC=98=B5=EC=85=98=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20#133?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FE/src/service/getRanking.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/FE/src/service/getRanking.ts b/FE/src/service/getRanking.ts index 2c5221d9..a966695b 100644 --- a/FE/src/service/getRanking.ts +++ b/FE/src/service/getRanking.ts @@ -1,5 +1,8 @@ export const getRanking = async () => { - const response = await fetch(`${import.meta.env.VITE_API_URL}/ranking`); + const response = await fetch(`${import.meta.env.VITE_API_URL}/ranking`, { + credentials: 'include', + headers: { 'Content-Type': 'application/json' }, + }); if (!response.ok) { throw new Error('Network response was not ok'); } From 0c53b04baf80cbeb93cd9ee2100c317a8e088be1 Mon Sep 17 00:00:00 2001 From: Seo San Date: Mon, 25 Nov 2024 19:57:01 +0900 Subject: [PATCH 8/8] =?UTF-8?q?=E2=9C=A8=20feat:=20=EB=9E=AD=ED=82=B9=20AP?= =?UTF-8?q?I=20=EC=97=B0=EB=8F=99=20#133?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FE/src/components/Rank/RankCard.tsx | 27 ++---- FE/src/components/Rank/RankList.tsx | 9 +- FE/src/components/Rank/RankType.ts | 13 ++- FE/src/components/Rank/bummyData.ts | 133 ---------------------------- FE/src/page/Rank.tsx | 17 ++-- 5 files changed, 34 insertions(+), 165 deletions(-) delete mode 100644 FE/src/components/Rank/bummyData.ts diff --git a/FE/src/components/Rank/RankCard.tsx b/FE/src/components/Rank/RankCard.tsx index 3e74496f..fef5a8e8 100644 --- a/FE/src/components/Rank/RankCard.tsx +++ b/FE/src/components/Rank/RankCard.tsx @@ -1,18 +1,11 @@ -import { AssetRankItemType, ProfitRankItemType } from './bummyData.ts'; +import { RankingItem } from './RankType.ts'; type Props = { - item: ProfitRankItemType | AssetRankItemType; - ranking: number; + item: RankingItem; type: '수익률순' | '자산순'; }; -export default function RankCard({ item, ranking, type }: Props) { - const isProfitRankItem = ( - item: ProfitRankItemType | AssetRankItemType, - ): item is ProfitRankItemType => { - return 'profitRate' in item; - }; - +export default function RankCard({ item, type }: Props) { return (
- {ranking + 1} + {item.rank}
{item.nickname}
{type === '수익률순' - ? isProfitRankItem(item) - ? `${item.profitRate}%` - : '0%' + ? `${item.value}%` : new Intl.NumberFormat('ko-KR', { notation: 'compact', maximumFractionDigits: 1, - }).format((item as AssetRankItemType).totalAsset) + '원'} + }).format((item as RankingItem).value) + '원'}
diff --git a/FE/src/components/Rank/RankList.tsx b/FE/src/components/Rank/RankList.tsx index 9bf814f5..13fdbcb9 100644 --- a/FE/src/components/Rank/RankList.tsx +++ b/FE/src/components/Rank/RankList.tsx @@ -1,10 +1,10 @@ import RankCard from './RankCard'; import useAuthStore from '../../store/authStore.ts'; -import { AssetRankingType, ProfitRankingType } from './bummyData.ts'; +import { RankingCategory } from './RankType.ts'; type Props = { title: '수익률순' | '자산순'; - data: ProfitRankingType | AssetRankingType; + data: RankingCategory; }; export default function RankList({ title, data }: Props) { @@ -22,20 +22,19 @@ export default function RankList({ title, data }: Props) { ))}
- {isLogin && userRank !== null && typeof userRank.rank === 'number' ? ( + {isLogin && userRank !== null ? (

{`내 ${title} 순위`}

- +
) : null} diff --git a/FE/src/components/Rank/RankType.ts b/FE/src/components/Rank/RankType.ts index bba826fa..1a4937db 100644 --- a/FE/src/components/Rank/RankType.ts +++ b/FE/src/components/Rank/RankType.ts @@ -1,4 +1,15 @@ -export type TmpDataType = { +export type RankingItem = { nickname: string; + rank: number; value: number; }; + +export type RankingCategory = { + topRank: RankingItem[]; + userRank: RankingItem; +}; + +export type RankingData = { + profitRateRanking: RankingCategory; + assetRanking: RankingCategory; +}; diff --git a/FE/src/components/Rank/bummyData.ts b/FE/src/components/Rank/bummyData.ts deleted file mode 100644 index acf27717..00000000 --- a/FE/src/components/Rank/bummyData.ts +++ /dev/null @@ -1,133 +0,0 @@ -// 타입 수정 -// 수익률 랭킹 타입 -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 6c13c715..c12599c2 100644 --- a/FE/src/page/Rank.tsx +++ b/FE/src/page/Rank.tsx @@ -1,15 +1,16 @@ import Nav from 'components/Rank/Nav.tsx'; import RankList from '../components/Rank/RankList.tsx'; -import { dummyRankData } from '../components/Rank/bummyData.ts'; +import { getRanking } from '../service/getRanking.ts'; +import { useQuery } from '@tanstack/react-query'; export default function Rank() { - // const { data, isLoading } = useQuery({ - // queryKey: ['Rank'], - // queryFn: () => getRanking(), - // }); - // - // if (isLoading) return
Loading...
; - const data = dummyRankData; + const { data, isLoading, isError } = useQuery({ + queryKey: ['Rank'], + queryFn: () => getRanking(), + }); + + if (isLoading) return
Loading...
; + if (isError) return
Error!!
; return (