feat: 알림 없음 페이지

src/features/notification/NotificationEmpty.tsx

@@ -0,0 +1,24 @@
+import { AspectRatio } from "@repo/design-system/AspectRatio";
+import { Image } from "@repo/design-system/Image";
+import { Text } from "@repo/design-system/Text";
+import { CenterStack } from "@repo/ui/CenterStack";
+import { Spacing } from "@repo/ui/Spacing";
+import { Stack } from "@repo/ui/Stack";
+
+export const NotificationEmpty = () => {
+  return (
+    <Stack className=" w-full h-full mt-[100px]">
+      <CenterStack className="h-full w-full px-[116px]">
+        <AspectRatio>
+          <Image src={EMPTY_FALLBACK} alt="list empty fallback image" objectfit={"fill"} />
+        </AspectRatio>
+        <Spacing className=" h-[39px]" />
+      </CenterStack>
+      <Text variant={"body/18_sb"} className=" text-gray-600 text-center">
+        받은 알림이 없어요
+      </Text>
+    </Stack>
+  );
+};
+
+const EMPTY_FALLBACK = "/images/notification/notification_empty.webp";

src/main.tsx

@@ -16,6 +16,7 @@ import BookRecordModifyPage from "./pages/BookRecordMemoModifyPage.tsx";
 import BookRecordPage from "./pages/BookRecordPage.tsx";
 import BookRecordWritePage from "./pages/BookRecordWritePage.tsx";
 import HomePage from "./pages/HomePage.tsx";
+import Notification from "./pages/Notification.tsx";
 import OnBoardingPage from "./pages/OnBoardingPage.tsx";
 import ProfilePage from "./pages/ProfilePage.tsx";
 import TimerPage from "./pages/TimerPage.tsx";
@@ -45,6 +46,7 @@ createRoot(document.getElementById("root")!).render(
 
                 <Route path="add-memo/:recordId" element={<BookRecordMemoAddPage />} />
 
+                <Route path="notification" element={<Notification />} />
                 <Route path="" element={<OnBoardingPage />} />
               </Routes>
             </OverlayProvider>

src/pages/Notification.tsx

@@ -0,0 +1,15 @@
+import { TopNavigation } from "@repo/design-system/TopNavigation";
+import { Stack } from "@repo/ui/Stack";
+import { NotificationEmpty } from "~/features/notification/NotificationEmpty";
+
+export default function Notification() {
+  return (
+    <Stack className="w-full h-full">
+      <TopNavigation.Root className="w-full" left={<TopNavigation.Back />}>
+        <TopNavigation.Title>알림</TopNavigation.Title>
+      </TopNavigation.Root>
+
+      <NotificationEmpty />
+    </Stack>
+  );
+}