Chakra UI 및 Novu를 사용하여 Notion과 유사한 알림 받은 편지함을 구축하는 방법
- DDD원래의
- 2024-10-03 06:20:02953검색
TL;DR
이 짧은 게시물에서는 디자인에 Chakra UI만 사용하고 알림에 Novu만 사용하여 Notion의 내장 알림 기능을 복제하는 완전한 기능의 실시간 알림 받은 편지함 구성 요소를 어떻게 다시 만들었는지 배우게 됩니다.
모습은 이렇습니다.
이 앱의 소스코드 링크와 배포 버전은 포스팅 마지막에 있습니다.
일상적인 Notion 사용자로서 저는 그들의 알림 경험에 정말 감사하고 있으며 이것이 제가 그들의 앱을 그토록 많이 사용하는 이유 중 큰 부분을 차지합니다. 저는 궁금했습니다. Notion의 세련된 알림 시스템과 유사한 받은 편지함을 어떻게 다시 만들 수 있을까요? 알고 보니 Novu의 인앱 알림 구성 요소 덕분에 매우 간단했습니다.
Novu는 최근 풀 스택 알림 구성 요소를 출시했습니다. 이는 사용자 정의가 가능하고 바로 사용할 수 있는 상태 저장형 내장형 React 구성 요소 또는 위젯입니다.
몇 가지 간단한 단계만으로 React 앱에 추가하는 방법은 다음과 같습니다.
-
Novu 패키지 설치
$ npm install @novu/react
-
구성요소 가져오기
import { Inbox } from "@novu/react"; -
앱에서 구성요소 초기화
function Novu() { return ( <Inbox applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" subscriberId="YOUR_SUBSCRIBER_ID" /> ); }
그렇습니다! 이제 모든 기능을 갖춘 인앱 받은 편지함 구성 요소가 생겼습니다.
외형은 정말 멋져 보입니다.
자랑하려는 건 아니지만 Novu의 받은 편지함은 가장 유연하고 사용자 정의가 가능합니다. 스타일링 방법을 확인하고 직접 실험해 보세요.
이 기술에 관심이 있다면 Novu의 공동 창립자인 Dima Grossman이 이 기술을 구축한 방법과 이유에 대한 훌륭한 게시물을 작성했습니다.
받은 편지함을 Notion처럼 스타일링하세요
받은 편지함이 Notion의 알림 패널처럼 보이길 원하시나요? 문제 없습니다! Notion의 깔끔하고 미니멀한 미학에 맞게 Novu의 알림을 쉽게 포장하고 사용자 정의할 수 있습니다.
내가 한 방법
@novu/react에서 Inbox 구성 요소를 가져오는 대신 각 항목 렌더링을 완전히 제어하기 위해 알림 및 알림 구성 요소를 가져왔습니다.
import { Inbox, Notification, Notifications } from "@novu/react";
알림 안에는 무엇이 있나요?
사용자 정의를 시작하기 전에 알림 개체의 구조는 다음과 같습니다.
interface Notification = {
id: string;
subject?: string;
body: string;
to: Subscriber;
isRead: boolean;
isArchived: boolean;
createdAt: string;
readAt?: string | null;
archivedAt?: string | null;
avatar?: string;
primaryAction?: Action;
secondaryAction?: Action;
channelType: ChannelType;
tags?: string[];
data?: Record0a14c360bdd4b57f9aed16c4468f2e6b;
redirect?: Redirect;
};
이를 염두에 두고 차크라 UI를 사용하여(Tailwind 클래스를 쟁탈하는 것은 피곤하기 때문에) 각 알림 항목을 디자인했습니다.
사용자 정의 받은 편지함 항목 구성요소
Notion에서 영감을 받아 알림 항목을 만든 방법은 다음과 같습니다.
const InboxItem = ({ notification }: { notification: Notification }) => {
const [isHovered, setIsHovered] = useState(false);
const notificationType = notification.tags?.[0];
return (
4b7cac51a1765c994d12b44d07f507df setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
70b67a654c20642759e67020ba4ce2a1
780913d168c244a6cbc813e9631057bd
{isHovered && (
ac869dff2565ce3c99b6a9e96400dd83
{notification.isRead ? (
b44fef1d35f254362ea62388ec52b72d}
onClick={() => notification.unread()}
size="sm"
variant="ghost"
/>
) : (
03c6d5ea3ab7b4347959c499db5b00c7}
onClick={() => notification.read()}
size="sm"
variant="ghost"
/>
)}
{notification.isArchived ? (
3cfd40c7575abc043c432c55d958f5ae}
onClick={() => notification.unarchive()}
size="sm"
variant="ghost"
/>
) : (
3580e75d9218c1a99ad8e467a7e12632}
onClick={() => notification.archive()}
size="sm"
variant="ghost"
/>
)}
e82ab842f40e9c7c1d310bc055273e5b
)}
48602ce7f7b6ef46d64f004276201e91
2af3e78c3fac2f868fdc1630ebfabe65
{!notification.isRead && (
d0973d6af080ce36f0ecebd1a52a2dbb
8eb777fc706d0a687732b2ce1da8eeaf
e82ab842f40e9c7c1d310bc055273e5b
)}
{notification.avatar !== undefined && (
c78be36342d44eef043dfbd113af0cff
)}
e82ab842f40e9c7c1d310bc055273e5b
595e43debb7c8c1aeb332353fd32537c
d3bd35c3e2fa5f575bb967d9319d833c
2469c90af7ebebb1e424773c0bb3f6a1
{notification.subject}
b735fb8965edb39ac28662131d16c063
9c1f092898c6d32b4e9f2513d87408a4
{formatTime(notification.createdAt)}
b735fb8965edb39ac28662131d16c063
4bd5fcdaa8332fbfadc1fee39d5e375c
{notificationType !== "Mention" &&
notificationType !== "Comment" &&
notificationType !== "Invite" && (
55c4cd13195253b71d80bceac3d86f41
{notification.body}
b735fb8965edb39ac28662131d16c063
)}
{(notificationType === "Mention" ||
notificationType === "Comment") && (
4c52bc74b67675b5b4e4ecf661918106}
_hover={{ bg: "rgba(0, 0, 0, 0.03)" }}
pl="2px"
pr="5px"
height="25px"
>
61f3b681e399ba6adf2eff29dce688cd
{notification.body}
b735fb8965edb39ac28662131d16c063
a1cb88e6789f399807801ea3799938af
)}
{notificationType === "Invite" && (
8bcb5d0fb73cfd63ca46ec500e8caf04
{notification.body}
a1cb88e6789f399807801ea3799938af
)}
{notificationType === "Comment" && (
d0973d6af080ce36f0ecebd1a52a2dbb
57dcbae56177b050f09df98408bb9c1c
John Doe
b735fb8965edb39ac28662131d16c063
10440fafb792e120b83cb3774d995ac2
This is a notification Comment made by John Doe and posted on
the page Top Secret Project
b735fb8965edb39ac28662131d16c063
e82ab842f40e9c7c1d310bc055273e5b
)}
f8be7ee026a7d3159af37f9d7cf0fe70
{notification.primaryAction && (
5fefbc18a2f204e2177a4ee2d95b376e
{notification.primaryAction.label}
a1cb88e6789f399807801ea3799938af
)}
{notification.secondaryAction && (
cb2ce527817932c2f24f3867a32e16c9
{notification.secondaryAction.label}
a1cb88e6789f399807801ea3799938af
)}
b2c7e34c6548c52c748009ee7a52300f
48602ce7f7b6ef46d64f004276201e91
4bd5fcdaa8332fbfadc1fee39d5e375c
e82ab842f40e9c7c1d310bc055273e5b
);
};
알림 객체 키
코드에서 볼 수 있듯이 다음 알림 키를 활용했습니다.
- 알림.태그
- notification.isRead
- notification.isArchived
- notification.to.firstName
- 알림.아바타
- 알림.제목
- notification.createdAt
- notification.body
- notification.primaryAction
- notification.primaryAction.label
- notification.secondaryAction
- notification.secondaryAction.label
notification.data 개체에는 애플리케이션 로직이 사용자 또는 구독자와 연결하려는 실제 정보가 포함될 수 있습니다. 이러한 유연한 구조를 통해 특정 사용 사례에 맞게 알림을 맞춤화하고 사용자에게 더욱 풍부하고 상황에 맞는 정보를 제공할 수 있습니다.
notification.data 사용 예:
-
전자상거래 주문 업데이트:
notification.data = { orderId: "ORD-12345", status: "shipped", trackingNumber: "1Z999AA1234567890", estimatedDelivery: "2023-09-25" }; -
소셜 미디어 상호작용:
notification.data = { postId: "post-789", interactionType: "like", interactingUser: "johndoe", interactionTime: "2023-09-22T14:30:00Z" }; -
금융거래:
notification.data = { transactionId: "TRX-98765", amount: 150.75, currency: "USD", merchantName: "Coffee Shop", category: "Food & Drink" };
notification.data 개체를 활용하면 애플리케이션의 특정 요구 사항과 원활하게 통합되는 더 유익하고 실행 가능한 알림을 만들 수 있습니다.
이러한 유연성을 통해 사용자에게 필요한 정보를 정확하게 제공하여 사용자 경험과 알림 시스템의 전반적인 효율성을 향상할 수 있습니다.
알림 관리에 후크 사용
코드를 자세히 살펴보면 알림 상태를 관리하기 위해 4개의 키 후크가 사용되는 것을 알 수 있습니다.
- notification.unread()
- notification.read()
- notification.unarchive()
- notification.archive()
The novu/react package exposes these hooks, offering enhanced flexibility for managing notification states. It's important to note that these hooks not only update the local state but also synchronize changes with the backend.
These hooks provide a seamless way to:
- Mark notifications as read or unread
- Archive or unarchive notifications
By utilizing these hooks, you can create more interactive and responsive notification systems in your applications.
I've implemented Notion-inspired sidebar navigation to enhance the similarity to the Notion theme. This design choice aims to capture the essence and aesthetics of Notion's interface, creating a familiar and intuitive environment for users.
For the icons, I've leveraged the versatile react-icons library, which offers a wide range of icon sets to choose from.
$ npm install react-icons
import { FiArchive, FiSearch, FiHome, FiInbox, FiSettings, FiChevronDown } from "react-icons/fi";
import { FaRegCheckSquare, FaUserFriends } from "react-icons/fa";
import { PiNotificationFill } from "react-icons/pi";
import { BsFillFileTextFill, BsTrash } from "react-icons/bs";
import { AiOutlineCalendar } from "react-icons/ai";
import { GrDocumentText } from "react-icons/gr";
const AppContainer = () => {
const borderColor = useColorModeValue("gray.200", "gray.700");
const [isInboxOpen, setIsInboxOpen] = useState(true);
const toggleInbox = () => {
setIsInboxOpen(!isInboxOpen);
};
return (
58880ab737844eb28e5aac79cf984905
53e4abd0f47117bd8ceab2fe75a74a1d
baf0203f50e222f9ca610fe0c1f36b3d
{/* Sidebar */}
cfab9c6c71f1954b9e6595bc46518510
6ab8a53577ccdcc86bd075e35d610f0b
3dc48a92ee156f11cde9d2b97b243652
b20acbf589ea944c78f8766f41da560c{" "}
Workspace
b735fb8965edb39ac28662131d16c063
14b82e3184e2b57d93e982934cbc254b}
variant="ghost"
size="sm"
/>
4bd5fcdaa8332fbfadc1fee39d5e375c
83782d72126075731028d150c0608b20
7cfc2f108faa026e31618afb3fb01e4d
2c345aa4e6a5080ea45a8f471b627c97
ec1bdc4b24386058e26fda2ba3aed40e
1e6e13d5ec41c46ae3e08b2ca040eb01
48602ce7f7b6ef46d64f004276201e91
4701f3179d145f6a78e76d7f4143c83e
Favorites
b735fb8965edb39ac28662131d16c063
83782d72126075731028d150c0608b20
9adb33cb93655d1585cd95c2cf69e12c
852f6e7cd5b049d30afde722012ff0b2
48602ce7f7b6ef46d64f004276201e91
4701f3179d145f6a78e76d7f4143c83e
Private
b735fb8965edb39ac28662131d16c063
83782d72126075731028d150c0608b20
e3ea277f0985f322932b99bdff84e57d
4ea3094a6a81532caf844a8602b336b1
c20634fcbab956079497835093b2d0a2
48602ce7f7b6ef46d64f004276201e91
e82ab842f40e9c7c1d310bc055273e5b
// ... (rest of the code)
Another important aspect was time formatting to match how Notion does it:
function formatTime(timestamp: number | string | Date): string {
const date = new Date(timestamp);
const now = new Date();
const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
const secondsInMinute = 60;
const secondsInHour = secondsInMinute * 60;
const secondsInDay = secondsInHour * 24;
const secondsInWeek = secondsInDay * 7;
const secondsInYear = secondsInDay * 365;
if (diffInSeconds e682f0d4e5b73da8ff2832520c99a736 {
const borderColor = useColorModeValue("gray.200", "gray.700");
const [isInboxOpen, setIsInboxOpen] = useState(true);
const toggleInbox = () => {
setIsInboxOpen(!isInboxOpen);
};
return (
58880ab737844eb28e5aac79cf984905
53e4abd0f47117bd8ceab2fe75a74a1d
baf0203f50e222f9ca610fe0c1f36b3d
{/* Sidebar */}
cfab9c6c71f1954b9e6595bc46518510
6ab8a53577ccdcc86bd075e35d610f0b
3dc48a92ee156f11cde9d2b97b243652
b20acbf589ea944c78f8766f41da560c{" "}
Workspace
b735fb8965edb39ac28662131d16c063
14b82e3184e2b57d93e982934cbc254b}
variant="ghost"
size="sm"
/>
4bd5fcdaa8332fbfadc1fee39d5e375c
83782d72126075731028d150c0608b20
7cfc2f108faa026e31618afb3fb01e4d
2c345aa4e6a5080ea45a8f471b627c97
ec1bdc4b24386058e26fda2ba3aed40e
1e6e13d5ec41c46ae3e08b2ca040eb01
48602ce7f7b6ef46d64f004276201e91
4701f3179d145f6a78e76d7f4143c83e
Favorites
b735fb8965edb39ac28662131d16c063
83782d72126075731028d150c0608b20
9adb33cb93655d1585cd95c2cf69e12c
852f6e7cd5b049d30afde722012ff0b2
48602ce7f7b6ef46d64f004276201e91
4701f3179d145f6a78e76d7f4143c83e
Private
b735fb8965edb39ac28662131d16c063
83782d72126075731028d150c0608b20
e3ea277f0985f322932b99bdff84e57d
4ea3094a6a81532caf844a8602b336b1
c20634fcbab956079497835093b2d0a2
48602ce7f7b6ef46d64f004276201e91
e82ab842f40e9c7c1d310bc055273e5b
{/* Main Content Area */}
e4ca87affdb73bc45db7e50ccc7b7f75
{/* Injected Content Behind the Inbox */}
ba61fae2eacf018ca4efc82bc9f69db0
5d6941a86e2262d3aa807bdcc232680e
Notion Inbox Notification Theme
7e3c573f6de27f9eed67379a7ba4d3d4
9aaa523a196d151038751935f2449ce2
Checkout the deployed version now
b735fb8965edb39ac28662131d16c063
fb2adae2f86b9f5522fe447a10813315 window.open('https://inbox.novu.co/', '_blank')}
>
Visit Playground
a1cb88e6789f399807801ea3799938af
e82ab842f40e9c7c1d310bc055273e5b
{/* Inbox Popover */}
{isInboxOpen && (
020f64a6e9fd63fc0825d8c0e93db87d
7f5325fcf2b10c5bc43eab18ac10a409
87a5d04d66aa50e1ea9c499889cec4d7 (
f0504203d773cad1da02a179a6de1549
)}
/>
b2ced19ccede734514cda9045f1b122d
e82ab842f40e9c7c1d310bc055273e5b
)}
e82ab842f40e9c7c1d310bc055273e5b
4bd5fcdaa8332fbfadc1fee39d5e375c
e82ab842f40e9c7c1d310bc055273e5b
4bd5fcdaa8332fbfadc1fee39d5e375c
);
};
// Sidebar Item Component
interface SidebarItemProps {
icon: React.ElementType;
label: string;
isActive?: boolean;
external?: boolean;
onClick?: () => void;
}
const SidebarItem: React.FC790952732ffa6fb795c93e59a1997e11 = ({
icon,
label,
isActive = false,
external = false,
onClick,
}) => {
return (
b8b86c0cfc487b024751cdc42643640d
098332d84cc97735166a7fe2def9738b
696c39ce2565d42afe6802b3d93010b4{label}b735fb8965edb39ac28662131d16c063
b2c7e34c6548c52c748009ee7a52300f
);
};
const InboxItem = ({ notification }: { notification: Notification }) => {
const [isHovered, setIsHovered] = useState(false);
const notificationType = notification.tags?.[0];
return (
4b7cac51a1765c994d12b44d07f507df setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
70b67a654c20642759e67020ba4ce2a1
780913d168c244a6cbc813e9631057bd
{isHovered && (
ac869dff2565ce3c99b6a9e96400dd83
{notification.isRead ? (
b44fef1d35f254362ea62388ec52b72d}
onClick={() => notification.unread()}
size="sm"
variant="ghost"
/>
) : (
03c6d5ea3ab7b4347959c499db5b00c7}
onClick={() => notification.read()}
size="sm"
variant="ghost"
/>
)}
{notification.isArchived ? (
3cfd40c7575abc043c432c55d958f5ae}
onClick={() => notification.unarchive()}
size="sm"
variant="ghost"
/>
) : (
3580e75d9218c1a99ad8e467a7e12632}
onClick={() => notification.archive()}
size="sm"
variant="ghost"
/>
)}
e82ab842f40e9c7c1d310bc055273e5b
)}
48602ce7f7b6ef46d64f004276201e91
2af3e78c3fac2f868fdc1630ebfabe65
{!notification.isRead && (
d0973d6af080ce36f0ecebd1a52a2dbb
8eb777fc706d0a687732b2ce1da8eeaf
e82ab842f40e9c7c1d310bc055273e5b
)}
{notification.avatar !== undefined && (
c78be36342d44eef043dfbd113af0cff
)}
e82ab842f40e9c7c1d310bc055273e5b
595e43debb7c8c1aeb332353fd32537c
d3bd35c3e2fa5f575bb967d9319d833c
2469c90af7ebebb1e424773c0bb3f6a1
{notification.subject}
b735fb8965edb39ac28662131d16c063
9c1f092898c6d32b4e9f2513d87408a4
{formatTime(notification.createdAt)}
b735fb8965edb39ac28662131d16c063
4bd5fcdaa8332fbfadc1fee39d5e375c
{notificationType !== "Mention" &&
notificationType !== "Comment" &&
notificationType !== "Invite" && (
55c4cd13195253b71d80bceac3d86f41
{notification.body}
b735fb8965edb39ac28662131d16c063
)}
{(notificationType === "Mention" ||
notificationType === "Comment") && (
4c52bc74b67675b5b4e4ecf661918106}
_hover={{ bg: "rgba(0, 0, 0, 0.03)" }}
pl="2px"
pr="5px"
height="25px"
>
61f3b681e399ba6adf2eff29dce688cd
{notification.body}
b735fb8965edb39ac28662131d16c063
a1cb88e6789f399807801ea3799938af
)}
{notificationType === "Invite" && (
8bcb5d0fb73cfd63ca46ec500e8caf04
{notification.body}
a1cb88e6789f399807801ea3799938af
)}
{notificationType === "Comment" && (
d0973d6af080ce36f0ecebd1a52a2dbb
57dcbae56177b050f09df98408bb9c1c
John Doe
b735fb8965edb39ac28662131d16c063
10440fafb792e120b83cb3774d995ac2
This is a notification Comment made by John Doe and posted on
the page Top Secret Project
b735fb8965edb39ac28662131d16c063
e82ab842f40e9c7c1d310bc055273e5b
)}
f8be7ee026a7d3159af37f9d7cf0fe70
{notification.primaryAction && (
5fefbc18a2f204e2177a4ee2d95b376e
{notification.primaryAction.label}
a1cb88e6789f399807801ea3799938af
)}
{notification.secondaryAction && (
cb2ce527817932c2f24f3867a32e16c9
{notification.secondaryAction.label}
a1cb88e6789f399807801ea3799938af
)}
b2c7e34c6548c52c748009ee7a52300f
48602ce7f7b6ef46d64f004276201e91
4bd5fcdaa8332fbfadc1fee39d5e375c
e82ab842f40e9c7c1d310bc055273e5b
);
};
function formatTime(timestamp: number | string | Date): string {
const date = new Date(timestamp);
const now = new Date();
const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
const secondsInMinute = 60;
const secondsInHour = secondsInMinute * 60;
const secondsInDay = secondsInHour * 24;
const secondsInWeek = secondsInDay * 7;
const secondsInYear = secondsInDay * 365;
if (diffInSeconds < secondsInMinute) {
return `${diffInSeconds} seconds`;
} else if (diffInSeconds < secondsInHour) {
const minutes = Math.floor(diffInSeconds / secondsInMinute);
return `${minutes} minute${minutes !== 1 ? 's' : ''}`;
} else if (diffInSeconds < secondsInDay) {
const hours = Math.floor(diffInSeconds / secondsInHour);
return `${hours} hour${hours !== 1 ? 's' : ''}`;
} else if (diffInSeconds < secondsInWeek) {
const days = Math.floor(diffInSeconds / secondsInDay);
return `${days} day${days !== 1 ? 's' : ''}`;
} else if (diffInSeconds < secondsInYear) {
const options: Intl.DateTimeFormatOptions = { month: "short", day: "numeric" };
return date.toLocaleDateString(undefined, options);
} else {
return date.getFullYear().toString();
}
}
export default AppContainer;
Ready to get customizing? Here’s the source code for the Notion Inbox theme. You can also see and play with it live in our Inbox playground. I also did the same for a Reddit notifications example. Two totally different experiences, but powered by the same underlying component and notifications infrastructure.
위 내용은 Chakra UI 및 Novu를 사용하여 Notion과 유사한 알림 받은 편지함을 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：[Leetcode] 객체가 비어 있습니까?다음 기사：[Leetcode] 객체가 비어 있습니까?