diff --git a/src/pages/AnalyticsPage.tsx b/src/pages/AnalyticsPage.tsx index 5963c7b..83eeb47 100644 --- a/src/pages/AnalyticsPage.tsx +++ b/src/pages/AnalyticsPage.tsx @@ -15,6 +15,31 @@ interface axiosProps { top: Array<[number, string]>; } +const renderData = (data: axiosProps | null, loading: boolean, error: AxiosError | Error | null) => { + if (loading) return Loading...; + if (error) return Error: {error}; + if (data?.top.length == 0) { + return ( + + 데이터가 존재하지 않습니다. + + ); + } + if (data && data.top) { + return ( + + {data.top.map((value, index) => ( + + {index + 1}위 + {value[0]} + + ))} + + ); + } + return null; +}; + export default function AnalyticsPage() { const [selectedMajor, setSelectedMajor] = React.useState("humanities"); const navigate = useNavigate(); @@ -25,9 +50,9 @@ export default function AnalyticsPage() { const { data: allData, - loading, - error, - } = useAxios( + loading: allDataLoading, + error: allDataError, + } = useAxios( { url: `/stats/top/mbti`, method: "GET", @@ -35,7 +60,11 @@ export default function AnalyticsPage() { [], ); - const { data: majorData } = useAxios( + const { + data: majorData, + loading: majorDataLoading, + error: majorDataError, + } = useAxios( { url: `/stats/top/department?key=${selectedMajor}`, method: "GET", @@ -52,21 +81,7 @@ export default function AnalyticsPage() { 어떤 유형이 가장 많을까요? -
- {loading && Loading...} - {error && Error: {error}} - - {allData && allData.top && ( - - {allData.top.map((value, index) => ( - - {index + 1}위 - {value[0]} - - ))} - - )} -
+
{renderData(allData, allDataLoading, allDataError)}
@@ -84,21 +99,7 @@ export default function AnalyticsPage() { 어떤 유형이 가장 많을까요? -
- {loading && Loading...} - {error && Error: {error}} - - {majorData && majorData.top && ( - - {majorData.top.map((value, index) => ( - - {index + 1}위 - {value[0]} - - ))} - - )} -
+
{renderData(majorData, majorDataLoading, majorDataError)}
); }