diff --git a/src/pages/MyPage/EventingPage/EventingPage.css b/src/pages/MyPage/EventingPage/EventingPage.css index 4c96b92..bfad583 100644 --- a/src/pages/MyPage/EventingPage/EventingPage.css +++ b/src/pages/MyPage/EventingPage/EventingPage.css @@ -43,3 +43,12 @@ height: 20.875rem; margin: 3.63rem 0; } + +.event-empty { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + width: 100%; + height: 85vh; +} diff --git a/src/pages/MyPage/EventingPage/EventingPage.jsx b/src/pages/MyPage/EventingPage/EventingPage.jsx index d7b3c68..1c5635b 100644 --- a/src/pages/MyPage/EventingPage/EventingPage.jsx +++ b/src/pages/MyPage/EventingPage/EventingPage.jsx @@ -6,6 +6,7 @@ import "slick-carousel/slick/slick.css"; import Header from "../../../components/views/Header/Header"; import useFetchEvents from "../../../hooks/useFetchEvents"; import "./EventingPage.css"; +import Empty from "../../../components/views/PageComponent/Empty"; function EventingPage() { const navigate = useNavigate(); @@ -30,16 +31,23 @@ function EventingPage() { // linkTo: "/mypage", }} /> -
- - {events.map((item) => ( -
navigate(item.redirectUrl)}> - eventing - {console.log(item)} -
- ))} -
-
+ + {events && events?.length > 0 ? ( +
+ + {events.map((item) => ( +
navigate(item.redirectUrl)}> + eventing + {console.log(item)} +
+ ))} +
+
+ ) : ( +
+ +
+ )} ); }