Merge pull request #284 from imi21123/test

Feat: 진행 중인 이벤트 비어있을 때 화면 설정
readyvery · Mar 27, 2024 · 100419b · 100419b
2 parents 1497431 + c7f2ba1
commit 100419b
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 10 deletions.
diff --git 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
@@ -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",
         }}
       />
-      <div className="eventing-img">
-        <Slider className="eventing_slider_benner" {...settings}>
-          {events.map((item) => (
-            <div key={item} onClick={() => navigate(item.redirectUrl)}>
-              <img src={item.imgUrl} alt="eventing" />
-              {console.log(item)}
-            </div>
-          ))}
-        </Slider>
-      </div>
+
+      {events && events?.length > 0 ? (
+        <div className="eventing-img">
+          <Slider className="eventing_slider_benner" {...settings}>
+            {events.map((item) => (
+              <div key={item} onClick={() => navigate(item.redirectUrl)}>
+                <img src={item.imgUrl} alt="eventing" />
+                {console.log(item)}
+              </div>
+            ))}
+          </Slider>
+        </div>
+      ) : (
+        <div className="event-empty">
+          <Empty />
+        </div>
+      )}
     </div>
   );
 }