feat: 알림탭에서 알림이 없을 경우 Empty Section 구현

depromeet · Aug 26, 2024 · 95befe7 · 95befe7
1 parent df8759f
commit 95befe7
Showing 1 changed file with 13 additions and 0 deletions.
diff --git a/packages/web-domains/src/home/features/notification/components/NotificationList.tsx b/packages/web-domains/src/home/features/notification/components/NotificationList.tsx
@@ -1,6 +1,7 @@
 import { colors } from '@sds/theme';
 import { ReactNode } from 'react';
 
+import { EmptyView } from '@/common/components';
 import { AlarmEventType } from '@/home/common/apis/schema/Notification.schema';
 
 interface NotificationListProps {
@@ -9,6 +10,18 @@ interface NotificationListProps {
 }
 
 export const NotificationList = ({ notificationList, renderItem }: NotificationListProps) => {
+  if (notificationList?.length === 0) {
+    return (
+      <div
+        css={{
+          borderTop: `1px solid ${colors.grey400}`,
+        }}
+      >
+        <EmptyView title="알림이 없어요" style={{ height: 'calc(100vh - 142px)' }} />;
+      </div>
+    );
+  }
+
   return (
     <ul
       css={{