알림 컴포넌트 구현

src/app/globals.css

@@ -31,6 +31,7 @@
     --emerald4: rgb(101, 206, 156);
     --emerald3: rgb(138, 227, 185);
     --emerald1: rgb(216, 248, 230);
+    --emerald05: rgb(239, 252, 245);
     --red9: rgb(118, 39, 32);
     --red7: rgb(172, 49, 35);
     --red6: rgb(205, 62, 46);
@@ -63,6 +64,7 @@
     --emerald4: rgb(62, 146, 107);
     --emerald3: rgb(48, 117, 88);
     --emerald1: rgb(30, 76, 60);
+    --emerald05: rgb(20, 42, 46);
     --red9: rgb(250, 227, 226);
     --red7: rgb(242, 170, 166);
     --red6: rgb(234, 123, 116);

src/components/common/Notification/Notification.tsx

@@ -0,0 +1,102 @@
+'use client'
+
+import { cls } from '@/utils'
+import { XMarkIcon } from '@heroicons/react/24/solid'
+import Button from '../Button/Button'
+import { NOTIFICATION_MSG } from './constants'
+import useNotification from './hooks/useNotification'
+
+export interface NotificationProps {
+  notificationId: number
+  type: 'follow' | 'comment' | 'space'
+  userId: number
+  userName: string
+  spaceId?: number
+  spaceName?: string
+  isRead?: boolean
+  isAccept?: boolean
+  onAccept?: (e?: React.MouseEvent<HTMLButtonElement>) => void
+  onClose?: (e?: React.MouseEvent<HTMLButtonElement>) => void
+}
+
+const Notification = ({
+  notificationId,
+  type,
+  userId,
+  userName,
+  spaceId,
+  spaceName,
+  isRead = false,
+  isAccept = false,
+  onAccept,
+  onClose,
+}: NotificationProps) => {
+  const { handleClickUser, handleClickSpace, handleClickComment } =
+    useNotification()
+
+  return (
+    <div
+      className={cls(
+        'flex flex-col gap-6 rounded-md border border-slate3 p-3',
+        isRead ? 'bg-bgColor' : 'bg-emerald05',
+      )}>
+      <div className="flex w-full items-start justify-between text-sm font-medium text-gray9">
+        <div>
+          <span
+            onClick={() => handleClickUser({ notificationId, userId, isRead })}
+            className="cursor-pointer font-bold">
+            {userName}
+          </span>
+          {NOTIFICATION_MSG.USER}
+          {type === 'follow' ? (
+            NOTIFICATION_MSG.FOLLOW
+          ) : (
+            <>
+              <span
+                onClick={() =>
+                  handleClickSpace({ notificationId, spaceId, isRead })
+                }
+                className="cursor-pointer font-bold">
+                {spaceName}
+              </span>
+              {NOTIFICATION_MSG.SPACE}
+              <span
+                onClick={() =>
+                  handleClickComment({
+                    notificationId,
+                    spaceId,
+                    isRead,
+                  })
+                }
+                className="cursor-pointer font-bold">
+                {NOTIFICATION_MSG.COMMENT}
+              </span>
+              {NOTIFICATION_MSG.COMMENT_LEAVE}
+              {type === 'space' && NOTIFICATION_MSG.SPACE_INVITE}
+            </>
+          )}
+        </div>
+        <Button onClick={onClose}>
+          <XMarkIcon className="h-5 w-5 p-0.5 text-slate6" />
+        </Button>
+      </div>
+      {type === 'space' && (
+        <div className="flex justify-end">
+          {isAccept ? (
+            <div className="text-sm font-semibold text-slate6">
+              {NOTIFICATION_MSG.APPROVE}
+            </div>
+          ) : (
+            <Button
+              onClick={onAccept}
+              className="button button-emerald px-2.5 py-1.5">
+              {NOTIFICATION_MSG.APPROVE_BUTTON}
+            </Button>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Notification

src/components/common/Notification/constants/index.ts

@@ -0,0 +1,10 @@
+export const NOTIFICATION_MSG = {
+  APPROVE_BUTTON: '수락',
+  APPROVE: '수락 완료',
+  USER: ' 님이 ',
+  FOLLOW: '팔로우했습니다.',
+  COMMENT: '댓글',
+  COMMENT_LEAVE: '을 남겼습니다.',
+  SPACE: ' 스페이스에 ',
+  SPACE_INVITE: '초대했습니다.',
+}

src/components/common/Notification/hooks/useNotification.ts

@@ -0,0 +1,74 @@
+import { useRouter } from 'next/navigation'
+
+export interface HandleClickUserProps {
+  notificationId: number
+  userId: number
+  isRead: boolean
+}
+
+export interface HandleClickSpaceProps {
+  notificationId: number
+  spaceId?: number
+  isRead: boolean
+}
+
+export interface HandleClickCommentProps extends HandleClickSpaceProps {}
+
+export interface UseNotificationReturn {
+  handleClickUser: ({
+    notificationId,
+    userId,
+    isRead,
+  }: HandleClickUserProps) => void
+  handleClickSpace: ({
+    notificationId,
+    spaceId,
+    isRead,
+  }: HandleClickSpaceProps) => void
+  handleClickComment: ({
+    notificationId,
+    spaceId,
+    isRead,
+  }: HandleClickCommentProps) => void
+}
+
+const useNotification = (): UseNotificationReturn => {
+  const router = useRouter()
+
+  const handleClickUser = ({
+    notificationId,
+    userId,
+    isRead,
+  }: HandleClickUserProps) => {
+    router.push(`/user/${userId}`)
+    if (!isRead) {
+      console.log(`${notificationId} 읽음 처리 추가`)
+    }
+  }
+
+  const handleClickSpace = ({
+    notificationId,
+    spaceId,
+    isRead,
+  }: HandleClickSpaceProps) => {
+    router.push(`/space/${spaceId}`)
+    if (!isRead) {
+      console.log(`${notificationId} 읽음 처리 추가`)
+    }
+  }
+
+  const handleClickComment = ({
+    notificationId,
+    spaceId,
+    isRead,
+  }: HandleClickCommentProps) => {
+    router.push(`/space/${spaceId}/comment`)
+    if (!isRead) {
+      console.log(`${notificationId} 읽음 처리 로직 추가`)
+    }
+  }
+
+  return { handleClickUser, handleClickSpace, handleClickComment }
+}
+
+export default useNotification

src/components/index.ts

@@ -16,3 +16,4 @@ export { default as Dropdown } from './common/Dropdown/Dropdown'
 export { default as SpaceMemberList } from './common/SpaceMemberList/SpaceMemberList'
 export { default as Sidebar } from './common/Sidebar/Sidebar'
 export { default as Comment } from './Comment/Comment'
+export { default as Notification } from './common/Notification/Notification'

src/data/index.ts

@@ -156,3 +156,42 @@ export const mock_spaceData = {
   scrap: 40,
   comment: true,
 }
+
+export const mock_notificationData: {
+  id: number
+  type: 'comment' | 'follow' | 'space'
+  userId: number
+  userName: string
+  spaceId?: number
+  spaceName?: string
+  isRead: boolean
+  isAccept?: boolean
+}[] = [
+  {
+    id: 1,
+    type: 'follow',
+    userId: 1,
+    userName: '프롱이',
+    isRead: false,
+  },
+  {
+    id: 2,
+    type: 'comment',
+    userId: 1,
+    userName: '프롱이',
+    spaceId: 123,
+    spaceName: '개발 모음',
+    isRead: false,
+    isAccept: false,
+  },
+  {
+    id: 3,
+    type: 'space',
+    userId: 1,
+    userName: '프롱이',
+    spaceId: 123,
+    spaceName: '개발 모음',
+    isRead: false,
+    isAccept: false,
+  },
+]

tailwind.config.ts

@@ -33,6 +33,7 @@ const config: Config = {
         emerald4: 'var(--emerald4)',
         emerald3: 'var(--emerald3)',
         emerald1: 'var(--emerald1)',
+        emerald05: 'var(--emerald05)',
         red9: 'var(--red9)',
         red7: 'var(--red7)',
         red6: 'var(--red6)',