feat: #50 - 페이지 이동 및 읽음 처리 추가

Team-TenTen · Nov 7, 2023 · 94a2f1b · 94a2f1b
1 parent 9703a24
commit 94a2f1b
Show file tree

Hide file tree

Showing 4 changed files with 178 additions and 9 deletions.
diff --git a/src/components/common/Notification/Notification.tsx b/src/components/common/Notification/Notification.tsx
@@ -4,10 +4,14 @@ 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
@@ -16,14 +20,20 @@ export interface NotificationProps {
 }
 
 const Notification = ({
+  notificationId,
   type,
+  userId,
   userName,
+  spaceId,
   spaceName,
   isRead = false,
   isAccept = false,
   onAccept,
   onClose,
 }: NotificationProps) => {
+  const { handleClickUser, handleClickComment, handleClickSpace } =
+    useNotification()
+
   return (
     <div
       className={cls(
@@ -33,26 +43,72 @@ const Notification = ({
       <div className="flex w-full items-start justify-between text-sm font-medium text-gray9">
         {type === 'follow' && (
           <div>
-            <span className="font-bold">{userName}</span>
+            <span
+              onClick={(e) =>
+                handleClickUser({ notificationId, userId, isRead })
+              }
+              className="cursor-pointer font-bold">
+              {userName}
+            </span>
             {NOTIFICATION_MSG.FOLLOW}
           </div>
         )}
         {type === 'comment' && (
           <div>
-            <span className="font-bold">{userName}</span>
+            <span
+              onClick={() =>
+                handleClickUser({ notificationId, userId, isRead })
+              }
+              className="cursor-pointer font-bold">
+              {userName}
+            </span>
             {NOTIFICATION_MSG.USER}
-            <span className="font-bold">{spaceName}</span>
-            {NOTIFICATION_MSG.COMMENT}
+            <span
+              onClick={() =>
+                handleClickSpace({ notificationId, spaceId: spaceId!, isRead })
+              }
+              className="cursor-pointer font-bold">
+              {spaceName}
+            </span>
+            {NOTIFICATION_MSG.SPACE}
+            <span
+              onClick={() =>
+                handleClickComment({
+                  notificationId,
+                  spaceId: spaceId!,
+                  isRead,
+                })
+              }
+              className="cursor-pointer font-bold">
+              {NOTIFICATION_MSG.COMMENT}
+            </span>
+            {NOTIFICATION_MSG.COMMENT_LEAVE}
           </div>
         )}
         {type === 'space' && (
           <div className="flex w-full flex-col gap-6">
             <div className="flex items-start justify-between">
               <div>
-                <span className="font-bold">{userName}</span>
+                <span
+                  onClick={() =>
+                    handleClickUser({ notificationId, userId, isRead })
+                  }
+                  className="cursor-pointer font-bold">
+                  {userName}
+                </span>
                 {NOTIFICATION_MSG.USER}
-                <span className="font-bold">{spaceName}</span>
-                {NOTIFICATION_MSG.SPACE}
+                <span
+                  onClick={() =>
+                    handleClickSpace({
+                      notificationId,
+                      spaceId: spaceId!,
+                      isRead,
+                    })
+                  }
+                  className="cursor-pointer font-bold">
+                  {spaceName}
+                </span>
+                {NOTIFICATION_MSG.SPACE_INVITE}
               </div>
               <Button onClick={onClose}>
                 <XMarkIcon className="h-5 w-5 p-0.5 text-slate6" />

diff --git a/src/components/common/Notification/constants/index.ts b/src/components/common/Notification/constants/index.ts
@@ -3,6 +3,8 @@ export const NOTIFICATION_MSG = {
   APPROVE: '수락 완료',
   USER: ' 님이 ',
   FOLLOW: ' 님이 팔로우했습니다.',
-  COMMENT: ' 스페이스에 댓글을 남겼습니다.',
-  SPACE: ' 스페이스에 초대했습니다.',
+  COMMENT: '댓글',
+  COMMENT_LEAVE: '을 남겼습니다.',
+  SPACE: ' 스페이스에 ',
+  SPACE_INVITE: ' 스페이스에 초대했습니다.',
 }
diff --git a/src/components/common/Notification/hooks/useNotification.ts b/src/components/common/Notification/hooks/useNotification.ts
@@ -0,0 +1,72 @@
+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 UseNotificationReturn {
+  handleClickUser: ({
+    notificationId,
+    userId,
+    isRead,
+  }: handleClickUserProps) => void
+  handleClickSpace: ({
+    notificationId,
+    spaceId,
+    isRead,
+  }: handleClickSpaceProps) => void
+  handleClickComment: ({
+    notificationId,
+    spaceId,
+    isRead,
+  }: handleClickSpaceProps) => 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,
+  }: handleClickSpaceProps) => {
+    router.push(`/space/${spaceId}/comment`)
+    if (!isRead) {
+      console.log(`${notificationId} 읽음 처리 로직 추가`)
+    }
+  }
+
+  return { handleClickUser, handleClickSpace, handleClickComment }
+}
+
+export default useNotification
diff --git a/src/data/index.ts b/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,
+  },
+]