feat : 알림페이지 컴포넌트 개발 (#202)

prgrms-web-devcourse-final-project · Dec 3, 2024 · 1e50eca · 1e50eca
1 parent 40f74d0
commit 1e50eca
Show file tree

Hide file tree

Showing 5 changed files with 141 additions and 13 deletions.
diff --git a/src/components/NotificationPage/NotificationItem.stories.tsx b/src/components/NotificationPage/NotificationItem.stories.tsx
@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { NotificationItem } from './NotificationItem';
+
+const meta: Meta<typeof NotificationItem> = {
+    component: NotificationItem,
+    title: 'molecule/NotificationItem',
+    tags: ['autodocs'],
+    argTypes: {
+        type: {
+            control: 'select',
+            options: [
+                'NEW_LETTER',
+                'TARGET_LETTER',
+                'REPLY_LETTER',
+                'WARNING',
+                'BAN'
+            ]
+        },
+        createdAt: { control: 'date' },
+        isRead: { control: 'boolean' },
+        letterId: { control: 'text' }
+    }
+};
+export default meta;
+
+type Story = StoryObj<typeof NotificationItem>;
+
+export const Default: Story = {
+    args: {
+        type: 'NEW_LETTER', // 기본값으로 "새로운 편지" 타입
+        createdAt: '2024-12-03T11:20:38.6242079', // 현재 시간으로 초기화
+        isRead: false, // 읽지 않은 상태로 설정
+        letterId: 1212 // 임의의 편지 ID
+    }
+};
+
+export const read: Story = {
+    args: {
+        type: 'NEW_LETTER', // 기본값으로 "새로운 편지" 타입
+        createdAt: '2024-12-03T11:20:38.6242079', // 현재 시간으로 초기화
+        isRead: true, // 읽지 않은 상태로 설정
+        letterId: 1212 // 임의의 편지 ID
+    }
+};
diff --git a/src/components/NotificationPage/NotificationItem.tsx b/src/components/NotificationPage/NotificationItem.tsx
@@ -1,17 +1,77 @@
 import { NotificationProps } from '@/types/notification';
+import { match } from 'ts-pattern';
+import { Margin } from '../Common/Margin/Margin';
 
 export const NotificationItem = ({
     type,
     createdAt,
     letterId,
     isRead
 }: NotificationProps) => {
+    // 메인 메시지
+    const notificatioMessage = match(type)
+        .with('NEW_LETTER', () => '새로운 편지가 도착했어요')
+        .with('TARGET_LETTER', () => '지도 편지가 도착했어요')
+        .with('REPLY_LETTER', () => '답장이 도착했어요')
+        .with('WARNING', () => '규정에 맞는 편지를 작성해주세요')
+        .with('BAN', () => '정지된 계정입니다')
+        .run();
+
+    // 부 메시지
+    const subNotificationMessage = match(type)
+        .with('WARNING', () => '경고')
+        .with('BAN', () => '정지')
+        .otherwise(() => '나에게 온 편지');
+
+    /** 알람 받고 얼마나 지났는지 */
+    const timeSinceAlert = (dateString: string): string => {
+        const eventDate = new Date(dateString);
+        const currentDate = new Date();
+
+        const diffInMilliseconds = currentDate.getTime() - eventDate.getTime();
+        const diffInHours = Math.floor(diffInMilliseconds / (1000 * 60 * 60));
+        const diffInDays = Math.floor(
+            diffInMilliseconds / (1000 * 60 * 60 * 24)
+        );
+
+        if (diffInHours < 24) {
+            return `${diffInHours}시간 전`;
+        } else {
+            return `${diffInDays}일 전`;
+        }
+    };
+
+    // todo : 라벨 이미지 및 상세보기 라우팅 경로 지정
+    const letterLink = `/detail/${letterId}`;
+
+    // 읽음 여부에 따라 스타일 : 투명도 조절
+    const isReadStyle = `flex gap-3 items-center ${
+        isRead ? 'opacity-30' : 'opacity-100'
+    }`;
+
     return (
-        <div>
-            <div>{type}</div>
-            <div>{createdAt}</div>
-            <div>{letterId}</div>
-            <div>{isRead.toString()}</div>
+        <div className={isReadStyle}>
+            <img
+                className="size-[44px] bg-slate-400 rounded-full"
+                src=""
+                alt=""
+            />
+            <div className="w-full">
+                <div className="flex items-center justify-between">
+                    <p className="text-[16px] overflow-hidden">
+                        {notificatioMessage}
+                    </p>
+                    <p className="text-[13px] overflow-hidden">
+                        {timeSinceAlert(createdAt)}
+                    </p>
+                </div>
+
+                <Margin top={5} />
+
+                <p className="text-[13px] overflow-hidden">
+                    {subNotificationMessage}
+                </p>
+            </div>
         </div>
     );
 };
diff --git a/src/pages/Home/HomePage.stories.tsx b/src/pages/Home/HomePage.stories.tsx
@@ -13,8 +13,7 @@ const meta: Meta<typeof HomePage> = {
                 <Story />
             </MemoryRouter>
         )
-    ],
-    argTypes: {}
+    ]
 };
 
 export default meta;

diff --git a/src/pages/Notification/NotificationPage.stories.tsx b/src/pages/Notification/NotificationPage.stories.tsx
@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MemoryRouter } from 'react-router-dom';
+import { NotificationPage } from './NotificationPage';
+
+const meta: Meta<typeof NotificationPage> = {
+    component: NotificationPage,
+    title: 'pages/NotificationPage',
+    tags: ['autodocs'],
+    argTypes: {},
+    decorators: [
+        (Story) => (
+            <MemoryRouter>
+                <Story />
+            </MemoryRouter>
+        )
+    ]
+};
+export default meta;
+
+type Story = StoryObj<typeof NotificationPage>;
+
+export const Default: Story = {
+    args: {}
+};
diff --git a/src/pages/Notification/NotificationPage.tsx b/src/pages/Notification/NotificationPage.tsx
@@ -9,15 +9,15 @@ export const NotificationPage = () => {
             id: 'ba017e82-022e-4a82-94db-f0c5d22ef318',
             type: 'NEW_LETTER',
             receiver: 99,
-            createdAt: '2024-12-02T11:20:38.6242079',
+            createdAt: '2024-12-03T18:20:38.6242079',
             letterId: 1,
             isRead: false
         },
         {
             id: 'ba017e82-022e-4a82-94db-f0c5d22ef318',
-            type: 'NEW_LETTER',
+            type: 'TARGET_LETTER',
             receiver: 99,
-            createdAt: '2024-12-02T11:20:38.6242079',
+            createdAt: '2024-12-03T11:20:38.6242079',
             letterId: 1,
             isRead: false
         },
@@ -39,17 +39,17 @@ export const NotificationPage = () => {
         },
         {
             id: 'ba017e82-022e-4a82-94db-f0c5d22ef318',
-            type: 'NEW_LETTER',
+            type: 'REPLY_LETTER',
             receiver: 99,
-            createdAt: '2024-12-02T11:20:38.6242079',
+            createdAt: '2024-12-01T19:20:38.6242079',
             letterId: 1,
             isRead: true
         },
         {
             id: 'ba017e82-022e-4a82-94db-f0c5d22ef318',
             type: 'NEW_LETTER',
             receiver: 99,
-            createdAt: '2024-12-02T11:20:38.6242079',
+            createdAt: '2024-12-01T11:20:38.6242079',
             letterId: 1,
             isRead: true
         }