알림 컴포넌트 구현

[dudwns]

📑 이슈 번호

#50

🚧 구현 내용

• 알림 컴포넌트를 구현하였습니다.

🚨 특이 사항

Notification Props

interface NotificationProps {
  notificationId: number // 알림 id
  type: 'follow' | 'comment' | 'space' // 알림 타입
  userId: number // 알림을 보내는 유저 id
  userName: string // 알림을 보내는 유저 이름
  spaceId?: number // 스페이스 id
  spaceName?: string // 스페이스 이름
  isRead?: boolean // 읽음 처리 여부
  isAccept?: boolean // 스페이스 초대 수락 여부
  onAccept?: (e?: React.MouseEvent<HTMLButtonElement>) => void // 스페이스 초대 수락 함수
  onClose?: (e?: React.MouseEvent<HTMLButtonElement>) => void // 알림 삭제 함수
}

사용 예시 코드

export default function NotificationPage() {
  const notifications = mock_notificationData

  return (
    <div className="flex flex-col gap-4 px-6">
      {notifications.map((notification) => (
        <Notification
          key={notification.id}
          notificationId={notification.id}
          type={notification.type}
          userId={notification.userId}
          userName={notification.userName}
          spaceId={notification.spaceId}
          spaceName={notification.spaceName}
          onAccept={() => console.log('스페이스 수락')}
          onClose={() => console.log('알람 닫기')}
        />
      ))}
    </div>
  )
}

알림 컴포넌트에서 사용되는 커스텀 스타일을 추가하였습니다.

emerald05

• light: rgb(239, 252, 245)
• dark: rgb(20, 42, 46)

리뷰 반영 사항

• 중복 로직을 제거하였습니다.

• 페이지 이동과 읽음 처리 로직을 추가하였습니다. (useNotification 훅 구현)

  • 유저 네임을 클릭 시 해당 유저의 프로필 페이지로 이동
  • 스페이스를 클릭 시 해당 스페이스 페이지로 이동
  • 댓글을 클릭 시 해당 스페이스의 댓글 페이지로 이동 (기존 UI에서 댓글 Text에 bold 처리를 추가하였습니다.)

[bomi8489]

type이 follow와 comment일때는 각각 팔로우 신청한 사람의 프로필 페이지, 댓글이 달린 해당 스페이스 댓글페이지로 라우팅시키는건 어떠신가요..!

[dudwns]

반영했습니다! 😀

[eeseung]

고생하셨습니다! 같이가요 영준님..~~ 🏃‍♀️

[eeseung]

알림을 눌렀을 때 읽음 처리와 페이지 이동을 해줘야 하는데 이 부분이 빠진 것 같습니다! 👀

[dudwns]

반영했습니다! 😀

[eeseung]

별건 아니지만 레이아웃을 수정하면 x 버튼을 타입별로 나누지 않을 수 있을 것 같아요..!! 💡

[dudwns]

반영했습니다! 😀

[eeseung]

LGTM 입니다!! 👏