Feat/noti (#139)

* init: 환경설정

* feat: notification 제작중

* feat: notification 헤더 추가

* feat: notification API 연결 및 type 따른 처리

* feat: notification css 수정

* fix: notification 타입 및 id 필드 변경에 따른 방어코드로 수정

* fix: notification api 함수 변경

* fix: notification 오브젝트 속성 참조 오류 수정

* fix: notification 드롭다운 아이템 key값 수정

* fix: notification 쿼리 키 설정 및 적용

* fix: notification antd-style적용, suspense제거.

* fix: notification 알림 문구 변경, 아이콘 변경

* fix: unread notification count와 알림 클릭 시 post로 읽음 처리 적용

post후 unread응답 다시 불러오기 적용
불필요한 옵셔널 체이닝 제거

* feat: notification clear기능 추가 및 ui변경

apps/web-client/src/components/header/Notification/Notification.tsx

@@ -1,5 +1,5 @@
 import { BellOutlined } from '@ant-design/icons';
-import { Avatar, Badge, Button, Dropdown, Space } from 'antd';
+import { Avatar, Badge, Button, Dropdown, Space, Spin } from 'antd';
 import { ReactNode, useCallback } from 'react';
 import { Link } from 'react-router-dom';
 
@@ -15,8 +15,8 @@ const useStyles = createStyles(() => ({
  minHeight: '0px',
  maxHeight: '250px',
  overflowY: 'auto',
+ padding: '5px',
  },
-
  dropdownItem: {
  display: 'flex',
  flexDirection: 'row',
@@ -38,6 +38,47 @@ const useStyles = createStyles(() => ({
  backgroundColor: '#19a47d28',
  color: '#716e6e',
  },
+
+ notificationMenu: {
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ background: 'rgba(0, 0, 0, 0.06)',
+ borderRadius: '8px',
+ },
+ notificationHeader: {
+ padding: '5px',
+ paddingBottom: '0px',
+ width: '100%',
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ lineHeight: '1rem',
+ boxSizing: 'border-box',
+ },
+ notificationTitle: {
+ fontSize: '16px',
+ },
+ notificationSpinnerWrapper: {
+ width: '19px',
+ height: '19px',
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ notificationSpinner: {
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ notificationClearButton: {
+ color: '#19a47d85',
+ fontSize: '12px',
+ background: '#ffffff',
+ padding: '2px',
+ borderRadius: '8px',
+ },
 }));
 
 // Helper function
@@ -50,7 +91,7 @@ const convertDate = (inputDate: Date | string) => {
 // Components
 export default function Notification() {
  const { styles } = useStyles();
- const { data } = useAppQuery({
+ const { data, isFetching } = useAppQuery({
  queryKey: queryKey.notification.unread,
  queryFn: async () => {
  const res = await NotificationControllerService.getUnreadNotificationsUsingGet();
@@ -65,10 +106,54 @@ export default function Notification() {
  const { mutate: updateNotiReadStatus } = useAppMutation({
  mutationFn: NotificationControllerService.viewNotificationUsingPost,
  });
+ const { mutate: updateAllNotiReadStatus, isPending: isPendingAllNotiRead } = useAppMutation({
+ mutationFn: NotificationControllerService.viewAllNotificationsUsingPost,
+ });
 
  assert(data, 'data is undefined');
+ // 스피너 용 변수
+ const isSpinning = isFetching || isPendingAllNotiRead;
 
- const Menu = useCallback((menu: ReactNode) => <div className={styles.dropdownMenu}>{menu}</div>, [styles.dropdownMenu]);
+ const Menu = useCallback(
+ (menu: ReactNode) => (
+ <div className={styles.notificationMenu}>
+ <div className={styles.notificationHeader}>
+ <p className={styles.notificationTitle}>Notification</p>
+ {isSpinning ? (
+ <div className={styles.notificationSpinnerWrapper}>
+ <Spin size="small" className={styles.notificationSpinner} />
+ </div>
+ ) : (
+ <button
+ type="button"
+ className={styles.notificationClearButton}
+ onClick={() => {
+ updateAllNotiReadStatus(undefined, {
+ onSuccess() {
+ queryClient.invalidateQueries({ queryKey: queryKey.notification.unread });
+ },
+ });
+ }}
+ >
+ Clear All
+ </button>
+ )}
+ </div>
+ <div className={styles.dropdownMenu}>{menu}</div>
+ </div>
+ ),
+ [
+ styles.dropdownMenu,
+ updateAllNotiReadStatus,
+ isSpinning,
+ styles.notificationClearButton,
+ styles.notificationHeader,
+ styles.notificationMenu,
+ styles.notificationSpinner,
+ styles.notificationSpinnerWrapper,
+ styles.notificationTitle,
+ ],
+ );
 
  const resultLinkAndDescription = (response: NotificationResponse) => {
  switch (response.notificationType) {