From 353bc7c38a2041d5ad235e408c993b517548e8c0 Mon Sep 17 00:00:00 2001 From: kangminguu <131148077+kangminguu@users.noreply.github.com> Date: Mon, 9 Dec 2024 01:56:14 +0900 Subject: [PATCH] =?UTF-8?q?feat=20:=20=EC=95=8C=EB=A6=BC=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20api=20=EC=97=B0=EB=8F=99=20=EB=B0=8F=20=EC=95=8C?= =?UTF-8?q?=EB=A6=BC=20=ED=83=80=EC=9E=85=20=EB=B3=80=EA=B2=BD=20(#359)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../NotificationContainer.tsx | 8 +- .../NotificationPage/NotificationItem.tsx | 30 +++++--- src/hooks/useGetNotifications.ts | 9 +++ src/hooks/useUpdateNotifications.ts | 8 ++ src/pages/Notification/NotificationPage.tsx | 75 +++++-------------- src/service/notification/getNotifiations.ts | 9 +++ .../notification/updateNotificationStatus.ts | 11 +++ src/types/notification.ts | 21 +++++- 8 files changed, 98 insertions(+), 73 deletions(-) create mode 100644 src/hooks/useGetNotifications.ts create mode 100644 src/hooks/useUpdateNotifications.ts create mode 100644 src/service/notification/getNotifiations.ts create mode 100644 src/service/notification/updateNotificationStatus.ts diff --git a/src/components/NotificationPage/NotificationContainer.tsx b/src/components/NotificationPage/NotificationContainer.tsx index 0dc0d8f1..6c91880e 100644 --- a/src/components/NotificationPage/NotificationContainer.tsx +++ b/src/components/NotificationPage/NotificationContainer.tsx @@ -1,8 +1,8 @@ -import { NotificationProps } from '@/types/notification'; +import { NotificationItemItemProps } from '@/types/notification'; import { NotificationItem } from './NotificationItem'; type NotificationContainerProps = { - notifications: Array; + notifications: Array; }; export const NotificationContainer = ({ @@ -11,7 +11,8 @@ export const NotificationContainer = ({ return (
{notifications.map((notification, index) => { - const { type, createdAt, letterId, isRead } = notification; + const { type, createdAt, letterId, isRead, label } = + notification; return (
@@ -20,6 +21,7 @@ export const NotificationContainer = ({ createdAt={createdAt} letterId={letterId} isRead={isRead} + label={label} />
); diff --git a/src/components/NotificationPage/NotificationItem.tsx b/src/components/NotificationPage/NotificationItem.tsx index 99868587..7f8d6b73 100644 --- a/src/components/NotificationPage/NotificationItem.tsx +++ b/src/components/NotificationPage/NotificationItem.tsx @@ -1,18 +1,20 @@ -import { NotificationProps } from '@/types/notification'; import { match } from 'ts-pattern'; import { Margin } from '../Common/Margin/Margin'; +import { NotificationItemItemProps } from '@/types/notification'; export const NotificationItem = ({ type, createdAt, letterId, - isRead -}: NotificationProps) => { + isRead, + label +}: NotificationItemItemProps) => { // 메인 메시지 const notificatioMessage = match(type) - .with('NEW_LETTER', () => '새로운 편지가 도착했어요') - .with('TARGET_LETTER', () => '지도 편지가 도착했어요') - .with('REPLY_LETTER', () => '답장이 도착했어요') + .with('NEW_LETTER', () => '새로운 익명의 편지가 도착했어요') + .with('TARGET_LETTER', () => '나에게 편지가 도착했어요') + .with('KEYWORD_REPLY', () => '내가 쓴 편지에 답장이 도착했어요') + .with('MAP_REPLY', () => '내가 쓴 편지에 답장이 도착했어요') .with('WARNING', () => '규정에 맞는 편지를 작성해주세요') .with('BAN', () => '정지된 계정입니다') .run(); @@ -41,8 +43,9 @@ export const NotificationItem = ({ } }; - // todo : 라벨 이미지 및 상세보기 라우팅 경로 지정 + // 아직 사용하지 않아서 콘솔처리, 추후에 수정하겠습니다. const letterLink = `/detail/${letterId}`; + console.log(letterLink); // 읽음 여부에 따라 스타일 : 투명도 조절 const isReadStyle = `flex gap-3 items-center ${ @@ -51,11 +54,14 @@ export const NotificationItem = ({ return (
- + {type !== 'WARNING' && type !== 'BAN' ? ( + + ) : null} +

diff --git a/src/hooks/useGetNotifications.ts b/src/hooks/useGetNotifications.ts new file mode 100644 index 00000000..6ba3fab5 --- /dev/null +++ b/src/hooks/useGetNotifications.ts @@ -0,0 +1,9 @@ +import { useQuery } from '@tanstack/react-query'; +import { getNotifications } from '@/service/notification/getNotifiations'; + +export const useGetNotifications = () => { + return useQuery({ + queryKey: ['notifications'], + queryFn: getNotifications + }); +}; diff --git a/src/hooks/useUpdateNotifications.ts b/src/hooks/useUpdateNotifications.ts new file mode 100644 index 00000000..c5121b73 --- /dev/null +++ b/src/hooks/useUpdateNotifications.ts @@ -0,0 +1,8 @@ +import { useMutation } from '@tanstack/react-query'; +import { updateNotificationStatus } from '@/service/notification/updateNotificationStatus'; + +export const useUpdateNotificationStatus = () => { + return useMutation({ + mutationFn: updateNotificationStatus + }); +}; diff --git a/src/pages/Notification/NotificationPage.tsx b/src/pages/Notification/NotificationPage.tsx index 0beb83ed..f55f35e0 100644 --- a/src/pages/Notification/NotificationPage.tsx +++ b/src/pages/Notification/NotificationPage.tsx @@ -1,78 +1,41 @@ import { Margin } from '@/components/Common/Margin/Margin'; import { TitleClosedTopBar } from '@/components/Common/TitleClosedTopBar/TitleClosedTopBar'; import { NotificationContainer } from '@/components/NotificationPage/NotificationContainer'; +import { useGetNotifications } from '@/hooks/useGetNotifications'; +import { useUpdateNotificationStatus } from '@/hooks/useUpdateNotifications'; import { NotificationType } from '@/types/notification'; export const NotificationPage = () => { - const dummy = [ - { - id: 'ba017e82-022e-4a82-94db-f0c5d22ef318', - type: 'NEW_LETTER', - receiver: 99, - createdAt: '2024-12-03T18:20:38.6242079', - letterId: 1, - isRead: false - }, - { - id: 'ba017e82-022e-4a82-94db-f0c5d22ef318', - type: 'TARGET_LETTER', - receiver: 99, - createdAt: '2024-12-03T11:20:38.6242079', - letterId: 1, - isRead: false - }, - { - id: '8f6f7748-dfd7-46b2-8e1f-4dff4abc8ab9', - type: 'WARNING', - receiver: 99, - createdAt: '2024-12-02T11:17:16.7813547', - letterId: null, - isRead: true - }, - { - id: 'ba017e82-022e-4a82-94db-f0c5d22ef318', - type: 'NEW_LETTER', - receiver: 99, - createdAt: '2024-12-02T11:20:38.6242079', - letterId: 1, - isRead: true - }, - { - id: 'ba017e82-022e-4a82-94db-f0c5d22ef318', - type: 'REPLY_LETTER', - receiver: 99, - 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-01T11:20:38.6242079', - letterId: 1, - isRead: true - } - ]; + const { data, isLoading, isError } = useGetNotifications(); + + // 상태 업데이트 + useUpdateNotificationStatus(); + + if (isLoading) return

알림 로딩 중...

; + if (isError) return

알림 로딩 실패!

; + + const dummy = data?.result || []; // 읽지 않은 알림 : isRead = false const unReadNotifications = [...dummy] .filter((notification) => !notification.isRead) - .map(({ type, createdAt, letterId, isRead }) => ({ + .map(({ type, createdAt, letterId, isRead, label }) => ({ type: type as NotificationType, createdAt, - letterId: letterId ?? 0, // null일 경우 0 - isRead + letterId, + isRead, + label })); // 읽은 알림 : isRead = true const readNotifications = [...dummy] .filter((notification) => notification.isRead) - .map(({ type, createdAt, letterId, isRead }) => ({ + .map(({ type, createdAt, letterId, isRead, label }) => ({ type: type as NotificationType, createdAt, - letterId: letterId ?? 0, // null일 경우 0 - isRead + letterId, + isRead, + label })); return ( diff --git a/src/service/notification/getNotifiations.ts b/src/service/notification/getNotifiations.ts new file mode 100644 index 00000000..595ef6ce --- /dev/null +++ b/src/service/notification/getNotifiations.ts @@ -0,0 +1,9 @@ +import { defaultApi } from '@/service/api'; +import { NotificationResponseType } from '@/types/notification'; + +export const getNotifications = async (): Promise => { + const api = defaultApi(); + + const response = await api.patch('/notification'); + return response.data; +}; diff --git a/src/service/notification/updateNotificationStatus.ts b/src/service/notification/updateNotificationStatus.ts new file mode 100644 index 00000000..fb44a72f --- /dev/null +++ b/src/service/notification/updateNotificationStatus.ts @@ -0,0 +1,11 @@ +import { defaultApi } from '@/service/api'; +import { NotificationResponseType } from '@/types/notification'; + +export const updateNotificationStatus = async ( + isRead: boolean +): Promise => { + const api = defaultApi(); + + const response = await api.patch('/notification', { isRead }); + return response.data; +}; diff --git a/src/types/notification.ts b/src/types/notification.ts index c95de046..d27aad97 100644 --- a/src/types/notification.ts +++ b/src/types/notification.ts @@ -1,13 +1,30 @@ export type NotificationType = | 'NEW_LETTER' | 'TARGET_LETTER' - | 'REPLY_LETTER' + | 'KEYWORD_REPLY' + | 'MAP_REPLY' | 'WARNING' | 'BAN'; -export type NotificationProps = { +export type NotificationItemItemProps = { type: NotificationType; createdAt: string; letterId: number; isRead: boolean; + label: string; +}; + +export type NotificationResponseType = { + isSuccess: boolean; + code: string; + message: string; + result: { + id: string; + type: NotificationType; + receiver: number; + createdAt: string; + letterId: number; + isRead: boolean; + label: string; + }[]; };