refactor: #50 - onClick 콜백 함수를 prop으로 전달하는 로직으로 변경

Team-TenTen · Nov 7, 2023 · f06af43 · f06af43
1 parent b91449c
commit f06af43
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 13 deletions.
diff --git a/src/components/common/Notification/Notification.tsx b/src/components/common/Notification/Notification.tsx
@@ -7,6 +7,7 @@ import NotificationComment from './NotificationComment'
 import NotificationSpace from './NotificationSpace'
 import NotificationUser from './NotificationUser'
 import { NOTIFICATION_MSG } from './constants'
+import useNotification from './hooks/useNotification'
 
 export interface NotificationProps {
   notificationId: number
@@ -33,6 +34,9 @@ const Notification = ({
   onAccept,
   onClose,
 }: NotificationProps) => {
+  const { handleClickUser, handleClickSpace, handleClickComment } =
+    useNotification()
+
   return (
     <div
       className={cls(
@@ -46,6 +50,7 @@ const Notification = ({
             userId={userId}
             isRead={isRead}
             userName={userName}
+            onClickUser={handleClickUser}
           />
           {type === 'follow' ? (
             NOTIFICATION_MSG.FOLLOW
@@ -56,13 +61,14 @@ const Notification = ({
                 spaceId={spaceId}
                 isRead={isRead}
                 spaceName={spaceName}
+                onClickSpace={handleClickSpace}
               />
               {type === 'comment' && (
                 <NotificationComment
                   notificationId={notificationId}
                   spaceId={spaceId}
                   isRead={isRead}
-                  spaceName={spaceName}
+                  onClickComment={handleClickComment}
                 />
               )}
               {type === 'space' && NOTIFICATION_MSG.SPACE_INVITE}

diff --git a/src/components/common/Notification/NotificationComment.tsx b/src/components/common/Notification/NotificationComment.tsx
@@ -1,19 +1,31 @@
-import { NotificationSpaceProps } from './NotificationSpace'
 import { NOTIFICATION_MSG } from './constants'
-import useNotification from './hooks/useNotification'
+
+export interface NotificationCommentProps {
+  notificationId: number
+  spaceId?: number
+  isRead: boolean
+  onClickComment: ({
+    notificationId,
+    spaceId,
+    isRead,
+  }: {
+    notificationId: number
+    spaceId?: number
+    isRead: boolean
+  }) => void
+}
 
 const NotificationComment = ({
   notificationId,
   spaceId,
   isRead,
-  spaceName,
-}: NotificationSpaceProps) => {
-  const { handleClickComment } = useNotification()
+  onClickComment,
+}: NotificationCommentProps) => {
   return (
     <>
       <span
         onClick={() =>
-          handleClickComment({
+          onClickComment({
             notificationId,
             spaceId,
             isRead,

diff --git a/src/components/common/Notification/NotificationSpace.tsx b/src/components/common/Notification/NotificationSpace.tsx
@@ -1,24 +1,32 @@
 import { NOTIFICATION_MSG } from './constants'
-import useNotification from './hooks/useNotification'
 
 export interface NotificationSpaceProps {
   notificationId: number
   spaceId?: number
   isRead: boolean
   spaceName?: string
+  onClickSpace: ({
+    notificationId,
+    spaceId,
+    isRead,
+  }: {
+    notificationId: number
+    spaceId?: number
+    isRead: boolean
+  }) => void
 }
 
 const NotificationSpace = ({
   notificationId,
   spaceId,
   isRead,
   spaceName,
+  onClickSpace,
 }: NotificationSpaceProps) => {
-  const { handleClickSpace } = useNotification()
   return (
     <>
       <span
-        onClick={() => handleClickSpace({ notificationId, spaceId, isRead })}
+        onClick={() => onClickSpace({ notificationId, spaceId, isRead })}
         className="cursor-pointer font-bold">
         {spaceName}
       </span>

diff --git a/src/components/common/Notification/NotificationUser.tsx b/src/components/common/Notification/NotificationUser.tsx
@@ -1,24 +1,32 @@
 import { NOTIFICATION_MSG } from './constants'
-import useNotification from './hooks/useNotification'
 
 export interface NotificationUserProps {
   notificationId: number
   userId: number
   isRead: boolean
   userName: string
+  onClickUser: ({
+    notificationId,
+    userId,
+    isRead,
+  }: {
+    notificationId: number
+    userId: number
+    isRead: boolean
+  }) => void
 }
 
 const NotificationUser = ({
   notificationId,
   userId,
   isRead,
   userName,
+  onClickUser,
 }: NotificationUserProps) => {
-  const { handleClickUser } = useNotification()
   return (
     <>
       <span
-        onClick={() => handleClickUser({ notificationId, userId, isRead })}
+        onClick={() => onClickUser({ notificationId, userId, isRead })}
         className="cursor-pointer font-bold">
         {userName}
       </span>