feat(web-domains/home): 알림탭에서 알림이 비어 있을 때 EmptyView 및 notification.ad…

…ditionalData null case 대응 (#151) * refactor: notification 오타 수정 * fix: notification.additionalData가 null인 경우 대응 * feat: 알림탭에서 알림이 없을 경우 Empty Section 구현 * refactor: Empty view text 수정
depromeet · Aug 26, 2024 · cc4fb52 · cc4fb52
1 parent b1a74fe
commit cc4fb52
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 12 deletions.
diff --git a/packages/web-domains/src/home/common/apis/schema/Notification.schema.ts b/packages/web-domains/src/home/common/apis/schema/Notification.schema.ts
@@ -18,7 +18,7 @@ export type AlarmEventType = {
   status: 'ACTIVE' | 'INACTIVE';
   additionalData: {
     handWavingId: number;
-  };
+  } | null;
   createdAt: number;
 };
 

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={{

diff --git a/packages/web-domains/src/home/features/notification/containers/AlarmListContainer.tsx b/packages/web-domains/src/home/features/notification/containers/AlarmListContainer.tsx
@@ -11,20 +11,24 @@ import { NotificationList } from '../components/NotificationList';
 import { useAlarmListService } from '../services/useAlarmListService';
 
 export const AlarmListContainer = () => {
-  const { notficationList, meetingId, handWavingResponse } = useAlarmListService();
+  const { notificationList, meetingId, handWavingResponse } = useAlarmListService();
 
-  const renderNotification = (notifiaciton: AlarmEventType, meetingId?: number) => {
-    switch (notifiaciton.type) {
+  const renderNotification = (notification: AlarmEventType, meetingId?: number) => {
+    switch (notification.type) {
       case 'HAND_WAVING_REQUESTED': {
-        const handWavingId = notifiaciton.additionalData.handWavingId;
+        const handWavingId = notification.additionalData?.handWavingId;
 
         return (
           <NotificationItem.AlarmItem
-            alarm={notifiaciton}
+            alarm={notification}
             footer={
               <div css={{ display: 'flex', marginTop: '12px' }}>
                 <Button
-                  onClick={() => handWavingResponse({ meetingId: meetingId!, handWavingId })}
+                  onClick={() => {
+                    if (handWavingId && meetingId) {
+                      handWavingResponse({ meetingId, handWavingId });
+                    }
+                  }}
                   variant="primary"
                   leftDecor={
                     <Icon
@@ -44,7 +48,11 @@ export const AlarmListContainer = () => {
                   나도 인사 건네기
                 </Button>
                 <Button
-                  onClick={() => ignoreHandwaving({ meetingId: meetingId!, handWavingId })}
+                  onClick={() => {
+                    if (handWavingId && meetingId) {
+                      ignoreHandwaving({ meetingId, handWavingId });
+                    }
+                  }}
                   variant="sub"
                   leftDecor={<Icon name="close-icon" size={15} />}
                 >
@@ -58,7 +66,7 @@ export const AlarmListContainer = () => {
 
       case 'QUESTION_REGISTERED':
       case 'TARGET_MEMBER':
-        return <NotificationItem.AlarmItem alarm={notifiaciton} />;
+        return <NotificationItem.AlarmItem alarm={notification} />;
     }
   };
 
@@ -70,8 +78,8 @@ export const AlarmListContainer = () => {
         </Txt>
       </header>
       <NotificationList
-        notificationList={notficationList}
-        renderItem={(notfication) => renderNotification(notfication, meetingId)}
+        notificationList={notificationList}
+        renderItem={(notification) => renderNotification(notification, meetingId)}
       />
     </section>
   );

diff --git a/packages/web-domains/src/home/features/notification/services/useAlarmListService.ts b/packages/web-domains/src/home/features/notification/services/useAlarmListService.ts
@@ -25,7 +25,7 @@ export const useAlarmListService = () => {
 
   return {
     meetingId,
-    notficationList: data?.contents ?? [],
+    notificationList: data?.contents ?? [],
     myMemberId: myInfo?.meetingMemberId,
     ignoreHandWaving,
     handWavingResponse,