-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* 알림 * fix * icon * query * notification * routing
- Loading branch information
Showing
11 changed files
with
205 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,77 @@ | ||
import { If } from '@/system/utils/If'; | ||
import { useGetNotificationList } from './apis/useGetNotificationList'; | ||
import { Icon } from '@/system/components'; | ||
import { Spacing } from '@/system/utils/Spacing'; | ||
import { dday, formatToYYMMDD } from '@/utils/date'; | ||
import { cn } from '@/utils/tailwind-util'; | ||
import { useRouter } from 'next/navigation'; | ||
import { NotificationType } from '@/types/notification'; | ||
import { useNotificationContext } from './context'; | ||
|
||
export function NotificationList() { | ||
const router = useRouter(); | ||
const { close } = useNotificationContext(); | ||
|
||
const { data: notificationList } = useGetNotificationList(); | ||
|
||
const getDateText = (date: string) => { | ||
if (dday(date) >= 0) { | ||
return '오늘'; | ||
} | ||
|
||
return formatToYYMMDD(date, { separator: '.' }); | ||
}; | ||
|
||
const handleNotificationClick = (notification: NotificationType) => { | ||
router.push(`/my-recruit/${notification.referenceId}`); | ||
close(); | ||
}; | ||
|
||
return ( | ||
<> | ||
<If condition={notificationList?.length === 0}> | ||
<div className="flex h-full items-center justify-center"> | ||
<div className="flex flex-col gap-24"> | ||
<Icon name="IllustAlarm" /> | ||
<div className="flex flex-col items-center gap-4"> | ||
<h2 className="text-neutral-10 text-body1 font-normal">지금은 알림이 없어요</h2> | ||
<p className="text-caption2 font-regular text-neutral-35">알림은 30일 뒤에 자동으로 사라져요</p> | ||
</div> | ||
<Spacing size={100} /> | ||
</div> | ||
</div> | ||
</If> | ||
<If condition={notificationList && notificationList.length > 0}> | ||
<Spacing size={40} /> | ||
{notificationList?.map((notification) => ( | ||
<div key={notification.id}> | ||
<div className={cn('flex flex-col gap-8 py-8', notification.isRead && 'opacity-30')}> | ||
<div className="flex gap-8"> | ||
<If condition={!notification.isRead}> | ||
<div className="flex-shrink-0 w-6 h-6 mt-6 rounded-full bg-red-40" /> | ||
</If> | ||
<div className="text-white text-label1"> | ||
<span | ||
className="font-semibold underline cursor-pointer" | ||
onClick={() => handleNotificationClick(notification)}> | ||
{notification.title} | ||
<span className="relative"> | ||
<span className="absolute top-1 left-2"> | ||
<Icon name="pageOpen" /> | ||
</span> | ||
</span> | ||
</span> | ||
<span className="ml-20">{notification.message}</span> | ||
</div> | ||
</div> | ||
<div className="flex justify-end text-caption2 font-regular text-neutral-35"> | ||
{getDateText(notification.createdAt)} | ||
</div> | ||
</div> | ||
<div className="w-full h-[1px] my-16 bg-neutral-75" /> | ||
</div> | ||
))} | ||
</If> | ||
</> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
23 changes: 23 additions & 0 deletions
23
src/components/Notification/apis/useGetNotificationCount.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
import { useQuery } from '@tanstack/react-query'; | ||
import { http } from '@/apis/http'; | ||
|
||
export const GET_NOTIFICATION_COUNT = 'notification-count'; | ||
|
||
interface GetNotificationCountResponse { | ||
number: number; | ||
} | ||
|
||
const getNotificationCount = () => { | ||
return http.get<GetNotificationCountResponse>({ url: `/notifications/num` }); | ||
}; | ||
|
||
export const useGetNotificationCount = () => { | ||
return useQuery({ | ||
queryKey: [GET_NOTIFICATION_COUNT], | ||
queryFn: async () => { | ||
const res = await getNotificationCount(); | ||
|
||
return res.data; | ||
}, | ||
}); | ||
}; |
22 changes: 22 additions & 0 deletions
22
src/components/Notification/apis/useGetNotificationList.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
import { useSuspenseQuery } from '@tanstack/react-query'; | ||
import { NotificationType } from '@/types/notification'; | ||
import { http } from '@/apis/http'; | ||
|
||
export const GET_NOTIFICATION_LIST = 'notification-list'; | ||
|
||
type GetNotificationListResponse = NotificationType[]; | ||
|
||
const getNotificationList = () => { | ||
return http.get<GetNotificationListResponse>({ url: `/notifications` }); | ||
}; | ||
|
||
export const useGetNotificationList = () => { | ||
return useSuspenseQuery({ | ||
queryKey: [GET_NOTIFICATION_LIST], | ||
queryFn: async () => { | ||
const res = await getNotificationList(); | ||
|
||
return res.data; | ||
}, | ||
}); | ||
}; |
20 changes: 20 additions & 0 deletions
20
src/components/Notification/apis/usePutNotificationRead.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
import { http } from '@/apis/http'; | ||
import { useMutation, useQueryClient } from '@tanstack/react-query'; | ||
import { GET_NOTIFICATION_COUNT } from './useGetNotificationCount'; | ||
import { GET_NOTIFICATION_LIST } from './useGetNotificationList'; | ||
|
||
const putNotificationRead = () => { | ||
return http.put({ url: `/notifications` }); | ||
}; | ||
|
||
export const usePutNotificationRead = () => { | ||
const queryClient = useQueryClient(); | ||
|
||
return useMutation({ | ||
mutationFn: putNotificationRead, | ||
onSuccess: () => { | ||
queryClient.invalidateQueries({ queryKey: [GET_NOTIFICATION_COUNT] }); | ||
queryClient.invalidateQueries({ queryKey: [GET_NOTIFICATION_LIST] }); | ||
}, | ||
}); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
import { IconBaseType } from './type'; | ||
|
||
export function BellWithRedDot({ size, color }: IconBaseType) { | ||
return ( | ||
<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox={`0 0 ${size} ${size}`} fill="none"> | ||
<path | ||
d="M5.81186 8.93778C5.81186 5.52036 8.58222 2.75 11.9996 2.75C15.417 2.75 18.1874 5.52036 18.1874 8.93777V13.5184L19.8 17.8572H4.19922L5.81186 13.5184V8.93778Z" | ||
stroke={color} | ||
strokeWidth="1.5" | ||
/> | ||
<path | ||
d="M15.1673 17.8574V18.0834C15.1673 19.8323 13.7496 21.2501 12.0007 21.2501C10.2517 21.2501 8.83398 19.8323 8.83398 18.0834V17.8574" | ||
stroke={color} | ||
strokeWidth="1.5" | ||
/> | ||
<circle cx="22" cy="2" r="2" fill="#FF6C62" /> | ||
<circle cx="22" cy="2" r="2" fill="#FF6C62" /> | ||
</svg> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
export function PageOpen() { | ||
return ( | ||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
<path d="M11.6654 9.66675V4.33341H6.33203" stroke="white" strokeWidth="1.25" strokeLinecap="square" /> | ||
<path d="M11 5L3 13" stroke="white" strokeWidth="1.25" strokeLinecap="square" /> | ||
</svg> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
export interface NotificationType { | ||
id: number; | ||
title: string; | ||
message: string; | ||
isRead: boolean; | ||
type: string; | ||
referenceId: number; | ||
createdAt: string; | ||
} |