From 95befe7e3aceafe39629d7eccfd84099193ed989 Mon Sep 17 00:00:00 2001
From: semnil5202 <semnil5202@gmail.com>
Date: Mon, 26 Aug 2024 23:44:51 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=95=8C=EB=A6=BC=ED=83=AD=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20=EC=95=8C=EB=A6=BC=EC=9D=B4=20=EC=97=86=EC=9D=84=20?=
 =?UTF-8?q?=EA=B2=BD=EC=9A=B0=20Empty=20Section=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../notification/components/NotificationList.tsx    | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/packages/web-domains/src/home/features/notification/components/NotificationList.tsx b/packages/web-domains/src/home/features/notification/components/NotificationList.tsx
index 3c951cfd..fad7dba6 100644
--- 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={{