refactor(member): 마이페이지 내역 상호작용 추가 (#78)

kgu-clab · Mar 26, 2024 · 5b65a41 · 5b65a41
1 parent 78b894e
commit 5b65a41
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 9 deletions.
diff --git a/apps/member/src/components/my/MyHistorySection/MyHistorySection.tsx b/apps/member/src/components/my/MyHistorySection/MyHistorySection.tsx
@@ -4,32 +4,67 @@ import { toYYMMDD } from '@utils/date';
 import type { BoardItem } from '@type/board';
 import type { NotificationItem } from '@type/notification';
 import { CommentItem } from '@type/comment';
+import { PATH_FINDER } from '@constants/path';
+import { titleToCategory } from '@utils/community';
+import useModal from '@hooks/common/useModal';
+import { useCallback } from 'react';
 
 interface MyHistorySectionProps {
   title: string;
   data: Array<NotificationItem | BoardItem | CommentItem>;
 }
 
 const MyHistorySection = ({ title, data }: MyHistorySectionProps) => {
+  const { openModal } = useModal();
+
+  const handleAlarmClick = useCallback(
+    (content: string) => {
+      openModal({
+        title: '알림',
+        content: content,
+      });
+    },
+    [openModal],
+  );
+
   return (
     <Section>
       <Section.Header title={title} />
       <Section.Body className="text-sm">
         {data.map((item) => {
-          if ('content' in item) {
-            // NotificationItem or CommentItem
-            const { id, content, createdAt } = item as NotificationItem;
+          if ('boardId' in item) {
+            //  CommentItem
+            const { id, boardId, boardCategory, content, createdAt } =
+              item as CommentItem;
+            return (
+              <ListButton
+                key={id}
+                to={PATH_FINDER.COMMUNITY_POST(
+                  titleToCategory(boardCategory),
+                  boardId,
+                )}
+              >
+                <p className="pr-4 truncate grow">{content}</p>
+                <p className="text-clab-main-light">{toYYMMDD(createdAt)}</p>
+              </ListButton>
+            );
+          } else if ('content' in item) {
+            // NotificationItem
+            const { id, content, createdAt } = item as CommentItem;
             return (
-              <ListButton key={id} to="">
+              <ListButton key={id} onClick={() => handleAlarmClick(content)}>
                 <p className="pr-4 truncate grow">{content}</p>
                 <p className="text-clab-main-light">{toYYMMDD(createdAt)}</p>
               </ListButton>
             );
           } else if ('title' in item) {
             // BoardItem
-            const { id, title, createdAt } = item as BoardItem;
+            const { id, category, title, createdAt } = item as BoardItem;
             return (
-              <ListButton key={id} to="">
+              <ListButton
+                key={id}
+                to={PATH_FINDER.COMMUNITY_POST(titleToCategory(category), id)}
+              >
                 <p className="pr-4 truncate grow">{title}</p>
                 <p className="text-clab-main-light">{toYYMMDD(createdAt)}</p>
               </ListButton>

diff --git a/apps/member/src/constants/path.ts b/apps/member/src/constants/path.ts
@@ -1,5 +1,6 @@
-import type { IDType } from '@type/api';
 import { createPath } from '@utils/api';
+import type { IDType } from '@type/api';
+import type { CommunityCategoryType } from '@type/community';
 
 export const NOT_FOUND_IMG = '/not_found.webp';
 
@@ -36,7 +37,7 @@ export const PATH = {
 export const PATH_FINDER = {
   NEWS_POST: (id: IDType) => createPath(PATH.NEWS, id),
   BLOG_POST: (id: IDType) => createPath(PATH.BLOG, id),
-  COMMUNITY_POST: (sort: IDType, id: IDType) =>
+  COMMUNITY_POST: (sort: CommunityCategoryType, id: IDType) =>
     createPath(PATH.COMMUNITY, sort, id),
   LIBRARY_DETAIL: (id: IDType) => createPath(PATH.LIBRARY, id),
   ACTIVITY_DETAIL: (id: IDType) => createPath(PATH.ACTIVITY, id),

diff --git a/apps/member/src/types/board.ts b/apps/member/src/types/board.ts
@@ -1,6 +1,9 @@
+import type { CommunityCategoryKorType } from './community';
+
 export interface BoardItem {
   id: number;
-  memberName: string;
+  category: CommunityCategoryKorType;
   title: string;
+  writer: string;
   createdAt: string;
 }
diff --git a/apps/member/src/types/comment.ts b/apps/member/src/types/comment.ts
@@ -1,8 +1,15 @@
+import type { CommunityCategoryKorType } from './community';
+
 export interface CommentItem {
   id: number;
   writerName: string;
   writerImageUrl: string;
   content: string;
+  boardId: number;
+  boardCategory: CommunityCategoryKorType;
+  hasLikeByMe: boolean;
+  likes: number;
+  writer: string;
   createdAt: string;
 }